@charset "UTF-8";

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Source Sans 3",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Source Serif 4",  serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #2d465e; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #1f6fc4; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. Darkened from the original #3690e7 (3.33:1 on white, fails WCAG AA's 4.5:1 text-contrast minimum) to ~5.1:1, which passes. */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #212529;  /* The default color of the main navmenu links */
  --nav-hover-color: #3690e7; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #3690e7; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f9f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

p {
  text-align: justify;
}

/* Skip link — hidden until it receives keyboard focus, then pinned above
   everything else so a keyboard/screen-reader user can jump straight past
   the header (topbar, logo, nav) to the page's main content. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--accent-color);
  color: var(--contrast-color);
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  color: var(--contrast-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* Toast Notifications
------------------------------*/
.toast-stack {
  position: fixed;
  z-index: 9999;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(360px, calc(100vw - 40px));
}

.toast-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-color);
  color: var(--default-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 14px 16px;
  border-left: 4px solid var(--accent-color);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-item.toast-in {
  opacity: 1;
  transform: translateX(0);
}

.toast-item.toast-out {
  opacity: 0;
  transform: translateX(20px);
}

.toast-item i:first-child {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.toast-item span {
  flex-grow: 1;
  font-size: 0.95rem;
}

.toast-item .toast-close {
  display: inline-flex;
  background: none;
  border: 0;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  flex-shrink: 0;
  line-height: 1;
}

.toast-item .toast-close:hover {
  color: var(--default-color);
}

.toast-item.toast-success {
  border-left-color: #059652;
}

.toast-item.toast-success i:first-child {
  color: #059652;
}

.toast-item.toast-error {
  border-left-color: #df1529;
}

.toast-item.toast-error i:first-child {
  color: #df1529;
}

@media (max-width: 575px) {
  .toast-stack {
    left: 20px;
    right: 20px;
    max-width: none;
  }
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
}

.header .topbar {
  background-color: var(--background-color);
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .notice-ticker {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.header .topbar .notice-ticker-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: notice-ticker-scroll 30s linear infinite;
}

.header .topbar .notice-ticker:hover .notice-ticker-track {
  animation-play-state: paused;
}

.header .topbar .notice-ticker-item {
  color: var(--contrast-color);
  padding-right: 60px;
}

@keyframes notice-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.header .topbar .notice-page-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 24px;
  color: var(--contrast-color);
  font-weight: 600;
  white-space: nowrap;
  transition: 0.3s;
}

.header .topbar .notice-page-link:hover {
  color: color-mix(in srgb, var(--contrast-color), transparent 30%);
}

.header .branding {
  min-height: 60px;
  padding: 10px 0;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .logo .logo-emblem {
  max-height: 50px;
  margin-right: 12px;
}

.header .logo .logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.header .logo .logo-line-top {
  font-size: 15px;
  font-weight: 600;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.header .logo .logo-line-bottom {
  font-size: 13px;
  font-weight: 400;
  font-family: var(--heading-font);
  color: var(--default-color);
}

@media (max-width: 575px) {
  .header .logo .logo-emblem {
    max-height: 38px;
    margin-right: 8px;
  }

  .header .logo .logo-line-top {
    font-size: 12px;
  }

  .header .logo .logo-line-bottom {
    font-size: 11px;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

.scrolled .header .topbar {
  height: 0;
  visibility: hidden;
  overflow: hidden;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--default-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
    max-width: 260px;
  }

  /* .navmenu a's general rule sets white-space:nowrap (for the top-level
     items) — dropdown items inherit that too by default, so a long entry
     (e.g. a lab name from data/labs.json) forces the whole submenu wider
     than its 200px min-width instead of wrapping, which is what pushed the
     Laboratories dropdown (positioned near the right end of the nav, with
     little room left before the viewport edge) into overflowing off-screen. */
  .navmenu .dropdown ul a {
    white-space: normal;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul,
  .navmenu .dropdown:focus-within>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul,
  .navmenu .dropdown .dropdown:focus-within>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--default-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  /* .navmenu a's white-space:nowrap (redeclared for mobile a few rules up)
     otherwise forces a long entry (e.g. a lab name from data/labs.json) to
     overflow this box's width instead of wrapping — confirmed via a real
     mobile-width iframe test: "Embedded System And Sensing Laboratory" was
     cut off with a horizontal scrollbar inside the open Laboratories
     submenu. Same fix as the desktop dropdown's own white-space override
     above, just re-declared here since this is a separate @media block. */
  .navmenu .dropdown ul a {
    white-space: normal;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-main {
  padding: 70px 0 40px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.footer .footer-main .footer-widget {
  margin-bottom: 30px;
}

.footer .footer-main .footer-widget .logo {
  display: inline-flex;
  margin-bottom: 20px;
}

.footer .footer-main .footer-widget .logo .logo-emblem {
  max-height: 50px;
  margin-right: 12px;
}

.footer .footer-main .footer-widget .logo .logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.footer .footer-main .footer-widget .logo .logo-line-top {
  color: var(--heading-color);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.footer .footer-main .footer-widget .logo .logo-line-bottom {
  color: var(--default-color);
  font-size: 13px;
  font-weight: 400;
  font-family: var(--heading-font);
}

.footer .footer-main .footer-widget p {
  margin-bottom: 20px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.footer .footer-main .footer-widget h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-main .footer-widget h4:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 3px;
  background-color: var(--accent-color);
  bottom: 0;
  left: 0;
}

.footer .footer-main .footer-widget h5 {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}

.footer .footer-main .footer-contact .contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.footer .footer-main .footer-contact .contact-item i {
  color: var(--accent-color);
  font-size: 18px;
  margin-right: 12px;
  flex-shrink: 0;
}

.footer .footer-main .footer-contact .contact-item span {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.5;
}

.footer .footer-main .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-main .footer-links li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 15px;
}

.footer .footer-main .footer-links li:before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-color);
  font-size: 14px;
  transition: all 0.3s ease;
}

.footer .footer-main .footer-links a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: all 0.3s ease;
}

.footer .footer-main .footer-links a:hover {
  color: var(--accent-color);
}

.footer .footer-main .app-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.footer .footer-main .app-buttons .app-btn {
  display: flex;
  align-items: center;
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  padding: 10px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.footer .footer-main .app-buttons .app-btn i {
  font-size: 20px;
  margin-right: 8px;
}

.footer .footer-main .app-buttons .app-btn span {
  font-size: 13px;
  font-weight: 500;
}

.footer .footer-main .app-buttons .app-btn:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.footer .footer-main .social-links {
  margin-top: 25px;
}

.footer .footer-main .social-links h5 {
  margin-bottom: 15px;
}

.footer .footer-main .social-links .social-icons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footer .footer-main .social-links .social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  font-size: 16px;
  transition: all 0.3s ease;
}

.footer .footer-main .social-links .social-icons a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.footer .footer-bottom {
  padding: 25px 0;
}

.footer .footer-bottom .payment-methods .payment-icons {
  display: flex;
  gap: 12px;
}

.footer .footer-bottom .payment-methods .payment-icons i {
  font-size: 22px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: color 0.3s ease;
}

.footer .footer-bottom .payment-methods .payment-icons i:hover {
  color: var(--accent-color);
}

.footer .footer-bottom .copyright p {
  margin-bottom: 0;
  text-align: center;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.footer .footer-bottom .copyright p strong {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.footer .footer-bottom .credits {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.footer .footer-bottom .credits a {
  color: var(--accent-color);
}

.footer .footer-bottom .legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer .footer-bottom .legal-links a {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 13px;
  transition: color 0.3s ease;
}

.footer .footer-bottom .legal-links a:hover {
  color: var(--accent-color);
}

@media (max-width: 991.98px) {
  .footer .footer-main {
    padding: 60px 0 30px;
  }

  .footer .footer-widget h4 {
    margin-bottom: 20px;
  }
}

@media (max-width: 767.98px) {
  .footer .footer-main {
    padding: 50px 0 20px;
  }

  .footer .footer-main .footer-widget {
    text-align: center;
  }

  .footer .footer-main .footer-widget p {
    text-align: center;
  }

  .footer .footer-main .footer-widget h4:after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer .footer-main .footer-contact .contact-item {
    justify-content: center;
  }

  .footer .footer-main .footer-links li {
    padding-left: 0;
  }

  .footer .footer-main .footer-links li:before {
    display: none;
  }

  .footer .footer-main .app-buttons {
    justify-content: center;
  }

  .footer .footer-main .social-icons {
    justify-content: center;
  }

  .footer .footer-bottom .copyright,
  .footer .footer-bottom .credits {
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 90px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
}

.section-title p {
  margin-bottom: 0;
  text-align: center;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-height, 118px));
  display: flex;
  align-items: center;
  padding: 60px 0;
  overflow: hidden;
}

.hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 42, 68, 0.92) 0%, rgba(15, 42, 68, 0.75) 100%);
}

.hero .container {
  z-index: 2;
}

.hero .badge-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--contrast-color), transparent 85%);
  color: var(--contrast-color);
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 24px;
}

.hero .badge-label i {
  font-size: 16px;
}

.hero h1 {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 24px;
  color: var(--contrast-color);
}

.hero h1 .accent {
  color: var(--accent-color);
}

.hero .lead {
  font-size: 18px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--contrast-color), transparent 20%);
  max-width: 580px;
  margin-bottom: 32px;
}

