/* Ensure Google Scholar widget image fills the 20% column */
.widget .img img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block;
}

/* Research hero: logo left column 25% and content 75% on md+ screens */
@media (min-width: 768px) {
  .research-hero .logo-col {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
  .research-hero .content-col {
    flex: 0 0 75% !important;
    max-width: 75% !important;
  }
  .research-hero .logo-col img {
    width: 100% !important;
    height: auto !important;
    max-width: 220px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Vertically center the logo within the hero column */
.research-hero .logo-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hero image: rounded rectangle with subtle 3D effect and hover lift */
.hero-image {
  perspective: 1000px;
}
.hero-image img,
.hero-image a img {
  border-radius: 14px !important;
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35), inset 0 -6px 12px rgba(0,0,0,0.06);
  transform: perspective(800px) rotateX(3deg) translateY(-3px);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease;
  border: 1px solid rgba(255,255,255,0.03);
}
.hero-image:hover img,
.hero-image a:hover img {
  transform: perspective(800px) rotateX(0deg) translateY(-8px) scale(1.02);
  box-shadow: 0 28px 48px rgba(15,23,42,0.45), inset 0 -8px 16px rgba(0,0,0,0.06);
}
/* Theme overrides: centralize primary color to keep template maintainable */
:root {
  --primary: #8c3760;
  --primary-contrast: #ffffff;
}

/* Publications tab headings */
section#pubs .tab-content h4{
  color: #8c3760;
  margin-bottom: 12pt;
}

/* Ordered lists inside publications tabs: ensure numbering and readable indent */
section#pubs .tab-content ol{
  list-style-type: decimal;
  list-style-position: outside;
  margin-left: 1.5rem;
}

/* Allow links within tab content to break/wrap nicely */
section#pubs .tab-content a{
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Site-wide h5: primary color and small-caps */
h5 {
  color: var(--primary) !important;
  font-variant: small-caps;
  -webkit-font-variant-ligatures: none;
}

/* Spacing for section details blocks */
.section-details {
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding-left: 1.5rem !important;
}

/* Square bullets for lists inside section-details */
.section-details ul {
  list-style-type: square;
  list-style-position: outside;
  padding-left: 1.5rem;
}

/* Quick-link tiles in header: ensure icons and labels are visible on dark background */
.dark-section .single-feature,
.dark-section .single-feature a,
.dark-section .single-feature h5,
.dark-section .single-feature i {
  color: #ffffff !important;
  text-decoration: none !important;
}
.dark-section .single-feature:hover,
.dark-section .single-feature:focus {
  text-decoration: none !important;
}
.dark-section .single-feature i {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
}
.dark-section .single-feature {
  background: transparent;
}
.dark-section .single-feature:hover {
  background: rgba(255,255,255,0.04);
}

/* Generic color replacements for components using the previous primary */
.breadcrumbs,
.hero-area,
.our-achievement,
.call-action,
.navbar-area.sticky,
.scroll-top,
.preloader-icon span,
.footer .footer-newsletter .newsletter-form .button .btn,
.button .btn,
.header.sticky .button .btn,
.section-title.align-right h2:after,
.section-title.align-left h2:after {
  background-color: var(--primary) !important;
  background: var(--primary) !important;
}

