/**
* Template Name: Dewi
* Template URL: https://bootstrapmade.com/dewi-free-multi-purpose-html-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Inter", 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: "Inter", sans-serif;
  --nav-font: "Inter", sans-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 {
  --brand-blue: #01385E;
  --brand-orange: #F26924;
  --background-color: #ffffff;
  --default-color: #2c3e50;
  --heading-color: #01385E;
  --accent-color: var(--brand-orange);
  --accent-glow: rgba(242, 105, 36, 0.15);
  --primary-glow: rgba(1, 56, 94, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(1, 56, 94, 0.1);
  --glass-blur: blur(20px);
  --epic-gradient: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  --grid-color: rgba(1, 56, 94, 0.03);

  --text-gradient: linear-gradient(to right, #01385E, var(--brand-orange));
  --border-gradient: linear-gradient(135deg, rgba(1, 56, 94, 0.1) 0%, rgba(1, 56, 94, 0.02) 100%);
  --nav-dropdown-color: var(--default-color);
  --nav-dropdown-hover-color: var(--brand-orange);
  --nav-dropdown-background-color: var(--background-color);
}

.light-background {
  --background-color: #ffffff;
  --default-color: #212529;
  --heading-color: #01385E;
}

.dark-background {
  --background-color: #011627;
  --default-color: #ffffff;
  --heading-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;
}

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

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.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);
  }
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Modern UI Utilities
--------------------------------------------------------------*/
.glass-panel {
  background: var(--glass-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.glass-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.5s;
}

.glass-panel:hover {
  background: var(--glass-card-hover);
  border-color: rgba(242, 105, 36, 0.3);
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 40px rgba(1, 56, 94, 0.1), 0 0 20px rgba(242, 105, 36, 0.05);
}

.glass-panel:hover:before {
  opacity: 1;
}

/* Section Corner Action Icon */
.section-top-link {
  position: absolute;
  top: 20px;
  right: 20px;
  min-width: 45px;
  height: 45px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  color: var(--default-color);
  font-size: 1.1rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(15px);
  z-index: 10;
  overflow: hidden;
}

.section-top-link .link-text {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.section-top-link:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 5px 25px var(--accent-glow);
  padding-right: 20px;
}

.section-top-link:hover .link-text {
  opacity: 1;
  max-width: 100px;
  margin-left: 5px;
}

.section-top-link i {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.section-top-link:hover i {
  transform: rotate(45deg);
}

/* Glow Orbs */
.glow-orb {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
}

.glow-orb-1 {
  top: -10%;
  right: -10%;
}

.glow-orb-2 {
  bottom: -10%;
  left: -10%;
  width: 500px;
  height: 500px;
  opacity: 0.1;
}

.gradient-text {
  background: var(--text-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.section-tag {
  color: var(--brand-orange);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  display: block;
}

.image-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}

.image-stack__item--bottom {
  grid-column: 1 / span 8;
  grid-row: 1;
  z-index: 1;
}

.image-stack__item--top {
  grid-column: 4 / -1;
  grid-row: 1;
  z-index: 2;
  margin-top: 50px;
}

.floating-icon {
  width: 70px;
  height: 70px;
  background: var(--brand-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  margin-bottom: 20px;
  box-shadow: 0 10px 20px var(--accent-glow);
  z-index: 2;
}

.vision-card {
  padding: 40px;
  height: 100%;
  aspect-ratio: 1/1;
  border-radius: 50% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--brand-orange) !important;
  margin: 0 auto;
  max-width: 350px;
}

.vision-card h4 {
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 1.25rem;
}

.vision-card p {
  color: rgba(1, 56, 94, 0.8);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Connecting Lines */
.vision-cards-wrapper {
  position: relative;
}

@media (min-width: 992px) {
  .vision-cards-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 15%;
    right: 15%;
    height: 2px;
    border-top: 2px dashed var(--brand-orange);
    opacity: 0.3;
    z-index: 0;
    transform: translateY(-50%);
  }

  .vision-cards-wrapper .col-lg-4 {
    z-index: 1;
  }
}


/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Global Header
------------------------------*/
.header {
  --background-color: transparent;
  padding: 8px 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 997;
}

.scrolled .header {
  padding: 5px 0;
}

.header-wrapper {
  flex-wrap: nowrap;
  background: var(--glass-bg);
  padding: 4px 15px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(1, 56, 94, 0.15);
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  backdrop-filter: var(--glass-blur);
  transition: backdrop-filter 0.3s, border-radius 0.3s, padding 0.3s;
}

@media (max-width: 1199px) {
  .header,
  .scrolled .header {
    padding-left: 12px;
    padding-right: 12px;
  }

  .header-wrapper {
    border-radius: 20px;
    padding: 6px 14px;
  }
}

@media (max-width: 480px) {
  .header-wrapper {
    border-radius: 14px;
    padding: 5px 10px;
  }

  .header .logo img {
    max-height: 30px !important;
  }
}

/* Disable blur when mobile nav is active to fix fixed positioning constraint */
.mobile-nav-active .header-wrapper {
  flex-wrap: nowrap;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
}

.mobile-nav-active #header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
}



.header .logo h1 {
  font-size: 26px;
  margin: 0;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--brand-blue) !important;
  text-transform: uppercase;
}

/* Integrated Navbar CTA */
.navmenu .btn-join {
  background: var(--accent-color);
  color: #fff !important;
  padding: 6px 15px !important;
  border-radius: 50px;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px var(--accent-glow);
  transition: all 0.3s;
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.navmenu .btn-join:hover {
  background: #ff7b39 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--accent-glow);
  color: #fff !important;
}

.navmenu .btn-join:before {
  display: none !important;
  /* Remove the nav link hover line */
}

@media (max-width: 1200px) {
  .navmenu .btn-join {
    margin-left: 0;
    margin-top: 15px;
    padding: 12px 25px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .cta-btn {
    white-space: nowrap;
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

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

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgba(255, 255, 255, 0.9);
}

.scrolled .header-wrapper {
  background: var(--background-color);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(1, 56, 94, 0.1);
  box-shadow: 0 4px 12px rgba(1, 56, 94, 0.08);
}

.scrolled .header .logo h1,
.scrolled .header .logo span {
  color: var(--brand-blue) !important;
}

.scrolled .header .logo img {
  filter: none;
}

.scrolled .navmenu a,
.scrolled .navmenu a:focus {
  color: var(--brand-blue);
}

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

.scrolled .mobile-nav-toggle {
  color: var(--brand-blue);
}

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

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

  .navmenu li.mobile-cta {
    display: none;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 10px 2px;
  }

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

  .navmenu a,
  .navmenu a:focus {
    color: var(--brand-blue);
    font-size: 12px;
    padding: 0 12px;
    font-family: var(--nav-font);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

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

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -5px;
    left: 15px;
    right: 15px;
    background-color: var(--accent-color);
    visibility: hidden;
    width: 0;
    transition: all 0.3s ease-in-out 0s;
    box-shadow: 0 0 10px var(--accent-glow);
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: calc(100% - 30px);
  }

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

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

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: uppercase;
    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 {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

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

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

  /* Show dropdown when toggled via click (complements the :hover rule) */
  .navmenu .dropdown>.dropdown-active {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--brand-blue);
    font-size: 24px;
    line-height: 0;
    margin-right: 0;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 9999;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
  }

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

  .navmenu ul {
    display: none;
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0;
    background: transparent;
    text-align: center;
    transition: 0.3s;
    z-index: 9998;
  }

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

  .navmenu li.mobile-cta {
    display: block;
    margin-top: 15px;
    padding: 0 15px;
  }

  .navmenu li.mobile-cta .btn-cta {
    background: var(--accent-color);
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    text-align: center;
    font-weight: 700;
    justify-content: center;
    box-shadow: 0 4px 15px var(--accent-glow);
    display: flex;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--brand-blue);
    padding: 16px 24px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 12px;
    width: 100%;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 16px;
    line-height: 0;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    background: none;
    color: var(--brand-blue);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--accent-color);
    background: rgba(242, 105, 36, 0.06);
    border-radius: 10px;
  }

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

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 6px 0;
    margin: 4px 12px 8px;
    background-color: rgba(1, 56, 94, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(1, 56, 94, 0.07);
    transition: all 0.3s ease-in-out;
  }

  .navmenu .dropdown ul a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
    letter-spacing: 0.5px !important;
    white-space: normal !important;
    opacity: 0.85;
  }

  .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: var(--brand-blue);
    position: fixed;
    font-size: 22px;
    top: 60px;
    right: 24px;
    z-index: 10000;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(1, 56, 94, 0.12);
    box-shadow: 0 2px 8px rgba(1, 56, 94, 0.1);
    border-radius: 10px;
    padding: 0;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 9997;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 80px 24px 48px;
  }

  .mobile-nav-active .navmenu::-webkit-scrollbar {
    display: none;
  }

  .mobile-nav-active .navmenu ul {
    display: block;
    width: 100%;
    max-width: 420px;
    flex-shrink: 0;
    opacity: 1;
    animation: menuFadeIn 0.3s ease forwards;
  }

  /* Override the blanket rule above: keep dropdown sub-menus hidden until toggled.
     Must come AFTER the .mobile-nav-active rule (same specificity 0,2,1 — later wins).
     The .dropdown-active rule at 0,3,0 still beats this to show the open state. */
  .navmenu .dropdown ul {
    display: none;
  }
}