.hero .hero-actions {
  margin-bottom: 80px;
}

.hero .hero-actions .btn-main {
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 14px 32px;
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.3s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hero .hero-actions .btn-main:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
}

.hero .hero-actions .btn-outline {
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
  padding: 12px 30px;
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.3s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero .hero-actions .btn-outline:hover {
  background: var(--contrast-color);
  color: var(--heading-color);
}

.hero .hero-stats-panel {
  background: color-mix(in srgb, var(--contrast-color), transparent 85%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--contrast-color), transparent 75%);
  border-radius: 16px;
  padding: 32px;
}

.hero .hero-counters {
  --bs-gutter-x: 28px;
  --bs-gutter-y: 28px;
}

.hero .hero-counters .counter-item {
  text-align: center;
}

.hero .hero-counters .counter-item h3 {
  font-size: 36px;
  font-weight: 700;
  color: var(--contrast-color);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.hero .hero-counters .counter-item p {
  font-size: 14px;
  color: color-mix(in srgb, var(--contrast-color), transparent 20%);
  margin: 4px 0 0;
  text-align: center;
}

@media (max-width: 991px) {
  .hero h1 {
    font-size: 40px;
  }

  .hero .hero-actions {
    margin-bottom: 0;
  }
}

@media (max-width: 575px) {
  .hero {
    padding: 64px 0 0;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero .lead {
    font-size: 16px;
  }

  .hero .hero-actions {
    flex-direction: column;
    margin-bottom: 32px;
  }

  .hero .hero-actions .btn-main,
  .hero .hero-actions .btn-outline {
    width: 100%;
    justify-content: center;
  }

  .hero .hero-counters {
    padding: 24px 16px;
  }

  .hero .hero-counters .counter-item h3 {
    font-size: 28px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .campus-showcase {
  position: relative;
  height: 100%;
  min-height: 420px;
  border-radius: 16px;
  overflow: hidden;
}

.about .campus-showcase img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

.about .campus-showcase .experience-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 20px 28px;
  border-radius: 12px;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent-color), transparent 50%);
}

.about .campus-showcase .experience-badge .years {
  display: block;
  font-size: 2.8rem;
  font-weight: 800;
  font-family: var(--heading-font);
  line-height: 1;
}

.about .campus-showcase .experience-badge .label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 6px;
  opacity: 0.9;
}