/* Text and border uses */
.section-title h3,
.pagination .pagination-list li.active a,
.pagination .pagination-list li:hover a,
.navbar-nav .nav-item .sub-menu > li.active > a,
.footer .single-footer.f-about .social li a:hover,
.footer .single-footer.f-about .copyright-text a:hover,
.footer .single-footer.f-link li a:hover,
.error-area .error-content h1,
.hero-area .hero-content .button .btn,
.hero-area .hero-content .button .btn.btn-alt:hover,
.hero-area .hero-content .button .video-button .video {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.features .single-feature i,
.pricing-table .single-table .table-head .button .btn:hover,
.pricing-table .single-table .table-content .table-list li i {
  background-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

/* Ensure links that previously used the primary on hover are covered */
a:hover,
button:hover {
  color: var(--primary) !important;
}

/* Navbar link visibility on header (keep links white on dark header) */
.header.navbar-area .navbar-nav .nav-link,
.header.navbar-area .navbar-nav .nav-link:hover,
.header.navbar-area .navbar-nav .nav-link:focus,
.header.navbar-area .navbar-nav .nav-link.active,
.header.navbar-area .navbar-nav .nav-link[aria-current="page"] {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* When header becomes sticky, preserve white nav links */
.header.sticky .navbar-nav .nav-link,
.header.sticky .navbar-nav .nav-link:hover,
.header.sticky .navbar-nav .nav-link:focus,
.header.sticky .navbar-nav .nav-link.active {
  color: #ffffff !important;
}

/* Active/current navbar item color for scrolled-to section */
.header.navbar-area .navbar-nav .page-scroll.active,
.header.navbar-area .navbar-nav .page-scroll[aria-current="page"],
.header.navbar-area .navbar-nav .page-scroll.active:hover {
  color: #d2b4bf !important;
}

/* Join Us CTA hover color */
.nav-inner .button .btn:hover,
.navbar .button .btn:hover {
  color: #d2b4bf !important;
  border-color: #d2b4bf !important;
  background: transparent !important;
}

/* Make the scroll-top button clearly visible on dark backgrounds */
.scroll-top {
  background: rgba(0,0,0,0.35);
  border: 2px solid #ffffff;
  color: #ffffff !important;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.scroll-top i { color: #ffffff !important; }
.scroll-top:hover { background: rgba(255,255,255,0.06); color: #ffffff !important; }

/* Navbar brand text logo */
.navbar-brand,
.navbar-brand .logo-text {
  color: #d2b4bf !important;
  font-weight: 800;
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  display: inline-block;
}
.navbar-brand:hover,
.navbar-brand:hover .logo-text {
  color: #afbbd2 !important;
  text-decoration: none !important;
}

/* Content links inside dark sections: readable contrast and hover state
   Scoped to section content so quick-link tiles remain white. */
.dark-section .section-title a,
.dark-section .section-details a,
.dark-section p a,
.dark-section li a {
  color: #d2b4bf !important;
}
.dark-section h3 {
  color: #d2b4bf !important;
}
/* Make h4 match h3 color inside dark sections */
.dark-section h4 {
  color: #d2b4bf !important;
}
.dark-section .section-title a:hover,
.dark-section .section-details a:hover,
.dark-section p a:hover,
.dark-section li a:hover {
  color: #afbbd2 !important;
}

/* Utility to override any remaining explicit hex occurrences where possible */
*[style*="#ff6b81"] {
  /* catch inline styles that still reference the old color */
  color: var(--primary) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Awards and Recognitions: left-aligned text, unbulleted lists, white headings/body, but preserve link colors */
section.our-achievement .section-title h2,
section.our-achievement .section-title h3,
section.our-achievement h4,
section.our-achievement p,
section.our-achievement li,
section.our-achievement .section-details {
  color: #ffffff !important;
  text-align: left !important;
}
/* Increase left spacing for Awards details to match Students section */
section.our-achievement .section-details {
  padding-left: 1.5rem !important;
}

/* Make all section titles left-aligned and use consistent side padding
   Override placed here to avoid editing core `main.css`. */
.section-title {
  text-align: left !important;
  padding: 0 1.5rem !important;
}

@media (min-width: 992px) {
  /* restore a bit more horizontal breathing on wide screens while keeping left alignment */
  .section-title {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
section.our-achievement .section-title h3 {
  color: #ffffff !important;
  text-align: left !important;
}
section.our-achievement a {
  color: #d2b4bf !important;
}
section.our-achievement a:hover {
  color: #afbbd2 !important;
}
section.our-achievement ul {
  list-style-type: square !important;
  list-style-position: outside !important;
  padding-left: 1.5rem !important;
  margin-left: 0 !important;
}
section.our-achievement ul li {
  display: list-item !important;
}
section.our-achievement li { margin-left: 0 !important; }

/* Specific rule: ensure h3.page-title and any h3 inside .section-details are white and left-aligned */
section.our-achievement h3.page-title,
section.our-achievement .section-details h3 {
  color: #ffffff !important;
  text-align: left !important;
}

/* News section: make h3 match dark-section link color for consistency */
#news h3,
#news .section-title h3 {
  color: #d2b4bf !important;
}

/* Join Us: make h4 in section-details match the dark-section h3 color */
#join-us .section-details h4,
#join-us .section-details h4 a {
  color: #d2b4bf !important;
}

/* Students section: left-align section-details and use square bullets */
section#students .section-details {
  text-align: left !important;
}
section#students .section-details ul {
  list-style-type: square !important;
  list-style-position: outside !important;
  padding-left: 1.5rem !important;
}

/* Ensure Students and Awards section titles are left-aligned */
section#students .section-title {
  text-align: left !important;
  padding-left: 1.5rem !important;
}
section#students .section-title p,
section#students .section-title .page-title {
  text-align: left !important;
}

section.our-achievement .section-title {
  text-align: left !important;
  padding-left: 1.5rem !important;
}

/* Some templates use a `.title` wrapper instead of `.section-title` for this section; ensure it is left-aligned too */
section.our-achievement .title {
  text-align: left !important;
  padding-left: 1.5rem !important;
}
section#students .section-title ol,
section#students .section-title ul,
section#students .section-details ol,
section#students .section-details ul {
  list-style-position: outside !important;
  padding-left: 1.5rem !important;
  margin-left: 0 !important;
}
section#students .section-title ol,
section#students .section-details ol {
  list-style-type: decimal !important;
}
section#students .section-title ul,
section#students .section-details ul {
  list-style-type: square !important;
}
section#students ol li,
section#students ul li {
  display: list-item !important;
}