@media (max-width: 480px) {
  .navmenu a,
  .navmenu a:focus {
    font-size: 15px;
    padding: 14px 20px;
  }
}

@keyframes menuFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.footer .footer-top {
  padding-top: 50px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-right: 10px;
  transition: 0.3s;
}

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

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

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

.footer .footer-links ul i {
  padding-right: 3px;
  font-size: 13px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

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

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 6px 8px;
  position: relative;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: var(--background-color);
  transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: var(--background-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .copyright {
  padding: 25px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# 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);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

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

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

/*--------------------------------------------------------------
# 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: 76px;
  }
}

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

.section-title h2 {
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 700;
  padding: 8px 20px;
  line-height: 1;
  margin: 0;
  background: var(--glass-card);
  border: 1px solid var(--glass-border);
  display: inline-block;
  text-transform: uppercase;
  border-radius: 50px;
  color: var(--brand-orange);
  margin-bottom: 20px;
}

.section-title p {
  color: var(--heading-color);
  margin: 0;
  font-size: 38px;
  font-weight: 900;
  text-transform: uppercase;
  font-family: var(--heading-font);
  letter-spacing: -1px;
}

@media (max-width: 768px) {

  .section-title p {
    font-size: 24px;
  }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Hero Section
------------------------------*/
.hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--brand-blue);
  padding-top: 100px;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(1,56,94,0.97) 0%, rgba(1,28,50,0.88) 55%, rgba(242,105,36,0.22) 100%);
  z-index: 3;
  pointer-events: none;
}

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

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.14;
  filter: grayscale(25%);
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}

.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 80vw;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0.4;
}

.hero .container {
  position: relative;
  z-index: 10;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.epic-title {
  font-size: clamp(1.8rem, 4.5vw, 3.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 40px;
  text-transform: uppercase;
  color: #ffffff;
}

.epic-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: epic-reveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.epic-title .text-accent {
  animation-delay: 0.2s;
}

@keyframes epic-reveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.text-glow {
  color: #ffffff;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
}

.text-accent {
  color: var(--accent-color);
  text-shadow: 0 0 50px var(--accent-glow);
}

.hero-subtext {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: rgba(255, 255, 255, 0.72);
  opacity: 1;
  font-weight: 500;
  margin-bottom: 50px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.btn-epic {
  background: var(--accent-color) !important;
  color: #fff !important;
  padding: 18px 45px;
  border-radius: 12px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 1px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px var(--accent-glow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.btn-epic:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 20px 40px var(--accent-glow);
}

.btn-epic-outline {
  background: rgba(1, 56, 94, 0.05) !important;
  color: var(--brand-blue) !important;
  padding: 18px 45px;
  border-radius: 12px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 1px;
  border: 1px solid rgba(1, 56, 94, 0.2) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  transition: all 0.3s;
}

.btn-epic-outline:hover {
  background: rgba(1, 56, 94, 0.1) !important;
  border-color: var(--brand-blue) !important;
}

/* White variant for dark hero background */
.hero .btn-epic-outline {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

.hero .btn-epic-outline:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 20px 40px rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
  .hero-actions {
    flex-direction: column;
    padding: 0 20px;
  }

  .btn-epic,
  .btn-epic-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    font-size: 14px;
    letter-spacing: 0.5px;
    width: 100%;
  }
}

@media (max-width: 576px) {
  .btn-epic,
  .btn-epic-outline {
    padding: 12px 20px;
    font-size: 13px;
    border-radius: 8px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about h3 {
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 20px;
}

.about .fst-italic {
  color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 0 0 10px 30px;
  position: relative;
}

.about .content ul i {
  position: absolute;
  font-size: 20px;
  left: 0;
  top: -3px;
  color: var(--accent-color);
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .pulsating-play-btn {
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  background-color: #ffffff;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.stats .stats-item i {
  color: var(--accent-color);
  font-size: 42px;
  line-height: 0;
  margin-right: 20px;
}

.stats .stats-item span {
  color: var(--heading-color);
  font-size: 36px;
  display: block;
  font-weight: 600;
}

.stats .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
}

/*--------------------------------------------------------------
# Services Section - Modern Horizontal Card Layout
--------------------------------------------------------------*/
.services .service-item {
  background: var(--glass-card);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 20px rgba(1, 56, 94, 0.06);
}

.services .service-item:hover {
  transform: translateY(-8px);
  border-color: rgba(242, 105, 36, 0.4);
  box-shadow: 0 20px 40px rgba(1, 56, 94, 0.12);
}

.services .img {
  width: 100%;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.services .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.services .service-item:hover .img img {
  transform: scale(1.1) rotate(1deg);
}

.services .img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(1, 12, 20, 0.4) 100%);
}

.services .details {
  flex: 1;
  padding: 25px 15px 20px 15px;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
}

.services .service-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: skewX(-25deg);
  transition: 0.8s;
}

.services .service-item:hover::after {
  left: 150%;
}

.services .icon-wrapper {
  position: absolute;
  top: -20px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--brand-orange), #ff8c42);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  box-shadow: 0 5px 15px rgba(242, 105, 36, 0.4);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.services .service-item:hover .icon-wrapper {
  transform: translateY(-5px) rotate(5deg) scale(1.1);
  box-shadow: 0 15px 35px rgba(242, 105, 36, 0.6);
}

.services .details h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-blue);
  margin-bottom: 5px;
  transition: color 0.3s;
}

.services .service-item:hover .details h3 {
  color: var(--brand-orange);
}