@media (max-width: 992px) {
  .about .campus-showcase {
    min-height: 350px;
  }
}

.about .story-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.about .story-content .subtitle {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
  position: relative;
  padding-left: 40px;
}

.about .story-content .subtitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 2px;
  background-color: var(--accent-color);
}

.about .story-content h3 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.25;
}

.about .story-content>p {
  font-size: 1rem;
  line-height: 1.75;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 10px;
}

@media (max-width: 576px) {
  .about .story-content h3 {
    font-size: 1.7rem;
  }
}

.about .purpose-block {
  background-color: var(--surface-color);
  border-radius: 12px;
  padding: 24px;
  border-top: 3px solid var(--accent-color);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 92%);
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about .purpose-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 85%);
}

.about .purpose-block i {
  font-size: 28px;
  color: var(--accent-color);
  margin-bottom: 14px;
  display: block;
}

.about .purpose-block h4 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.about .purpose-block p {
  font-size: 0.9rem;
  margin-bottom: 0;
  line-height: 1.65;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.about .milestones-section {
  margin-top: 70px;
  margin-bottom: 60px;
}

.about .milestones-section h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 40px;
}

.about .milestones-section .milestones-track {
  position: relative;
}

.about .milestones-section .milestones-track::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 60px);
  height: 3px;
  background: linear-gradient(to right, color-mix(in srgb, var(--accent-color), transparent 80%), var(--accent-color), color-mix(in srgb, var(--accent-color), transparent 80%));
}

@media (max-width: 992px) {
  .about .milestones-section .milestones-track::before {
    display: none;
  }
}

.about .milestones-section .milestone-card {
  text-align: center;
  padding: 40px 20px 24px;
  position: relative;
}

.about .milestones-section .milestone-card::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background-color: var(--accent-color);
  border-radius: 50%;
  border: 3px solid var(--background-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 60%);
}

@media (max-width: 992px) {
  .about .milestones-section .milestone-card::before {
    display: none;
  }
}

.about .milestones-section .milestone-card .milestone-year {
  font-size: 2.5rem;
  font-weight: 800;
  font-family: var(--heading-font);
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 12px;
}

.about .milestones-section .milestone-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.about .milestones-section .milestone-card p {
  font-size: 0.88rem;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.6;
  text-align: center;
}

.about .principle-item,
.research .principle-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background-color: var(--surface-color);
  border-radius: 12px;
  border-left: 4px solid color-mix(in srgb, var(--accent-color), transparent 60%);
  height: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--default-color), transparent 94%);
}

.about .principle-item:hover,
.research .principle-item:hover {
  border-left-color: var(--accent-color);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--default-color), transparent 88%);
}

.about .principle-item .principle-num,
.research .principle-item .principle-num {
  font-size: 2rem;
  font-weight: 800;
  font-family: var(--heading-font);
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.about .principle-item:hover .principle-num,
.research .principle-item:hover .principle-num {
  color: var(--accent-color);
}

.about .principle-item .principle-body h4,
.research .principle-item .principle-body h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.about .principle-item .principle-body p,
.research .principle-item .principle-body p {
  font-size: 0.88rem;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  line-height: 1.6;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  position: relative;
  height: 100%;
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
  transition: 0.3s;
}

.team .team-member:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.team .team-member .member-img {
  flex: 0 0 200px;
  overflow: hidden;
}

.team .team-member .member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.team .team-member .member-info {
  padding: 25px;
  text-align: left;
}

.team .team-member .member-info h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--heading-color);
}

.team .team-member .member-info span {
  font-size: 0.9rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--heading-color), transparent 30%);
  display: block;
  margin-bottom: 15px;
}

.team .team-member .member-info p {
  font-size: 0.9rem;
  margin-bottom: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 6px;
  vertical-align: middle;
  font-size: 0.85rem;
  color: var(--heading-color);
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: 0.3s;
  flex-shrink: 0;
}

.contact-line {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.contact-line:last-child {
  margin-bottom: 0;
}

.contact-icon:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.member-info .view-details-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-color);
  transition: 0.3s;
}

.member-info .view-details-link i {
  transition: 0.3s;
}

.member-info .view-details-link:hover {
  text-decoration: underline;
}

.member-info .view-details-link:hover i {
  transform: translateX(3px);
}

.team .team-member .member-info .social {
  display: flex;
  gap: 10px;
}

.team .team-member .member-info .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  color: var(--heading-color);
  transition: 0.3s;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.team .team-member .member-info .social a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