/* Publications title and details: square bullets and proper left padding */
section#pubs .section-title ul,
section#pubs .section-details ul {
  list-style-type: square !important;
  list-style-position: outside !important;
  padding-left: 1.5rem !important;
  margin-left: 0 !important;
}

/* Increase spacing above and below notable recent pubs h5 */
section#pubs .section-title h5 {
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
}

/* Teaching section: increase spacing between paragraphs for readability */
section#teaching .section-details p {
  margin-bottom: 1.25rem !important;
}

/* Grants and Collaborations: increase spacing between paragraphs for readability */
section#grants .section-details p {
  margin-bottom: 1.25rem !important;
}

/* Ensure spans or elements using class="bold" render as bold text */
.bold {
  font-weight: 700 !important;
}

/* Set bottom spacing for all h2 elements to 24px site-wide */
h2 {
  margin-bottom: 24px !important;
}

/* Reduce the large .section-title bottom gap for these specific sections */
section#service .section-title,
section#students .section-title,
section.our-achievement .section-title,
section#teaching .section-title,
section#grants .section-title,
section#career .section-title {
  margin-bottom: 32px !important;
}

/* Reduce top spacing before h4.page-title across site */
h4.page-title {
  margin-top: 18px !important;
}

/* Research page: make figure/image column occupy ~40% and text ~60% on medium+ screens
   Targets the pattern used in research.html: .row.align-items-center > .col-md-9 + .col-md-3 */
@media (min-width: 768px) {
  .section-details .row.align-items-center > .col-md-3.text-center {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }
  .section-details .row.align-items-center > .col-md-9 {
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }
  .section-details .row.align-items-center img {
    width: 100% !important;
    height: auto !important;
  }
}

/* Mobile-specific styling for the "Join Us" CTA inside the collapsed navbar
   This targets the button that we added with class .btn inside the collapse
   and makes it visually distinct on small screens. */
@media (max-width: 991.98px) {
  .navbar-collapse .nav-item .btn {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0.6rem 0.75rem 0.6rem 1rem !important;
    margin: 0.45rem 0 !important;
    background: #3b2230 !important; /* darker contrast color */
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 18px rgba(59,34,48,0.18) !important;
    font-weight: 700 !important;
  }
  .navbar-collapse .nav-item .btn:hover,
  .navbar-collapse .nav-item .btn:focus {
    background: #2f1724 !important;
    color: #fff !important;
    text-decoration: none !important;
  }
}

/* Caption styling for students carousel slides */
.students-carousel .slide-caption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #1f2933;
  text-align: left;
  padding-left: 4px;
}

/* Tighten spacing between the news text slider and the image slider below it
   Limit the bottom padding on the news/text slider and remove the top margin
   within the following .section-details to eliminate the extra whitespace. */
#news .my-slider {
  padding-bottom: 8px !important;
}
#news + .section-details,
#news .section-details {
  margin-top: 0 !important;
}

/* Optional helper: align tiny-slider controls inside section-details
   by compensating for the parent's left padding (1.5rem). This keeps the
   control arrows lined up between consecutive sliders. */
.section-details .tns-controls {
  left: calc(1.5rem * -1) !important;
}

/* Centered rounded rectangle for Students header image */
img.rounded-rectagle {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 14px !important;
  overflow: hidden;
  border: 6px solid #ffffff !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25) !important;
}