.services .badge-custom {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(242, 105, 36, 0.15);
  border: 1px solid rgba(242, 105, 36, 0.3);
  border-radius: 20px;
  color: var(--brand-orange);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.services .details p {
  color: var(--default-color);
  opacity: 0.8;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.services .tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.services .tech-tag {
  padding: 3px 8px;
  background: rgba(1, 56, 94, 0.03);
  border: 1px solid rgba(1, 56, 94, 0.08);
  border-radius: 6px;
  color: var(--brand-blue);
  opacity: 0.7;
  font-size: 10px;
  font-weight: 600;
  transition: all 0.3s;
}

.services .tech-tag:hover {
  background: rgba(242, 105, 36, 0.2);
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

/* Responsive adjustments */
@media (max-width: 1199px) {
  .services .img {
    height: 150px;
  }
}

@media (max-width: 768px) {
  .services .service-item {
    margin-bottom: 20px;
  }

  .services .img {
    height: 200px;
  }

  .services .details {
    padding: 28px 18px 22px 18px;
  }

  .services .details h3 {
    font-size: 17px;
  }

  .services .details p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .services .img {
    height: 170px;
  }

  .services .details {
    padding: 24px 14px 18px 14px;
  }

  .services .icon-wrapper {
    width: 36px;
    height: 36px;
    font-size: 17px;
    top: -18px;
    right: 12px;
  }

  .services .tech-tag {
    font-size: 9px;
    padding: 3px 7px;
  }
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 20px 0;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 90%;
  transition: 0.3s;
  opacity: 0.5;
  filter: grayscale(100);
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features {
  padding-top: 100px;
  position: relative;
}

.features-nav-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

@media (max-width: 768px) {
  .features-nav-wrapper {
    display: block;
    width: 100%;
  }
}

.features .nav-tabs {
  border: 0;
  background: var(--glass-card);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 100px;
  padding: 6px;
  border: 1px solid var(--glass-border);
  display: inline-flex;
  z-index: 10;
}

.features .nav-item {
  margin: 0 2px;
}

.features .nav-link {
  border: 0;
  padding: 8px 18px;
  border-radius: 100px;
  color: rgba(1, 56, 94, 0.6);
  background: transparent;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.features .nav-link i {
  font-size: 14px;
  transition: all 0.4s ease;
}

.features .nav-link.active {
  background: var(--brand-orange);
  color: white;
  box-shadow: 0 10px 25px rgba(242, 105, 36, 0.4);
}

.features .tab-pane.active {
  animation: fadeInSlide 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-content-card {
  padding: 60px;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.03), transparent);
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}

.feature-content-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0.5;
}

.features .feature-img-wrapper img {
  border-radius: 30px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
  animation: float-img 6s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes float-img {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(1deg);
  }
}

.features h3 {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 25px;
  letter-spacing: -1.5px;
  color: var(--brand-blue);
}

.features p.lead-text {
  font-size: 1.15rem;
  color: var(--default-color);
  opacity: 0.85;
  line-height: 1.8;
}

.features .feature-list {
  list-style: none;
  padding: 0;
  margin: 35px 0;
}

.features .feature-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 22px;
  font-size: 1.05rem;
  color: var(--default-color);
  opacity: 0.75;
}

.features .feature-list li i {
  color: var(--brand-orange);
  background: rgba(242, 105, 36, 0.12);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.features .tab-pane ul li {
  padding-bottom: 10px;
}

.features .tab-pane ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.features .tab-pane p:last-child {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .feature-content-card {
    padding: 35px 30px;
    border-radius: 24px;
  }

  .features h3 {
    font-size: 26px;
    letter-spacing: -0.5px;
  }

  .features p.lead-text {
    font-size: 1rem;
  }
}

@media (max-width: 991px) {
  /* Stop float animation on smaller screens */
  .features .feature-img-wrapper img {
    animation: none;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    margin-bottom: 28px;
  }
}

@media (max-width: 768px) {
  /* Tab toggle: switch from pill row → 2×2 grid */
  .features-nav-wrapper {
    padding-bottom: 4px;
  }

  .features .nav-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-radius: 16px;
    padding: 8px;
    width: 100%;
  }

  .features .nav-item {
    margin: 0;
  }

  .features .nav-link {
    flex-direction: column;
    gap: 6px;
    padding: 14px 10px;
    border-radius: 12px;
    font-size: 10px;
    letter-spacing: 0.3px;
    width: 100%;
    white-space: nowrap;
  }

  .features .nav-link i {
    font-size: 20px;
  }

  .features .nav-link.active {
    box-shadow: 0 6px 16px rgba(242, 105, 36, 0.35);
  }

  /* Content card */
  .feature-content-card {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .features h3 {
    font-size: 22px;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
  }

  .features p.lead-text {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .features .feature-list {
    margin: 18px 0;
  }

  .features .feature-list li {
    gap: 12px;
    margin-bottom: 14px;
    font-size: 0.9rem;
  }

  .features .feature-list li i {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .features .nav-tabs {
    gap: 6px;
    padding: 6px;
  }

  .features .nav-link {
    padding: 12px 8px;
    font-size: 9px;
  }

  .features .nav-link i {
    font-size: 18px;
  }

  .feature-content-card {
    padding: 18px 14px;
    border-radius: 14px;
  }

  .features h3 {
    font-size: 19px;
  }
}

/*--------------------------------------------------------------
# Publications Section (Refined Bento)
--------------------------------------------------------------*/
.publications .bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}

.publications .publication-card {
  position: relative;
  background: var(--glass-card);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.publications .card-large {
  grid-column: span 7;
  grid-row: span 2;
}

.publications .card-medium {
  grid-column: span 5;
  grid-row: span 2;
}

.publications .card-small {
  grid-column: span 5;
  grid-row: span 2;
}

.publications .card-wide {
  grid-column: span 7;
  grid-row: span 2;
}

@media (max-width: 991px) {
  .publications .bento-grid {
    grid-auto-rows: auto;
  }

  .publications .card-large,
  .publications .card-medium,
  .publications .card-small,
  .publications .card-wide {
    grid-column: span 12;
    grid-row: auto;
    min-height: 250px;
  }
}

.publications .publication-card:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(242, 105, 36, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.publications .paper-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.publications .paper-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
  opacity: 0.9;
}

.publications .publication-card:hover .paper-preview img {
  transform: scale(1.1);
  opacity: 1;
}

.publications .paper-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(242, 105, 36, 0.9);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 10;
}

.publications .paper-details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  /* Deep dark background */
  backdrop-filter: blur(15px);
  /* Strong blur for text legibility */
  -webkit-backdrop-filter: blur(15px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 5;
  transition: all 0.3s ease;
}

.publications .title {
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-blue);
  margin-bottom: 6px;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.publications .description {
  font-size: 12px;
  color: var(--default-color);
  opacity: 0.8;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
}

.publications .card-small .description {
  display: none;
  /* Hide description in smallest cards for neatness */
}

.publications .paper-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.publications .citation-copy {
  font-size: 10px;
  color: rgba(1, 56, 94, 0.7);
  font-weight: 600;
}

.publications .view-paper-btn {
  width: 28px;
  height: 28px;
  background: var(--brand-orange);
  color: white;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s;
  position: relative;
  z-index: 10;
}

.publications .publication-card:hover .view-paper-btn {
  background: white;
  color: var(--brand-orange);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  padding: 80px 0;
  position: relative;
}

.testimonials:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.testimonials .testimonials-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.testimonials .container {
  position: relative;
  z-index: 3;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item-custom {
  padding: 30px;
  height: 100%;
}

.testimonials .testimonial-item-custom .author-box img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--accent-color);
  object-fit: cover;
}

.testimonials .testimonial-item-custom h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--brand-blue) !important;
}

.testimonials .testimonial-item-custom h4 {
  font-size: 13px;
  margin: 2px 0 0 0;
  color: var(--default-color) !important;
  opacity: 0.8 !important;
}

.testimonials .testimonial-item-custom p {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--default-color) !important;
  opacity: 0.8;
  margin: 0;
  position: relative;
}

.testimonials .testimonial-item-custom .quote-icon-left,
.testimonials .testimonial-item-custom .quote-icon-right {
  color: var(--accent-color);
  font-size: 20px;
  opacity: 0.5;
}

.testimonials .testimonial-grid {
  position: relative;
  z-index: 4;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 50%);
  opacity: 0.5;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--default-color);
  opacity: 1;
}

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}

/* Futuristic Portfolio Filters */
/* Futuristic Portfolio Filters */
.portfolio .isotope-layout {
  width: 100%;
  text-align: center;
  /* Crucial for centering the inline-flex filters */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 50px auto !important;
  /* Force center */
  list-style: none;
  text-align: center;
  background: var(--glass-card);
  padding: 10px 15px;
  border-radius: 100px;
  display: inline-flex !important;
  /* Force inline-flex */
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 5px;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 10;
  max-width: 90%;
  /* Ensure it doesnt overflow on mobile */
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.4s ease;
  border-radius: 100px;
  color: var(--default-color);
  opacity: 0.6;
}

.portfolio .portfolio-filters li:hover {
  color: var(--brand-blue);
  background: rgba(1, 56, 94, 0.05);
}

.portfolio .portfolio-filters li.filter-active {
  color: white;
  background: var(--brand-orange);
  box-shadow: 0 5px 15px var(--accent-glow);
}

@media (max-width: 768px) {
  .portfolio .portfolio-filters {
    display: flex !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
  .portfolio .portfolio-filters li {
    padding: 8px 16px;
    font-size: 11px;
  }
}

/* Cinematic Bento Portfolio */

/* Cinematic Standard Portfolio */
.portfolio .portfolio-item {
  padding: 20px;
  /* NUCLEAR FIX: Disable Isotope Absolute Positioning */
  position: static !important;
  transform: none !important;
  float: none !important;
  display: block;
  /* Flexbox child */
  width: auto;
  /* Let flex handle width (col-*) */
}

.portfolio .isotope-container {
  /* NUCLEAR FIX: Force Flexbox Grid behavior */
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  height: auto !important;
  /* Override Isotope fixed height */
  max-width: 1400px;
}

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  /* Slightly smoother */
  background: var(--glass-card);
  border: 1px solid var(--glass-border);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  height: 500px;
  /* MASSIVE height increase */
  width: 100%;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  /* Deeper shadow */
}

.portfolio .portfolio-content:hover {
  border-color: rgba(255, 255, 255, 0.4);
  /* Glow effect on border */
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  /* Massive shadow on hover */
}