@media (max-width: 767px) {
  .team .team-member {
    flex-direction: column;
  }

  .team .team-member .member-img {
    flex: auto;
  }

  .team .team-member .member-img img {
    width: 100%;
    border-radius: 8px 8px 0 0;
  }

  .team .team-member .member-info {
    text-align: center;
  }

  .team .team-member .member-info p {
    text-align: center;
  }

  .team .team-member .member-info .social {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .filter-bar {
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 768px) {
  .portfolio .filter-bar {
    margin-bottom: 35px;
    padding-bottom: 20px;
  }
}

.portfolio .portfolio-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (max-width: 576px) {
  .portfolio .portfolio-filters {
    gap: 8px;
  }
}

.portfolio .portfolio-filters li {
  padding: 10px 24px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  border-radius: 50px;
  letter-spacing: 0.3px;
}

@media (max-width: 576px) {
  .portfolio .portfolio-filters li {
    padding: 8px 18px;
    font-size: 0.8rem;
  }
}

.portfolio .portfolio-filters li:hover {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.portfolio .showcase-card,
.related-projects .showcase-card {
  background-color: var(--surface-color);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  transition: all 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.portfolio .showcase-card:hover,
.related-projects .showcase-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--default-color), transparent 90%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.portfolio .showcase-card .card-body,
.related-projects .showcase-card .card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.portfolio .showcase-card .card-body .card-badge,
.related-projects .showcase-card .card-body .card-badge {
  align-self: flex-start;
  padding: 5px 14px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-radius: 50px;
  margin-bottom: 16px;
}

.portfolio .showcase-card .card-body .project-sponsor,
.related-projects .showcase-card .card-body .project-sponsor {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  margin-bottom: 10px;
}

.portfolio .showcase-card .card-body .project-title-row,
.related-projects .showcase-card .card-body .project-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 10px;
}

.portfolio .showcase-card .card-body .project-title-row .card-title,
.related-projects .showcase-card .card-body .project-title-row .card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--heading-color);
  line-height: 1.35;
  transition: color 0.3s ease;
  flex: 1 1 auto;
}

@media (max-width: 768px) {
  .portfolio .showcase-card .card-body .project-title-row .card-title,
  .related-projects .showcase-card .card-body .project-title-row .card-title {
    font-size: 1.1rem;
  }
}

.portfolio .showcase-card .card-body .project-title-row .meta-date,
.related-projects .showcase-card .card-body .project-title-row .meta-date {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-weight: 300;
  white-space: nowrap;
  flex-shrink: 0;
}

.portfolio .showcase-card .card-body .project-people,
.related-projects .showcase-card .card-body .project-people {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
  flex-grow: 1;
}

.portfolio .showcase-card .card-body .card-footer-row,
.related-projects .showcase-card .card-body .card-footer-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.portfolio .showcase-card .card-body .card-footer-row .details-link,
.related-projects .showcase-card .card-body .card-footer-row .details-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-color);
  transition: gap 0.3s ease;
}

.portfolio .showcase-card .card-body .card-footer-row .details-link:hover,
.related-projects .showcase-card .card-body .card-footer-row .details-link:hover {
  gap: 10px;
  color: var(--accent-color);
}

.portfolio .cta-banner {
  margin-top: 80px;
  padding: 50px 45px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
  border-radius: 16px;
  border-left: 4px solid var(--accent-color);
}

@media (max-width: 992px) {
  .portfolio .cta-banner {
    padding: 40px 30px;
    margin-top: 60px;
  }
}

@media (max-width: 576px) {
  .portfolio .cta-banner {
    padding: 30px 24px;
    margin-top: 50px;
  }
}

.portfolio .cta-banner .banner-content h4 {
  font-size: 1.55rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--heading-color);
  line-height: 1.3;
}

@media (max-width: 768px) {
  .portfolio .cta-banner .banner-content h4 {
    font-size: 1.35rem;
  }
}

.portfolio .cta-banner .banner-content p {
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  line-height: 1.7;
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .portfolio .cta-banner .banner-content p {
    margin-bottom: 30px;
  }
}

.portfolio .cta-banner .banner-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
}

@media (max-width: 992px) {
  .portfolio .cta-banner .banner-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 576px) {
  .portfolio .cta-banner .banner-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

.portfolio .cta-banner .banner-actions .btn-start {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.portfolio .cta-banner .banner-actions .btn-start i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.portfolio .cta-banner .banner-actions .btn-start:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 12%);
  color: var(--contrast-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.portfolio .cta-banner .banner-actions .btn-start:hover i {
  transform: translateX(3px);
}

.portfolio .cta-banner .banner-actions .btn-browse {
  color: var(--accent-color);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  position: relative;
  padding-bottom: 2px;
}

.portfolio .cta-banner .banner-actions .btn-browse::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent-color);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.portfolio .cta-banner .banner-actions .btn-browse:hover {
  color: color-mix(in srgb, var(--accent-color), black 10%);
}

.portfolio .cta-banner .banner-actions .btn-browse:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-item {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq .faq-item:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 60%);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.faq .faq-item.faq-active {
  border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
  background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.faq .faq-item.faq-active .faq-header .icon-wrap {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.faq .faq-item.faq-active .faq-header h4 {
  color: var(--accent-color);
}

.faq .faq-item.faq-active .faq-header .faq-toggle i {
  transform: rotate(180deg);
  color: var(--accent-color);
}

.faq .faq-item.faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
}

.faq .faq-item .faq-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  gap: 16px;
  transition: all 0.3s ease;
}

.faq .faq-item .faq-header .icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  font-size: 18px;
  transition: all 0.3s ease;
}

.faq .faq-item .faq-header h4 {
  flex: 1;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--heading-color);
  line-height: 1.5;
  transition: color 0.3s ease;
}

.faq .faq-item .faq-header .faq-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 16px;
}

.faq .faq-item .faq-header .faq-toggle i {
  transition: all 0.3s ease;
}

.faq .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: all 0.35s ease;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-item .faq-content .content-inner {
  overflow: hidden;
  padding: 0 24px 0 80px;
}