/* Force standard height to override any JS or leftover classes */
.portfolio .card-tall {
  height: 650px !important;
  /* Even taller for tall cards */
}

.portfolio .card-wide {
  height: 500px !important;
}

@media (max-width: 991px) {

  .portfolio .portfolio-content,
  .portfolio .card-tall,
  .portfolio .card-wide {
    height: 450px !important;
  }
}

.portfolio .portfolio-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.portfolio .portfolio-content:hover img {
  transform: scale(1.15) rotate(2deg);
  /* Enhanced hover effect */
}

.portfolio .portfolio-info-cinematic {
  position: absolute;
  inset: 0;
  padding: 40px;
  background: linear-gradient(to top, rgba(1, 12, 20, 0.9) 0%, rgba(1, 12, 20, 0.3) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateY(20px);
}

.portfolio .portfolio-content:hover .portfolio-info-cinematic {
  opacity: 1;
  transform: translateY(0);
}

.portfolio .category-badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--brand-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 50px;
  margin-bottom: 15px;
  box-shadow: 0 5px 15px var(--accent-glow);
}

.portfolio .portfolio-info-cinematic h4 {
  font-size: 28px;
  /* Increased font size */
  font-weight: 800;
  color: var(--brand-blue);
  margin-bottom: 10px;
  transform: translateY(20px);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
}

.portfolio .portfolio-info-cinematic p {
  font-size: 16px;
  /* Increased readability */
  color: var(--default-color);
  opacity: 0.85;
  /* Increased contrast */
  margin-bottom: 25px;
  transform: translateY(20px);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
}

.portfolio .portfolio-content:hover .portfolio-info-cinematic h4,
.portfolio .portfolio-content:hover .portfolio-info-cinematic p {
  transform: translateY(0);
}

.portfolio .info-links {
  display: flex;
  gap: 15px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
}

.portfolio .portfolio-content:hover .info-links {
  opacity: 1;
  transform: translateY(0);
}

.portfolio .info-links a {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  transition: all 0.3s ease;
}

.portfolio .info-links a:hover {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  box-shadow: 0 0 20px var(--accent-glow);
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
/* Cinematic Team Section */
/* Layered Tech-Startup Team Style */
.team .member-cinematic {
  position: relative;
  padding-bottom: 30px;
  /* Space for the floating box overlap */
  border-radius: 0;
  overflow: visible;
  /* Allow box to overlap/float */
}

.team .pic-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  /* Slight rounding for the image */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  background: transparent;
  margin-bottom: 0;
}

.team .pic-wrapper img {
  width: 100%;
  transition: transform 0.5s ease;
  opacity: 1;
  filter: none !important;
}

.team .member-cinematic:hover .pic-wrapper img {
  transform: scale(1.05);
}

.team .scan-line {
  display: none !important;
}

.team .member-info-floating {
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  padding: 20px 25px;
  z-index: 10;
  background: #ffffff !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 4px;
  transform: translateY(0);
  transition: all 0.3s ease;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  text-align: left;

  /* Grid Layout for alignment */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 5px;
}

.team .member-cinematic:hover .member-info-floating {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.team .role-badge {
  display: none !important;
}

.team .member-info-floating h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
  margin-top: 5px;
  /* Pushed down slightly */
  color: #012970 !important;
  text-shadow: none;
  font-family: var(--heading-font);

  /* Grid positioning */
  grid-column: 1 / -1;
  grid-row: 1;
}

.team .member-info-floating p {
  font-size: 13px;
  color: #888888 !important;
  font-style: italic;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;

  /* Grid positioning & Truncation */
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.team .social-links-futuristic {
  display: flex !important;
  gap: 12px;
  justify-content: flex-end !important;
  margin-top: 0;
  padding-top: 0;
  border-top: none !important;
  z-index: 20;
  position: relative;

  /* Grid positioning */
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

.team .social-links-futuristic a {
  color: #aaaaaa !important;
  /* Light grey */
  font-size: 16px !important;
  transition: all 0.3s;
  background: transparent !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
}

.team .social-links-futuristic a:hover {
  color: var(--brand-orange) !important;
  transform: none;
  text-shadow: none;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 24px 0 30px 0;
}

.contact .info-item i {
  font-size: 20px;
  color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%);
}

.contact .info-item h3 {
  font-size: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  height: 100%;
  padding: 30px;
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

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

.portfolio-details .portfolio-info {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  background-color: var(--surface-color);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Portfolio Grid (Bento Style)
--------------------------------------------------------------*/
.portfolio-grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  gap: 20px;
  margin-top: 30px;
}

.portfolio-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--glass-card);
  border: 1px solid var(--glass-border);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  border-color: var(--accent-color);
}

.portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.portfolio-card:hover img {
  transform: scale(1.1);
}

/* Grid Spans */
.grid-span-2 {
  grid-column: span 2;
}

.grid-row-2 {
  grid-row: span 2;
}

/* Overlay Info */
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  opacity: 1;
  transition: all 0.3s;
}

.portfolio-overlay h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
  transform: translateY(0);
  transition: transform 0.4s;
}

.portfolio-overlay p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-bottom: 15px;
  transform: translateY(0);
  transition: transform 0.4s;
}

.portfolio-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.portfolio-tag {
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.portfolio-actions {
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease 0.1s;
}

.portfolio-card:hover .portfolio-actions {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  .portfolio-actions {
    opacity: 1;
    transform: translateY(0);
  }
}

.portfolio-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 15px;
  border-radius: 50px;
  background: var(--accent-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  white-space: nowrap;
}

.portfolio-btn i {
  font-size: 18px;
}

.portfolio-btn:hover {
  background: #fff;
  color: var(--accent-color);
  transform: scale(1.05);
}

.portfolio-btn.glightbox {
  padding: 0;
  width: 40px;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .portfolio-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .portfolio-overlay {
    padding: 20px;
  }

  .portfolio-overlay h4 {
    font-size: 1.15rem;
  }

  .portfolio-overlay p {
    font-size: 0.85rem;
    margin-bottom: 10px;
  }

  .portfolio-tags {
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
}




/*--------------------------------------------------------------
# Project Modals
--------------------------------------------------------------*/
.proj-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(1, 22, 39, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.proj-modal-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

.proj-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.96);
  width: min(900px, 92vw);
  max-height: 88vh;
  background: #fff;
  border-radius: 28px;
  z-index: 9001;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 40px 80px rgba(1, 22, 39, 0.35);
  display: flex;
  flex-direction: column;
}

.proj-modal.active {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.proj-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(1, 56, 94, 0.12);
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: 1rem;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.proj-modal-close:hover {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

.proj-modal-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  overflow-y: auto;
}

.proj-modal-img {
  position: relative;
  min-height: 300px;
}

.proj-modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proj-modal-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(1, 22, 39, 0.8) 0%, transparent 50%);
}

.proj-modal-img-tags {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.proj-modal-img-tags span {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.proj-modal-body {
  padding: 36px 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.proj-modal-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-color);
  margin-bottom: 12px;
}

.proj-modal-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-color);
  animation: pulse 2s infinite;
}

.proj-modal-body h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1.2;
  margin-bottom: 16px;
}

.proj-modal-body > p {
  color: var(--default-color);
  opacity: 0.8;
  line-height: 1.75;
  font-size: 0.95rem;
  margin-bottom: 24px;
  flex: 1;
}

.proj-modal-tech-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-blue);
  opacity: 0.5;
  margin-bottom: 10px;
}

.proj-modal-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.proj-modal-tech span {
  padding: 5px 12px;
  background: rgba(1, 56, 94, 0.05);
  border: 1px solid rgba(1, 56, 94, 0.1);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-blue);
}

.proj-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(1, 56, 94, 0.07);
}

.proj-modal-link {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border: 1px solid rgba(1, 56, 94, 0.12);
  background: rgba(1, 56, 94, 0.04);
  color: var(--brand-blue);
  transition: all 0.25s ease;
  text-decoration: none;
}

.proj-modal-link:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(242, 105, 36, 0.3);
}