.faq .faq-item .faq-content .content-inner p {
  margin: 0;
  padding-bottom: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.75;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .faq .faq-item .faq-header {
    padding: 16px 18px;
    gap: 12px;
  }

  .faq .faq-item .faq-header .icon-wrap {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .faq .faq-item .faq-header h4 {
    font-size: 0.95rem;
  }

  .faq .faq-item .faq-content .content-inner {
    padding: 0 18px 0 66px;
  }

  .faq .faq-item .faq-content .content-inner p {
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .faq .faq-item .faq-header {
    padding: 14px 16px;
    gap: 10px;
  }

  .faq .faq-item .faq-header .icon-wrap {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .faq .faq-item .faq-header h4 {
    font-size: 0.9rem;
  }

  .faq .faq-item .faq-content .content-inner {
    padding: 0 16px 0 58px;
  }

  .faq .faq-item .faq-content .content-inner p {
    font-size: 0.875rem;
    padding-bottom: 16px;
  }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  position: relative;
  overflow: hidden;
}

.contact::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -160px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-color) 6%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.contact::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-color) 5%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.contact .container {
  position: relative;
  z-index: 1;
}

.contact .form-card {
  background: var(--surface-color);
  border-radius: 16px;
  padding: 40px;
  border: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--default-color) 6%, transparent), 0 2px 4px color-mix(in srgb, var(--default-color) 4%, transparent);
  height: 100%;
}

.contact .form-card .form-header {
  margin-bottom: 32px;
}

.contact .form-card .form-header .badge-label {
  display: inline-block;
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--accent-color);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 24px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.contact .form-card .form-header h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.contact .form-card .form-header p {
  color: color-mix(in srgb, var(--default-color) 60%, transparent);
  font-size: 15px;
  margin-bottom: 0;
  line-height: 1.6;
}

.contact .form-card label {
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 8px;
  font-size: 14px;
  display: block;
}

.contact .form-card .form-control {
  height: 48px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--default-color) 20%, transparent);
  border-radius: 8px;
  background: var(--surface-color);
  font-size: 15px;
  color: var(--default-color);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.contact .form-card .form-control:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
}

.contact .form-card .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color) 40%, transparent);
}

.contact .form-card textarea.form-control {
  height: 150px;
  resize: none;
}

.contact .form-card .btn-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 80%, #6366f1));
  color: var(--contrast-color);
  border: none;
  padding: 14px 32px;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color) 30%, transparent);
  transition: transform 0.3s, box-shadow 0.3s;
}

.contact .form-card .btn-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.contact .form-card .btn-send:active {
  transform: translateY(0);
}

.contact .form-card .btn-send i {
  font-size: 16px;
  transition: transform 0.3s;
}

.contact .form-card .btn-send:hover i {
  transform: translateX(4px);
}

.contact .sidebar-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.contact .info-tile {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent);
  border-radius: 16px;
  padding: 24px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s, border-color 0.3s;
}

.contact .info-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--default-color) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.contact .info-tile .tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 80%, #6366f1));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact .info-tile .tile-icon i {
  font-size: 22px;
  color: var(--contrast-color);
}

.contact .info-tile .tile-text h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.contact .info-tile .tile-text p {
  margin-bottom: 2px;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color) 65%, transparent);
  line-height: 1.6;
}

.contact .info-tile .tile-text p:last-child {
  margin-bottom: 0;
}

.contact .map-embed {
  flex: 1;
  min-height: 220px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent);
}

.contact .map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
}

@media (max-width: 992px) {
  .contact .form-card {
    padding: 32px;
    margin-bottom: 16px;
  }

  .contact .sidebar-info {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .contact .form-card {
    padding: 24px;
  }

  .contact .form-card .form-header {
    margin-bottom: 24px;
  }

  .contact .form-card .form-header h3 {
    font-size: 24px;
  }

  .contact .form-card .btn-send {
    width: 100%;
    justify-content: center;
  }

  .contact .map-embed {
    min-height: 200px;
  }

  .contact .map-embed iframe {
    min-height: 200px;
  }
}

@media (max-width: 576px) {
  .contact .form-card {
    padding: 20px;
  }

  .contact .info-tile {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Team 2 Section
--------------------------------------------------------------*/
.team-2 .team-member {
  position: relative;
  height: 100%;
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
  transition: 0.3s;
}

.team-2 .team-member:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.team-2 .team-member .member-img {
  flex: 0 0 200px;
  overflow: hidden;
}

.team-2 .team-member .member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.team-2 .team-member .member-info {
  padding: 25px;
  text-align: left;
}

.team-2 .team-member .member-info h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--heading-color);
}

.team-2 .team-member .member-info span {
  font-size: 0.9rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--heading-color), transparent 30%);
  display: block;
  margin-bottom: 15px;
}

.team-2 .team-member .member-info p {
  font-size: 0.9rem;
  margin-bottom: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.team-2 .team-member .member-info .social {
  display: flex;
  gap: 10px;
}

.team-2 .team-member .member-info .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  color: var(--heading-color);
  transition: 0.3s;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.team-2 .team-member .member-info .social a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

@media (max-width: 767px) {
  .team-2 .team-member {
    flex-direction: column;
  }

  .team-2 .team-member .member-img {
    flex: auto;
  }

  .team-2 .team-member .member-img img {
    width: 100%;
    border-radius: 8px 8px 0 0;
  }

  .team-2 .team-member .member-info {
    text-align: center;
  }

  .team-2 .team-member .member-info p {
    text-align: center;
  }

  .team-2 .team-member .member-info .social {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Team 3 Section
--------------------------------------------------------------*/
.team-3 .team-member {
  position: relative;
  height: 100%;
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
  transition: 0.3s;
}

.team-3 .team-member:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.team-3 .team-member .member-img {
  flex: 0 0 200px;
  overflow: hidden;
}

.team-3 .team-member .member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.team-3 .team-member .member-info {
  padding: 25px;
  text-align: left;
}

.team-3 .team-member .member-info h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--heading-color);
}

.team-3 .team-member .member-info span {
  font-size: 0.9rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--heading-color), transparent 30%);
  display: block;
  margin-bottom: 15px;
}