.proj-modal-link.github:hover  { background: #24292e; border-color: #24292e; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.proj-modal-link.linkedin:hover { background: #0077b5; border-color: #0077b5; box-shadow: 0 6px 18px rgba(0,119,181,0.3); }
.proj-modal-link.twitter:hover  { background: #000; border-color: #000; box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.proj-modal-link.paper:hover    { background: var(--brand-blue); border-color: var(--brand-blue); box-shadow: 0 6px 18px rgba(1,56,94,0.3); }

@media (max-width: 700px) {
  .proj-modal-inner {
    grid-template-columns: 1fr;
  }

  .proj-modal-img {
    min-height: 220px;
    max-height: 220px;
  }

  .proj-modal-body {
    padding: 24px 20px;
  }

  .proj-modal-body h2 {
    font-size: 1.3rem;
  }
}

/*--------------------------------------------------------------
# Contact Section: SLEEK & MINIMAL (Enhanced)
--------------------------------------------------------------*/
#contact {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: var(--background-color) !important;
  z-index: 1;
}

/* Cinematic Background Effects */
#contact::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(138, 43, 226, 0.15) 0%, transparent 70%);
  filter: blur(80px);
  animation: ambientPulse 8s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

#contact::after {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(242, 105, 36, 0.12) 0%, transparent 70%);
  filter: blur(80px);
  animation: ambientPulse 8s ease-in-out infinite reverse;
  z-index: 0;
  pointer-events: none;
}

@keyframes ambientPulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.contact-ashira-wrapper {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

/* Left Column - Identity */
.contact-identity {
  animation: fadeInLeft 0.8s ease-out both;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.identity-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: rgba(1, 56, 94, 0.03);
  border: 1px solid rgba(1, 56, 94, 0.1);
  border-radius: 50px;
  margin-bottom: 30px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand-blue);
  opacity: 0.8;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-color);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.identity-headline {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--brand-blue);
}

.identity-headline .highlight {
  color: var(--accent-color);
}

.identity-subtext {
  font-size: 1.1rem;
  color: var(--default-color);
  opacity: 0.7;
  line-height: 1.6;
  margin-bottom: 40px;
}

.social-links-ashira {
  display: flex;
  gap: 15px;
}

.social-link-btn {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(1, 56, 94, 0.05);
  border: 1px solid rgba(1, 56, 94, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  font-size: 1.15rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.social-link-btn:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(242, 105, 36, 0.35);
  border-radius: 14px;
}

/* Right Column - Form */
.contact-form-ashira {
  background: #fff;
  border: 1px solid rgba(1, 56, 94, 0.08);
  border-radius: 28px;
  padding: 48px 44px 44px;
  box-shadow:
    0 4px 6px rgba(1, 56, 94, 0.04),
    0 20px 60px rgba(1, 56, 94, 0.09);
  animation: fadeInRight 0.8s ease-out 0.2s both;
}

.contact-form-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(1, 56, 94, 0.07);
}

.contact-form-header h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--brand-blue);
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}

.contact-form-header p {
  font-size: 0.85rem;
  color: var(--default-color);
  opacity: 0.55;
  margin: 0;
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Boxed floating-label fields — front-page form (hardcoded or Drupal-rendered).
   The Drupal contact form at /contact/disal_contact uses .drupal-contact-card
   styles in pages.css instead, so these rules must not leak there. */
#disal-contact-form .form-field-ashira,
.disal-front-contact-form .form-field-ashira {
  position: relative;
  margin-bottom: 20px;
}

#disal-contact-form .form-field-ashira input,
#disal-contact-form .form-field-ashira textarea,
.disal-front-contact-form .form-field-ashira input,
.disal-front-contact-form .form-field-ashira textarea {
  width: 100%;
  padding: 22px 18px 8px;
  background: rgba(1, 56, 94, 0.03);
  border: 1.5px solid rgba(1, 56, 94, 0.12);
  border-radius: 12px;
  color: var(--brand-blue);
  font-size: 0.95rem;
  font-family: var(--default-font);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  display: block;
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
}

#disal-contact-form .form-field-ashira input:focus,
#disal-contact-form .form-field-ashira textarea:focus,
.disal-front-contact-form .form-field-ashira input:focus,
.disal-front-contact-form .form-field-ashira textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(242, 105, 36, 0.10);
}

#disal-contact-form .form-field-ashira label,
.disal-front-contact-form .form-field-ashira label {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--default-color);
  opacity: 0.45;
  font-size: 0.95rem;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 6;
}

#disal-contact-form .form-field-ashira:has(textarea) label,
.disal-front-contact-form .form-field-ashira:has(textarea) label {
  top: 18px;
  transform: none;
}

#disal-contact-form .form-field-ashira input:focus + label,
#disal-contact-form .form-field-ashira input:not(:placeholder-shown) + label,
#disal-contact-form .form-field-ashira textarea:focus + label,
#disal-contact-form .form-field-ashira textarea:not(:placeholder-shown) + label,
.disal-front-contact-form .form-field-ashira input:focus + label,
.disal-front-contact-form .form-field-ashira input:not(:placeholder-shown) + label,
.disal-front-contact-form .form-field-ashira input:read-only + label,
.disal-front-contact-form .form-field-ashira.is-focused label,
.disal-front-contact-form .form-field-ashira.has-value label {
  top: 8px;
  transform: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--accent-color);
  opacity: 1;
  text-transform: uppercase;
}

/* Hide the Drupal submit input — our styled <button> handles submission */
.disal-front-contact-form .disal-submit-hidden {
  display: none !important;
}

/* Readonly fields for logged-in users — visually locked but legible */
.disal-front-contact-form .form-field-ashira input.contact-field-readonly {
  background: rgba(1, 56, 94, 0.04) !important;
  border-color: rgba(1, 56, 94, 0.08) !important;
  cursor: default;
  color: var(--brand-blue);
  opacity: 0.8;
}
.disal-front-contact-form .form-field-ashira input.contact-field-readonly:focus {
  box-shadow: none !important;
  border-color: rgba(1, 56, 94, 0.08) !important;
}

/* Contact form send button — pill, no icon */
.btn-ashira-pill {
  width: 100%;
  padding: 16px 32px;
  background: var(--accent-color);
  border: none;
  border-radius: 50px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 18px rgba(242, 105, 36, 0.30);
  margin-top: 8px;
  display: block;
}
.btn-ashira-pill:hover {
  background: #ff7b39;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(242, 105, 36, 0.45);
}
.btn-ashira-pill:active {
  transform: translateY(0);
}

.form-field-ashira textarea {
  resize: vertical;
  min-height: 110px;
  padding-top: 26px;
}

/* Submit button */
.btn-ashira {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--accent-color) 0%, #ff7b39 100%);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 8px;
  box-shadow: 0 4px 18px rgba(242, 105, 36, 0.30);
  position: relative;
  overflow: hidden;
}

.btn-ashira::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.btn-ashira:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(242, 105, 36, 0.45);
}

.btn-ashira:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(242, 105, 36, 0.3);
}

.btn-ashira i {
  transition: transform 0.3s;
  font-size: 1.1rem;
}

.btn-ashira:hover i {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .contact-form-ashira { padding: 32px 28px; }
  .btn-ashira { padding: 15px 20px; }
}

@media (max-width: 576px) {
  .contact-form-ashira { padding: 28px 20px; }
  .btn-ashira { padding: 14px 18px; font-size: 0.88rem; }
}


/* Success pill confirmation */
.contact-success-pill {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(1, 56, 94, 0.04);
  border: 1px solid rgba(46, 204, 113, 0.35);
  border-radius: 20px;
  padding: 28px 32px;
  animation: pillFadeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.contact-success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(46, 204, 113, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #2ecc71;
  flex-shrink: 0;
}
.contact-success-pill strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand-blue);
  margin-bottom: 4px;
}
.contact-success-pill span {
  font-size: 0.9rem;
  color: var(--default-color);
  opacity: 0.75;
  line-height: 1.5;
}
@keyframes pillFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Inline error message */
.contact-form-error {
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.25);
  border-radius: 10px;
  color: #e74c3c;
  font-size: 0.88rem;
  padding: 10px 16px;
  margin-bottom: 16px;
}

@media (max-width: 992px) {
  .contact-ashira-wrapper {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .identity-headline {
    font-size: 2.2rem;
  }

  .contact-form-ashira {
    padding: 35px;
  }

  #contact {
    padding: 80px 0;
  }
}