.team-3 .team-member .member-info p {
  font-size: 0.9rem;
  margin-bottom: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.team-3 .team-member .member-info .social {
  display: flex;
  gap: 10px;
}

.team-3 .team-member .member-info .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  color: var(--heading-color);
  transition: 0.3s;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.team-3 .team-member .member-info .social a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

@media (max-width: 767px) {
  .team-3 .team-member {
    flex-direction: column;
  }

  .team-3 .team-member .member-img {
    flex: auto;
  }

  .team-3 .team-member .member-img img {
    width: 100%;
    border-radius: 8px 8px 0 0;
  }

  .team-3 .team-member .member-info {
    text-align: center;
  }

  .team-3 .team-member .member-info p {
    text-align: center;
  }

  .team-3 .team-member .member-info .social {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Team 4 Section
--------------------------------------------------------------*/
.team-4 .degree-group-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading-color);
  border-left: 4px solid var(--accent-color);
  padding-left: 12px;
  margin-bottom: 20px;
}

.team-4 .degree-group-title .type-count {
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.team-4 .degree-group-section {
  margin-bottom: 32px;
}

.team-4 .team-member {
  position: relative;
  height: 100%;
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
  transition: 0.3s;
}

.team-4 .team-member:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.team-4 .team-member .member-img {
  flex: 0 0 200px;
  overflow: hidden;
}

.team-4 .team-member .member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.team-4 .team-member .member-info {
  padding: 25px;
  text-align: left;
}

.team-4 .team-member .member-info h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--heading-color);
}

.team-4 .team-member .member-info span {
  font-size: 0.9rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--heading-color), transparent 30%);
  display: block;
  margin-bottom: 15px;
}

.team-4 .team-member .member-info p {
  font-size: 0.9rem;
  margin-bottom: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.team-4 .team-member .member-info .social {
  display: flex;
  gap: 10px;
}

.team-4 .team-member .member-info .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  color: var(--heading-color);
  transition: 0.3s;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.team-4 .team-member .member-info .social a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

@media (max-width: 767px) {
  .team-4 .team-member {
    flex-direction: column;
  }

  .team-4 .team-member .member-img {
    flex: auto;
  }

  .team-4 .team-member .member-img img {
    width: 100%;
    border-radius: 8px 8px 0 0;
  }

  .team-4 .team-member .member-info {
    text-align: center;
  }

  .team-4 .team-member .member-info p {
    text-align: center;
  }

  .team-4 .team-member .member-info .social {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Team 5 Section
--------------------------------------------------------------*/
.team-5 .team-member {
  position: relative;
  height: 100%;
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
  transition: 0.3s;
}

.team-5 .team-member:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.team-5 .team-member .member-img {
  flex: 0 0 200px;
  overflow: hidden;
}

.team-5 .team-member .member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.team-5 .team-member .member-info {
  padding: 25px;
  text-align: left;
}

.team-5 .team-member .member-info h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--heading-color);
}

.team-5 .team-member .member-info span {
  font-size: 0.9rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--heading-color), transparent 30%);
  display: block;
  margin-bottom: 15px;
}

.team-5 .team-member .member-info p {
  font-size: 0.9rem;
  margin-bottom: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.team-5 .team-member .member-info .social {
  display: flex;
  gap: 10px;
}

.team-5 .team-member .member-info .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  color: var(--heading-color);
  transition: 0.3s;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.team-5 .team-member .member-info .social a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

@media (max-width: 767px) {
  .team-5 .team-member {
    flex-direction: column;
  }

  .team-5 .team-member .member-img {
    flex: auto;
  }

  .team-5 .team-member .member-img img {
    width: 100%;
    border-radius: 8px 8px 0 0;
  }

  .team-5 .team-member .member-info {
    text-align: center;
  }

  .team-5 .team-member .member-info p {
    text-align: center;
  }

  .team-5 .team-member .member-info .social {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Project Details Section
--------------------------------------------------------------*/
.project-details .listing-tabs .nav-tabs {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  gap: 0;
}

.project-details .listing-tabs .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: all 0.2s ease;
}

.project-details .listing-tabs .nav-tabs .nav-link:hover {
  color: var(--default-color);
  border-bottom-color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.project-details .listing-tabs .nav-tabs .nav-link.active {
  color: var(--heading-color);
  border-bottom-color: var(--accent-color);
  background: transparent;
}

.project-details .listing-tabs .tab-inner {
  padding: 32px 0;
}

.project-details .listing-tabs .tab-inner h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.project-details .listing-tabs .tab-inner h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.project-details .listing-tabs .tab-inner p {
  font-size: 15px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 16px;
}

/* .project-description holds admin-authored rich-text HTML (see project-details.php)
   rather than a plain <p>, so it needs its own copy of the same text styling. */
.project-details .project-description {
  font-size: 15px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 16px;
}

.project-details .project-description img,
.faculty-details .research-statement img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 12px 0;
}

.project-details .no-data {
  text-align: center;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 0.9rem;
  padding: 20px 0;
}

.project-details .key-details .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.project-details .key-details .detail-row:not(:last-child) {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.project-details .key-details .detail-row .detail-label {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

.project-details .key-details .detail-row .detail-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
  text-align: right;
}

.project-details .listing-gallery {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 92%);
}

.project-details .gallery-slider .swiper-slide {
  aspect-ratio: 16 / 9;
}

.project-details .gallery-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-details .gallery-slider .swiper-button-next,
.project-details .gallery-slider .swiper-button-prev {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  color: #fff;
}

.project-details .gallery-slider .swiper-button-next::after,
.project-details .gallery-slider .swiper-button-prev::after {
  font-size: 16px;
}

.project-details .gallery-slider .swiper-pagination-bullet-active {
  background: var(--accent-color);
}

.project-details .staff-list {
  display: flex;
  flex-direction: column;
}

.project-details .staff-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.project-details .staff-list .staff-row:last-child {
  border-bottom: none;
}

.project-details .staff-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.project-details .staff-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.project-details .staff-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
}

.project-details .staff-role {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  margin-top: 2px;
}

.project-details .investigators-list h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  margin-bottom: 8px;
}

/* Type badge, shown in the breadcrumb bar now that the page no longer has a
   large title heading above it (see project-details.php). */
.project-details-page .breadcrumbs .type-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  white-space: nowrap;
}

.project-details-page .breadcrumbs .type-badge-consultancy {
  background: color-mix(in srgb, var(--default-color), transparent 92%);
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  border-color: color-mix(in srgb, var(--default-color), transparent 78%);
}

.related-projects {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.related-projects h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}

/*--------------------------------------------------------------
# Home Banner Section
--------------------------------------------------------------*/
.notice-banner-section {
  margin: 0;
  padding: 0;
}

.notice-banner-section .banner-slider {
  overflow: hidden;
}

.notice-banner-section .banner-slider .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.notice-banner-section .banner-slider .swiper-button-next,
.notice-banner-section .banner-slider .swiper-button-prev {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  color: #fff;
}

.notice-banner-section .banner-slider .swiper-button-next::after,
.notice-banner-section .banner-slider .swiper-button-prev::after {
  font-size: 16px;
}

.notice-banner-section .banner-slider .swiper-pagination-bullet-active {
  background: var(--accent-color);
}

/*--------------------------------------------------------------
# Notices Page
--------------------------------------------------------------*/
.notice-table-toolbar {
  margin-bottom: 20px;
  max-width: 360px;
}

.notice-file-table {
  --bs-table-bg: transparent;
  vertical-align: middle;
}

.notice-file-table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  border-bottom-width: 1px;
}

.notice-title {
  font-weight: 600;
  color: var(--heading-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.notice-desc {
  margin: 4px 0 0 24px;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.notice-date-cell {
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  white-space: nowrap;
}

.notice-download-cell {
  text-align: right;
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 50px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: 0.3s;
}

.btn-download:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 15%);
  color: var(--contrast-color);
}

#notice-no-results {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.notice-pg-range {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.notice-pg-btns {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notice-pg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  background: var(--surface-color);
  color: var(--default-color);
  transition: 0.3s;
}

.notice-pg-btn:not(:disabled):hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.notice-pg-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.notice-pg-page {
  font-size: 0.88rem;
}

#notice-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

/* Deliberately not position:sticky. It was originally (BootstrapMade template
   default), but this card is routinely the taller of the two columns (Funding/
   Type/Category/Duration/Status/Investigators can run long) — Bootstrap's
   .row default align-items:stretch then makes both columns exactly as tall as
   this card, leaving zero scroll room for "stuck" to ever mean anything. In
   practice the card unstuck almost immediately after any scroll and drifted
   upward with the page like a normal block, sliding behind/over the sticky
   header — reported as "the sidebar box overlapping the nav on scroll". A
   top-offset tweak (matching --header-height) couldn't fix this, since the
   underlying container had no spare height for sticky to work with at all. */
.project-details .sidebar-card {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--default-color), transparent 92%);
}

.project-details .sidebar-card .divider {
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  margin: 20px 0;
}

.project-details .sidebar-card .listing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.project-details .sidebar-card .listing-header .listing-price {
  font-size: 28px;
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}

.project-details .sidebar-card .listing-header .status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.project-details .sidebar-card .listing-address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 14px;
}

.project-details .sidebar-card .listing-address i {
  font-size: 18px;
  color: var(--accent-color);
  margin-top: 2px;
}

.project-details .sidebar-card .listing-address .street {
  display: block;
  font-weight: 500;
  color: var(--default-color);
}

.project-details .sidebar-card .listing-address .city {
  display: block;
  font-size: 13px;
}

@media (max-width: 992px) {
  .project-details .sidebar-card {
    margin-top: 16px;
  }
}

/*--------------------------------------------------------------
# Author Section
--------------------------------------------------------------*/
.author .author-card {
  background-color: var(--surface-color);
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.author .author-card .author-image {
  text-align: center;
  margin-bottom: 1.5rem;
}

.author .author-card .author-image img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
}

.author .author-card .author-info {
  text-align: center;
}

.author .author-card .author-info p {
  text-align: center;
}