@media (max-width: 768px) {
  #contact {
    padding: 60px 0;
  }

  .contact-ashira-wrapper {
    gap: 36px;
  }

  .identity-headline {
    font-size: 1.9rem;
  }

  .identity-subtext {
    font-size: 1rem;
    margin-bottom: 28px;
  }

  .identity-badge {
    font-size: 0.78rem;
    padding: 6px 16px;
    margin-bottom: 20px;
  }

  .contact-form-ashira {
    padding: 28px 22px;
    border-radius: 18px;
  }

  .social-link-btn {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
  }

  .social-links-ashira {
    gap: 10px;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  #contact {
    padding: 48px 0;
  }

  .identity-headline {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .contact-form-ashira {
    padding: 22px 16px;
    border-radius: 14px;
  }

  .social-link-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}


/*--------------------------------------------------------------
# Footer: Premium Design
--------------------------------------------------------------*/
#footer {
  background: linear-gradient(135deg, #0a0e27 0%, #1a1d35 100%);
  position: relative;
  overflow: hidden;
  padding: 80px 0 0;
}

#footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 105, 36, 0.5), transparent);
}

.footer-top {
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-about .logo {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  margin-bottom: 20px;
  display: inline-block;
  transition: all 0.3s;
}

.footer-about .logo:hover {
  color: var(--accent-color);
  transform: translateX(5px);
}

.footer-about p {
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.8;
  margin-bottom: 25px;
}

.footer-contact p {
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
  font-size: 0.95rem;
}


/*--------------------------------------------------------------
# Footer: NEAT & CONTEXTUAL
--------------------------------------------------------------*/
#footer {
  background: #f8f9fa;
  position: relative;
  padding: 80px 0 0;
  border-top: 1px solid rgba(1, 56, 94, 0.1);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 50px;
  margin-bottom: 60px;
}

.footer-info .footer-logo {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: 1px;
  margin-bottom: 20px;
  display: block;
}

.footer-info p {
  color: var(--default-color);
  opacity: 0.8;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 320px;
}

.footer-social-simple {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}

.footer-social-simple a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(1, 56, 94, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  font-size: 1rem;
  transition: all 0.3s;
}

.footer-social-simple a:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  transform: translateY(-3px);
}

.footer-column-simple h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 25px;
}

.footer-column-simple ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column-simple ul li {
  margin-bottom: 12px;
}

.footer-column-simple ul li a {
  color: var(--default-color);
  opacity: 0.7;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.footer-column-simple ul li a:hover {
  color: var(--accent-color);
  padding-left: 5px;
}

.footer-newsletter-simple p {
  color: var(--default-color);
  opacity: 0.7;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.newsletter-form-simple {
  display: flex;
  background: #ffffff;
  border: 1px solid rgba(1, 56, 94, 0.1);
  border-radius: 12px;
  padding: 5px;
  transition: all 0.3s;
}

.newsletter-form-simple:focus-within {
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.05);
}

.newsletter-form-simple input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 15px;
  color: var(--default-color);
  font-size: 0.9rem;
}

.newsletter-form-simple input:focus {
  outline: none;
}

.newsletter-form-simple button {
  background: var(--accent-color);
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.newsletter-form-simple button:hover {
  background: #ff8c42;
}

.footer-bottom-simple {
  padding: 30px 0;
  background: rgba(1, 56, 94, 0.03);
  border-top: 1px solid rgba(1, 56, 94, 0.05);
}

.footer-bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom-flex p {
  color: var(--default-color);
  opacity: 0.5;
  font-size: 0.85rem;
  margin: 0;
}

.footer-bottom-flex .university {
  color: var(--accent-color);
  font-weight: 600;
}

.footer-legal-links {
  display: flex;
  gap: 25px;
}

.footer-legal-links a {
  color: var(--default-color);
  opacity: 0.5;
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.3s;
}

.footer-legal-links a:hover {
  color: #fff;
}

@media (max-width: 1200px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-bottom-flex {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Team: Continuous Scroll Easing
--------------------------------------------------------------*/
#team .swiper-wrapper {
  transition-timing-function: linear !important;
}

#team .swiper-slide {
  height: auto;
}


/*--------------------------------------------------------------
# Footer: Blurred Brand Background
--------------------------------------------------------------*/
#footer {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

#footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../img/disal-horizontal.png');
  background-size: cover;
  background-position: center;
  filter: blur(50px) brightness(0.2);
  transform: scale(1.1);
  z-index: -1;
  opacity: 0.6;
}

/* .footer-logo img — no invert needed in light mode */


/*--------------------------------------------------------------
# Testimonials: Full-Width Continuous Scroll
--------------------------------------------------------------*/
.full-width-carousel {
  padding: 80px 0 !important;
  overflow: hidden;
}

.testimonial-marquee {
  transition-timing-function: linear !important;
}

.testimonial-item-custom-wide {
  padding: 40px;
  margin: 0 15px;
  height: 100%;
  min-width: 350px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.full-width-carousel .swiper-slide {
  width: auto !important;
}

@media (max-width: 768px) {
  .testimonial-item-custom-wide {
    min-width: 280px;
    padding: 25px;
  }
}

/*--------------------------------------------------------------
# About Section: CINEMATIC & WOW
--------------------------------------------------------------*/
.about-cinematic {
  background: #f8f9fa;
  padding: 120px 0;
  position: relative;
  z-index: 1;
}

.about-backdrop-text {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15rem;
  font-weight: 900;
  color: rgba(1, 56, 94, 0.02);
  text-transform: uppercase;
  letter-spacing: 50px;
  pointer-events: none;
  z-index: -1;
  white-space: nowrap;
}

.data-stream-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(242, 105, 36, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 105, 36, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
  opacity: 0.5;
  z-index: -1;
}

.about-story-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(242, 105, 36, 0.1);
  border: 1px solid rgba(242, 105, 36, 0.2);
  border-radius: 50px;
  color: var(--accent-color);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 25px;
}

.about-cinematic h2 {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1.1;
  margin-bottom: 30px;
}

.about-cinematic .lead-text {
  font-size: 1.25rem;
  color: var(--default-color);
  opacity: 0.9;
  line-height: 1.8;
  margin-bottom: 35px;
}

/* Pillar Cards Styling */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 80px;
}

.pillar-card {
  background: #ffffff;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(1, 56, 94, 0.08);
  border-radius: 30px;
  padding: 50px 40px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(1, 56, 94, 0.05);
}

.pillar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(242, 105, 36, 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
}

.pillar-card:hover {
  transform: translateY(-15px);
  background: #ffffff;
  border-color: rgba(242, 105, 36, 0.3);
  box-shadow: 0 30px 60px rgba(1, 56, 94, 0.15);
}

.pillar-card:hover::before {
  opacity: 1;
}

.pillar-icon-box {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(242, 105, 36, 1), #ff8c42);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: 35px;
  box-shadow: 0 15px 35px rgba(242, 105, 36, 0.4);
  transition: transform 0.4s;
}

.pillar-card:hover .pillar-icon-box {
  transform: rotate(10deg) scale(1.1);
}

.pillar-card h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-blue);
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.pillar-card p {
  color: var(--default-color);
  opacity: 0.8;
  line-height: 1.7;
  font-size: 1rem;
  margin: 0;
}

/* Cinematic Photos */
.about-photos-cinematic {
  position: relative;
  height: 600px;
}

.photo-large {
  width: 80%;
  height: 80%;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
}

.photo-small {
  width: 50%;
  height: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 30px;
  overflow: hidden;
  border: 10px solid #f8f9fa;
  box-shadow: 0 30px 60px rgba(1, 56, 94, 0.2);
}

.photo-scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent-color);
  box-shadow: 0 0 15px var(--accent-color);
  animation: scanVertical 4s linear infinite;
  z-index: 2;
}

@keyframes scanVertical {
  0% {
    top: 0%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

@media (max-width: 992px) {
  .pillar-grid {
    grid-template-columns: 1fr;
  }

  .about-backdrop-text {
    font-size: 8rem;
    letter-spacing: 20px;
  }

  .about-cinematic h2 {
    font-size: 2.5rem;
  }

  .about-photos-cinematic {
    height: 400px;
    margin-top: 50px;
  }
}/* Toolbar: push header down */
body.toolbar-fixed .header.fixed-top {
  top: 39px;
  transition: top 0.3s ease;
}

body.toolbar-horizontal.toolbar-tray-open .header.fixed-top {
  top: 79px;
}

body.toolbar-vertical.toolbar-tray-open .header.fixed-top {
  top: 39px;
}

/* Push content down to clear toolbar + fixed header */
body.toolbar-fixed .content-container {
  padding-top: 139px;
}

body.toolbar-horizontal.toolbar-tray-open .content-container {
  padding-top: 179px;
}

/* Messages inside the hero float as an overlay — no layout impact */
.hero-messages-overlay {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0 1rem;
}
body.toolbar-fixed .hero-messages-overlay { top: 120px; }
body.toolbar-horizontal.toolbar-tray-open .hero-messages-overlay { top: 160px; }

/* Admin tabs (local tasks) container — centered pill bar below fixed navbar */
.admin-tabs-container {
  padding-top: 100px;
  padding-bottom: 0;
  text-align: center;
}

body.toolbar-fixed .admin-tabs-container {
  padding-top: 139px;
}

body.toolbar-horizontal.toolbar-tray-open .admin-tabs-container {
  padding-top: 179px;
}

/* When admin tabs are present, content container needs less top padding */
.admin-tabs-container + .content-container {
  padding-top: 20px;
}

body.toolbar-fixed .admin-tabs-container + .content-container {
  padding-top: 20px;
}

body.toolbar-horizontal.toolbar-tray-open .admin-tabs-container + .content-container {
  padding-top: 20px;
}

/* Hide block title */
.admin-tabs-container .block-local-tasks-block h2 { display: none; }

/* Center the tabs nav */
.admin-tabs-container .tabs {
  display: inline-flex;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(1, 56, 94, 0.1);
  border-radius: 100px;
  padding: 5px 6px;
  gap: 4px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(1, 56, 94, 0.08);
}

.admin-tabs-container .tabs ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.admin-tabs-container .tabs ul li {
  margin: 0;
  padding: 0;
}

.admin-tabs-container .tabs ul li a,
.admin-tabs-container .tabs ul li a:visited {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--brand-blue);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.admin-tabs-container .tabs ul li a:hover {
  background: rgba(1, 56, 94, 0.07);
  color: var(--brand-blue);
}

.admin-tabs-container .tabs ul li.is-active a,
.admin-tabs-container .tabs ul li a.is-active {
  background: var(--brand-blue);
  color: #fff;
}

/* Delete tab — red accent */
.admin-tabs-container .tabs ul li a[href*="delete"] {
  color: #c0392b;
}

.admin-tabs-container .tabs ul li a[href*="delete"]:hover {
  background: rgba(192, 57, 43, 0.08);
}

/* =============================================
   NODE PREVIEW — lives inside the hero banner (JS moves it there)
   ============================================= */

/* Hidden by default — Drupal behavior moves it into the hero, CSS override below shows it */
.node-preview-container {
  display: none !important;
}

/* Shown once JS places it inside a hero — position: relative so it scrolls with the page */
.research-detail-hero > .node-preview-container,
.detail-hero > .node-preview-container,
.alumni-hero > .node-preview-container {
  display: block !important;
  position: relative !important;
  width: auto !important;
  z-index: 10;
  padding: 20px 24px 0;
  text-align: center;
  background: transparent;
}

/* Inside teaser preview wrapper */
.teaser-preview-wrapper > .node-preview-container {
  display: block !important;
  position: relative !important;
  width: auto !important;
  z-index: 10;
  padding: 100px 24px 30px;
  text-align: center;
  background: transparent;
}
body.toolbar-fixed .teaser-preview-wrapper > .node-preview-container { padding-top: 120px; }
body.toolbar-horizontal.toolbar-tray-open .teaser-preview-wrapper > .node-preview-container { padding-top: 150px; }

/* Cap the featured card width so it stays card-sized when centred alone */
.teaser-preview-wrapper .col-xl-4 { max-width: 420px; }

/* Fallback for pages without a hero (JS adds .preview-no-hero) */
.node-preview-container.preview-no-hero {
  display: block !important;
  padding: 12px 24px;
  margin-top: 65px;
  text-align: center;
  background: transparent;
}
body.toolbar-fixed .node-preview-container.preview-no-hero { margin-top: 104px; }
body.toolbar-horizontal.toolbar-tray-open .node-preview-container.preview-no-hero { margin-top: 144px; }

/* ── Preview bar container (rounded rectangle, column) ── */
.node-preview-container form {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: rgba(1, 56, 94, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(1, 56, 94, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  min-width: 200px;
}

/* View-mode form item (label + select grouped together) */
.node-preview-container .form-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* "View mode:" label */
.node-preview-container,
.node-preview-container label,
.node-preview-container .form-item label {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin: 0;
}

/* View mode select */
.node-preview-container .form-select,
.node-preview-container select {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  color: #fff;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  flex: 1;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: menulist;
  transition: background 0.2s;
}

.node-preview-container .form-select:hover,
.node-preview-container select:hover {
  background: rgba(255, 255, 255, 0.18);
}

.node-preview-container .form-select option,
.node-preview-container select option {
  background: var(--brand-blue);
  color: #fff;
}

/* "Back to editing" — accent-orange pill button on the right */
.node-preview-container .node-preview-backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #fff;
  color: var(--brand-blue);
  text-decoration: none;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.node-preview-container .node-preview-backlink:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* Switch button — hidden; select auto-submits via JS */
.node-preview-container .button,
.node-preview-container .form-submit {
  display: none;
}

/*--------------------------------------------------------------
# Responsive Improvements
--------------------------------------------------------------*/

/* Admin toolbar — below Drupal's standard breakpoint (~960px), the JS does NOT add
   toolbar-fixed to the body (isFixed is only true when toolbar.standard matches).
   Instead the body gets toolbar-vertical. We must push the header down ourselves. */
@media (max-width: 959px) {
  body.toolbar-vertical .header.fixed-top {
    top: 39px;
  }

  body.toolbar-vertical .content-container {
    padding-top: 139px;
  }

  body.toolbar-vertical .admin-tabs-container {
    padding-top: 139px;
  }

  /* On mobile the tray opens as a left sidebar — header stays at its toolbar-bar offset */
  body.toolbar-vertical.toolbar-tray-open .header.fixed-top {
    top: 39px;
  }
}

/* Mobile nav overlay — Drupal admin toolbar/tray must sit above the overlay.
   The toolbar bar is at z-index 502 by default; raise it above the overlay (9997)
   so the vertical tray (sidebar) and top bar are never hidden behind the mobile nav.
   The hamburger close button is repositioned below the toolbar bar so it stays reachable. */
.toolbar .toolbar-bar,
.toolbar .toolbar-tray,
#toolbar-bar {
  z-index: 10001 !important;
}

/* Keep the close button below the 39px admin bar so it isn't hidden behind it */
body.toolbar-fixed .mobile-nav-active .mobile-nav-toggle,
body.toolbar-vertical .mobile-nav-active .mobile-nav-toggle {
  top: 99px;
}

body.toolbar-horizontal.toolbar-tray-open .mobile-nav-active .mobile-nav-toggle,
body.toolbar-vertical.toolbar-tray-open .mobile-nav-active .mobile-nav-toggle {
  top: 139px;
}

/* Small phones — header is slightly shorter (~80px instead of ~100px) so reduce offsets */
@media (max-width: 576px) {
  .admin-tabs-container {
    padding-top: 80px;
  }

  body.toolbar-vertical .content-container {
    padding-top: 119px;
  }

  body.toolbar-vertical .admin-tabs-container {
    padding-top: 119px;
  }

  body.toolbar-vertical.toolbar-tray-open .content-container {
    padding-top: 159px;
  }

  body.toolbar-vertical.toolbar-tray-open .admin-tabs-container {
    padding-top: 159px;
  }

  /* Admin tabs pill bar — allow horizontal scroll instead of clipping */
  .admin-tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 12px;
    padding-right: 12px;
  }

  .admin-tabs-container .tabs {
    max-width: 100%;
  }

  /* Tighten tab link padding on phones */
  .admin-tabs-container .tabs ul li a,
  .admin-tabs-container .tabs ul li a:visited {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}

/* Glow Orbs - scale down on mobile to avoid layout overflow */
@media (max-width: 768px) {
  .glow-orb {
    width: 200px;
    height: 200px;
  }

  .glow-orb-2 {
    width: 250px;
    height: 250px;
  }
}

/* Hero Buttons - compact on small phones */
@media (max-width: 576px) {
  .btn-epic,
  .btn-epic-outline {
    padding: 14px 28px;
    font-size: 14px;
  }
}

/* Services - better mobile card layout */
@media (max-width: 576px) {
  .services .img {
    height: 200px;
  }

  .services .details {
    padding: 30px 15px 20px 15px;
  }
}

/* Publications Bento Grid - tighter on tablet */
@media (max-width: 768px) {
  .publications .card-large,
  .publications .card-medium,
  .publications .card-small,
  .publications .card-wide {
    min-height: 220px;
  }

  .publications .bento-grid {
    gap: 12px;
  }
}

/* Portfolio filter bar - condensed on small phones */
@media (max-width: 576px) {
  .portfolio .portfolio-filters li {
    padding: 8px 10px;
    font-size: 10px;
  }
}

/* Portfolio Card Heights - tablet */
@media (max-width: 768px) {
  .portfolio .portfolio-content,
  .portfolio .card-tall,
  .portfolio .card-wide {
    height: 350px !important;
  }
}

/* Portfolio Card Heights - phone */
@media (max-width: 576px) {
  .portfolio .portfolio-content,
  .portfolio .card-tall,
  .portfolio .card-wide {
    height: 280px !important;
  }
}

/* Portfolio Bento Grid - 2 columns on tablet */
@media (max-width: 768px) {
  .portfolio-grid-container {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
}

/* Portfolio Bento Grid - 1 column on phone, disable spans */
@media (max-width: 576px) {
  .portfolio-grid-container {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .grid-span-2 {
    grid-column: span 1;
  }
}

/* Navigation - enforce minimum 44px touch target on mobile */
@media (max-width: 1199px) {
  .navmenu a,
  .navmenu a:focus {
    min-height: 44px;
  }
}

/* Contact Section - readable headline on tablet */
@media (max-width: 768px) {
  .identity-headline {
    font-size: 1.8rem;
  }

  .contact-form-ashira {
    padding: 25px;
  }
}

/* Contact form - tighter on small phones */
@media (max-width: 576px) {
  .contact-form-ashira {
    padding: 20px 15px;
  }
}

/* Footer Grid - tighter gap on tablet (before 1-col at 768px) */
@media (max-width: 992px) {
  .footer-inner {
    gap: 30px;
  }
}

/* Contact section - social links and subtext on small phones */
@media (max-width: 576px) {
  .social-link-btn {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .identity-subtext {
    font-size: 0.95rem;
    margin-bottom: 25px;
  }

  #contact {
    padding: 60px 0;
  }
}

/* Contact section - reduce grid gap on narrow tablet/large phone */
@media (max-width: 768px) {
  .contact-ashira-wrapper {
    gap: 40px;
  }
}

/*--------------------------------------------------------------
# Comprehensive Mobile Responsiveness Fixes
--------------------------------------------------------------*/

/* Prevent horizontal scroll on all pages */
html, body {
  overflow-x: hidden;
}

/* Page Title - scale down on mobile */
@media (max-width: 768px) {
  .page-title h1 {
    font-size: 28px;
  }

  .page-title {
    padding: 130px 0 60px;
  }
}

@media (max-width: 576px) {
  .page-title h1 {
    font-size: 22px;
  }

  .page-title {
    padding: 110px 0 50px;
  }
}

/* Features tab nav - horizontally scrollable on small screens */
@media (max-width: 768px) {
  .features-nav-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding: 0 15px;
    scrollbar-width: none;
  }

  .features-nav-wrapper::-webkit-scrollbar {
    display: none;
  }

  .features .nav-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* Features content card - reduce padding on tablet and phone */
@media (max-width: 992px) {
  .feature-content-card {
    padding: 40px;
    border-radius: 28px;
  }
}

@media (max-width: 768px) {
  .feature-content-card {
    padding: 25px 20px;
    border-radius: 20px;
  }

  .features h3 {
    font-size: 26px;
    letter-spacing: -0.5px;
  }

  .features {
    padding-top: 60px;
  }
}

@media (max-width: 576px) {
  .feature-content-card {
    padding: 20px 15px;
  }

  .features h3 {
    font-size: 22px;
  }
}

/* About Cinematic Section - scale on tablet and phone */
@media (max-width: 992px) {
  .about-cinematic {
    padding: 80px 0;
  }
}

@media (max-width: 768px) {
  .about-cinematic {
    padding: 60px 0;
  }

  .about-cinematic h2 {
    font-size: 2rem;
  }

  /* Hide oversized backdrop text that causes overflow on mobile */
  .about-backdrop-text {
    display: none;
  }

  .about-photos-cinematic {
    height: 300px;
    margin-top: 40px;
  }

  .photo-small {
    width: 55%;
    height: 55%;
  }
}

@media (max-width: 576px) {
  .about-cinematic {
    padding: 50px 0;
  }

  .about-cinematic h2 {
    font-size: 1.75rem;
  }

  .about-photos-cinematic {
    height: 240px;
    margin-top: 30px;
  }

  .pillar-grid {
    gap: 15px;
    margin-top: 40px;
  }

  .pillar-card {
    padding: 30px 20px;
    border-radius: 20px;
  }

  .pillar-card h4 {
    font-size: 1.2rem;
    margin-bottom: 12px;
  }

  .pillar-icon-box {
    width: 60px;
    height: 60px;
    font-size: 1.6rem;
    border-radius: 16px;
    margin-bottom: 20px;
  }
}

/* Portfolio overlay - always visible on touch devices (no hover available) */
@media (hover: none) {
  .portfolio .portfolio-info-cinematic {
    opacity: 1;
    transform: translateY(0);
    background: linear-gradient(to top, rgba(1, 12, 20, 0.92) 0%, rgba(1, 12, 20, 0.4) 60%, transparent 100%);
  }

  .portfolio .portfolio-info-cinematic h4,
  .portfolio .portfolio-info-cinematic p {
    transform: translateY(0);
  }
}

/* Section top link - show text label on touch (no hover) */
@media (hover: none) {
  .section-top-link .link-text {
    opacity: 1;
    max-width: 100px;
    margin-left: 5px;
  }

  .section-top-link {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    padding-right: 18px;
  }

  /* Disable sticky glass-panel transform on touch to avoid stuck states */
  .glass-panel:hover {
    transform: none;
  }
}

/* Section title - tighter on small phones */
@media (max-width: 576px) {
  .section-title p {
    font-size: 20px;
    letter-spacing: -0.5px;
  }

  .section-title {
    padding-bottom: 40px;
  }
}

/* Stats section - compact on phones */
@media (max-width: 576px) {
  .stats .stats-item {
    padding: 20px 15px;
  }

  .stats .stats-item span {
    font-size: 28px;
  }

  .stats .stats-item i {
    font-size: 32px;
    margin-right: 12px;
  }
}

/* Testimonial carousel - smaller cards on phones */
@media (max-width: 576px) {
  .testimonial-item-custom-wide {
    min-width: 240px;
    padding: 20px;
  }
}

/* Event content padding - compact on phones */
@media (max-width: 576px) {
  .event-card-page .event-flyer-page {
    min-height: 180px;
  }

  .event-card-page .event-content-page {
    padding: 20px 15px;
  }

  .event-title-page {
    font-size: 1.2rem;
  }
}

/* Research card - reduce border-radius on phone */
@media (max-width: 576px) {
  .research-card-premium {
    border-radius: 20px;
  }
}

/* Tech pill - compact on phones */
@media (max-width: 576px) {
  .tech-pill {
    font-size: 0.7rem;
    padding: 5px 10px;
    margin-right: 6px;
    margin-bottom: 6px;
  }
}

/* Section-title-modern - scale on phones */
@media (max-width: 576px) {
  .section-title-modern {
    font-size: 1.5rem;
  }
}

/* ── Gin admin theme — front-end neutralisation ──────────────────────
   Gin's node_preview.css uses doubled-class specificity (.node-preview-
   container.node-preview-container) to force position:sticky, a fixed
   height, and all:revert on children. We match that specificity here so
   our design wins without needing !important on every property.
   ------------------------------------------------------------------ */

/* Override Gin's fixed height (causes content to spill) and sticky */
.node-preview-container.node-preview-container {
  height: auto !important;
  position: relative !important;
  inset-block-start: auto !important;
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
  width: fit-content !important;
}

/* Undo Gin's `all: revert` on the backlink — restore our design */
.node-preview-container.node-preview-container .node-preview-backlink {
  all: unset;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #fff !important;
  color: var(--brand-blue) !important;
  text-decoration: none !important;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease;
}
.node-preview-container.node-preview-container .node-preview-backlink:hover {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* Undo Gin's `all: revert` on the form select */
.node-preview-container.node-preview-container .form-element {
  all: unset;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.9);
  padding: 5px 12px;
  font-size: 0.8rem;
  min-width: 110px;
  appearance: auto;
  cursor: pointer;
}