.author .author-card .author-info h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.author .author-card .author-info .designation {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.author .author-card .author-info .author-bio {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.author .author-card .author-stats {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 1rem 0;
}

.author .author-card .author-stats .stat-item h4 {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
  color: var(--accent-color);
}

.author .author-card .author-stats .stat-item p {
  font-size: 0.85rem;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.author .author-card .social-links,
.faculty-side .author-card .social-links {
  margin-top: 1.5rem;
}

.author .author-card .social-links a,
.faculty-side .author-card .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-radius: 50%;
  margin: 0 0.5rem;
  transition: all 0.3s ease;
}

.author .author-card .social-links a:hover,
.faculty-side .author-card .social-links a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
}

.author .author-card .social-links a i,
.faculty-side .author-card .social-links a i {
  font-size: 1rem;
}

.author .author-content {
  background-color: var(--surface-color);
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.author .author-content .content-header {
  margin-bottom: 1.5rem;
}

.author .author-content .content-header h3 {
  font-size: 1.75rem;
  margin-bottom: 0;
}

.author .author-content .content-body p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.author .author-content .content-body h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.75rem;
}

.author .author-content .content-body h4:first-child {
  margin-top: 0;
}

.author .author-content .content-body .publication-list,
.author .author-content .content-body .project-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.author .author-content .content-body .publication-list li {
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.author .author-content .content-body .publication-list li:last-child {
  border-bottom: none;
}

.author .author-content .content-body .publication-list li > a {
  font-weight: 600;
  color: var(--heading-color);
}

.author .author-content .content-body .publication-list li > a:hover {
  color: var(--accent-color);
}

.author .author-content .content-body .pub-meta {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.author .author-content .content-body .project-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.author .author-content .content-body .project-list li:last-child {
  border-bottom: none;
}

.author .author-content .content-body .project-list li > a {
  font-weight: 600;
  color: var(--heading-color);
}

.author .author-content .content-body .project-list li > a:hover {
  color: var(--accent-color);
}

.author .author-content .content-body .badge-status {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 60%);
}

.author .author-content .content-body .expertise-areas h4 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.author .author-content .content-body .expertise-areas .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.author .author-content .content-body .expertise-areas .tags span {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.author .author-content .content-body .expertise-areas .tags span:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.author .author-content .content-body .featured-articles h4 {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.author .author-content .content-body .featured-articles .article-card {
  background-color: var(--background-color);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.author .author-content .content-body .featured-articles .article-card:hover {
  transform: translateY(-5px);
}

.author .author-content .content-body .featured-articles .article-card .article-img {
  height: 200px;
  overflow: hidden;
}

.author .author-content .content-body .featured-articles .article-card .article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.author .author-content .content-body .featured-articles .article-card .article-img:hover img {
  transform: scale(1.1);
}

.author .author-content .content-body .featured-articles .article-card .article-details {
  padding: 1.25rem;
}

.author .author-content .content-body .featured-articles .article-card .article-details .post-category {
  display: inline-block;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.author .author-content .content-body .featured-articles .article-card .article-details h5 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.author .author-content .content-body .featured-articles .article-card .article-details h5 a {
  color: var(--heading-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.author .author-content .content-body .featured-articles .article-card .article-details h5 a:hover {
  color: var(--accent-color);
}

.author .author-content .content-body .featured-articles .article-card .article-details .post-meta {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.author .author-content .content-body .featured-articles .article-card .article-details .post-meta span {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
}

.author .author-content .content-body .featured-articles .article-card .article-details .post-meta span i {
  margin-right: 0.35rem;
  font-size: 1rem;
}

@media (max-width: 991.98px) {
  .author .author-card {
    margin-bottom: 2rem;
  }
}

@media (max-width: 767.98px) {
  .author .featured-articles .article-card {
    margin-bottom: 1.5rem;
  }
}

/*--------------------------------------------------------------
# Faculty Details (tabbed profile)
--------------------------------------------------------------*/
.faculty-details .faculty-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
}

@media (max-width: 991.98px) {
  .faculty-details .faculty-grid {
    grid-template-columns: 1fr;
  }
}

.faculty-details .faculty-side .author-card {
  height: auto;
}

.faculty-details .faculty-nav {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.faculty-details .faculty-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.faculty-details .tab-btn {
  border: none;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.faculty-details .tab-btn:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 78%);
}

.faculty-details .tab-btn.active {
  background: var(--accent-color);
  color: #fff;
}

.faculty-details .tab-content {
  display: none;
}

.faculty-details .tab-content.active {
  display: block;
  font-size: 1rem;
}

.faculty-details .no-data {
  text-align: center;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 0.9rem;
  padding: 20px 0;
}

.faculty-details .research-subheading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading-color);
  margin: 1.5rem 0 0.75rem;
}

.faculty-details .research-statement + .research-subheading {
  margin-top: 1.5rem;
}

.faculty-details .research-areas-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faculty-details .research-areas-tags span {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.faculty-details .research-statement {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--default-color);
  text-align: justify;
}

.faculty-details .research-lab {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.faculty-details .project-wrapper {
  max-width: 900px;
}

.faculty-details .project-block {
  margin-bottom: 30px;
}

.faculty-details .project-block-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 12px;
}

.faculty-details .project-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faculty-details .project-item {
  position: relative;
  padding: 12px 14px 12px 18px;
  border-radius: 8px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  transition: 0.2s;
}

.faculty-details .project-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--accent-color);
  border-radius: 2px;
}

.faculty-details .project-item:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.faculty-details .project-item a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--heading-color);
}

.faculty-details .project-item a:hover {
  color: var(--accent-color);
}

.faculty-details .project-item .project-role {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
}

.faculty-details .pub-type-section,
.faculty-details .group-degree-section {
  margin-bottom: 32px;
}

.faculty-details .pub-type-title,
.faculty-details .group-type-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading-color);
  border-left: 4px solid var(--accent-color);
  padding-left: 12px;
  margin-bottom: 14px;
}

.faculty-details .pub-type-title .type-count,
.faculty-details .group-type-title .type-count {
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.faculty-details .pub-year-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--heading-color);
  cursor: pointer;
  transition: 0.2s;
}

.faculty-details .pub-year-toggle:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 82%);
}

.faculty-details .pub-year-toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent-color), transparent 82%);
}

.faculty-details .pub-year-toggle .count {
  background: var(--accent-color);
  color: #fff;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

.faculty-details .pub-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.faculty-details .pub-item {
  background: var(--surface-color);
  padding: 14px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 94%);
  transition: 0.2s;
}

.faculty-details .pub-item:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.faculty-details .pub-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 6px;
  line-height: 1.5;
}

.faculty-details .pub-meta {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 6px;
}

.faculty-details .pub-meta .journal {
  font-style: italic;
}

.faculty-details .pub-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-color);
  text-decoration: none;
}

.faculty-details .pub-link:hover {
  text-decoration: underline;
}

.faculty-details .group-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.faculty-details .group-mini-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  transition: 0.2s;
}

.faculty-details .group-mini-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.faculty-details .group-mini-card img {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.faculty-details .group-mini-info {
  min-width: 0;
}

.faculty-details .group-mini-top {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.3;
}

.faculty-details .group-mini-bottom {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.3;
}