:root{ --sidebar-width:320px; --page-gutter:clamp(12px,2.5vw,32px); --container-max-width:1420px; --card-bg:#eff3f4; --card-border:rgb(44,76,92); }
section.hp{ position:relative; width:100%; padding:clamp(16px,3vw,48px) 0; }
section.hp .linked-section-container{
  position:relative; width:min(100% - 2rem, var(--container-max-width)); margin:0 auto;
  background:var(--card-bg); border:5px solid var(--card-border); border-radius:50px;
  padding:clamp(16px,2.4vw,40px); box-shadow:0 8px 24px rgba(0,0,0,.08); overflow:visible; z-index:0;
}
@media (min-width:992px){
  section.hp .linked-section-container{ margin-left:var(--sidebar-width); max-width:calc(100% - var(--sidebar-width) - var(--page-gutter)); }
}

.hp.container{ max-width:none; padding-left:0; padding-right:0; } /* safety if .container still present */



.slider-wrapper{ position: relative; height: 100%; }
.slider-wrapper .slider{ position: relative; height: 100%; }
.slider-wrapper .slide{
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: 0.3s; z-index: -1;
}
.slider-wrapper .slide.active{ opacity: 1; z-index: 0; }
.slider-wrapper .slide img{ width: 100%; height: 100%; object-fit: contain; object-position: center; }
.slider-controls *:hover{ background-color: rgba(255,255,255,.3); }


section.hp .linked-section-container{
  margin-left: 0 !important;
  max-width: min(100% - 2rem, var(--container-max-width)) !important;
  padding: clamp(16px,2.4vw,40px) !important;
  border-radius: 50px 50px 50px 80px !important;
}
@media (min-width: 992px){
  section.hp .linked-section-container{
    margin-left: var(--sidebar-width) !important;
    max-width: calc(100% - var(--sidebar-width) - var(--page-gutter)) !important;
  }
}

.container{
  width: min(100% - 2rem, var(--container-max-width-xl));
  margin-inline: auto;
}



     
body{ 
    padding-top: clamp(96px, 12vw, 100px) !important;

} 

.right-corner-icon img,
.left-corner-icon img{ width: clamp(160px, 28vw, 420px) !important; height: auto; }
@media (max-width: 480px){
  .right-corner-icon img, .left-corner-icon img{ display:none !important; }
}

.slider-wrapper{ position: relative; height: 100%; margin-block-start: -1rem; }
.slider-wrapper .slider{ position: relative; height: 100%; }
.slider-wrapper .slide{
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: 0.3s; z-index: -1;
}
.slider-wrapper .slide.active{ opacity: 1; z-index: 0; }
.slider-wrapper .slide img{ width: 100%; height: 100%; object-fit: cover; }
.slider-wrapper .slider-controls{
  padding-top: 1rem; display: flex; justify-content: space-between; align-items: center;
  column-gap: 1rem; padding-inline: 1rem; position: absolute; inset: 0; z-index: 1;
}
.slider-wrapper .slider-controls *{
  display: flex; justify-content: center; align-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; padding: 0.3rem;
  background-color: rgba(255,255,255,0.7); transition: 0.3s; cursor: pointer; z-index: 0;
}
.slider-wrapper .slider-controls *:hover{ background-color: rgba(255,255,255,0.3); }
.home .slider-wrapper::before{
  content:""; position:absolute; inset:0; background-color: rgba(0,0,0,0.5); z-index:1;
}




/* 7) Sticky box flatten + mobile */
.steaky-box{ border:5px solid #2c4c5c; background:#eff3f4; box-shadow:10px 10px lightblue; padding:1.25rem; border-radius:15px; display:flex; flex-direction:column; transition:.3s; flex-basis:25%; position:sticky; top:10rem; }
.steaky-box *{ padding:.3rem .5rem; margin-block:.2rem; transition:.3s; font-size:15px; font-weight:bold; color:#2c4c5c; word-break:break-all; position:relative; z-index:1; }
.steaky-box *::before{ content:""; position:absolute; top:0; left:0; height:100%; width:0; background:#2c4c5c; border-radius:.5rem; transition:.3s; z-index:-1; }
.steaky-box *:hover::before{ width:100%; }
.steaky-box *:hover, .steaky-box *.active{ color:#fff; }
.steaky-box *.active::before{ width:100%; }
@media (max-width: 426px){
  .steaky-box{ position:relative; top:auto; flex-basis:100%; width:100%; }
}

/* 8) Media rows: ensure columns wrap nicely */
.row{ padding: clamp(12px,2vw,24px); gap: clamp(12px,2vw,24px); }
.row > div{ flex: 1 1 320px; max-width: 100%; min-width: 260px; }

/* 9) Safety: if section accidentally has .container on it, neutralize its width cap */
.hp.container{ max-width:none !important; padding-left:0 !important; padding-right:0 !important; }



:root{
  --table-border: #2c4c5c;
  --table-bg: #ffffff;
  --table-head-bg: #e8f3f7;
  --table-accent: #1D9798;
}
.table-responsive{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rwd-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--table-bg);
  border: 2px solid var(--table-border);
  border-radius: 12px;
  overflow: hidden;
}
.rwd-table thead th{
  background: var(--table-head-bg);
  color: #123;
  font-weight: 700;
  text-align: left;
  padding: .75rem 1rem;
  border-bottom: 2px solid var(--table-border);
}
.rwd-table tbody td, .rwd-table tbody th{
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  vertical-align: top;
  text-align: left;
}
.rwd-table tbody tr:nth-child(even){ background: rgba(0,0,0,.02); }

/* Stack mode on small screens */
@media (max-width: 768px){
  .rwd-table, .rwd-table thead, .rwd-table tbody, .rwd-table th, .rwd-table td, .rwd-table tr{
    display: block;
  }
  /* Hide the thead for accessibility keep it readable off-screen if needed */
  .rwd-table thead{
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; border: 0; padding: 0;
    clip: rect(0 0 0 0); overflow: hidden;
  }
  /* If a table used first tbody row as header, hide it on mobile */
  .rwd-table.rwd-table--localhead tbody tr:first-child{ display: none; }

  .rwd-table tbody tr{
    border-bottom: 2px solid rgba(0,0,0,.06);
    margin: 0 0 .75rem 0;
    padding: .25rem 0;
  }
  .rwd-table tbody td{
    display: grid;
    grid-template-columns: minmax(8rem, 40%) 1fr;
    gap: .75rem;
    padding-inline: 1rem;
  }
  .rwd-table tbody td::before{
    content: attr(data-label);
    font-weight: 700;
    color: var(--table-accent);
    white-space: pre-wrap;
    word-break: break-word;
  }
}





/* ====== Source Style Block #13 ====== */
/* === Page gutters + content card === */
:root{ --page-gutter: clamp(14px, 3vw, 36px); --container-max-width: 1420px; }

section.hp{ padding-inline: var(--page-gutter) !important; }
.linked-section-container{
  width: min(calc(100% - (2 * var(--page-gutter))), var(--container-max-width)) !important;
  margin-inline: auto !important;
}
@media (min-width: 992px){
  .linked-section-container{
    margin-left: calc(var(--sidebar-width, 0px) + var(--page-gutter)) !important;
    max-width: calc(100% - var(--sidebar-width, 0px) - (2 * var(--page-gutter))) !important;
  }
}


/* ====== Source Style Block #14 ====== */
/* === Responsive table styles === */
.table-responsive{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rwd-table{ width:100%; border-collapse:collapse; background:#fff; border:2px solid #2c4c5c; border-radius:12px; overflow:hidden; }
.rwd-table thead th{ background:#e8f3f7; color:#123; font-weight:700; text-align:left; padding:.75rem 1rem; border-bottom:2px solid #2c4c5c; }
.rwd-table tbody td, .rwd-table tbody th{ padding:.75rem 1rem; border-bottom:1px solid rgba(0,0,0,.08); vertical-align:top; text-align:left; }
.rwd-table tbody tr:nth-child(even){ background:rgba(0,0,0,.02); }
@media (max-width: 768px){
  .rwd-table, .rwd-table thead, .rwd-table tbody, .rwd-table th, .rwd-table td, .rwd-table tr{ display:block; }
  .rwd-table thead{ position:absolute; width:1px; height:1px; margin:-1px; border:0; padding:0; clip:rect(0 0 0 0); overflow:hidden; }
  .rwd-table.rwd-table--localhead tbody tr:first-child{ display:none; }
  .rwd-table tbody tr{ border-bottom:2px solid rgba(0,0,0,.06); margin:0 0 .75rem 0; padding:.25rem 0; }
  .rwd-table tbody td{ display:grid; grid-template-columns:minmax(8rem,40%) 1fr; gap:.75rem; padding-inline:1rem; }
  .rwd-table tbody td::before{ content:attr(data-label); font-weight:700; color:#1D9798; white-space:pre-wrap; word-break:break-word; }
}


/* ====== Source Style Block #15 ====== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    /* outline: 2px solid salmon; */
  }
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(#0F74A3, #1D9798);
    border-radius: 10px;

}
html, body {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}
  body {
    background-color: #8ED8CB;
    position: relative;
    overflow-x: hidden;
    text-align: justify;
    text-justify: inter-word;
     display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    &.over-flow-hidden {
      overflow: hidden;
    }
  }
section.hp,
.hp.container,
main {
    flex: 1;
}

  /* opening */
  .opening {
    position: relative;
    width: 100%;
    overflow: visible;
    min-height: 200px;
    z-index: 0; 
}

.opening img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 5; 
}

.opening::after {
    content: '';
    position: absolute;
    bottom: -25vh; 
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://static.igem.wiki/teams/5545/hero/homepage-03.webp');
   background-size: 100% 100%; 
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: 10; 
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .opening img {
        max-width: 95%;
        border-radius: 15px;
    }
    
    .opening::after {
        height: 150px; 
    }
}

@media (max-width: 480px) {
    .opening img {
        border-radius: 10px;
    }
    
    .opening::after {
        height: 100px; 
    }
}
  /* HEADER*/
  :root {
    --container-max-width-xs: 350px;
    --container-max-width-sm: 686px;
    --container-max-width-md: 880px;
    --container-max-width-lg: 992px;
    --container-max-width-xl: 1420px;
    --z-index-negative: -1;
    --z-index-1: 1;
    --z-index-2: 10;
    --z-index-3: 100;
    --z-index-4: 1000;
    /* Color palette variables */
    --color-dark-teal: #2d3d4e;
    --color-mid-teal: #4A6E8C;
    --color-bright-teal: #1D9798;
    --color-light-gray: #A8ABAD;
    --color-soft-white: #EFF3F4;
}

.header {
    background: linear-gradient(135deg,
        #1D9798 0%,
        #4A6E8C 15%,
        #1D9798 30%,
        rgba(29, 151, 152, 0.85) 45%,
        #A8ABAD 60%,
        rgba(74, 110, 140, 0.9) 75%,
        #1D9798 90%,
        rgba(29, 151, 152, 0.95) 100%);
    padding: 0.75rem 0;
    box-shadow: 0 4px 20px rgba(29, 151, 152, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    border-radius: 0 0 60% 60% / 0 0 15% 15%;
    background-size: 200% 200%;
    animation: waveGradient 8s ease infinite;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(0);
    opacity: 1;
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Header visible state */
.header.header-visible {
    transform: translateY(0) translateZ(0);
    opacity: 1;
}

/* Header hidden state - slides up and stays hidden */
.header.header-hidden {
    transform: translateY(-100%) translateZ(0);
    opacity: 0;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateZ(0);
    pointer-events: none;
}

@keyframes waveGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Header Container - Centered navigation */
.header-container {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    position: relative;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Logo - FIXED OUTSIDE HEADER */
.logo {
    position: fixed;
    top: 15px;
    left: 30px;
    z-index: 10;
    padding: 8px;
    margin-top: -5vh;
    transition: all 0.3s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateZ(0);
    pointer-events: none;
}

.logo img {
    width: 200px;
    height: 85px;
    max-width: 200px;
    object-fit: contain;
    display: block;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

@media (prefers-reduced-motion: reduce) {
    .logo {
        transition: none;
    }
}

/* Navigation Menu - Centered in header */
nav {
    margin-left: 0;
}

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    padding: 0;
    gap: 0.4rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin: 0;
    flex-shrink: 0;
    position: relative;
}

.nav-item {
    position: relative;
    margin: 0;
    z-index: 1;
}

.nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(45, 61, 78, 0.3);
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(239,243,244,0.4), transparent);
    transition: left 0.5s;
}

.nav-link:hover::before { 
    left: 100%; 
}

.nav-link:hover {
    background: rgba(74,110,140,0.25);
    transform: translateY(-2px);
    text-shadow: 0 2px 4px rgba(45, 61, 78, 0.4);
}

/* Dropdown Styles */
.dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background: linear-gradient(145deg,
        rgba(29, 151, 152, 0.95) 0%,
        rgba(74, 110, 140, 0.92) 35%,
        rgba(74, 110, 140, 0.92) 65%,
        rgba(29, 151, 152, 0.95) 100%);
    min-width: 190px;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(29, 151, 152, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 10002;
    border: 1px solid rgba(168,171,173,0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 0;
    padding: 0;
    padding-top: 2px;
    margin-top: -2px;
}

.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.dropdown-link {
    display: block;
    padding: 0.65rem 1.1rem;
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(168,171,173,0.25);
    position: relative;
    min-height: 42px;
    display: flex;
    align-items: center;
    text-shadow: 0 1px 2px rgba(45, 61, 78, 0.3);
    overflow: hidden;
}

.dropdown-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(29,151,152,0.4), transparent);
    transition: left 0.5s;
}

.dropdown-link:hover::before {
    left: 100%;
}

.dropdown-item:first-child .dropdown-link {
    padding-top: calc(0.65rem + 2px);
}

.dropdown-link:hover {
    background: rgba(29,151,152,0.3);
    padding-left: 1.6rem;
    color: #EFF3F4;
}

.dropdown-item:last-child .dropdown-link {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
    padding-bottom: 0.65rem;
    background: transparent !important;
}

.dropdown-item:last-child .dropdown-link:hover {
    background: rgba(29,151,152,0.3) !important;
    border-radius: 0 0 8px 8px;
}

.dropdown-item:first-child .dropdown-link { 
    border-radius: 8px 8px 0 0; 
}

.has-dropdown::after {
    content: '▼';
    margin-left: 0.5rem;
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.nav-item:hover .has-dropdown::after { 
    transform: rotate(180deg); 
}

/* Nested Dropdown */
.dropdown .dropdown {
    position: absolute;
    top: -2px;
    left: calc(100% + 2px);
    min-width: 190px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.25s ease;
    z-index: 10003;
    padding-top: 2px;
    margin-top: 0;
    background: linear-gradient(145deg,
        rgba(29, 151, 152, 0.95) 0%,
        rgba(74, 110, 140, 0.92) 35%,
        rgba(74, 110, 140, 0.92) 65%,
        rgba(29, 151, 152, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dropdown-item:hover > .dropdown,
.dropdown-item:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.dropdown .dropdown-link.has-dropdown::after {
    content: '▶';
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.dropdown-item:hover > .dropdown-link.has-dropdown::after {
    transform: translateX(2px);
}

/* Body padding adjustment */
body { 
    padding-top: 75px;
    transition: padding-top 0.3s ease;
}

/* Z-index management */
.nav-item .dropdown { 
    z-index: 10002 !important; 
}

/* Animations */
.header { 
    animation: slideDown 0.8s ease-out; 
}

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.nav-item { 
    animation: fadeInUp 0.6s ease-out forwards; 
    opacity: 0; 
}

.nav-item:nth-child(1) { animation-delay: 0.1s; }
.nav-item:nth-child(2) { animation-delay: 0.2s; }
.nav-item:nth-child(3) { animation-delay: 0.3s; }
.nav-item:nth-child(4) { animation-delay: 0.4s; }
.nav-item:nth-child(5) { animation-delay: 0.5s; }
.nav-item:nth-child(6) { animation-delay: 0.6s; }
.nav-item:nth-child(7) { animation-delay: 0.7s; }
.nav-item:nth-child(8) { animation-delay: 0.8s; }
.nav-item:nth-child(9) { animation-delay: 0.9s; }
.nav-item:nth-child(10) { animation-delay: 1s; }
.nav-item:nth-child(11) { animation-delay: 1.1s; }

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

/* ========================================
   HAMBURGER MENU STYLES
======================================== */

/* Hamburger Button - Hidden on Desktop */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10001;
    position: fixed;
    right: 25px;
    top: 25px;
    transition: all 0.3s ease;
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background: #2c4c5c;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Hamburger Animation */
.hamburger-menu.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.hamburger-menu.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.mobile-nav-overlay.active {
    opacity: 1;
}

/* Mobile Navigation Menu */
.mobile-nav-menu {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 400px;
    height: 100vh;
    background: linear-gradient(180deg,
        rgba(29, 151, 152, 0.98) 0%,
        rgba(74, 110, 140, 0.95) 50%,
        rgba(29, 151, 152, 0.98) 100%);
    z-index: 10000;
    overflow-y: auto;
    padding: 80px 0 30px 0;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
    transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    backdrop-filter: blur(10px);
}

.mobile-nav-menu.active {
    right: 0;
}

/* Mobile Menu Items */
.mobile-nav-menu .nav-item {
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    animation: none;
    opacity: 1;
}

.mobile-nav-menu .nav-link {
    display: block;
    padding: 18px 25px;
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.mobile-nav-menu .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-left-color: #EFF3F4;
    padding-left: 35px;
    transform: none;
}

/* Mobile Dropdown */
.mobile-nav-menu .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.mobile-nav-menu .nav-item.dropdown-open > .dropdown {
    max-height: 1000px;
}

.mobile-nav-menu .dropdown-link {
    padding: 15px 25px 15px 45px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    min-height: auto;
}

.mobile-nav-menu .dropdown-link:hover {
    background: rgba(255, 255, 255, 0.15);
    padding-left: 50px;
}

/* Mobile Dropdown Toggle Arrow */
.mobile-nav-menu .has-dropdown::after {
    content: '▼';
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.3s ease;
    float: right;
}

.mobile-nav-menu .nav-item.dropdown-open > .nav-link.has-dropdown::after {
    transform: rotate(180deg);
}

/* Nested Mobile Dropdown */
.mobile-nav-menu .dropdown .dropdown {
    background: rgba(0, 0, 0, 0.3);
    padding-left: 0;
}

.mobile-nav-menu .dropdown .dropdown-link {
    padding-left: 65px;
}

/* Mobile Menu Scrollbar */
.mobile-nav-menu::-webkit-scrollbar {
    width: 8px;
}

.mobile-nav-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-nav-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.mobile-nav-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ========================================
   RESPONSIVE MEDIA QUERIES WITH HAMBURGER
======================================== */

/* Extra Small Devices - up to 360px */
@media (max-width: 360px) {
    .header {
        padding: 0.4rem 0;
        border-radius: 0 0 40% 40% / 0 0 10% 10%;
    }
    
    .header-container {
        padding: 0 0.5rem;
        min-height: 100px;
        justify-content: flex-start;
    }
    
    .logo {
        top: 10px;
        left: 15px;
        padding: 5px;
        margin-top: 0;
    }
    
    .logo img {
        width: 90px;
        height: 45px;
        max-width: 90px;
    }
    
    /* Hide desktop navigation */
    nav {
        display: none;
    }
    
    .nav-menu { 
        display: none !important; 
    }
    
    /* Show hamburger menu */
    .hamburger-menu {
        display: flex;
        right: 15px;
        top: 15px;
        width: 28px;
        height: 22px;
    }
    
    .hamburger-menu .bar {
        height: 2.5px;
    }
    
    .mobile-nav-overlay,
    .mobile-nav-menu {
        display: block;
    }
    
    .mobile-nav-menu {
        width: 90%;
        max-width: 300px;
    }

    body { 
        padding-top: 55px; 
    }
}

/* Small Devices - 361px to 686px */
@media (min-width: 361px) and (max-width: 686px) {
    .header {
        padding: 0.45rem 0;
        border-radius: 0 0 50% 50% / 0 0 12% 12%;
    }
    
    .header-container {
        padding: 0 0.75rem;
        min-height: 100px;
        justify-content: flex-start;
    }
    
    .logo {
        top: 12px;
        left: 20px;
        padding: 5px;
        margin-top: 0;
    }
    
    .logo img {
        width: 110px;
        height: 55px;
        max-width: 110px;
    }
    
    /* Hide desktop navigation */
    nav {
        display: none;
    }
    
    .nav-menu { 
        display: none !important; 
    }
    
    /* Show hamburger menu */
    .hamburger-menu {
        display: flex;
        right: 20px;
        top: 18px;
    }
    
    .mobile-nav-overlay,
    .mobile-nav-menu {
        display: block;
    }
    
    .mobile-nav-menu {
        width: 88%;
        max-width: 350px;
    }
    
    body { 
        padding-top: 60px; 
    }
}

/* Medium Devices - 687px to 880px */
@media (min-width: 687px) and (max-width: 880px) {
    .header {
        padding: 0.5rem 0;
        border-radius: 0 0 55% 55% / 0 0 13% 13%;
    }
    
    .header-container {
        padding: 0 1rem;
        min-height: 100px;
        justify-content: flex-start;
    }
    
    .logo {
        top: 12px;
        left: 25px;
        padding: 6px;
        margin-top: 0;
    }
    
    .logo img {
        width: 130px;
        height: 65px;
        max-width: 130px;
    }
    
    /* Hide desktop navigation */
    nav {
        display: none;
    }
    
    .nav-menu { 
        display: none !important; 
    }
    
    /* Show hamburger menu */
    .hamburger-menu {
        display: flex;
        right: 25px;
        top: 20px;
    }
    
    .mobile-nav-overlay,
    .mobile-nav-menu {
        display: block;
    }
    
    .mobile-nav-menu {
        width: 85%;
        max-width: 380px;
    }
    
    body { 
        padding-top: 65px; 
    }
}

/* Large Devices - 881px to 992px */
@media (min-width: 881px) and (max-width: 992px) {
    .header {
        padding: 0.5rem 0;
    }
    
    .header-container {
        padding: 0 1.5rem;
        min-height: 100px;
        justify-content: flex-start;
    }
    
    .logo {
        top: 12px;
        left: 25px;
        padding: 6px;
        margin-top: 0;
    }
    
    .logo img {
        width: 140px;
        height: 70px;
        max-width: 140px;
    }
    
    /* Hide desktop navigation */
    nav {
        display: none;
    }
    
    .nav-menu { 
        display: none !important; 
    }
    
    /* Show hamburger menu */
    .hamburger-menu {
        display: flex;
        right: 25px;
        top: 22px;
    }
    
    .mobile-nav-overlay,
    .mobile-nav-menu {
        display: block;
    }
    
    body { 
        padding-top: 70px; 
    }
}

/* Extra Large Devices - 993px to 1200px */
@media (min-width: 993px) and (max-width: 1200px) {
    .header {
        padding: 0.55rem 0;
    }
    
    .header-container {
        padding: 0 1.5rem;
        min-height: 100px;
        justify-content: center;
    }
    
    .logo {
        top: 13px;
        left: 28px;
        padding: 7px;
        margin-top: -5vh;
    }
    
    .logo img {
        width: 160px;
        height: 75px;
        max-width: 160px;
    }
    
    /* Show desktop navigation */
    nav {
        display: block;
    }
    
    .nav-menu {
        display: flex !important;
        gap: 0.35rem;
    }
    
    .nav-link {
        padding: 0.45rem 0.7rem;
        font-size: 0.85rem;
    }
    
    .dropdown {
        min-width: 185px;
    }
    
    /* Hide hamburger menu */
    .hamburger-menu {
        display: none;
    }
    
    body { 
        padding-top: 72px; 
    }
}

/* Very Large Devices - 1201px and up */
@media (min-width: 1201px) {
    .header {
        padding: 0.6rem 0;
    }
    
    .header-container {
        padding: 0 2rem;
        min-height: 100px;
        justify-content: center;
    }
    
    .logo {
        top: 15px;
        left: 30px;
        padding: 8px;
        margin-top: -5vh;
    }
    
    .logo img {
        width: 180px;
        height: 80px;
        max-width: 180px;
    }
    
    /* Show desktop navigation */
    nav {
        display: block;
    }
    
    .nav-menu {
        display: flex !important;
        gap: 0.4rem;
    }
    
    .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    .dropdown {
        min-width: 190px;
    }
    
    /* Hide hamburger menu */
    .hamburger-menu {
        display: none;
    }

    body { 
        padding-top: 75px; 
    }
}

/* Ultra Large Screens - 1421px and up */
@media (min-width: 1421px) {
    .header {
        padding: 0.65rem 0;
    }
    
    .header-container {
        min-height: 100px;
        padding: 0 3rem;
        justify-content: center;
    }
    
    .logo {
        top: 15px;
        left: 35px;
        padding: 10px;
        margin-top: -5vh;
    }
    
    .logo img {
        width: 200px;
        height: 85px;
        max-width: 200px;
    }
    
    .nav-link {
        padding: 0.55rem 0.85rem;
        font-size: 0.95rem;
    }

    .dropdown {
        min-width: 200px;
    }

    body { 
        padding-top: 80px; 
    }
}

/* Landscape Orientation Adjustments */
@media (max-width: 880px) and (orientation: landscape) {
    .header {
        padding: 0.3rem 0;
        border-radius: 0 0 30% 30% / 0 0 8% 8%;
    }
    
    .header-container {
        min-height: 100px;
    }
    
    .logo {
        top: 8px;
        left: 15px;
        padding: 4px;
        margin-top: 0;
    }
    
    .logo img {
        height: 45px;
        width: auto;
    }
    
    .hamburger-menu {
        top: 12px;
        right: 20px;
    }
    
    body { 
        padding-top: 55px; 
    }
}

/* High DPI / Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .nav-link {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
    
    .dropdown-link {
        padding: 0.8rem 1.2rem;
        min-height: 48px;
    }
    
    .mobile-nav-menu .nav-link {
        padding: 20px 25px;
        min-height: 52px;
    }
    
    .mobile-nav-menu .dropdown-link {
        padding: 18px 25px 18px 45px;
        min-height: 52px;
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .header,
    .logo,
    .nav-link,
    .dropdown,
    .hamburger-menu,
    .mobile-nav-menu,
    .mobile-nav-overlay {
        transition: none !important;
        animation: none !important;
    }
    
    .header {
        background: #1D9798;
    }
    
    .hamburger-menu .bar {
        transition: none !important;
    }
}

  #gooey-menu {
      z-index: 9999;
  }
  
  .opening {
      z-index: 1;
  }
  /* IMG SLIDER */
  .slider-wrapper {
    position: relative;
    height: 100%;
    margin-block-start: -1rem;
  
    .slider {
      position: relative;
      height: 100%;
    }
    .slide {
      position: absolute;
      inset: 0 0 0 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: 0.3s;
      z-index: -1;
      &.active {
        opacity: 1;
        z-index: 0;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .slider-controls {
      padding-top: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      column-gap: 1rem;
      padding-inline: 1rem;
      position: absolute;
      inset: 0 0 0 0;
      z-index: var(--z-index-1);
      * {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        padding: 0.3rem;
        background-color: rgba(255, 255, 255, 0.7);
        transition: 0.3s;
        cursor: pointer;
        z-index: 0;
        &:hover {
          background-color: rgba(255, 255, 255, 0.3);
        }
      }
    }
  }
  
  .home {
    height: 100dvh;
    .slider-wrapper::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: rgb(0, 0, 0, 0.5);
      z-index: var(--z-index-1);
    }
  }
  
  section.hp.container {
    display: flex;
    align-items: start;
    gap: 4rem;
    @media (max-width: 426px) {
      flex-direction: column;
    }
  }
   section.hp.container {
              display: flex;
              align-items: start;
              gap: 4rem;
          }
  
   section.hp .linked-section-container {
       position: relative;
       overflow: visible;
       padding: 25px;
       margin-bottom: 100px;
       max-width: calc(100% - var(--sidebar-width) - 80px) !;  
       margin-left: calc(var(--sidebar-width) + 40px);  
       padding: 20px 40px;
       transition: all 0.3s ease;
       background-color: #eff3f4;
       border: 5px solid rgb(44, 76, 92);
       border-radius: 50px 50px 50px 150px;        
       margin-bottom: 80px;
   }
   .linked-section-container::after {
    content: "";
    position: absolute;
    left: -70px;                 
    bottom: -70px;                
    width: 650px;    
    aspect-ratio: 1 / 1;        /* keep shape; adjust if your SVG isn't square */
    background: url("https://static.igem.wiki/teams/5545/img/asset-3.svg") no-repeat left bottom / contain;
    pointer-events: none;       /* clicks pass through */
    z-index: 1;
  }
  
  .corner-art {
    position: absolute; left: 8px; bottom: 8px;
    width: min(50%, 500px); aspect-ratio: 1/1;
    object-fit: contain; pointer-events: none; z-index: 1;
  }
  @media (max-width: 500px) {              /* xs */
    .linked-section-container::after { width: 500px; left: 6px; bottom: 6px; }
  }
  @media (min-width: 351px) and (max-width: 686px) {  /* sm */
    .linked-section-container::after { width: 500px; left: -50px; bottom: -40px;}
  }
  @media (min-width: 687px) and (max-width: 880px) {  /* md */
    .linked-section-container::after { width: 550px; left: -50px; bottom: -50px; }
  }
  @media (min-width: 881px) and (max-width: 992px) {  /* lg */
    .linked-section-container::after { width: 500px; left: -50px; bottom: -40px; }
  }
  @media (min-width: 993px) {                          /* xl */
    .linked-section-container::after { width: 650px; left: -50px; bottom: -40px; }
  }
  
  figure {
    overflow: hidden;
    margin: 0 auto; 
    max-width: 800px;
    width: 100%;
}

figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; 
}
figcaption {
    padding: 20px 24px;
}

.fig-cap-des {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1rem;
    display: inline;
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Responsive design */
@media (max-width: 600px) {


    figcaption {
        padding: 16px 20px;
    }

    .fig-cap-des,
    .content-paragraph {
        font-size: 0.9rem;
    }
} 
.dual-figure {
overflow: hidden;
margin: 0 auto; 
max-width: 1200px;
width: 100%;
display: flex;
gap: 20px;
}

.dual-figure figure {
flex: 1;
margin: 0;
max-width: none;
}

.dual-figure img {
width: 100%;
height: 300px;
display: block;
object-fit: cover;
}

.dual-figure figcaption {
padding: 20px 24px;
}

.dual-figure .fig-cap-des {
font-weight: 600;
color: #2c3e50;
font-size: 1rem;
display: inline;
}

/* Fade-in animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.fade-in {
animation: fadeIn 0.6s ease-out;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
.dual-figure {
flex-direction: column;
gap: 30px;
}

.dual-figure img {
height: 250px;
}

.dual-figure figcaption {
padding: 16px 20px;
}

.dual-figure .fig-cap-des {
font-size: 0.9rem;
}
}

/* Large/Big photos */
figure.big-photo {
margin: 0 auto; 
width: 90%;
}

figure.big-photo img {
width: 90%;
height: auto;
display: block;
object-fit: cover; /* Changed to cover for big photos */
}

figure.big-photo figcaption {
padding: 24px 32px; /* Larger padding */
}

figure.big-photo .fig-cap-des {
font-weight: 600;
color: #2c3e50;
font-size: 1.2rem; /* Larger text */
display: inline;
}

/* Fade-in animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.fade-in {
animation: fadeIn 0.6s ease-out;
}

/* Responsive design */
@media (max-width: 1024px) {
figure.big-photo {
max-width: 100%;
}

figure.big-photo img {
min-height: 400px;
}
}

@media (max-width: 600px) {
figure.big-photo img {
min-height: 250px;
}

figure.big-photo figcaption {
padding: 16px 20px;
}

figure.big-photo .fig-cap-des {
font-size: 0.95rem;
}
}

figure.small-photo {
margin: 0 auto; 
max-width: 400px; /* Reduced from 800px */
width: 100%;
}

figure.small-photo img {
width: 100%;
height: auto;
max-height: 600px; /* Limit height */
display: block;
object-fit: cover;
}

figure.small-photo figcaption {
padding: 12px 16px; /* Smaller padding */
}

figure.small-photo .fig-cap-des {
font-weight: 600;
color: #2c3e50;
font-size: 0.875rem; /* Smaller text */
display: inline;
}

/* Fade-in animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.fade-in {
animation: fadeIn 0.6s ease-out;
}

/* Responsive design */
@media (max-width: 600px) {
figure.small-photo {
max-width: 300px;
}

figure.small-photo img {
    max-width: 300px;

}

figure.small-photo figcaption {
padding: 10px 14px;
}

figure.small-photo .fig-cap-des {
font-size: 0.8rem;
}
}

/* Medium photos */
figure.medium-photo {
margin: 0 auto; 
max-width: 600px; /* Between small (400px) and big (1400px) */
width: 100%;
}

figure.medium-photo img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}

figure.medium-photo figcaption {
padding: 20px 24px;
}

figure.medium-photo .fig-cap-des {
font-weight: 600;
color: #2c3e50;
font-size: 1rem;
display: inline;
}

/* Fade-in animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.fade-in {
animation: fadeIn 0.6s ease-out;
}

/* Responsive design */
@media (max-width: 768px) {
figure.medium-photo {
max-width: 500px;
}

figure.medium-photo img {
max-height: 350px;
}
}

@media (max-width: 600px) {
figure.medium-photo {
max-width: 100%;
}

figure.medium-photo img {
max-height: 250px;
}

figure.medium-photo figcaption {
padding: 16px 20px;
}

figure.medium-photo .fig-cap-des {
font-size: 0.9rem;
}
}
   .content-paragraph{
      color: #2d3d4e;
      font-size: 1.4em;
      padding: 10px;
      padding-bottom: 30px;
      /* font-weight: bold; */
   }
          .h1-heading {
              font-size: clamp(2.5rem, 5vw, 4rem);
              font-weight: 800;
              background: linear-gradient(135deg, #1D9798 0%, #0F74A3 50%, #4A6E8C 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-align: center;
              margin-bottom: 2rem;
              letter-spacing: -0.02em;
              text-shadow: 0 4px 8px rgba(29, 151, 152, 0.3);
              position: relative;
          }
  
          .h1-heading::after {
              content: '';
              position: absolute;
              bottom: -10px;
              left: 50%;
              transform: translateX(-50%);
              width: 100px;
              height: 4px;
              background: linear-gradient(90deg, #1D9798, #0F74A3);
              border-radius: 2px;
          }
            .h2-tittle {
              background: linear-gradient(135deg, #2d3d4e 0%, #4A6E8C 50%, #0F74A3 100%);
              color: #EFF3F4;
              margin: 30px 25px;
              font-size: 2.3em;
              font-weight: 700;
              padding: 1rem 2.5rem;
              border-radius: 40px;
              width: fit-content;
              box-shadow: 
                  0 15px 30px rgba(45, 61, 78, 0.4),
                  0 8px 16px rgba(74, 110, 140, 0.3);
              border: 2px solid rgba(239, 243, 244, 0.1);
              position: relative;
              overflow: hidden;
              cursor: pointer;
              transition: all 0.3s ease;
              user-select: none;
          }
  
          .h2-tittle::before {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(
                  90deg,
                  transparent,
                  rgba(239, 243, 244, 0.2),
                  transparent
              );
              transition: left 0.5s ease;
          }
  
          .h2-tittle:hover::before {
              left: 100%;
          }
  
          .h2-tittle:hover {
              transform: translateY(-3px) scale(1.01);
              box-shadow: 
                  0 20px 40px rgba(45, 61, 78, 0.5),
                  0 10px 20px rgba(74, 110, 140, 0.4);
          }
                  .h3-sub-tittle{
              background: linear-gradient(45deg, #4A6E8C 0%, #1D9798 50%, #0F74A3 100%);
              color: white;
              margin: 50px 25px;
              font-weight: 600;
              width: fit-content;
               font-size: 1.3em;
              padding: 1.2rem 3rem;
              border-radius: 60px;
              box-shadow: 
                  0 18px 35px rgba(29, 151, 152, 0.4),
                  0 10px 20px rgba(74, 110, 140, 0.3),
                  inset 0 1px 0 rgba(255, 255, 255, 0.2);
              position: relative;
              overflow: hidden;
              cursor: pointer;
              transition: all 0.3s ease;
              user-select: none;
          }
  
           .h3-sub-tittle:hover {
              transform: translateY(-3px) scale(1.01);
              box-shadow: 
                  0 22px 40px rgba(29, 151, 152, 0.5),
                  0 12px 25px rgba(74, 110, 140, 0.4),
                  inset 0 2px 0 rgba(255, 255, 255, 0.3);
          }
  
           .h3-sub-tittle::after {
              content: '';
              position: absolute;
              top: -50%;
              right: -50%;
              width: 100%;
              height: 200%;
              background: radial-gradient(
                  circle,
                  rgba(255, 255, 255, 0.1) 0%,
                  transparent 70%
              );
              transform: rotate(45deg);
              pointer-events: none;
          }
                  .extended-text {
              font-family: 'Courier New', monospace;
              letter-spacing: -0.02em;
          }
             /* Shimmer Effect H4 */
  /* Shimmer Effect H4 - Dark Blue Theme */
  .h4-small-tittle {
      background: linear-gradient(135deg, #2d3d4e 0%, #4A6E8C 50%, #2c4c5c 100%);
      color: #EFF3F4;
      width: fit-content;
      font-size: 0.95rem;
      margin: 15px 10px;
      font-weight: 600;
      padding: 0.6rem 1.5rem;
      border-radius: 25px;
      box-shadow: 0 8px 20px rgba(45, 61, 78, 0.4);
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
      user-select: none;
      border: 1px solid rgba(239, 243, 244, 0.2);
      letter-spacing: 0.5px;
  }
  
  /* Shimmer animation overlay */
  .h4-small-tittle::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
  }
  
  /* Trigger shimmer on hover (without float-up) */
  .h4-small-tittle:hover::before {
      left: 100%;
  }
  
  /* Optional: Add a subtle glow on hover without moving up */
  .h4-small-tittle:hover {
      box-shadow: 0 8px 25px rgba(74, 110, 140, 0.5);
      /* No transform: translateY() here */
  }
  
          /* Responsive adjustments */
          @media (max-width: 768px) {
              .h1-heading,
              .h2-tittle,
               .h3-sub-tittle,
              .h4-small-tittle {
                  padding: 1rem 2rem;
                  border-radius: 30px;
              }
              
           
              
              .banner-container {
                  gap: 1.5rem;
              }
          }
  
          @media (max-width: 480px) {
              .h1-heading,
              .h2-tittle,
               .h3-sub-tittle,
              .h4-small-tittle {
                  padding: 0.8rem 1.5rem;
                  border-radius: 25px;
                  letter-spacing: 0.03em;
              }
          }
  
          /* Animation for page load */
          @keyframes slideInScale {
              0% {
                  transform: translateX(-100%) scale(0.5);
                  opacity: 0;
              }
              100% {
                  transform: translateX(0) scale(1);
                  opacity: 1;
              }
          }
  
          .h1-heading {
              animation: slideInScale 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          }
  
          .h2-tittle {
              animation: slideInScale 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
              animation-delay: 0.2s;
              animation-fill-mode: both;
          }
  
           .h3-sub-tittle {
              animation: slideInScale 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
              animation-delay: 0.4s;
              animation-fill-mode: both;
          }
  
          .h4-small-tittle {
              animation: slideInScale 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
              animation-delay: 0.6s;
              animation-fill-mode: both;
          }
          
      
    /* media row */
    .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px;
    gap: 2rem;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 2rem;
    background-color: rgba(239, 243, 244, 0.8);
    border-radius: 15px;
  }
  
  .row > div {
    flex: 1;
    min-width: 250px;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .row img {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
    border: 4px solid #2c4c5c;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .row img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  }
  
  .row .caption {
    color: black;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 20px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.5rem;
  }
  
  /* Row variations */
  .row.three-column > div {
    flex: 1;
    min-width: 200px;
    max-width: 30%;
  }
  
  .row.four-column > div {
    flex: 1;
    min-width: 150px;
    max-width: 22%;
  }
  
  /* Responsive for rows */
  @media (max-width: 768px) {
    .row {
      flex-direction: column;
      gap: 1.5rem;
    }
    
    .row > div {
      max-width: 100%;
      min-width: unset;
    }
    
    .row .caption {
      font-size: 14px;
      padding: 10px 16px;
    }
  }
  
  @media (max-width: 480px) {
    .row {
      padding: 15px;
      gap: 1rem;
    }
    
    .row .caption {
      font-size: 13px;
      padding: 8px 12px;
    }
  }
  
  .steaky-box {
    border: 5px solid #2c4c5c;
    background-color: rgb(239, 243, 244);
    box-shadow: 10px 10px lightblue;
    padding: 1.25rem;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    transition: 0.3s;
    flex-basis: 25%;
    position: sticky;
    top: 10rem;
    @media (max-width: 426px) {
      position: relative;
      top: auto;
      flex-basis: 100%;
      width: 100%;
    }
  
    * {
      padding: 0.3rem 0.5rem;
      margin-block: 0.2rem;
      transition: 0.3s;
      font-size: 15px;
      font-weight: bold;
      color: #2c4c5c;
      word-break: break-all;
      position: relative;
      z-index: var(--z-index-1);
    }
    *::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0;
      background-color: #2c4c5c;
      border-radius: 0.5rem;
      transition: 0.3s;
      z-index: var(--z-index-negative);
    }
    *:hover::before {
      width: 100%;
    }
    *.active,
    *:hover {
      color: #fff;
    }
    *.active::before {
      width: 100%;
    }
  
    &.hidden {
      opacity: 0;
    }
  }
  
  .left #text {
    color: aquamarine;
    font-size: 22px;
    flex-basis: 50%;
  }
  .left h1-heading {
    color: white;
    font-size: 40px;
    padding-bottom: 30px;
  }
  .right {
    flex-basis: 50%;
  
    .imgnaf {
      max-width: 100%;
      height: auto;
      object-fit: cover;
    }
  }
  
  
  /* typing up home */
  .typingup {
    width: 100%;
    max-width: 800px;
  }
  
  .word-reveal > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px);
    animation: revealWord 0.8s ease-out forwards;
    margin-right: 0.3em;
  }
  
  @keyframes revealWord {
    from {
      opacity: 0;
      transform: translateY(50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  p .word-reveal {
    font-size: clamp(1.2rem, 4vw, 3rem);
    color: #a2936f;
    line-height: 1;
  }
  
  /*fade*/
  
  .fade-in {
    opacity: 0;
    transition: opacity 500ms ease-in;
  }
  
  .fade-in.appear {
    opacity: 1;
  }
  
  .from-left.appear,
  .from-right.appear {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  
  /* 'footer' */
  
        :root {
              --footer-color-primary: #2d3d4e;
              --footer-color-secondary: #2c4c5c;
              --footer-color-accent: #4A6B8C;
              --footer-color-highlight: #0F74A3;
              --footer-color-neutral: #A8ABAD;
              --footer-color-light: #EFF3F4;
              --footer-color-teal: #1D9798;
              
              --footer-container-max-width-xs: 350px;
              --footer-container-max-width-sm: 686px;
              --footer-container-max-width-md: 880px;
              --footer-container-max-width-lg: 992px;
              --footer-container-max-width-xl: 1420px;
          }
  
          /* Main Content Area - Updated classes */
    
  
         
  
          /* Floating particles animation */
          .footer-air-particles {
              position: absolute;
              width: 100%;
              height: 100%;
              overflow: hidden;
              pointer-events: none;
          }
  
          .footer-particle {
              position: absolute;
              width: 4px;
              height: 4px;
              background: rgba(29, 151, 152, 0.3);
              border-radius: 50%;
              animation: footerFloat 15s infinite ease-in-out;
          }
  
          .footer-particle:nth-child(odd) {
              background: rgba(15, 116, 163, 0.2);
              animation-duration: 20s;
          }
  
          @keyframes footerFloat {
              0%, 100% {
                  transform: translateY(0) translateX(0) scale(1);
                  opacity: 0;
              }
              10% {
                  opacity: 1;
              }
              90% {
                  opacity: 1;
              }
              100% {
                  transform: translateY(-100vh) translateX(100px) scale(0.5);
                  opacity: 0;
              }
          }
  
          @keyframes footerShimmer {
              0% {
                  transform: translateX(-100%);
              }
              100% {
                  transform: translateX(100%);
              }
          }
  
          /* Footer styles with specific classes */
          .custom-footer {
              background: linear-gradient(135deg, var(--footer-color-primary) 0%, var(--footer-color-secondary) 100%);
              color: var(--footer-color-light);
              padding: 60px 0 20px;
              position: relative;
              overflow: hidden;
              width: 100%;        
              margin: 0;           
               padding: 60px 0 20px;
              left: 0;  
              flex-shrink: 0;
              z-index: 0; 
              margin-top: auto;
                z-index: 10001;
          }
  
          .custom-footer::before {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 200%;
              height: 100%;
              background: linear-gradient(90deg, 
                  transparent, 
                  rgba(29, 151, 152, 0.1), 
                  transparent
              );
              animation: footerShimmer 8s infinite;
          }
  
          .footer-container {
              max-width: 1420px;
              margin: 0 auto;
              padding: 0 20px;
              position: relative;
              z-index: 1;
          }
  
          /* Footer Top Icons */
          .footer-top-icons {
              display: flex;
              justify-content: flex-start;
              gap: 60px;
              margin-bottom: 40px;
              padding: 20px 0;
          }
  
          .footer-icon-item {
              display: flex;
              align-items: center;
              gap: 12px;
              transition: transform 0.3s ease;
          }
  
          .footer-icon-item:hover {
              transform: translateY(-3px);
          }
  
          .footer-icon-item svg {
              width: 32px;
              height: 32px;
              fill: var(--footer-color-teal);
              flex-shrink: 0;
          }
  
          .footer-icon-text {
              color: var(--footer-color-light);
              font-size: 16px;
              font-weight: 500;
          }
  
          /* Icon Slider */
          .footer-icon-slider-wrapper {
              margin-bottom: 40px;
              position: relative;
              overflow: hidden;
              background: rgba(255, 255, 255, 0.05);
              border-radius: 10px;
              padding: 20px 0;
          }
  
          .footer-icon-slider {
              display: flex;
              animation: footerSlide 20s linear infinite;
          }
  
          .footer-icon-slider-inner {
              display: flex;
              gap: 40px;
              padding: 0 20px;
          }
  
          @keyframes footerSlide {
              0% {
                  transform: translateX(0);
              }
              100% {
                  transform: translateX(-50%);
              }
          }
  
          .footer-icon-item-slider {
              display: flex;
              align-items: center;
              gap: 10px;
              min-width: 150px;
              color: var(--footer-color-light);
              transition: transform 0.3s ease;
          }
  
          .footer-icon-item-slider:hover {
              transform: scale(1.1);
          }
  
          .footer-icon-item-slider svg {
              width: 30px;
              height: 30px;
              fill: var(--footer-color-teal);
          }
  
          /* Footer Links */
          .footer-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
              gap: 40px;
              margin-bottom: 40px;
          }
  
          .footer-column h3 {
              color: var(--footer-color-teal);
              font-size: 16px;
              margin-bottom: 20px;
              position: relative;
              padding-bottom: 10px;
          }
  
          .footer-column h3::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 30px;
              height: 2px;
              background: var(--footer-color-highlight);
              transition: width 0.3s ease;
          }
  
          .footer-column:hover h3::after {
              width: 60px;
          }
  
          .footer-column ul {
              list-style: none;
          }
  
          .footer-column li {
              margin-bottom: 12px;
              opacity: 0.9;
              transition: all 0.3s ease;
          }
  
          .footer-column li:hover {
              opacity: 1;
              transform: translateX(5px);
              color: var(--footer-color-teal);
          }
  
          .footer-column a {
              color: inherit;
              text-decoration: none;
              display: inline-block;
              position: relative;
          }
  
          /* Copyright */
          .footer-bottom {
              text-align: center;
              padding-top: 20px;
              border-top: 1px solid rgba(255, 255, 255, 0.1);
              opacity: 0.7;
              font-size: 14px;
          }
  
          .footer-bottom a {
              color: var(--footer-color-teal);
              text-decoration: none;
          }
  
          /* Decorative swirls */
          .footer-swirl {
              position: absolute;
              opacity: 0.05;
              pointer-events: none;
          }
  
          .footer-swirl-1 {
              top: 20px;
              right: 10%;
              width: 200px;
              height: 200px;
              background: radial-gradient(circle, var(--footer-color-teal) 0%, transparent 70%);
              animation: footerRotate 20s linear infinite;
          }
  
          .footer-swirl-2 {
              bottom: 30px;
              left: 5%;
              width: 150px;
              height: 150px;
              background: radial-gradient(circle, var(--footer-color-highlight) 0%, transparent 70%);
              animation: footerRotate 25s linear infinite reverse;
          }
  
          @keyframes footerRotate {
              from {
                  transform: rotate(0deg);
              }
              to {
                  transform: rotate(360deg);
              }
          }
  
          /* Responsive Design */
          @media (max-width: 350px) {
            body {
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }
            
            .custom-footer {
                flex-shrink: 0;
                margin-top: auto;
            }
        }
        
        @media (min-width: 351px) and (max-width: 480px) {
            body {
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }
            
            .custom-footer {
                flex-shrink: 0;
                margin-top: auto;
            }
        }
        
        @media (min-width: 481px) and (max-width: 686px) {
            body {
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }
            
            .custom-footer {
                flex-shrink: 0;
                margin-top: auto;
            }
        }
        
        @media (min-width: 687px) and (max-width: 880px) {
            body {
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }
            
            .custom-footer {
                flex-shrink: 0;
                margin-top: auto;
            }
        }
  
  /* read more */
  .accordion {
      width: 95%;
      margin-left: 1rem;
  }
  .accordion-item {
      background-color: #1D9798;
      color: white;
      margin: 1rem 0;
      border-radius: 0.5rem;
      box-shadow: 0 2px 20px 0 #ffffff9b;
      position: relative;
      overflow: visible;
  }
  .accordion-item-header {
      padding: 0.5rem 3rem 0.5rem 1rem;
      min-height: 3.5rem;
      line-height: auto;
      font-weight: bold;
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;
      font-size: 1.7rem;
      overflow: hidden;
      border-radius: 0.5rem 0.5rem 0 0;
  }
  
  /* Wave animation styles */
  .wave-canvas {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      opacity: 0.3;
      z-index: 1;
  }
  
  .accordion-item-header-text {
      position: relative;
      z-index: 2;
  }
  
  .accordion-item-header:hover {
      scale: 1.01;
  }
  .accordion-item-header::after {
      content: "\002B";
      font-size: 2rem;
      position: absolute;
      right: 1rem;
      z-index: 2;
  }
  .accordion-item-header.active::after {
      content: "\2212";
  }
  .accordion-item-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
  }
  .accordion-item-body-content {
      padding: 1rem;
      line-height: 1.7rem;
      background-color: rgb(239, 243, 244);
      border-top: 5px solid;
      border-radius: 0rem 0rem .5rem .5rem;
      border: solid 3px #1D9798;
      color: #333;
      padding-left: 30px;
  }
  
  .accordion .ref {
      width: 95%;
      margin-left: 1rem;
  }
  .accordion-item .ref {
      background-color: rgb(98, 41, 41);
      color: red;
      margin: 1rem 0;
      border-radius: 0.5rem;
      box-shadow: 0 2px 20px 0 #ffffff9b;
  }
  .accordion-item-header .ref{
      padding: 0.5rem 3rem 0.5rem 1rem;
      min-height: 3.5rem;
      line-height: auto;
      font-weight: bold;
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;
      font-size: 1.7rem;
  }
  .accordion-item-header .ref:hover {
      scale: 1.02;
  }
  .accordion-item-header .ref::after {
      content: "\002B";
      font-size: 2rem;
      position: absolute;
      right: 1rem;
  }
  .accordion-item-header.active .ref::after {
      content: "\2212";
  }
  .accordion-item-body .ref {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
  }
  .accordion-item-body-content .ref{
      padding: 1rem;
      font-size: 1.45rem;
      line-height: 1.7rem;
      background-color: red;
      color: red;
      border-top: 5px solid;
      border-image: linear-gradient(to right, transparent, #19233E , transparent) 1;
      border-radius: 0rem 0rem .5rem .5rem;
  }
   
  /* headfig */
  
  .right-corner-icon img {
    position: absolute;
    top: -3.3rem;
    right: -3.5rem;
    pointer-events: none;
    width: 500px;
    z-index: 2;

    @media (max-width: 1320px) {
      position: absolute;
      top: -2.5rem;
      right: -3rem;
      pointer-events: none;
      width: 400px;
      z-index: 2;
    }
    @media (max-width: 790px) {
      width: 300px;
      top: -2.3rem;
      right: -2.5rem;
    }
    @media (max-width: 450px) {
      display: none;
    }
  }  
  
  .left-corner-icon img{
    position: absolute;
    width: 1000px;
      bottom: -5rem;
      left: -3.5rem;
      @media (max-width: 450px) {
      display: none;
    }
  }
  /* back to top button */
  .back-to-top {
    position: fixed;
    display: block;
    width: 15em;
    height: 20vh;
    bottom: 2rem;
    right: 3rem;
    z-index: 9999;
    cursor: pointer;
      }
  
      .back-to-top:hover {
        transform: translateY(-5px) scale(1.1); 
      }
  /* gooey */
  #gooey-menu {
    position: fixed;
    background: linear-gradient(135deg,
        #1D9798 0%,
        #4A6E8C 15%,
        #1D9798 30%,
        rgba(29, 151, 152, 0.85) 45%,
        #A8ABAD 60%,
        rgba(74, 110, 140, 0.9) 75%,
        #1D9798 90%,
        rgba(29, 151, 152, 0.95) 100%);
    width: 320px;
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    transform: translateX(-280px);
    left: 0;
    top: 0;
    z-index: 10001; /* Increased to be above header */
    box-shadow: 0 0 50px rgba(29, 151, 152, 0.3);
    backdrop-filter: blur(10px);
    background-size: 200% 200%;
    height: 100%;
    bottom: 160px;
    will-change: transform;
    transition: transform .15s ease-out;
    transform: translateX(-100%); 
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}
            #gooey-menu.visible {
                transform: translateX(-300px);
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }
            #gooey-menu:hover,
#gooey-menu.expanded {
    transform: translateX(0);
}
          #gooey-menu {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
          @keyframes waveGradient {
              0% { background-position: 0% 50%; }
              50% { background-position: 100% 50%; }
              100% { background-position: 0% 50%; }
          }

            @media (max-width: 992px) {
                #gooey-menu {
                    display: none !important;
                    opacity: 0 !important;
                    pointer-events: none !important;
                }
            }

            @media (max-width: 992px) {
                #gooey-menu {
                    bottom: auto;
                    top: 50%;
                    transform: translateY(-50%);
                    height: auto;
                    max-height: 60vh;
                }
                
                #gooey-menu .menu-scroll-container {
                    max-height: 50vh;
                }
            }
  
          #gooey-menu:hover,
          #gooey-menu.expanded {
              transform: translateX(0);
          }
  
          #gooey-menu::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: linear-gradient(45deg,
                  rgba(29, 151, 152, 0.9) 0%,
                  rgba(74, 110, 140, 0.8) 25%,
                  rgba(29, 151, 152, 0.7) 50%,
                  rgba(168, 171, 173, 0.3) 65%,
                  rgba(74, 110, 140, 0.8) 80%,
                  rgba(29, 151, 152, 0.9) 100%);
              opacity: 0;
              transition: opacity 0.6s ease;
              pointer-events: none;
          }
  
          #gooey-menu:hover::before {
              opacity: 1;
          }
  
          .gooey-menu-inner {
              width: 100%;
              height: 100%;
              position: relative;
              padding-top: 80px;
              z-index: 10;
              opacity: 0;
              transform: translateX(-20px); 
              transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s; 
              overflow: visible;
          }
          #gooey-menu.visible .gooey-menu-inner {
            opacity: 1;
            transform: translateX(0);
        }
        
        #gooey-menu:hover .gooey-menu-inner ul,
        #gooey-menu.expanded .gooey-menu-inner ul {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }
        
        /* Staggered appearance on hover */
        #gooey-menu:hover .gooey-menu-inner ul li:nth-child(1),
        #gooey-menu.expanded .gooey-menu-inner ul li:nth-child(1) {
            transition-delay: 0.1s;
            opacity: 1;
            transform: translateX(0);
        }
        
        #gooey-menu:hover .gooey-menu-inner ul li:nth-child(2),
        #gooey-menu.expanded .gooey-menu-inner ul li:nth-child(2) {
            transition-delay: 0.15s;
            opacity: 1;
            transform: translateX(0);
        }
        
        #gooey-menu:hover .gooey-menu-inner ul li:nth-child(3),
        #gooey-menu.expanded .gooey-menu-inner ul li:nth-child(3) {
            transition-delay: 0.2s;
            opacity: 1;
            transform: translateX(0);
        }
        
        #gooey-menu:hover .gooey-menu-inner ul li:nth-child(4),
        #gooey-menu.expanded .gooey-menu-inner ul li:nth-child(4) {
            transition-delay: 0.25s;
            opacity: 1;
            transform: translateX(0);
        }
        
        #gooey-menu:hover .gooey-menu-inner ul li:nth-child(5),
        #gooey-menu.expanded .gooey-menu-inner ul li:nth-child(5) {
            transition-delay: 0.3s;
            opacity: 1;
            transform: translateX(0);
        }
        
        #gooey-menu:hover .gooey-menu-inner ul li:nth-child(n+6),
        #gooey-menu.expanded .gooey-menu-inner ul li:nth-child(n+6) {
            transition-delay: 0.35s;
            opacity: 1;
            transform: translateX(0);
        }
        
          .gooey-menu-inner::before {
              /* content: ''; */
              position: absolute;
              top: -10%;
              right: -150px;
              width: 250px;
              height: 120%;
              background: linear-gradient(135deg,
                  rgba(29, 151, 152, 0.5) 0%,
                  rgba(74, 110, 140, 0.6) 25%,
                  rgba(29, 151, 152, 0.5) 50%,
                  rgba(168, 171, 173, 0.4) 75%,
                  rgba(29, 151, 152, 0.4) 100%);
              border-radius: 150px 0 0 150px;
              filter: blur(20px);
              transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
              z-index: -1;
              transform: scaleY(0.4) translateX(80px) skewY(-3deg);
              opacity: 0;
          }
  
          #gooey-menu:hover .gooey-menu-inner::before,
          #gooey-menu.expanded .gooey-menu-inner::before {
              transform: scaleY(1.3) translateX(0px) skewY(0deg);
              opacity: 1;
              filter: blur(25px);
              right: -120px;
          }
  
          .gooey-menu-inner::after {
              content: '';
              position: absolute;
              top: 10%;
              right: -100px;
              width: 200px;
              height: 80%;
              background: radial-gradient(ellipse at left center,
                  rgba(29, 151, 152, 0.7) 0%,
                  rgba(74, 110, 140, 0.6) 30%,
                  rgba(29, 151, 152, 0.5) 60%,
                  rgba(168, 171, 173, 0.3) 80%,
                  transparent 90%);
              border-radius: 100px;
              filter: blur(15px);
              transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
              z-index: -2;
              transform: scale(0.2) rotate(-8deg);
              opacity: 0;
          }
  
          #gooey-menu:hover .gooey-menu-inner::after,
          #gooey-menu.expanded .gooey-menu-inner::after {
              transform: scale(1.5) rotate(0deg);
              opacity: 1;
              right: -70px;
          }
  
          /* Additional gooey blobs for more effect */
          .gooey-extra-blob {
              position: absolute;
              right: -150px;
              width: 100px;
              height: 100px;
              background: radial-gradient(circle at center,
                  rgba(29, 151, 152, 0.3) 0%,
                  rgba(74, 110, 140, 0.2) 50%,
                  transparent 70%);
              border-radius: 50%;
              filter: blur(10px);
              transition: all 0.7s ease;
              opacity: 0;
              transform: scale(0.2);
              z-index: -3;
          }
  
          .gooey-extra-blob:nth-child(1) {
              top: 20%;
              animation-delay: 0.2s;
          }
  
          .gooey-extra-blob:nth-child(2) {
              top: 60%;
              animation-delay: 0.4s;
          }
  
          .gooey-extra-blob:nth-child(3) {
              top: 80%;
              animation-delay: 0.6s;
          }
  
          #gooey-menu:hover .gooey-extra-blob,
          #gooey-menu.expanded .gooey-extra-blob {
              opacity: 0.6;
              transform: scale(1);
              right: -80px;
          }
  
          /* Mouse responsive gooey effect */
          .gooey-mouse-blob {
              position: absolute;
              width: 80px;
              height: 80px;
              background: radial-gradient(circle at center,
                  rgba(29, 151, 152, 0.4) 0%,
                  rgba(74, 110, 140, 0.3) 40%,
                  transparent 70%);
              border-radius: 50%;
              filter: blur(8px);
              transition: all 0.3s ease;
              opacity: 0;
              z-index: -1;
              pointer-events: none;
          }
  
          .menu-scroll-container {
            height: calc(100% - 80px); /* Reduced from 160px to give more space */
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
            padding-right: 10px;
          }
  
          /* Custom Scrollbar */
          .menu-scroll-container::-webkit-scrollbar {
              width: 8px;
          }
  
          .menu-scroll-container::-webkit-scrollbar-track {
              background: rgba(168, 171, 173, 0.1);
              border-radius: 10px;
              margin: 10px 0;
          }
  
          .menu-scroll-container::-webkit-scrollbar-thumb {
              background: linear-gradient(180deg, #1D9798, #4A6E8C);
              border-radius: 10px;
              border: 2px solid transparent;
              background-clip: content-box;
              transition: all 0.3s ease;
          }
  
          .menu-scroll-container::-webkit-scrollbar-thumb:hover {
              background: linear-gradient(180deg, #4A6E8C, #1D9798);
              box-shadow: 0 0 10px rgba(29, 151, 152, 0.5);
          }
  
          /* Custom scroll indicators */
          .scroll-indicators {
              position: absolute;
              right: 15px;
              top: 50%;
              transform: translateY(-50%);
              display: flex;
              flex-direction: column;
              gap: 8px;
              z-index: 20;
              opacity: 0;
              transition: opacity 0.3s ease;
          }
  
          #gooey-menu:hover .scroll-indicators {
              opacity: 1;
          }
  
          /* Scroll arrows */
          .scroll-arrow {
              position: absolute;
              right: 20px;
              width: 30px;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: rgba(29, 151, 152, 0.2);
              border-radius: 50%;
              color: #EFF3F4;
              cursor: pointer;
              transition: all 0.3s ease;
              z-index: 21;
              opacity: 0;
              visibility: hidden;
          }
  
          .scroll-arrow:hover {
              background: rgba(29, 151, 152, 0.6);
              transform: scale(1.1);
              box-shadow: 0 4px 15px rgba(29, 151, 152, 0.3);
          }
  
          .scroll-arrow.show {
              opacity: 1;
              visibility: visible;
          }
  
          .scroll-arrow-up {
              top: 90px;
          }
  
          .scroll-arrow-down {
              bottom: 20px;
          }
  
          .scroll-arrow::before {
              content: '';
              width: 8px;
              height: 8px;
              border-top: 2px solid currentColor;
              border-right: 2px solid currentColor;
          }
  
          .scroll-arrow-up::before {
              transform: rotate(-45deg);
              margin-top: 2px;
          }
  
          .scroll-arrow-down::before {
              transform: rotate(135deg);
              margin-bottom: 2px;
          }
  
          .gooey-inner-blob {
              position: absolute;
              top: 0;
              right: -60px;
              width: 120px;
              height: 100%;
              z-index: 1;
              pointer-events: none;
              transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
          }
  
          #gooey-menu:hover .gooey-inner-blob,
          #gooey-menu.expanded .gooey-inner-blob {
              right: -30px;
              width: 60px;
          }
  
          .gooey-inner-path {
              height: 100%;
              fill: url(#innerGradient);
              filter: drop-shadow(0 0 15px rgba(29,151,152,0.3)) blur(0.5px);
              transition: all 0.3s ease;
          }
  
          .gooey-hamburger {
              right: 15px;
              position: absolute;
              width: 28px;
              height: 28px;
              margin-top: -14px;
              top: 50%;
              z-index: 1001;
              opacity: 1;
              transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              cursor: pointer;
              pointer-events: all;
              transform: scale(1);
              will-change: transform;
                opacity: 0;
             transform: scale(0.8) translateX(-10px);
             transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
          }
  
          #gooey-menu:hover .gooey-hamburger,
          #gooey-menu.expanded .gooey-hamburger {
              opacity: 1;
              transform: scale(1.1);
          }
  
          .gooey-hamburger:hover {
              transform: scale(1.2) rotate(5deg);
          }
  
          #gooey-menu.visible .gooey-hamburger {
            opacity: 1;
            transform: scale(1) translateX(0);
        }
        
        #gooey-menu:hover .gooey-hamburger,
        #gooey-menu.expanded .gooey-hamburger {
            opacity: 1;
            transform: scale(1.1) translateX(0);
        }
        
        /* Mobile responsive adjustments */
        @media (max-width: 992px) {
            #gooey-menu {
                display: none !important;
                opacity: 0 !important;
                pointer-events: none !important;
            }
        }
          /* Bubble indicator */
          .menu-bubble {
              position: absolute;
              right: -20px;
              top: 50%;
              transform: translateY(-50%);
              width: 15px;
              height: 15px;
              background: radial-gradient(circle at center,
                  rgba(29, 151, 152, 0.8) 0%,
                  rgba(74, 110, 140, 0.6) 50%,
                  rgba(29, 151, 152, 0.4) 100%);
              border-radius: 50%;
              opacity: 0;
              transition: all 0.3s ease;
              z-index: 1002;
              pointer-events: none;
              animation: bubblePulse 2s infinite;
          }
  
          .menu-bubble::before {
              content: '';
              position: absolute;
              top: -3px;
              left: -3px;
              right: -3px;
              bottom: -3px;
              background: radial-gradient(circle at center,
                  rgba(29, 151, 152, 0.3) 0%,
                  transparent 70%);
              border-radius: 50%;
              animation: bubbleRipple 2s infinite;
          }
  
          #gooey-menu:not(:hover):not(.expanded) .menu-bubble {
              opacity: 1;
          }
  
          @keyframes bubblePulse {
              0%, 100% {
                  transform: translateY(-50%) scale(1);
                  opacity: 0.8;
              }
              50% {
                  transform: translateY(-50%) scale(1.2);
                  opacity: 1;
              }
          }
  
          @keyframes bubbleRipple {
              0% {
                  transform: scale(0);
                  opacity: 0.8;
              }
              100% {
                  transform: scale(2);
                  opacity: 0;
              }
          }
  
          .gooey-hamburger .gooey-line {
              width: 100%;
              height: 3px;
              background: linear-gradient(90deg, #EFF3F4, #A8ABAD);
              position: absolute;
              transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              border-radius: 3px;
              box-shadow: 0 2px 8px rgba(29,151,152,0.3);
          }
  
          .gooey-hamburger .gooey-line:nth-child(1) { top: 0; }
          .gooey-hamburger .gooey-line:nth-child(2) { top: 50%; margin-top: -1.5px; }
          .gooey-hamburger .gooey-line:nth-child(3) { bottom: 0; }
  
          .gooey-hamburger.active .gooey-line:nth-child(1) {
              transform: rotate(45deg) translate(8px, 8px);
              background: linear-gradient(90deg, #1D9798, #4A6E8C);
          }
  
          .gooey-hamburger.active .gooey-line:nth-child(2) {
              opacity: 0;
              transform: scale(0);
          }
  
          .gooey-hamburger.active .gooey-line:nth-child(3) {
              transform: rotate(-45deg) translate(8px, -8px);
              background: linear-gradient(90deg, #1D9798, #4A6E8C);
          }
  
          .gooey-menu-inner ul {
              padding: 0;
              list-style: none;
              width: 260px;
              margin-left: 20px;
              position: relative;
            opacity: 0;
            visibility: hidden;
            transform: translateX(-30px);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);  
              z-index: 15;
          }
  
          .gooey-menu-inner ul li {
              color: #EFF3F4;
              font-family: 'Arial', sans-serif;
              padding: 15px 20px;
              font-size: 16px;
              font-weight: 600;
              cursor: pointer;
              transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              position: relative;
              border-radius: 25px;
              margin: 8px 0;
              background: rgba(168, 171, 173, 0.1);
              backdrop-filter: blur(10px);
              border-left: 4px solid transparent;
              overflow: hidden;
              transform: translateX(0);
              /* Hide individual items by default */
            opacity: 0;
            transform: translateX(-30px);
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          }
  
          .gooey-menu-inner ul li::before {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg,
                  rgba(29, 151, 152, 0.3) 0%,
                  rgba(74, 110, 140, 0.2) 50%,
                  rgba(29, 151, 152, 0.3) 100%);
              transition: left 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              z-index: -1;
          }
  
          .gooey-menu-inner ul li:hover::before {
              left: 0;
          }
  
          .gooey-menu-inner ul li:hover {
              transform: translateX(15px) scale(1.02);
              box-shadow: 0 8px 25px rgba(29, 151, 152, 0.3);
              border-left: 4px solid #1D9798;
              color: #EFF3F4;
              background: rgba(29, 151, 152, 0.2);
          }
  
          .gooey-menu-inner ul li:nth-child(even):hover {
              border-left: 4px solid #4A6E8C;
              box-shadow: 0 8px 25px rgba(74, 110, 140, 0.3);
          }
  
          .gooey-menu-inner ul li:nth-child(3n):hover {
              border-left: 4px solid #A8ABAD;
              box-shadow: 0 8px 25px rgba(168, 171, 173, 0.3);
          }
  
          /* Sub-menu styles */
          .gooey-menu-inner ul li ul {
              position: static;
              left: auto;
              top: auto;
              background: none;
              width: 100%;
              opacity: 0;
              visibility: hidden;
              max-height: 0;
              overflow: hidden;
              transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              border-radius: 0;
              padding: 0;
              box-shadow: none;
              z-index: 16;
              margin-top: 10px;
          }
  
          .gooey-menu-inner ul li:hover ul {
              opacity: 1;
              visibility: visible;
              max-height: 400px;
              padding: 15px 0;
          }
  
          .gooey-menu-inner ul li ul li {
              color: rgba(239, 243, 244, 0.9);
              padding: 10px 25px;
              font-size: 14px;
              font-weight: normal;
              background: linear-gradient(145deg,
                  rgba(29, 151, 152, 0.15) 0%,
                  rgba(74, 110, 140, 0.12) 35%,
                  rgba(168, 171, 173, 0.08) 50%,
                  rgba(74, 110, 140, 0.12) 65%,
                  rgba(29, 151, 152, 0.15) 100%);
              margin: 3px 10px;
              border-radius: 15px;
              border-left: none;
              transform: translateX(0);
              backdrop-filter: blur(5px);
          }
  
          .gooey-menu-inner ul li ul li::before {
              background: linear-gradient(90deg,
                  rgba(29, 151, 152, 0.2) 0%,
                  rgba(168, 171, 173, 0.1) 100%);
          }
  
          .gooey-menu-inner ul li ul li:hover {
              background: rgba(29, 151, 152, 0.25);
              color: #EFF3F4;
              transform: translateX(10px) scale(1.05);
              box-shadow: 0 4px 15px rgba(29,151,152,0.2);
          }
  
          /* Mouse tracking zone */
          .mouse-track-zone {
              position: fixed;
              left: 0;
              top: 0;
              width: 100px;
              height: 100vh;
              pointer-events: none;
              z-index: 9999;
          }
  
          /* Responsive animations */
          @keyframes glow {
              0%, 100% { filter: drop-shadow(0 0 20px rgba(29, 151, 152, 0.3)); }
              50% { filter: drop-shadow(0 0 30px rgba(74, 110, 140, 0.5)); }
          }
  
          #gooey-menu:hover #gooey-blob-path {
              animation: glow 2s infinite;
          }
  
          /* Color transitions for different states */
          .color-state-1 { fill: url(#gradient1); }
          .color-state-2 { fill: url(#gradient2); }
          .color-state-3 { fill: url(#gradient3); }
  
    
          /* ===== RESPONSIVE MEDIA QUERIES ===== */
  
          /* Extra Small Devices (xs) - up to 360px */
          @media (max-width: 360px) {
            #gooey-menu {
                height: calc(100vh - 125px); /* Smaller adjustment for very small screens */
            }
              
              #gooey-menu:hover,
              #gooey-menu.expanded {
                  transform: translateX(0);
              }
              
              .gooey-hamburger {
                  right: 12px;
                  width: 24px;
                  height: 24px;
                  margin-top: -12px;
              }
              
              .gooey-menu-inner ul {
                  width: 220px;
                  margin-left: 15px;
              }
              
              .gooey-menu-inner ul li {
                  padding: 12px 15px;
                  font-size: 14px;
                  margin: 6px 0;
              }
              
              .gooey-menu-inner ul li ul li {
                  padding: 8px 20px;
                  font-size: 12px;
              }
              
              .scroll-indicators {
                  right: 10px;
              }
              
              .scroll-dot {
                  width: 6px;
                  height: 6px;
              }
              
              .demo-text {
                  font-size: 18px;
                  padding: 10px;
              }
          }
  
          /* Small Devices (sm) - 361px to 686px */
          @media (max-width: 360px) {
            #gooey-menu {
                display: none;
                height: calc(100vh - 160px);
                max-height: calc(100vh - 160px);
                bottom: 160px;
            }
        
              
              .gooey-hamburger {
                display: none;
                  right: 12px;
                  width: 26px;
                  height: 26px;
                  margin-top: -13px;
              }
              
              .gooey-menu-inner ul {
                  width: 240px;
                  margin-left: 18px;
              }
              
              .gooey-menu-inner ul li {
                  padding: 13px 18px;
                  font-size: 15px;
                  margin: 7px 0;
              }
              
              .gooey-menu-inner ul li ul li {
                  padding: 9px 22px;
                  font-size: 13px;
              }
              
              .demo-text {
                  font-size: 20px;
                  padding: 15px;
              }
          }
  
          /* Medium Devices (md) - 687px to 880px */
          @media (max-width: 686px) {
            #gooey-menu {
                display: none;
                height: calc(100vh - 130px); /* Adjust for mobile footer */
            }
              
              .gooey-hamburger {
                display: none;
                  right: 15px;
              }
          }
  
          /* Large Devices (lg) - 881px to 992px */
          @media (max-width: 880px) and (orientation: landscape) {
            #gooey-menu {
                height: calc(100vh - 120px); /* Smaller footer on landscape */
            }
              
              .gooey-menu-inner ul {
                  width: 280px;
                  margin-left: 20px;
              }
              
              .gooey-menu-inner ul li {
                  padding: 16px 22px;
                  font-size: 17px;
              }
          }
  
          /* Extra Large Devices (xl) - 993px and up */
          @media (min-width: 993px) {
              #gooey-menu {
                  width: 360px;
                  transform: translateX(-300px);
              }
              
              .gooey-menu-inner ul {
                  width: 300px;
                  margin-left: 25px;
              }
              
              .gooey-menu-inner ul li {
                  padding: 18px 25px;
                  font-size: 18px;
              }
              
              .gooey-menu-inner ul li ul li {
                  padding: 12px 30px;
                  font-size: 15px;
              }
          }
  
          /* Touch Device Optimizations */
          @media (hover: none) and (pointer: coarse) {
              .gooey-hamburger {
                  opacity: 1;
                  transform: scale(1.2);
              }
              
              .gooey-menu-inner ul li {
                  padding: 18px 20px;
                  font-size: 16px;
              }
              
              .gooey-menu-inner ul li:hover {
                  transform: translateX(8px) scale(1.01);
              }
              
              .scroll-arrow {
                  width: 40px;
                  height: 40px;
                  opacity: 1;
                  visibility: visible;
              }
              
              .scroll-dot {
                  width: 12px;
                  height: 12px;
              }
          }
  
          /* High DPI / Retina Displays */
          @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
              .gooey-hamburger .gooey-line {
                  height: 2px;
              }
              
              .scroll-dot {
                  border: 1px solid rgba(239, 243, 244, 0.2);
              }
          }
  
          /* Landscape Orientation on Mobile */
          @media (max-width: 880px) and (orientation: landscape) {
              #gooey-menu {
                  width: 280px;
                  transform: translateX(-220px);
              }
              
              .gooey-menu-inner {
                  padding-top: 60px;
              }
              
              .menu-scroll-container {
                  height: calc(100vh - 120px);
              }
              
              .gooey-menu-inner ul li {
                  padding: 10px 15px;
                  margin: 4px 0;
              }
          }
  
          /* Reduced Motion Preference */
          @media (prefers-reduced-motion: reduce) {
              #gooey-menu,
              .gooey-hamburger,
              .gooey-menu-inner ul li,
              .scroll-dot {
                  transition: none;
              }
              
              .gooey-menu-inner::before,
              .gooey-menu-inner::after,
              .gooey-extra-blob,
              .gooey-mouse-blob {
                  animation: none;
                  filter: none;
              }
          }
          
          /* paragraph and img in two half */
          .lefancaps-main-container {
              width: fit-content;
              margin: 0 auto;
              display: flex;
              align-items: center;
              gap: 40px;
              padding: 40px;
          }
  
          .pharmaceutical-description-panel {
              flex: 1;
              font-size: 24px;
              line-height: 1.6;
              color: #333;
              text-align: justify;
          }
  
          .pharmaceutical-description-panel .company-brand-name-underlined {
              text-decoration: underline;
              font-weight: bold;
          }
  
          .brand-logo-display-section {
              flex: 0 0 350px;
              display: flex;
              justify-content: center;
              align-items: center;
          }
          
          .lefancaps-logo-image {
              width: auto;
              height: 250px;
              border-radius: 12px;
              object-fit: contain;
          }
  
          /* Responsive Design for Mobile Devices */
          @media (max-width: 768px) {
              .lefancaps-main-container {
                  flex-direction: column;
                  text-align: center;
                  padding: 20px;
              }
              
              .pharmaceutical-description-panel {
                  font-size: 20px;
              }
              
              .brand-logo-display-section {
                  flex: none;
              }
              
              .lefancaps-logo-image {
                  width: 300px;
                  height: 200px;
              }
          }
  
          /* Table */
  
            .table-container {
              max-width: 1400px;
              margin: 0 auto;
              background: rgba(255, 255, 255, 0.95);
              border-radius: 20px;
              box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
              overflow: hidden;
              animation: slideInFromTop 0.8s ease-out;
              backdrop-filter: blur(10px);
          }
  
          @keyframes slideInFromTop {
              from {
                  opacity: 0;
                  transform: translateY(-50px);
              }
              to {
                  opacity: 1;
                  transform: translateY(0);
              }
          }
  
  
          .therapy-comparison-table {
              width: 100%;
              border-collapse: collapse;
              font-size: 14px;
              position: relative;
          }
  
          .therapy-header-row {
              background: linear-gradient(135deg, #4A6E8C, #0F74A3);
              color: white;
              font-weight: 600;
              letter-spacing: 0.5px;
          }
  
          .therapy-header-cell {
              padding: 20px 15px;
              text-align: center;
              border-right: 2px solid rgba(255, 255, 255, 0.2);
              position: relative;
              transition: all 0.3s ease;
          }
  
          .therapy-header-cell:last-child {
              border-right: none;
          }
  
          .therapy-header-cell::before {
              content: '';
              position: absolute;
              bottom: 0;
              left: 50%;
              width: 0;
              height: 3px;
              background: linear-gradient(90deg, #EFF3F4, #1D9798);
              transition: all 0.3s ease;
              transform: translateX(-50%);
          }
  
          .therapy-header-cell:hover::before {
              width: 100%;
          }
  
          .therapy-data-row {
              transition: all 0.4s ease;
              position: relative;
              border-bottom: 1px solid rgba(168, 171, 173, 0.3);
          }
  
          .therapy-data-row:nth-child(even) {
              background: linear-gradient(135deg, rgba(239, 243, 244, 0.5), rgba(168, 171, 173, 0.1));
          }
  
          .therapy-data-row:nth-child(odd) {
              background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(239, 243, 244, 0.3));
          }
  
          .therapy-data-row:hover {
              background: linear-gradient(135deg, rgba(29, 151, 152, 0.1), rgba(15, 116, 163, 0.1));
              transform: scale(1.02);
              box-shadow: 0 8px 25px rgba(29, 151, 152, 0.2);
              z-index: 10;
          }
  
          .therapy-name-cell {
              padding: 20px 15px;
              font-weight: 700;
              background: linear-gradient(135deg, #2d3d4e, #2c4c5c);
              color: white;
              border-right: 3px solid #1D9798;
              font-size: 16px;
              position: relative;
              overflow: hidden;
          }
  
          .therapy-name-cell::after {
              content: '';
              position: absolute;
              top: 0;
              right: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, transparent, rgba(29, 151, 152, 0.3), transparent);
              transition: right 0.5s ease;
          }
  
          .therapy-data-row:hover .therapy-name-cell::after {
              right: 100%;
          }
  
          .therapy-info-cell {
              padding: 18px 15px;
              border-right: 1px solid rgba(168, 171, 173, 0.3);
              vertical-align: top;
              line-height: 1.6;
              transition: all 0.3s ease;
              position: relative;
          }
  
          .therapy-info-cell:last-child {
              border-right: none;
          }
  
          .efficacy-high {
              background: linear-gradient(135deg, rgba(29, 151, 152, 0.2), rgba(15, 116, 163, 0.1));
              border-left: 4px solid #1D9798;
          }
  
          .efficacy-moderate {
              background: linear-gradient(135deg, rgba(15, 116, 163, 0.2), rgba(74, 110, 140, 0.1));
              border-left: 4px solid #0F74A3;
          }
  
          .efficacy-low {
              background: linear-gradient(135deg, rgba(168, 171, 173, 0.2), rgba(239, 243, 244, 0.1));
              border-left: 4px solid #A8ABAD;
          }
  
          .cost-indicator {
              display: inline-block;
              padding: 6px 12px;
              border-radius: 20px;
              font-weight: 600;
              font-size: 12px;
              text-transform: uppercase;
              letter-spacing: 0.5px;
          }

  
          .cost-low {
              background: linear-gradient(135deg, #1D9798, #0F74A3);
              color: white;
          }
  
          .cost-high {
              background: linear-gradient(135deg, #2d3d4e, #2c4c5c);
              color: white;
          }
  
          .side-effects-mild {
              color: #1D9798;
              font-weight: 600;
          }
  
          .side-effects-major {
              color: #2d3d4e;
              font-weight: 600;
          }
  
          .features-highlight {
              background: linear-gradient(135deg, rgba(29, 151, 152, 0.1), rgba(239, 243, 244, 0.2));
              padding: 8px;
              border-radius: 8px;
              border-left: 3px solid #1D9798;
          }
  
          /* CSS Custom Properties for Container Breakpoints */
          :root {
              --container-max-width-xs: 350px;
              --container-max-width-sm: 686px;
              --container-max-width-md: 880px;
              --container-max-width-lg: 992px;
              --container-max-width-xl: 1420px;
          }
  
          
          /* Extra Small Devices (max-width: 350px) */
          @media (max-width: 350px) {
              .table-container {
                  margin: 5px;
                  border-radius: 10px;
                  max-width: var(--container-max-width-xs);
              }
              
              .therapy-comparison-table {
                  font-size: 9px;
              }
              
              .therapy-header-cell,
              .therapy-info-cell {
                  padding: 8px 4px;
                  line-height: 1.2;
              }
              
              .therapy-name-cell {
                  padding: 10px 6px;
                  font-size: 10px;
              }
              
              .cost-indicator {
                  font-size: 8px;
                  padding: 4px 8px;
              }
              
              .features-highlight {
                  padding: 4px;
                  font-size: 8px;
              }
          }
  
          /* Small Devices (351px to 686px) */
          @media (min-width: 351px) and (max-width: 686px) {
              .table-container {
                  margin: 8px;
                  border-radius: 12px;
                  max-width: var(--container-max-width-sm);
              }
              
          
              
              .therapy-comparison-table {
                  font-size: 10px;
              }
              
              .therapy-header-cell,
              .therapy-info-cell {
                  padding: 10px 6px;
                  line-height: 1.3;
              }
              
              .therapy-name-cell {
                  padding: 12px 8px;
                  font-size: 11px;
              }
              
              .cost-indicator {
                  font-size: 9px;
                  padding: 5px 9px;
              }
              
              .features-highlight {
                  padding: 6px;
                  font-size: 9px;
              }
          }
  
          /* Medium Devices (687px to 880px) */
          @media (min-width: 687px) and (max-width: 880px) {
              .table-container {
                  margin: 12px;
                  border-radius: 15px;
                  max-width: var(--container-max-width-md);
              }
            
              
              .therapy-comparison-table {
                  font-size: 11px;
              }
              
              .therapy-header-cell,
              .therapy-info-cell {
                  padding: 12px 8px;
                  line-height: 1.4;
              }
              
              .therapy-name-cell {
                  padding: 14px 10px;
                  font-size: 12px;
              }
              
              .cost-indicator {
                  font-size: 10px;
                  padding: 5px 10px;
              }
              
              .features-highlight {
                  padding: 6px;
                  font-size: 10px;
              }
          }
  
          /* Large Devices (881px to 992px) */
          @media (min-width: 881px) and (max-width: 992px) {
              .table-container {
                  margin: 15px;
                  border-radius: 16px;
                  max-width: var(--container-max-width-lg);
              }
              
            
              
              .therapy-comparison-table {
                  font-size: 12px;
              }
              
              .therapy-header-cell,
              .therapy-info-cell {
                  padding: 14px 10px;
                  line-height: 1.5;
              }
              
              .therapy-name-cell {
                  padding: 16px 12px;
                  font-size: 13px;
              }
              
              .cost-indicator {
                  font-size: 11px;
                  padding: 6px 11px;
              }
              
              .features-highlight {
                  padding: 7px;
                  font-size: 11px;
              }
          }
  
          /* Extra Large Devices (993px to 1420px) */
          @media (min-width: 993px) and (max-width: 1420px) {
              .table-container {
                  margin: 20px auto;
                  border-radius: 18px;
                  max-width: var(--container-max-width-xl);
              }
              
          
              
              .therapy-comparison-table {
                  font-size: 13px;
              }
              
              .therapy-header-cell,
              .therapy-info-cell {
                  padding: 16px 12px;
                  line-height: 1.6;
              }
              
              .therapy-name-cell {
                  padding: 18px 14px;
                  font-size: 14px;
              }
              
              .cost-indicator {
                  font-size: 12px;
                  padding: 6px 12px;
              }
              
              .features-highlight {
                  padding: 8px;
                  font-size: 12px;
              }
          }
  
          /* Ultra Wide Devices (above 1420px) */
          @media (min-width: 1421px) {
              .table-container {
                  margin: 20px auto;
                  border-radius: 20px;
                  max-width: var(--container-max-width-xl);
              }
              
              
              .therapy-comparison-table {
                  font-size: 14px;
              }
              
              .therapy-header-cell,
              .therapy-info-cell {
                  padding: 18px 15px;
                  line-height: 1.6;
              }
              
              .therapy-name-cell {
                  padding: 20px 15px;
                  font-size: 16px;
              }
              
              .cost-indicator {
                  font-size: 12px;
                  padding: 6px 12px;
              }
              
              .features-highlight {
                  padding: 8px;
                  font-size: 13px;
              }
          }
  
          /* Loading animation for table rows */
          .therapy-data-row {
              animation: fadeInRow 0.6s ease-out forwards;
              opacity: 0;
          }
  
          .therapy-data-row:nth-child(2) { animation-delay: 0.1s; }
          .therapy-data-row:nth-child(3) { animation-delay: 0.2s; }
          .therapy-data-row:nth-child(4) { animation-delay: 0.3s; }
          .therapy-data-row:nth-child(5) { animation-delay: 0.4s; }
          .therapy-data-row:nth-child(6) { animation-delay: 0.5s; }
          .therapy-data-row:nth-child(7) { animation-delay: 0.6s; }
  
          @keyframes fadeInRow {
              from {
                  opacity: 0;
                  transform: translateX(-20px);
              }
              to {
                  opacity: 1;
                  transform: translateX(0);
              }
          }
          /* flip card */
          /* Container for all flip cards */
          .flip-cards-wrapper {
              display: flex;
              flex-wrap: wrap;
              gap: 50px;
              justify-content: center;
              max-width: 1200px;
              margin: 0 auto;
              padding: 40px 20px;
          }
  
          .flip-card-container {
              width: 350px;
              height: 450px;
              perspective: 1000px;
              position: relative;
          }
  
          .flip-card {
              width: 100%;
              height: 100%;
              position: relative;
              transform-style: preserve-3d;
              transition: transform 0.6s;
          }
  
          .flip-card-container:hover .flip-card {
              transform: rotateY(180deg);
          }
  
          .flip-card-front,
          .flip-card-back {
              position: absolute;
              width: 100%;
              height: 100%;
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
              border-radius: 20px;
              overflow: hidden;
              box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
          }
  
          .flip-card-front {
              background: linear-gradient(145deg, #2c4c5c 0%, #4A6B8C 100%);
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 30px;
              cursor: pointer;
          }
  
          .flip-card-back {
              background: linear-gradient(145deg, #0F74A3 0%, #1D9798 100%);
              transform: rotateY(180deg);
              padding: 30px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              cursor: pointer;
          }
          
          .image-container {
              width: 100%;
              height: 250px;
              background: linear-gradient(135deg, #A8ABAD 0%, #EFF3F4 100%);
              border-radius: 15px;
              overflow: hidden;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 30px;
              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
          }
  
          .image-placeholder {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              background-size: cover;
              background-repeat: no-repeat;
              background-position: center;
              object-fit: contain;
          }
  
          .front-title {
              color: #EFF3F4;
              font-size: 28px;
              font-weight: bold;
              text-align: center;
              margin-bottom: 15px;
              text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
          }
  
          .front-subtitle {
              color: #A8ABAD;
              font-size: 16px;
              text-align: center;
              line-height: 1.5;
          }
  
          .flip-indicator {
              position: absolute;
              bottom: 20px;
              right: 20px;
              background: rgba(29, 151, 152, 0.9);
              color: #EFF3F4;
              padding: 8px 15px;
              border-radius: 20px;
              font-size: 12px;
              display: flex;
              align-items: center;
              gap: 5px;
              animation: pulse 2s infinite;
              pointer-events: none;
          }
  
          @keyframes pulse {
              0%, 100% { transform: scale(1); opacity: 0.9; }
              50% { transform: scale(1.05); opacity: 1; }
          }
  
          .info-section {
              flex-grow: 1;
              color: #EFF3F4;
          }
  
          .info-item {
              margin-bottom: 20px;
              padding-left: 10px;
              border-left: 3px solid #1D9798;
          }
  
          .info-item h3 {
              font-size: 20px;
              color: #A8ABAD;
              margin-bottom: 8px;
              text-transform: uppercase;
              letter-spacing: 1px;
          }
  
          .info-item p {
              font-size: 14px;
              line-height: 1.6;
              color: #EFF3F4;
          }
  
          .back-flip-indicator {
              position: absolute;
              top: 20px;
              right: 20px;
              background: rgba(45, 61, 78, 0.9);
              color: #EFF3F4;
              padding: 8px 15px;
              border-radius: 20px;
              font-size: 12px;
              display: flex;
              align-items: center;
              gap: 5px;
              pointer-events: none;
          }
  
          .flip-icon {
              display: inline-block;
              animation: rotate 3s linear infinite;
          }
  
          @keyframes rotate {
              from { transform: rotate(0deg); }
              to { transform: rotate(360deg); }
          }
  
          /* Responsive Design */
          @media (max-width: 768px) {
              .flip-cards-wrapper {
                  flex-direction: column;
                  align-items: center;
                  gap: 20px;
              }
              
              .flip-card-container {
                  width: 100%;
                  max-width: 350px;
                  height: 400px;
              }
  
              .front-title {
                  font-size: 24px;
              }
          }
  
          @media (min-width: 769px) and (max-width: 1024px) {
              .flip-cards-wrapper {
                  justify-content: center;
              }
              
              .flip-card-container {
                  width: 320px;
                  height: 420px;
              }
          }
  
          /* For exactly 2 cards per row on larger screens */
          @media (min-width: 1025px) {
              .flip-cards-wrapper {
                  justify-content: center;
              }
              
              .flip-card-container {
                  flex: 0 0 calc(50% - 15px);
                  max-width: 350px;
              }
          }
  
          /* Section title styling */
          .section-title {
              text-align: center;
              font-size: 2.5rem;
              margin-bottom: 2rem;
              background: linear-gradient(135deg, #1D9798 0%, #0F74A3 50%, #4A6E8C 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
          }
  
          /* AFCM iGEM 2025 Skills Card */
          .afcm-igem-skills-card-body {
              font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
              /* background: linear-gradient(135deg, #EFF3F4, #A8ABAD); */
              min-height: 100vh;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 20px;
          }
  
          .afcm-igem-skills-card-main-container {
              background: white;
              border-radius: 20px;
              box-shadow: 0 20px 40px rgba(45, 61, 78, 0.15);
              overflow: hidden;
              max-width: 600px;
              width: 100%;
              position: relative;
              opacity: 0;
              transform: translateY(50px) scale(0.95);
              animation: afcm-igem-card-entrance 1.2s ease-out forwards;
          }
  
          @keyframes afcm-igem-card-entrance {
              0% {
                  opacity: 0;
                  transform: translateY(50px) scale(0.95);
              }
              60% {
                  opacity: 0.8;
                  transform: translateY(-10px) scale(1.02);
              }
              100% {
                  opacity: 1;
                  transform: translateY(0) scale(1);
              }
          }
  
          .afcm-igem-skills-card-main-container:hover {
              transform: translateY(-8px) scale(1.02);
              box-shadow: 0 30px 60px rgba(45, 61, 78, 0.25);
              transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          }
  
          .afcm-igem-skills-card-header-section {
              background: linear-gradient(135deg, #2d3d4e, #2c4c5c, #4A6E8C);
              padding: 30px;
              position: relative;
              overflow: hidden;
          }
  
          .afcm-igem-skills-card-header-section::before {
              content: '';
              position: absolute;
              top: -50%;
              left: -50%;
              right: -50%;
              bottom: -50%;
              background: linear-gradient(45deg, transparent 30%, rgba(29, 151, 152, 0.3) 50%, transparent 70%);
              animation: afcm-igem-rotating-gradient 4s linear infinite;
          }
  
          @keyframes afcm-igem-rotating-gradient {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
          }
  
          .afcm-igem-skills-card-title-primary {
              color: white;
              font-size: 2.2em;
              font-weight: 300;
              letter-spacing: 2px;
              position: relative;
              z-index: 2;
          }
  
          .afcm-igem-skills-card-animated-dot {
              display: inline-block;
              width: 8px;
              height: 8px;
              background: #1D9798;
              border-radius: 50%;
              margin-right: 15px;
              animation: afcm-igem-dot-morphing 2.5s ease-in-out infinite;
          }
  
          @keyframes afcm-igem-dot-morphing {
              0%, 100% { 
                  opacity: 1; 
                  transform: scale(1);
                  background: #1D9798;
              }
              25% { 
                  opacity: 0.7; 
                  transform: scale(1.5);
                  background: #0F74A3;
              }
              50% { 
                  opacity: 0.4; 
                  transform: scale(0.8);
                  background: #4A6E8C;
              }
              75% { 
                  opacity: 0.7; 
                  transform: scale(1.2);
                  background: #2c4c5c;
              }
          }
  
          .afcm-igem-skills-card-content-wrapper {
              padding: 40px;
              background: linear-gradient(to bottom, white, #EFF3F4);
          }
  
          .afcm-igem-team-information-container {
              background: white;
              padding: 30px;
              border-radius: 15px;
              border-left: 5px solid #1D9798;
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
              position: relative;
          }
  
          .afcm-igem-team-information-container::before {
              content: '';
              position: absolute;
              top: 0;
              right: 0;
              width: 100px;
              height: 100px;
              background: radial-gradient(circle, rgba(29, 151, 152, 0.1) 0%, transparent 70%);
              border-radius: 50%;
              animation: afcm-igem-floating-circle 3s ease-in-out infinite;
          }
  
          @keyframes afcm-igem-floating-circle {
              0%, 100% { 
                  transform: scale(1) rotate(0deg); 
                  opacity: 0.3;
              }
              50% { 
                  transform: scale(1.1) rotate(180deg); 
                  opacity: 0.6;
              }
          }
  
          .afcm-igem-team-description-text {
              font-size: 1.1em;
              line-height: 1.8;
              color: #2d3d4e;
              margin-bottom: 25px;
          }
  
          .afcm-igem-team-description-text strong {
              color: #1D9798;
              font-weight: 600;
          }
  
          .afcm-igem-highlighted-gradient-text {
              background: linear-gradient(135deg, #0F74A3, #1D9798);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              font-weight: 600;
              animation: afcm-igem-text-glow 2s ease-in-out infinite alternate;
          }
  
          @keyframes afcm-igem-text-glow {
              0% { filter: brightness(1); }
              100% { filter: brightness(1.2); }
          }
  
          .afcm-igem-expertise-areas-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
              gap: 15px;
              margin: 25px 0;
          }
  
          .afcm-igem-expertise-item-card {
              background: linear-gradient(135deg, rgba(15, 116, 163, 0.05), rgba(29, 151, 152, 0.05));
              padding: 15px 20px;
              border-radius: 10px;
              border: 1px solid rgba(15, 116, 163, 0.1);
              font-weight: 500;
              color: #2d3d4e;
              text-align: center;
              transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              transform: translateZ(0);
          }
  
          .afcm-igem-expertise-item-card:hover {
              background: linear-gradient(135deg, rgba(15, 116, 163, 0.1), rgba(29, 151, 152, 0.1));
              transform: translateY(-5px) rotateX(10deg);
              box-shadow: 0 10px 25px rgba(15, 116, 163, 0.2);
          }
  
  
  
          /* XS Devices */
          @media (max-width: 350px) {
              .afcm-igem-skills-card-main-container {
                  max-width: var(--container-max-width-xs);
                  margin: 10px;
                  border-radius: 15px;
              }
              
              .afcm-igem-skills-card-title-primary {
                  font-size: 1.5em;
                  letter-spacing: 1px;
              }
              
              .afcm-igem-skills-card-content-wrapper {
                  padding: 20px;
              }
              
              .afcm-igem-team-information-container {
                  padding: 15px;
              }
              
  
              
              .afcm-igem-expertise-areas-grid {
                  grid-template-columns: 1fr;
                  gap: 10px;
              }
          }
  
          /* SM Devices */
          @media (min-width: 351px) and (max-width: 686px) {
              .afcm-igem-skills-card-main-container {
                  max-width: var(--container-max-width-sm);
              }
              
              .afcm-igem-skills-card-title-primary {
                  font-size: 1.8em;
              }
              
              .afcm-igem-skills-card-content-wrapper {
                  padding: 25px;
              }
              
              .afcm-igem-team-information-container {
                  padding: 20px;
              }
  
              
              .afcm-igem-expertise-areas-grid {
                  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
              }
          }
  
          /* MD Devices */
          @media (min-width: 687px) and (max-width: 880px) {
              .afcm-igem-skills-card-main-container {
                  max-width: var(--container-max-width-md);
              }
              
              .afcm-igem-skills-card-content-wrapper {
                  padding: 35px;
              }
              
              .afcm-igem-expertise-areas-grid {
                  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
              }
          }
  
          /* LG Devices */
          @media (min-width: 881px) and (max-width: 992px) {
              .afcm-igem-skills-card-main-container {
                  max-width: var(--container-max-width-lg);
              }
              
              .afcm-igem-skills-card-content-wrapper {
                  padding: 40px;
              }
          }
  
          /* XL Devices */
          @media (min-width: 993px) {
              .afcm-igem-skills-card-main-container {
                  max-width: var(--container-max-width-xl);
              }
              
              .afcm-igem-skills-card-title-primary {
                  font-size: 2.5em;
              }
              
              .afcm-igem-skills-card-content-wrapper {
                  padding: 50px;
              }
              
              .afcm-igem-team-information-container {
                  padding: 40px;
              }
  
          }
  
          /* AFCM team iGEM Info card */
  
          .afcm-igem-professional-cards-body {
              font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
              min-height: 100vh;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 40px 20px;
          }
  
          .afcm-igem-hover-cards-main-container {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
              gap: 30px;
              max-width: var(--container-max-width-xl);
              width: 80%;
          }
  
          .afcm-igem-professional-hover-card {
              position: relative;
              width: 100%;
              height: 400px;
              background: linear-gradient(135deg, #EFF3F4, #A8ABAD);
              border-radius: 20px;
              overflow: hidden;
              cursor: pointer;
              transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
              box-shadow: 
                  0 10px 30px rgba(45, 61, 78, 0.3),
                  0 1px 8px rgba(45, 61, 78, 0.2);
              transform-style: preserve-3d;
          }
  
          .afcm-igem-professional-hover-card:hover {
              transform: translateY(-10px);
              box-shadow: 
                  0 25px 50px rgba(45, 61, 78, 0.4),
                  0 10px 20px rgba(29, 151, 152, 0.2);
          }
  
          .afcm-igem-hover-card-front-face {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: #2c4c5c;
              transition: all 0.6s ease;
              z-index: 2;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding: 30px;
          }
  
          .afcm-igem-hover-card-avatar-circle {
              width: 120px;
              height: 120px;
              border-radius: 50%;
              background: linear-gradient(135deg, #1D9798, #0F74A3);
              margin-bottom: 25px;
              position: relative;
              overflow: hidden;
              border: 4px solid rgba(255, 255, 255, 0.8);
              transition: all 0.4s ease;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 48px;
              color: white;
              font-weight: bold;
          }
          
          .afcm-igem-hover-card-avatar-circle > img{
            width: 120px;
          }
          .afcm-igem-hover-card-avatar-circle::before {
              content: '';
              position: absolute;
              top: -50%;
              left: -50%;
              width: 200%;
              height: 200%;
              background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
              transform: rotate(45deg);
              transition: all 0.6s ease;
              opacity: 0;
          }
  
          .afcm-igem-professional-hover-card:hover .afcm-igem-hover-card-avatar-circle::before {
              opacity: 1;
              animation: afcm-igem-shimmer-effect 1.5s ease-in-out;
          }
  
          @keyframes afcm-igem-shimmer-effect {
              0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
              100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
          }
  
          .afcm-igem-hover-card-primary-name {
              font-size: 24px;
              font-weight: 700;
              color: #ffffff;
              text-align: center;
              letter-spacing: 0.5px;
              transition: all 0.4s ease;
          }
  
          .afcm-igem-hover-card-secondary-title {
              font-size: 16px;
              color: lightgray;
              margin-top: 8px;
              font-weight: 500;
              opacity: 0.8;
          }
  
          .afcm-igem-hover-card-back-face {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: linear-gradient(135deg, #2d3d4e, #2c4c5c, #1D9798);
              color: white;
              opacity: 0;
              transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding: 40px 30px;
              text-align: center;
              z-index: 1;
          }
  
          .afcm-igem-professional-hover-card:hover .afcm-igem-hover-card-front-face {
              opacity: 0;
          }
  
          .afcm-igem-professional-hover-card:hover .afcm-igem-hover-card-back-face {
              opacity: 1;
              z-index: 3;
          }
  
          .afcm-igem-hover-card-back-face h3 {
              font-size: 28px;
              margin-bottom: 20px;
              color: #EFF3F4;
              font-weight: 600;
          }
  
          .afcm-igem-hover-card-back-face p {
              font-size: 16px;
              line-height: 1.6;
              color: rgba(239, 243, 244, 0.9);
              margin-bottom: 20px;
          }
  
          /* XS Devices */
          @media (max-width: 350px) {
              .afcm-igem-hover-cards-main-container {
                  max-width: var(--container-max-width-xs);
                  grid-template-columns: 1fr;
                  gap: 15px;
                  padding: 15px;
              }
              
              .afcm-igem-professional-hover-card {
                  height: 300px;
                  border-radius: 15px;
              }
              
              .afcm-igem-hover-card-avatar-circle {
                  width: 80px;
                  height: 80px;
                  font-size: 32px;
                  margin-bottom: 15px;
              }
              
              .afcm-igem-hover-card-primary-name {
                  font-size: 18px;
              }
              
              .afcm-igem-hover-card-secondary-title {
                  font-size: 14px;
              }
              
              .afcm-igem-hover-card-front-face,
              .afcm-igem-hover-card-back-face {
                  padding: 20px 15px;
              }
              
              .afcm-igem-hover-card-back-face h3 {
                  font-size: 20px;
                  margin-bottom: 15px;
              }
              
              .afcm-igem-hover-card-back-face p {
                  font-size: 13px;
                  line-height: 1.5;
                  margin-bottom: 15px;
              }
          }
  
          /* SM Devices */
          @media (min-width: 351px) and (max-width: 686px) {
              .afcm-igem-hover-cards-main-container {
                  max-width: var(--container-max-width-sm);
                  grid-template-columns: 1fr;
                  gap: 20px;
                  padding: 20px;
              }
              
              .afcm-igem-professional-hover-card {
                  height: 350px;
              }
              
              .afcm-igem-hover-card-avatar-circle {
                  width: 100px;
                  height: 100px;
                  font-size: 40px;
                  margin-bottom: 20px;
              }
              
              .afcm-igem-hover-card-primary-name {
                  font-size: 20px;
              }
              
              .afcm-igem-hover-card-secondary-title {
                  font-size: 15px;
              }
              
              .afcm-igem-hover-card-front-face,
              .afcm-igem-hover-card-back-face {
                  padding: 25px 20px;
              }
              
              .afcm-igem-hover-card-back-face h3 {
                  font-size: 22px;
                  margin-bottom: 18px;
              }
              
              .afcm-igem-hover-card-back-face p {
                  font-size: 14px;
                  line-height: 1.6;
                  margin-bottom: 18px;
              }
          }
  
          /* MD Devices */
          @media (min-width: 687px) and (max-width: 880px) {
              .afcm-igem-hover-cards-main-container {
                  max-width: var(--container-max-width-md);
                  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                  gap: 25px;
              }
              
              .afcm-igem-professional-hover-card {
                  height: 380px;
              }
              
              .afcm-igem-hover-card-avatar-circle {
                  width: 110px;
                  height: 110px;
                  font-size: 44px;
                  margin-bottom: 22px;
              }
              
              .afcm-igem-hover-card-primary-name {
                  font-size: 22px;
              }
              
              .afcm-igem-hover-card-secondary-title {
                  font-size: 15px;
              }
              
              .afcm-igem-hover-card-front-face,
              .afcm-igem-hover-card-back-face {
                  padding: 30px 25px;
              }
              
              .afcm-igem-hover-card-back-face h3 {
                  font-size: 25px;
                  margin-bottom: 18px;
              }
              
              .afcm-igem-hover-card-back-face p {
                  font-size: 15px;
                  line-height: 1.6;
                  margin-bottom: 18px;
              }
          }
  
          /* LG Devices */
          @media (min-width: 881px) and (max-width: 992px) {
              .afcm-igem-hover-cards-main-container {
                  max-width: var(--container-max-width-lg);
                  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                  gap: 28px;
              }
              
              .afcm-igem-professional-hover-card {
                  height: 390px;
              }
              
              .afcm-igem-hover-card-avatar-circle {
                  width: 115px;
                  height: 115px;
                  font-size: 46px;
                  margin-bottom: 23px;
              }
              
              .afcm-igem-hover-card-primary-name {
                  font-size: 23px;
              }
              
              .afcm-igem-hover-card-secondary-title {
                  font-size: 16px;
              }
              
              .afcm-igem-hover-card-front-face,
              .afcm-igem-hover-card-back-face {
                  padding: 35px 28px;
              }
              
              .afcm-igem-hover-card-back-face h3 {
                  font-size: 26px;
                  margin-bottom: 19px;
              }
              
              .afcm-igem-hover-card-back-face p {
                  font-size: 15px;
                  line-height: 1.6;
                  margin-bottom: 19px;
              }
          }
  
          /* XL Devices */
          @media (min-width: 993px) {
              .afcm-igem-hover-cards-main-container {
                  max-width: var(--container-max-width-xl);
                  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                  gap: 30px;
              }
              
              .afcm-igem-professional-hover-card {
                  height: 400px;
              }
              
              .afcm-igem-hover-card-avatar-circle {
                  width: 120px;
                  height: 120px;
                  font-size: 48px;
                  margin-bottom: 25px;
              }
              
              .afcm-igem-hover-card-primary-name {
                  font-size: 24px;
              }
              
              .afcm-igem-hover-card-secondary-title {
                  font-size: 16px;
              }
              
              .afcm-igem-hover-card-front-face,
              .afcm-igem-hover-card-back-face {
                  padding: 40px 30px;
              }
              
              .afcm-igem-hover-card-back-face h3 {
                  font-size: 28px;
                  margin-bottom: 20px;
              }
              
              .afcm-igem-hover-card-back-face p {
                  font-size: 16px;
                  line-height: 1.6;
                  margin-bottom: 20px;
              }
          }
  
          /* Loading Animation */
          .afcm-igem-professional-hover-card {
              animation: afcm-igem-card-slide-in-animation 0.8s ease-out forwards;
              opacity: 0;
          }
  
          .afcm-igem-professional-hover-card:nth-child(1) { animation-delay: 0.1s; }
          .afcm-igem-professional-hover-card:nth-child(2) { animation-delay: 0.2s; }
          .afcm-igem-professional-hover-card:nth-child(3) { animation-delay: 0.3s; }
          .afcm-igem-professional-hover-card:nth-child(4) { animation-delay: 0.4s; }
  
          @keyframes afcm-igem-card-slide-in-animation {
              from {
                  opacity: 0;
                  transform: translateY(30px);
              }
              to {
                  opacity: 1;
                  transform: translateY(0);
              }
          }
        
        
        
   
          /* stake holders profile card */
  
          .stakeholders-profile-card {
              background: #fff;
              border-radius: 25px;
              max-width: var(--container-max-width-md);
              width: 100%;
              overflow: hidden;
              box-shadow: 0 25px 50px rgba(45, 61, 78, 0.15);
              transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              position: relative;
              border: 3px solid transparent;
              background-clip: padding-box;
          }
  
          .stakeholders-profile-card::before {
              content: '';
              position: absolute;
              top: -3px;
              left: -3px;
              right: -3px;
              bottom: -3px;
              background: linear-gradient(135deg, #2d3d4e, #2c4c5c, #4A6E8C, #0F74A3);
              border-radius: 25px;
              z-index: -1;
              opacity: 0;
              transition: opacity 0.4s ease;
          }
  
          .stakeholders-profile-card:hover {
              transform: translateY(-10px);
              box-shadow: 0 40px 80px rgba(45, 61, 78, 0.25);
          }
  
          .stakeholders-profile-card:hover::before {
              opacity: 1;
          }
  
          .stakeholders-card-header {
              background: linear-gradient(135deg, #2d3d4e 0%, #2c4c5c 50%, #4A6E8C 100%);
              color: white;
              padding: 30px;
              position: relative;
              overflow: hidden;
          }
  
          .stakeholders-card-header::before {
              content: '';
              position: absolute;
              top: -50%;
              right: -50%;
              width: 200%;
              height: 200%;
              background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
              opacity: 0;
              transition: all 0.6s ease;
              animation: stakeholders-float 6s ease-in-out infinite;
          }
  
          .stakeholders-profile-card:hover .stakeholders-card-header::before {
              opacity: 1;
          }
  
          @keyframes stakeholders-float {
              0%, 100% { transform: translateY(0px) rotate(0deg); }
              50% { transform: translateY(-20px) rotate(180deg); }
          }
  
          .stakeholders-header-content {
              display: flex;
              align-items: center;
              gap: 30px;
              position: relative;
              z-index: 2;
          }
  
          .stakeholders-doctor-image {
              width: 120px;
              height: 120px;
              border-radius: 50%;
              object-fit: cover;
              border: 4px solid rgba(255, 255, 255, 0.2);
              transition: all 0.4s ease;
              animation: stakeholders-pulse 3s ease-in-out infinite;
          }
  
          @keyframes stakeholders-pulse {
              0%, 100% { 
                  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
              }
              50% { 
                  box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
              }
          }
  
          .stakeholders-doctor-info h1 {
              font-size: 32px;
              margin-bottom: 10px;
              font-weight: 700;
              letter-spacing: -0.5px;
              animation: stakeholders-slideInLeft 0.8s ease-out;
          }
  
          .stakeholders-doctor-name {
              text-decoration: underline;
              text-decoration-color: #1D9798;
              text-underline-offset: 5px;
          }
  
          .stakeholders-hospital-info {
              font-size: 16px;
              opacity: 0.9;
              font-weight: 300;
              animation: stakeholders-slideInLeft 0.8s ease-out 0.2s both;
          }
  
          
  
          @keyframes stakeholders-slideInLeft {
              from {
                  opacity: 0;
                  transform: translateX(-30px);
              }
              to {
                  opacity: 1;
                  transform: translateX(0);
              }
          }
  
          .stakeholders-card-body {
              padding: 40px;
              background: linear-gradient(135deg, #fff 0%, #EFF3F4 100%);
              position: relative;
          }
  
          .stakeholders-content-text {
              font-size: 18px;
              line-height: 1.8;
              color: #2d3d4e;
              text-align: justify;
              animation: stakeholders-fadeInUp 1s ease-out 0.4s both;
              position: relative;
          }
  
          .stakeholders-highlight {
              background: linear-gradient(120deg, rgba(31, 151, 163, 0.1) 0%, rgba(15, 116, 163, 0.1) 100%);
              padding: 2px 6px;
              border-radius: 4px;
              font-weight: 600;
              color: #0F74A3;
              transition: all 0.3s ease;
          }
  
          .stakeholders-highlight:hover {
              background: linear-gradient(120deg, rgba(252, 252, 253, 0.986) 0%, #f9fbfc 100%);
              transform: scale(1.05);
          }
  
          @keyframes stakeholders-fadeInUp {
              from {
                  opacity: 0;
                  transform: translateY(30px);
              }
              to {
                  opacity: 1;
                  transform: translateY(0);
              }
          }
          .stakeholders-grid-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            margin: 2rem 0;
        }
        
        @media (max-width: 768px) {
            .stakeholders-grid-container {
                grid-template-columns: 1fr;
            }
        }
        
        .stakeholders-profile-card {
            width: 100%;
        }
          /* Floating elements decoration */
          .stakeholders-floating-element {
              position: absolute;
              background: rgba(29, 151, 152, 0.1);
              border-radius: 50%;
              animation: stakeholders-floatAround 8s ease-in-out infinite;
          }
  
          .stakeholders-floating-element:nth-child(1) {
              width: 60px;
              height: 60px;
              top: 20%;
              right: 10%;
              animation-delay: -2s;
          }
  
          .stakeholders-floating-element:nth-child(2) {
              width: 40px;
              height: 40px;
              bottom: 20%;
              left: 15%;
              animation-delay: -4s;
          }
  
          .stakeholders-floating-element:nth-child(3) {
              width: 30px;
              height: 30px;
              top: 60%;
              right: 20%;
              animation-delay: -6s;
          }
  
          @keyframes stakeholders-floatAround {
              0%, 100% {
                  transform: translateY(0px) rotate(0deg);
              }
              33% {
                  transform: translateY(-30px) rotate(120deg);
              }
              66% {
                  transform: translateY(15px) rotate(240deg);
              }
          }
  
          /* Custom Media Queries based on container widths */
          @media (max-width: 992px) {
              .stakeholders-profile-card {
                  max-width: var(--container-max-width-sm);
              }
              
              .stakeholders-header-content {
                  gap: 25px;
              }
  
              .stakeholders-doctor-info h1 {
                  font-size: 30px;
              }
  
              .stakeholders-card-body {
                  padding: 35px;
              }
          }
  
          @media (max-width: 686px) {
              .stakeholders-profile-card {
                  max-width: var(--container-max-width-xs);
              }
              
              .stakeholders-header-content {
                  flex-direction: column;
                  text-align: center;
                  gap: 20px;
              }
  
              .stakeholders-doctor-info h1 {
                  font-size: 28px;
              }
  
              .stakeholders-card-body {
                  padding: 25px;
              }
  
              .stakeholders-content-text {
                  font-size: 16px;
              }
          }
  
          @media (max-width: 350px) {
              .stakeholders-profile-card {
                  margin: 10px;
                  max-width: calc(var(--container-max-width-xs) - 20px);
              }
  
              .stakeholders-card-header {
                  padding: 20px;
              }
  
              .stakeholders-doctor-info h1 {
                  font-size: 24px;
              }
  
              .stakeholders-hospital-info {
                  font-size: 14px;
              }
  
              .stakeholders-doctor-image {
                  width: 100px;
                  height: 100px;
              }
  
              .stakeholders-card-body {
                  padding: 20px;
              }
  
              .stakeholders-content-text {
                  font-size: 15px;
              }
          }
  
          /* PEST model */
  
       
          .pest-analysis-main-container::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="80" cy="40" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grain)"/></svg>');
              pointer-events: none;
          }
  
          .pest-analysis-sections-wrapper {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
              gap: 20px;
              max-width: 1500px;
              width: 100%;
              position: relative;
              z-index: 1;
              align-items: start; /* Align items to start for variable heights */
          }
  
          .pest-analysis-individual-section {
              width: 110%;
              min-height: 400px; /* Changed from fixed height to min-height */
              height: auto; /* Allow automatic height based on content */
              border-radius: 25px;
              position: relative;
              overflow: hidden;
              cursor: pointer;
              transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              backdrop-filter: blur(10px);
              border: 2px solid rgba(255,255,255,0.1);
              display: flex;
              flex-direction: column;
          }
  
          .pest-analysis-individual-section:hover {
              transform: translateY(-20px) rotateX(5deg);
              box-shadow: 0 30px 60px rgba(0,0,0,0.3), 0 0 50px rgba(255,255,255,0.1);
          }
  
          .pest-analysis-individual-section::after {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
              transition: left 0.5s;
          }
  
          .pest-analysis-individual-section:hover::after {
              left: 100%;
          }
  
          .pest-analysis-section-header-container {
              height: 140px;
              flex-shrink: 0; /* Prevent header from shrinking */
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              overflow: hidden;
          }
  
          .pest-analysis-letter-display {
              font-size: 5rem;
              font-weight: 900;
              color: white;
              text-shadow: 0 0 30px rgba(255,255,255,0.5), 0 5px 15px rgba(0,0,0,0.7);
              z-index: 3;
              animation: pest-letter-glow 3s ease-in-out infinite alternate;
              position: relative;
          }
  
          .pest-analysis-letter-display::before {
              content: attr(data-letter);
              position: absolute;
              top: 0;
              left: 0;
              z-index: -1;
              filter: blur(15px);
              opacity: 0.7;
              animation: pest-letter-pulse 2s ease-in-out infinite;
          }
  
          .pest-analysis-content-wrapper {
              padding: 35px 30px;
              background: rgba(255,255,255,0.95);
              backdrop-filter: blur(20px);
              flex: 1; /* Allow content to expand */
              display: flex;
              flex-direction: column;
              position: relative;
              overflow: visible; /* Changed from hidden to visible */
              min-height: 260px; /* Minimum height for content area */
          }
  
          .pest-analysis-content-wrapper::before {
              content: '';
              position: absolute;
              top: -50%;
              left: -50%;
              width: 200%;
              height: 200%;
              background: conic-gradient(from 0deg, transparent, rgba(15,116,163,0.1), transparent);
              animation: pest-content-rotate 20s linear infinite;
              z-index: 0;
          }
  
          .pest-analysis-category-title {
              font-size: 1rem;
              font-weight: 700;
              margin-bottom: 20px;
              color: #1a1a1a;
              position: relative;
              z-index: 2;
              text-transform: uppercase;
              letter-spacing: 2px;
          }
  
          .pest-analysis-category-description {
              color: #444;
              line-height: 1.7;
              font-size: 1rem;
              margin-bottom: 25px;
              position: relative;
              z-index: 2;
              font-weight: 400;
          }
  
  
          .pest-analysis-feature-item {
              padding: 12px 0;
              position: relative;
              padding-left: 35px;
              font-weight: 500;
              color: #333;
              transition: all 0.3s ease;
              opacity: 0;
              transform: translateX(-30px);
              animation: pest-feature-slide-in 0.6s ease forwards;
              line-height: 1.6; /* Better line height for wrapped text */
          }
  
          /* Stagger animation delays dynamically */
          .pest-analysis-feature-item:nth-child(n) {
              animation-delay: calc(0.1s * var(--item-index, 1));
          }
          
          .pest-analysis-feature-item:nth-child(1) { --item-index: 1; }
          .pest-analysis-feature-item:nth-child(2) { --item-index: 2; }
          .pest-analysis-feature-item:nth-child(3) { --item-index: 3; }
          .pest-analysis-feature-item:nth-child(4) { --item-index: 4; }
          .pest-analysis-feature-item:nth-child(5) { --item-index: 5; }
          .pest-analysis-feature-item:nth-child(6) { --item-index: 6; }
          .pest-analysis-feature-item:nth-child(7) { --item-index: 7; }
          .pest-analysis-feature-item:nth-child(8) { --item-index: 8; }
  
          .pest-analysis-feature-item::before {
              content: "◆";
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              font-size: 1.2rem;
              animation: pest-diamond-spin 4s linear infinite;
          }
  
          .pest-analysis-feature-item:hover {
              transform: translateX(10px);
              color: #0F74A3;
          }
  
          /* Specific section backgrounds with enhanced effects */
          .pest-analysis-political-section {
              background: linear-gradient(135deg, #2d3d4e 0%, #1a2733 50%, #2d3d4e 100%);
              box-shadow: 0 15px 35px rgba(45,61,78,0.4);
          }
  
          .pest-analysis-political-section .pest-analysis-feature-item::before {
              color: #2d3d4e;
          }
  
          .pest-analysis-economic-section {
              background: linear-gradient(135deg, #2c4c5c 0%, #1f3740 50%, #2c4c5c 100%);
              box-shadow: 0 15px 35px rgba(44,76,92,0.4);
          }
  
          .pest-analysis-economic-section .pest-analysis-feature-item::before {
              color: #2c4c5c;
          }
  
          .pest-analysis-social-section {
              background: linear-gradient(135deg, #4A6E8C 0%, #365577 50%, #4A6E8C 100%);
              box-shadow: 0 15px 35px rgba(74,110,140,0.4);
          }
  
          .pest-analysis-social-section .pest-analysis-feature-item::before {
              color: #4A6E8C;
          }
  
          .pest-analysis-technological-section {
              background: linear-gradient(135deg, #0F74A3 0%, #0c5d82 50%, #0F74A3 100%);
              box-shadow: 0 15px 35px rgba(15,116,163,0.4);
          }
  
          .pest-analysis-technological-section .pest-analysis-feature-item::before {
              color: #0F74A3;
          }
  
          /* Floating decorative elements */
          .pest-analysis-floating-decoration {
              position: absolute;
              width: 60px;
              height: 60px;
              border-radius: 50%;
              background: rgba(255,255,255,0.1);
              border: 2px solid rgba(255,255,255,0.2);
              animation: pest-decoration-float 6s ease-in-out infinite;
          }
  
          .pest-analysis-floating-decoration:nth-child(1) {
              top: 15px;
              right: 15px;
              animation-delay: 0s;
          }
  
          .pest-analysis-floating-decoration:nth-child(2) {
              top: 60px;
              right: 80px;
              width: 30px;
              height: 30px;
              animation-delay: 2s;
          }
  
          /* Complex animations */
          @keyframes pest-gradient-shift {
              0% { background-position: 0% 50%; }
              50% { background-position: 100% 50%; }
              100% { background-position: 0% 50%; }
          }
  
          @keyframes pest-letter-glow {
              0% { 
                  text-shadow: 0 0 30px rgba(255,255,255,0.5), 0 5px 15px rgba(0,0,0,0.7);
                  transform: scale(1);
              }
              100% { 
                  text-shadow: 0 0 50px rgba(255,255,255,0.8), 0 8px 25px rgba(0,0,0,0.9);
                  transform: scale(1.05);
              }
          }
  
          @keyframes pest-letter-pulse {
              0%, 100% { opacity: 0.7; transform: scale(1); }
              50% { opacity: 0.3; transform: scale(1.1); }
          }
  
          @keyframes pest-content-rotate {
              from { transform: rotate(0deg); }
              to { transform: rotate(360deg); }
          }
  
          @keyframes pest-decoration-float {
              0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
              25% { transform: translateY(-15px) rotate(90deg) scale(1.1); }
              50% { transform: translateY(-10px) rotate(180deg) scale(0.9); }
              75% { transform: translateY(-20px) rotate(270deg) scale(1.05); }
          }
  
          @keyframes pest-feature-slide-in {
              to { opacity: 1; transform: translateX(0); }
          }
  
          @keyframes pest-diamond-spin {
              from { transform: translateY(-50%) rotate(0deg); }
              to { transform: translateY(-50%) rotate(360deg); }
          }
  
          /* Comprehensive Media Queries */
          
          /* Extra Small Devices (phones, 600px and down) */
          @media only screen and (max-width: 600px) {
              .pest-analysis-sections-wrapper {
                  grid-template-columns: 1fr;
                  gap: 20px;
              }
              
              .pest-analysis-individual-section {
                  min-height: 350px;
                  border-radius: 20px;
              }
              
              .pest-analysis-letter-display {
                  font-size: 3.5rem;
              }
              
              .pest-analysis-content-wrapper {
                  padding: 25px 20px;
                  min-height: 210px;
              }
              
              .pest-analysis-category-title {
                  font-size: 1.4rem;
                  letter-spacing: 1px;
              }
              
              .pest-analysis-category-description {
                  font-size: 0.9rem;
                  margin-bottom: 20px;
              }
              
              .pest-analysis-feature-item {
                  padding: 10px 0;
                  padding-left: 30px;
                  font-size: 0.9rem;
              }
          }
  
          /* Small Devices (portrait tablets and large phones, 600px to 768px) */
          @media only screen and (min-width: 600px) and (max-width: 768px) {
              .pest-analysis-sections-wrapper {
                  grid-template-columns: repeat(2, 1fr);
                  gap: 25px;
              }
              
              .pest-analysis-individual-section {
                  min-height: 380px;
              }
              
              .pest-analysis-letter-display {
                  font-size: 4rem;
              }
              
              .pest-analysis-content-wrapper {
                  padding: 30px 25px;
              }
              
              .pest-analysis-category-title {
                  font-size: 1.6rem;
              }
          }
  
          /* Medium Devices (landscape tablets, 768px to 992px) */
          @media only screen and (min-width: 768px) and (max-width: 992px) {
              .pest-analysis-sections-wrapper {
                  grid-template-columns: repeat(2, 1fr);
                  gap: 30px;
              }
              
              .pest-analysis-letter-display {
                  font-size: 4.5rem;
              }
          }
  
          /* Large Devices (laptops/desktops, 992px to 1200px) */
          @media only screen and (min-width: 992px) and (max-width: 1200px) {
              .pest-analysis-sections-wrapper {
                  grid-template-columns: repeat(4, 1fr);
                  gap: 25px;
              }
          }
  
          /* Extra Large Devices (large laptops and desktops, 1200px and up) */
          @media only screen and (min-width: 1200px) {
              .pest-analysis-sections-wrapper {
                  grid-template-columns: repeat(4, 1fr);
                  gap: 35px;
              }
              
              .pest-analysis-individual-section {
                  border-radius: 30px;
              }
              
              .pest-analysis-letter-display {
                  font-size: 5.5rem;
              }
              
              .pest-analysis-content-wrapper {
                  padding: 40px 35px;
              }
          }
  
          /* Ultra Wide Screens (1400px and up) */
          @media only screen and (min-width: 1400px) {
              .pest-analysis-sections-wrapper {
                  max-width: 1600px;
                  gap: 40px;
              }
          }
  
          /* High DPI Displays */
          @media only screen and (-webkit-min-device-pixel-ratio: 2),
                 only screen and (min-resolution: 192dpi) {
              .pest-analysis-letter-display {
                  text-rendering: optimizeLegibility;
                  -webkit-font-smoothing: antialiased;
              }
          }
  
          /* Dark Mode Support */
          @media (prefers-color-scheme: dark) {
              .pest-analysis-content-wrapper {
                  background: rgba(30,30,30,0.95);
              }
              
              .pest-analysis-category-title {
                  color: #ffffff;
              }
              
              .pest-analysis-category-description {
                  color: #cccccc;
              }
              
              .pest-analysis-feature-item {
                  color: #dddddd;
              }
          }
  
          /* Reduced Motion Support */
          @media (prefers-reduced-motion: reduce) {
              * {
                  animation-duration: 0.01ms !important;
                  animation-iteration-count: 1 !important;
                  transition-duration: 0.01ms !important;
              }
          }
  
          /* Circles */
          .circle-wrapper {
              position: relative;
              width: 320px;
              height: 320px;
              transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
          }
  
          .circle {
              position: absolute;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
              box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
          }
  
          /* Outer circle - WHAT with minimal spacing */
          .circle.what {
              width: 320px;
              height: 320px;
              background: #2c4c5c;
              z-index: 1;
              left: 0;
              top: 0;
          }
  
          /* Middle circle - HOW with minimal spacing */
          .circle.how {
              width: 250px;
              height: 250px;
              background: #4A6B8C;
              z-index: 2;
              left: 35px;
              top: 35px;
          }
  
          /* Inner circle - WHY with minimal spacing */
          .circle.why {
              width: 200px;
              height: 200px;
              background: #0F74A3;
              z-index: 3;
              left: 61px;
              top: 55px;
          }
  
          .circle-content {
              text-align: center;
              color: white;
              padding: 15px;
              opacity: 1;
              transition: opacity 0.3s ease;
              position: relative;
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
          }
  
          .circle-label {
              font-size: 20px;
              font-weight: bold;
              margin-bottom: 8px;
              text-transform: uppercase;
              letter-spacing: 1.5px;
              transition: all 0.4s ease;
              position: absolute;
          }
          
          /* Position WHAT at bottom */
          .circle.what .circle-label {
              bottom: 90px;
              left: 50%;
              transform: translateX(-50%);
          }
          
          /* Position HOW at bottom */
          .circle.how .circle-label {
              bottom: 80px;
              left: 50%;
              transform: translateX(-50%);
          }
          
          /* Keep WHY centered */
          .circle.why .circle-label {
              position: relative;
              bottom: auto;
              left: auto;
              transform: none;
          }
  
          /* Smaller text below circles in default state */
          .circle-subtitle {
              font-size: 11px;
              font-weight: 400;
              opacity: 0.9;
              margin-top: 5px;
              transition: all 0.4s ease;
              position: absolute;
          }
  
          .circle.what .circle-subtitle {
              bottom: 15px;
              left: 50%;
              transform: translateX(-50%);
          }
          
          .circle.how .circle-subtitle {
              bottom: 15px;
              left: 50%;
              transform: translateX(-50%);
          }
          
          .circle.why .circle-subtitle {
              position: relative;
              bottom: auto;
              left: auto;
              transform: none;
          }
  
          .circle.what .circle-subtitle::after {
              content: "";
          }
  
          .circle.how .circle-subtitle::after {
              content: "";
          }
  
          .circle.why .circle-subtitle::after {
              content: "";
          }
  
          .circle-description {
              font-size: 12px;
              line-height: 1.5;
              max-width: 220px;
              margin: 0 auto;
              opacity: 0;
              transform: translateY(10px);
              transition: all 0.4s ease 0.2s;
              display: none;
          }
  
        
  
          /* Hover states - circles spread horizontally */
          .circle-wrapper:hover {
              width: 100%;
              max-width: 450px;
          }
  
          .circle-wrapper:hover .circle.what {
              transform: translateX(-10px);
              background: #2d3d4e;
          }
  
          .circle-wrapper:hover .circle.how {
              transform: translateX(0);
              background: #1D9798;
              left: 340px;
              top: 40px;
          }
  
          .circle-wrapper:hover .circle.why {
              transform: translateX(20px);
              background: #1D9798;
              left: 600px;
              top: 80px;
          }
  
          .circle-wrapper:hover .circle-description {
              opacity: 1;
              transform: translateY(0);
              display: block;
          }
  
          .circle-wrapper:hover .circle-subtitle {
              opacity: 0;
              display: none;
          }
          
          /* Reset label position on hover */
          .circle-wrapper:hover .circle.what .circle-label,
          .circle-wrapper:hover .circle.how .circle-label {
              position: relative;
              bottom: auto;
              left: auto;
              transform: none;
          }
  
          .circle-wrapper:hover .circle.what .circle-label {
              font-size: 20px;
          }
  
          .circle-wrapper:hover .circle.how .circle-label {
              font-size: 20px;
          }
  
          .circle-wrapper:hover .circle.why .circle-label {
              font-size: 20px;
          }
          /* Hover instruction */
          .hover-instruction {
              position: absolute;
              bottom: -50px;
              left: 50%;
              transform: translateX(-50%);
              padding: 10px 25px;
              background: linear-gradient(90deg, #EFF3F4, #A8ABAD);
              color: #2c4c5c;
              border-radius: 25px;
              font-size: 13px;
              font-weight: 500;
              opacity: 0.9;
              transition: all 0.3s ease;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }
  
          .circle-wrapper:hover .hover-instruction {
              opacity: 0;
              transform: translateX(-50%) translateY(10px);
          }
  
          /* Pulse animation */
          @keyframes pulse {
              0% {
                  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
              }
              50% {
                  box-shadow: 0 8px 32px rgba(15, 116, 163, 0.25);
              }
              100% {
                  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
              }
          }
  
  
         
          /* Responsive Design with specified breakpoints */
          
          /* XL - Desktop Large */
          @media (max-width: 1420px) {
              .container {
                  max-width: var(--container-max-width-xl);
              }
          }
  
          /* LG - Desktop */
          @media (max-width: 992px) {
              .container {
                  max-width: var(--container-max-width-lg);
              }
              
              .circle-wrapper:hover {
                  max-width: 850px;
              }
              
              .circle-wrapper:hover .circle.what {
                  transform: translateX(-250px) scale(0.95);
              }
              
              .circle-wrapper:hover .circle.how {
                  left: 310px;
                  transform: scale(0.95);
              }
              
              .circle-wrapper:hover .circle.why {
                  transform: translateX(250px) scale(0.95);
                  left: 600px;
              }
          }
  
          /* MD - Tablet */
          @media (max-width: 880px) {
              .container {
                  max-width: var(--container-max-width-md);
                  height: 450px;
              }
              
              .circle-wrapper,
              .circles-container,
              .circle.what {
                  width: 280px;
                  height: 280px;
              }
              
              .circle.how {
                  width: 220px;
                  height: 220px;
                  left: 30px;
                  top: 30px;
              }
              
              .circle.why {
                  width: 160px;
                  height: 160px;
                  left: 60px;
                  top: 60px;
              }
              
              .circle-label {
                  font-size: 20px;
              }
              
              .circle-wrapper:hover {
                  max-width: 780px;
              }
              
              .circle-wrapper:hover .circle-label {
                  font-size: 18px;
              }
              
              .circle-wrapper:hover .circle.what {
                  transform: translateX(-220px) scale(0.9);
              }
              
              .circle-wrapper:hover .circle.how {
                  left: 280px;
                  transform: scale(0.9);
              }
              
              .circle-wrapper:hover .circle.why {
                  transform: translateX(220px) scale(0.9);
                  left: 540px;
              }
              
              .circle-description {
                  font-size: 12px;
                  max-width: 180px;
              }
          }
  
          /* SM - Mobile Large */
          @media (max-width: 686px) {
              .container {
                  max-width: var(--container-max-width-sm);
                  height: 400px;
              }
              
              .circle-wrapper,
              .circles-container,
              .circle.what {
                  width: 240px;
                  height: 240px;
              }
              
              .circle.how {
                  width: 180px;
                  height: 180px;
                  left: 30px;
                  top: 30px;
              }
              
              .circle.why {
                  width: 120px;
                  height: 120px;
                  left: 60px;
                  top: 60px;
              }
              
              .circle-label {
                  font-size: 18px;
              }
              
              .circle-subtitle {
                  font-size: 10px;
              }
              
              .circle-wrapper:hover {
                  max-width: 100%;
              }
              
              .circle-wrapper:hover .circle-label {
                  font-size: 16px;
              }
              
              .circle-wrapper:hover .circle.what {
                  transform: translateX(-180px) scale(0.85);
              }
              
              .circle-wrapper:hover .circle.how {
                  left: 240px;
                  transform: scale(0.85);
              }
              
              .circle-wrapper:hover .circle.why {
                  transform: translateX(180px) scale(0.85);
                  left: 460px;
              }
              
              .circle-description {
                  font-size: 11px;
                  max-width: 150px;
                  padding: 5px;
              }
              
              .corn-icon {
                  width: 25px;
                  height: 25px;
              }
          }
  
          /* XS - Mobile Small */
          @media (max-width: 350px) {
              .container {
                  max-width: var(--container-max-width-xs);
                  height: 350px;
              }
              
              .circle-wrapper,
              .circles-container,
              .circle.what {
                  width: 200px;
                  height: 200px;
              }
              
              .circle.how {
                  width: 160px;
                  height: 160px;
                  left: 20px;
                  top: 20px;
              }
              
              .circle.why {
                  width: 120px;
                  height: 120px;
                  left: 40px;
                  top: 40px;
              }
              
              .circle-label {
                  font-size: 16px;
              }
              
              .circle-subtitle {
                  font-size: 9px;
              }
              
              .circle-wrapper:hover .circle-label {
                  font-size: 14px;
              }
              
              .circle-wrapper:hover .circle.what {
                  transform: translateX(-140px) scale(0.8);
              }
              
              .circle-wrapper:hover .circle.how {
                  left: 180px;
                  transform: scale(0.8);
              }
              
              .circle-wrapper:hover .circle.why {
                  transform: translateX(140px) scale(0.8);
                  left: 360px;
              }
              
              .circle-description {
                  font-size: 10px;
                  max-width: 120px;
                  padding: 3px;
              }
              
              .corn-icon {
                  width: 20px;
                  height: 20px;
              }
              
              .hover-instruction {
                  font-size: 11px;
                  padding: 8px 20px;
              }
          }


   /*  SDG map  */

   
          .sdg-map-page .sdg-progress-tracker {
            position: fixed;
            top: 130px;
            left: 100px;
            background: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(1, 131, 170, 0.637);
            z-index: 999;
            min-width: 200px;
        }

        .sdg-map-page .sdg-progress-title {
            font-size: 1.1em;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 10px;
            text-align: center;
        }

        .sdg-map-page .sdg-progress-count {
            font-size: 2em;
            font-weight: bold;
            color: #3b82f6;
            text-align: center;
            margin-bottom: 10px;
        }

        .sdg-map-page .sdg-progress-count span {
            color: #94a3b8;
            font-size: 0.6em;
        }

        .sdg-map-page .sdg-progress-bar-container {
            width: 100%;
            height: 20px;
            background: #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }

        .sdg-map-page .sdg-progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%);
            border-radius: 10px;
            transition: width 0.5s ease;
            position: relative;
            overflow: hidden;
        }

        .sdg-map-page .sdg-progress-bar-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.3),
                transparent
            );
            animation: sdgShine 2s infinite;
        }

        @keyframes sdgShine {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }

        .sdg-map-page .sdg-progress-percentage {
            text-align: center;
            font-size: 0.9em;
            color: #64748b;
            margin-top: 8px;
            font-weight: 600;
        }

        .sdg-map-page .sdg-header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .sdg-map-page .sdg-header p {
            font-size: 1.2em;
        }

        .sdg-map-page .sdg-svg-container svg {
            width: 100%;
            height: auto;
            display: block;
        }

        .sdg-map-page .sdg-clickable {
            cursor: pointer;
            transition: all 0.3s ease;
            animation: sdgFloatPulse 5s ease-in-out infinite;
        }

        .sdg-map-page .sdg-clickable.sdg-clicked {
            opacity: 0.4;
            animation: none;
            filter: grayscale(30%);
        }

        .sdg-map-page .sdg-clickable:hover {
            filter: drop-shadow(0 0 20px rgba(59, 130, 246, 1)) 
                    drop-shadow(0 0 40px rgba(6, 182, 212, 0.8))
                    drop-shadow(0 0 60px rgba(59, 130, 246, 0.6));
            transform: scale(1.08) translateY(-8px);
            animation-play-state: paused;
        }

        .sdg-map-page .sdg-clickable.sdg-clicked:hover {
            filter: grayscale(30%) drop-shadow(0 0 10px rgba(59, 130, 246, 0.3));
            transform: scale(1.02);
        }

        @keyframes sdgFloatPulse {
            0%, 100% {
                transform: scale(1);
                filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.3));
            }

            50% {
                transform: scale(1.009);
                filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.4));
            }

        }

        .sdg-map-page .sdg-clickable:nth-child(odd) {
            animation-delay: 0s;
        }
        
        .sdg-map-page .sdg-clickable:nth-child(even) {
            animation-delay: 1.5s;
        }

        .sdg-map-page .sdg-clickable:nth-child(3n) {
            animation-delay: 0.8s;
        }

        .sdg-map-page .sdg-popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }

        .sdg-map-page .sdg-popup-content {
            background: white;
            padding: 30px;
            border-radius: 15px;
            max-width: 1000px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
            position: relative;
            animation: sdgPopupSlideIn 0.3s ease-out;
        }

        @keyframes sdgPopupSlideIn {
            from {
                opacity: 0;
                transform: translateY(-30px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .sdg-map-page .sdg-popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 3px solid var(--sdg-popup-color, #3b82f6);
        }

        .sdg-map-page .sdg-popup-title {
            font-size: 1.8em;
            color: var(--sdg-popup-color-dark, #1e3a8a);
            font-weight: bold;
        }

        .sdg-map-page .sdg-close-btn {
            background: var(--sdg-popup-color, #0087b1);
            color: white;
            border: none;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .sdg-map-page .sdg-close-btn:hover {
            background: var(--sdg-popup-color-dark, #00b2e9);
            transform: scale(1.1);
        }

        .sdg-map-page .sdg-popup-body h3 {
            color: var(--sdg-popup-color, #3b82f6);
            margin-bottom: 15px;
            font-size: 1.3em;
        }

        .sdg-map-page .sdg-popup-body h4 {
            color: var(--sdg-popup-color-dark, #1e3a8a);
            margin-bottom: 10px;
            margin-top: 15px;
        }

        .sdg-map-page .sdg-popup-body p {
            line-height: 1.6;
            font-size: 1.3em;
            margin-bottom: 15px;
            color: #2c4c5c;
        }

        .sdg-map-page .sdg-popup-body ul {
            margin-left: 20px;
            margin-bottom: 15px;
        }

        .sdg-map-page .sdg-popup-body li {
            margin-bottom: 8px;
            color: #2c4c5c;
        }
        
        .sdg-map-page .sdg-popup-body img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        .sdg-map-page .sdg-popup-images {
            position: relative;
            margin: 20px 0;
            border-radius: 15px;
            overflow: hidden;
            height: 50vh;
        }
        .sdg-map-page .sdg-image-slider {
            position: relative;
            width: 100%;
            height: 300px;
            overflow: hidden;
            border-radius: 15px;
            touch-action: pan-y;
            height: 50vh;
        }

        .sdg-map-page .sdg-slider-container {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        .sdg-map-page .sdg-slide {
            min-width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sdg-map-page .sdg-slide img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 15px;
        }

        .sdg-map-page .sdg-slide-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            color: white;
            padding: 20px;
            font-size: 1rem;
            font-weight: 500;
        }

        .sdg-map-page .sdg-slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: var(--sdg-popup-color, #0087b1);
            border: none;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            color: white;
            transition: all 0.3s ease;
            z-index: 100;
        }

        .sdg-map-page .sdg-slider-nav:hover {
            background: var(--sdg-popup-color-dark, #006a8e);
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .sdg-map-page .sdg-slider-prev {
            left: 15px;
        }

        .sdg-map-page .sdg-slider-next {
            right: 15px;
        }

        .sdg-map-page .sdg-slider-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 15px;
            padding: 0 20px;
        }

        .sdg-map-page .sdg-slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(59, 130, 246, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sdg-map-page .sdg-slider-dot.active {
            background: var(--sdg-popup-color, #3b82f6);
            transform: scale(1.2);
        }

        .sdg-map-page .sdg-slider-dot:hover {
            background: var(--sdg-popup-color, #3b82f6);
            transform: scale(1.1);
        }

        .sdg-map-page .sdg-slider-counter {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: 500;
        }

        .sdg-map-page .sdg-highlight {
            background: linear-gradient(120deg, var(--sdg-popup-bg, #dbeafe) 0%, var(--sdg-popup-bg, #bfdbfe) 100%);
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
            border-left: 4px solid var(--sdg-popup-color, #3b82f6);
        }

        .sdg-map-page .sdg-instructions {
            background: rgba(255, 255, 255, 0.95);
            padding: 20px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .sdg-map-page .sdg-instructions h3 {
            color: #1e3a8a;
            margin-bottom: 10px;
            font-size: 1.5em;
        }

        .sdg-map-page .sdg-instructions p {
            color: #666;
            font-size: 1.1em;
        }

        @media (max-width: 768px) {
            .sdg-map-page .sdg-popup-content {
                margin: 10px;
                max-width: calc(100% - 20px);
                padding: 20px;
            }
            
            .sdg-map-page .sdg-header h1 {
                font-size: 2em;
            }
            
            .sdg-map-page .sdg-container {
                padding: 10px;
            }

            .sdg-map-page .sdg-image-slider {
                height: 250px;
            }

            .sdg-map-page .sdg-slider-nav {
                width: 35px;
                height: 35px;
                font-size: 16px;
            }
        }

        /*   end of SDG map  */


                /*   Education  */
.asthma-education-page .edu-header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.asthma-education-page .edu-header p {
    font-size: 1.2em;
    opacity: 0.9;
}


.asthma-education-page .edu-svg-container svg {
    width: 100%;
    height: auto;
    display: block;
}

.asthma-education-page .edu-clickable {
    cursor: pointer;
    transition: all 0.3s ease;
    animation: eduFloatPulse 3s ease-in-out infinite;
}

.asthma-education-page .edu-clickable:hover {
    filter: drop-shadow(0 0 15px rgba(102, 126, 234, 0.8)) drop-shadow(0 0 30px rgba(118, 75, 162, 0.4));
    transform: scale(1.05) ;
    animation-play-state: paused;
}

@keyframes eduFloatPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.3));
    }

    50% {
        transform:  scale(1.02);
        filter: drop-shadow(0 0 15px rgba(118, 75, 162, 0.4));
    }

}

/* Staggered animation delays for different elements */
.asthma-education-page .edu-clickable:nth-child(odd) {
    animation-delay: 0s;
}

.asthma-education-page .edu-clickable:nth-child(even) {
    animation-delay: 1.5s;
}

.asthma-education-page .edu-clickable:nth-child(3n) {
    animation-delay: 0.8s;
}

.asthma-education-page .edu-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.asthma-education-page .edu-popup-content {
    background: white;
    padding: 30px;
    border-radius: 15px;
    max-width: 1200px;  /* Changed from 600px */
    width: 90%;         /* Added for responsiveness */
    max-height: 85vh;   /* Changed from 80vh */
    min-height: 600px;  /* Added minimum height */
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    position: relative;
    animation: eduPopupSlideIn 0.3s ease-out;
}

@keyframes eduPopupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.asthma-education-page .edu-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #667eea;
}

.asthma-education-page .edu-popup-title {
    font-size: 1.8em;
    color: #667eea;
    font-weight: bold;
}

.asthma-education-page .edu-close-btn {
    background: #ff6b6b;
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.asthma-education-page .edu-close-btn:hover {
    background: #ff5252;
    transform: scale(1.1);
}

.asthma-education-page .edu-popup-body h3 {
    color: #764ba2;
    margin-bottom: 15px;
    font-size: 1.3em;
}

.asthma-education-page .edu-popup-body p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #555;
}

.asthma-education-page .edu-popup-body ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.asthma-education-page .edu-popup-body li {
    margin-bottom: 8px;
    color: #555;
}

.asthma-education-page .edu-popup-images {
    position: relative;
    margin: 20px 0;
    max-width: 900px;
    border-radius: 15px;
    overflow: hidden;
}

.asthma-education-page .edu-image-slider {
    position: relative;
    width: 100%;
    height: 50vh;
    overflow: hidden;
    border-radius: 15px;
    touch-action: pan-y; /* Allow vertical scrolling but prevent horizontal */
}

.asthma-education-page .edu-slider-container {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.asthma-education-page .edu-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asthma-education-page .edu-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 15px;
}

.asthma-education-page .edu-slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    color: white;
    padding: 20px;
    font-size: 1rem;
    font-weight: 500;
}

.asthma-education-page .edu-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.9);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #667eea;
    transition: all 0.3s ease;
    z-index: 100;
}

.asthma-education-page .edu-slider-nav:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.asthma-education-page .edu-slider-prev {
    left: 15px;
}

.asthma-education-page .edu-slider-next {
    right: 15px;
}

.asthma-education-page .edu-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    padding: 0 20px;
}

.asthma-education-page .edu-slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.asthma-education-page .edu-slider-dot.active {
    background: #667eea;
    transform: scale(1.2);
}

.asthma-education-page .edu-slider-dot:hover {
    background: #667eea;
    transform: scale(1.1);
}

.asthma-education-page .edu-slider-counter {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
}

.asthma-education-page .edu-highlight {
    background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    border-left: 4px solid #667eea;
}

.asthma-education-page .edu-instructions {
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.asthma-education-page .edu-instructions h3 {
    color: #667eea;
    margin-bottom: 10px;
    font-size: 1.5em;
}

.asthma-education-page .edu-instructions p {
    color: #666;
    font-size: 1.1em;
}

@media (max-width: 768px) {
    .asthma-education-page .edu-popup-content {
        margin: 10px;
        max-width: calc(100% - 20px);
        padding: 20px;
    }
    
    .asthma-education-page .edu-header h1 {
        font-size: 2em;
    }
    
    .asthma-education-page .edu-container {
        padding: 10px;
    }

    .asthma-education-page .edu-image-slider {
        height: 250px;
    }

    .asthma-education-page .edu-slider-nav {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .asthma-education-page .edu-slider-prev {
        left: 10px;
    }

    .asthma-education-page .edu-slider-next {
        right: 10px;
    }

    .asthma-education-page .edu-slide-caption {
        padding: 15px;
        font-size: 0.9rem;
    }

    .asthma-education-page .edu-slider-counter {
        top: 10px;
        right: 10px;
        padding: 4px 10px;
        font-size: 0.8rem;
    }
}


        /* Mobile First - Base Styles (XS: 0-350px) */
        .tech-healing-wrapper {
            display: flex;
            width: 100%;
            max-width: var(--container-max-width-xs);
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transform: translateY(0);
            transition: transform 0.3s ease;
            flex-direction: column;
            margin-bottom: 60px;
        }

        .tech-healing-wrapper:hover {
            transform: translateY(-3px);
        }

        .healing-tech-banner {
            background: linear-gradient(135deg, #2d3d4e 0%, #1d9798 100%);
            color: white;
            padding: 20px 15px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .healing-tech-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: healing-shimmer 3s infinite linear;
        }

        @keyframes healing-shimmer {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .medical-innovation-title {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 8px;
            position: relative;
            z-index: 1;
        }

        .biotech-description {
            font-size: 0.85rem;
            opacity: 0.9;
            position: relative;
            z-index: 1;
            display: none;
        }

        .main-content {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            min-height: 300px;
            flex: 1 0 auto; 
            width: 100%;
        }

        .treatment-content-panel {
            flex-grow: 1;
            padding: 20px 15px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            order: 2;
        }

        .therapy-buttons-sidebar {
            width: 100%;
            background: #f8f9fa;
            padding: 15px 10px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            border-bottom: 1px solid #e9ecef;
            order: 1;
        }

        .biotechnology-selector {
            padding: 12px 8px;
            border: none;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 600;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-align: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            min-height: 60px;
        }

        .biotechnology-selector span:last-child {
            word-break: break-word;
        }

        .biotechnology-selector::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, height 0.3s ease;
        }

        .biotechnology-selector:hover::before {
            width: 200px;
            height: 200px;
        }

        .biotechnology-selector:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .biotechnology-selector.active {
            transform: scale(0.95);
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
        }

        /* Color palette classes */
        .color-slate { background-color: #2d3d4e; }
        .color-teal { background-color: #2c4c5c; }
        .color-steel { background-color: #4A6E8C; }
        .color-cyan { background-color: #0F74A3; }

        .medical-paragraph {
            display: none;
            font-size: 0.9rem;
            line-height: 1.6;
            color: #444;
            text-align: left;
            animation: medical-fade-in 0.5s ease-in;
            width: 100%;
            text-align: justify;
            text-justify: inter-word;
            
        }

        .medical-paragraph.visible {
            display: block;
        }

        .medical-paragraph strong {
            color: #2d3d4e;
            font-size: 1.05rem;
            display: block;
            margin-bottom: 10px;
            justify-content: center;
            align-items: center;
        }

        @keyframes medical-fade-in {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .treatment-icon {
            font-size: 18px;
            filter: brightness(1.2);
        }

        .default-message {
            text-align: center;
            color: #666;
            font-style: italic;
            font-size: 0.95rem;
            padding: 25px 15px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 8px;
            width: 100%;
        }

        /* SM: 351px - 686px */
        @media (min-width: 351px) {
            .tech-healing-wrapper {
                max-width: var(--container-max-width-sm);
                border-radius: 18px;
            }

            .healing-tech-banner {
                padding: 25px 20px;
            }

            .medical-innovation-title {
                font-size: 1.4rem;
                margin-bottom: 10px;
            }

            .biotech-description {
                display: block;
                font-size: 0.9rem;
            }

            .therapy-buttons-sidebar {
                padding: 20px 15px;
                gap: 12px;
            }

            .biotechnology-selector {
                padding: 14px 10px;
                font-size: 0.85rem;
                border-radius: 10px;
                gap: 6px;
                min-height: 70px;
            }

            .treatment-icon {
                font-size: 20px;
            }

            .treatment-content-panel {
                padding: 25px 20px;
            }

            .medical-paragraph {
                font-size: 0.95rem;
                line-height: 1.7;
            }

            .medical-paragraph strong {
                font-size: 1.15rem;
                margin-bottom: 12px;
            }

            .default-message {
                font-size: 1rem;
                padding: 30px 20px;
            }
        }

        /* MD: 687px - 880px */
        @media (min-width: 687px) {

            .tech-healing-wrapper {
                max-width: var(--container-max-width-md);
                border-radius: 20px;
                box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
            }

            .healing-tech-banner {
                padding: 30px;
            }

            .medical-innovation-title {
                font-size: 1.6rem;
            }

            .biotech-description {
                font-size: 0.95rem;
            }

            .main-content {
                flex-direction: row;
                min-height: 350px;
            }

            .therapy-buttons-sidebar {
                width: 180px;
                flex-direction: column;
                display: flex;
                border-bottom: none;
                border-left: 1px solid #e9ecef;
                order: 2;
                padding: 25px 15px;
                gap: 15px;
            }

            .biotechnology-selector {
                flex-direction: row;
                padding: 15px 12px;
                font-size: 0.9rem;
                gap: 8px;
                min-height: auto;
            }

            .biotechnology-selector:hover {
                transform: translateX(-5px);
            }

            .treatment-content-panel {
                order: 1;
                padding: 30px;
            }

            .medical-paragraph {
                font-size: 1rem;
                line-height: 1.75;
                max-width: 100%;
            }

            .medical-paragraph strong {
                font-size: 1.2rem;
                margin-bottom: 14px;
            }

            .default-message {
                font-size: 1.05rem;
                padding: 35px 25px;
                max-width: 400px;
            }
        }

        /* LG: 881px - 992px */
        @media (min-width: 881px) {

            .tech-healing-wrapper {
                max-width: var(--container-max-width-lg);
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            }

            .tech-healing-wrapper:hover {
                transform: translateY(-5px);
            }

            .medical-innovation-title {
                font-size: 1.75rem;
            }

            .biotech-description {
                font-size: 1rem;
            }

            .main-content {
                min-height: 400px;
            }

            .therapy-buttons-sidebar {
                width: 200px;
                padding: 30px 20px;
                gap: 18px;
            }

            .biotechnology-selector {
                padding: 16px 15px;
                font-size: 0.95rem;
                border-radius: 12px;
            }

            .treatment-icon {
                font-size: 22px;
            }

            .treatment-content-panel {
                padding: 35px;
            }

            .medical-paragraph {
                font-size: 1.05rem;
                line-height: 1.8;
                max-width: 600px;
            }

            .medical-paragraph strong {
                font-size: 1.25rem;
                margin-bottom: 15px;
            }

            .default-message {
                font-size: 1.1rem;
                padding: 40px 30px;
                max-width: 450px;
            }
        }

        /* XL: 993px+ */
        @media (min-width: 993px) {
            .tech-healing-wrapper {
                max-width: 1200px;
            }

            .healing-tech-banner {
                padding: 35px 40px;
            }

            .medical-innovation-title {
                font-size: 1.9rem;
            }

            .main-content {
                min-height: 450px;
            }

            .therapy-buttons-sidebar {
                width: 220px;
                padding: 35px 25px;
                gap: 20px;
            }

            .biotechnology-selector {
                padding: 18px 20px;
                font-size: 1rem;
            }

            .biotechnology-selector:hover::before {
                width: 300px;
                height: 300px;
            }

            .treatment-icon {
                font-size: 24px;
            }

            .treatment-content-panel {
                padding: 40px 45px;
            }

            .medical-paragraph {
                font-size: 1.1rem;
                line-height: 1.85;
                max-width: 700px;
            }

            .medical-paragraph strong {
                font-size: 1.35rem;
                margin-bottom: 18px;
            }

            .default-message {
                font-size: 1.2rem;
                padding: 45px 35px;
                max-width: 500px;
            }
        }

        /* Ultra-wide screens */
        @media (min-width: 1421px) {
            .tech-healing-wrapper {
                max-width: var(--container-max-width-xl);
            }

            .medical-innovation-title {
                font-size: 2rem;
            }

            .therapy-buttons-sidebar {
                width: 250px;
                padding: 40px 30px;
            }

            .biotechnology-selector {
                padding: 20px 25px;
                font-size: 1.05rem;
            }

            .medical-paragraph {
                font-size: 1.15rem;
                line-height: 1.9;
                max-width: 800px;
            }

            .medical-paragraph strong {
                font-size: 1.4rem;
            }
        }

        
        /* Color palette classes */
        .color-slate { background-color: #2d3d4e; }
        .color-teal { background-color: #2c4c5c; }
        .color-steel { background-color: #4A6E8C; }
        .color-cyan { background-color: #0F74A3; }

        .medical-paragraph {
            display: none;
            font-size: 0.9rem;
            line-height: 1.6;
            color: #444;
            text-align: left;
            animation: medical-fade-in 0.5s ease-in;
            width: 100%;
        }

        .medical-paragraph.visible {
            display: block;
        }

        .medical-paragraph strong {
            color: #2d3d4e;
            font-size: 1.05rem;
            display: block;
            margin-bottom: 10px;
        }

        @keyframes medical-fade-in {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .treatment-icon {
            font-size: 18px;
            filter: brightness(1.2);
        }

        .default-message {
            text-align: center;
            color: #666;
            font-style: italic;
            font-size: 0.95rem;
            padding: 25px 15px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 8px;
            width: 100%;
        }

        /* SM: 351px - 686px */
        @media (min-width: 351px) {
            .tech-healing-wrapper {
                max-width: var(--container-max-width-sm);
                border-radius: 18px;
            }

            .healing-tech-banner {
                padding: 25px 20px;
            }

            .medical-innovation-title {
                font-size: 1.4rem;
                margin-bottom: 10px;
            }

            .biotech-description {
                display: block;
                font-size: 0.9rem;
            }

            .therapy-buttons-sidebar {
                padding: 20px 15px;
                gap: 12px;
            }

            .biotechnology-selector {
                padding: 14px 10px;
                font-size: 0.85rem;
                border-radius: 10px;
                gap: 6px;
                min-height: 70px;
            }

            .treatment-icon {
                font-size: 20px;
            }

            .treatment-content-panel {
                padding: 25px 20px;
            }

            .medical-paragraph {
                font-size: 0.95rem;
                line-height: 1.7;
            }

            .medical-paragraph strong {
                font-size: 1.15rem;
                margin-bottom: 12px;
            }

            .default-message {
                font-size: 1rem;
                padding: 30px 20px;
            }
        }

        /* MD: 687px - 880px */
        @media (min-width: 687px) {
            .tech-healing-wrapper {
                max-width: var(--container-max-width-md);
                border-radius: 20px;
                box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
            }

            .healing-tech-banner {
                padding: 30px;
            }

            .medical-innovation-title {
                font-size: 1.6rem;
            }

            .biotech-description {
                font-size: 0.95rem;
            }

            .main-content {
                flex-direction: row;
                min-height: 350px;
            }

            .therapy-buttons-sidebar {
                width: 180px;
                flex-direction: column;
                display: flex;
                border-bottom: none;
                border-left: 1px solid #e9ecef;
                order: 2;
                padding: 25px 15px;
                gap: 15px;
            }

            .biotechnology-selector {
                flex-direction: row;
                padding: 15px 12px;
                font-size: 0.9rem;
                gap: 8px;
                min-height: auto;
            }

            .biotechnology-selector:hover {
                transform: translateX(-5px);
            }

            .treatment-content-panel {
                order: 1;
                padding: 30px;
            }

            .medical-paragraph {
                font-size: 1rem;
                line-height: 1.75;
                max-width: 100%;
            }

            .medical-paragraph strong {
                font-size: 1.2rem;
                margin-bottom: 14px;
            }

            .default-message {
                font-size: 1.05rem;
                padding: 35px 25px;
                max-width: 400px;
            }
        }

        /* LG: 881px - 992px */
        @media (min-width: 881px) {

            .tech-healing-wrapper {
                max-width: var(--container-max-width-lg);
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            }

            .tech-healing-wrapper:hover {
                transform: translateY(-5px);
            }

            .medical-innovation-title {
                font-size: 1.75rem;
            }

            .biotech-description {
                font-size: 1rem;
            }

            .main-content {
                min-height: 400px;
            }

            .therapy-buttons-sidebar {
                width: 200px;
                padding: 30px 20px;
                gap: 18px;
            }

            .biotechnology-selector {
                padding: 16px 15px;
                font-size: 0.95rem;
                border-radius: 12px;
            }

            .treatment-icon {
                font-size: 22px;
            }

            .treatment-content-panel {
                padding: 35px;
            }

            .medical-paragraph {
                font-size: 1.05rem;
                line-height: 1.8;
                max-width: 600px;
            }

            .medical-paragraph strong {
                font-size: 1.25rem;
                margin-bottom: 15px;
            }

            .default-message {
                font-size: 1.1rem;
                padding: 40px 30px;
                max-width: 450px;
            }
        }

        /* XL: 993px+ */
        @media (min-width: 993px) {
            .tech-healing-wrapper {
                max-width: 1200px;
            }

            .healing-tech-banner {
                padding: 35px 40px;
            }

            .medical-innovation-title {
                font-size: 1.9rem;
            }

            .main-content {
                min-height: 450px;
            }

            .therapy-buttons-sidebar {
                width: 220px;
                padding: 35px 25px;
                gap: 20px;
            }

            .biotechnology-selector {
                padding: 18px 20px;
                font-size: 1rem;
            }

            .biotechnology-selector:hover::before {
                width: 300px;
                height: 300px;
            }

            .treatment-icon {
                font-size: 24px;
            }

            .treatment-content-panel {
                padding: 40px 45px;
            }

            .medical-paragraph {
                font-size: 1.1rem;
                line-height: 1.85;
                max-width: 700px;
            }

            .medical-paragraph strong {
                font-size: 1.35rem;
                margin-bottom: 18px;
            }

            .default-message {
                font-size: 1.2rem;
                padding: 45px 35px;
                max-width: 500px;
            }
        }

        /* Ultra-wide screens */
        @media (min-width: 1421px) {
            .tech-healing-wrapper {
                max-width: var(--container-max-width-xl);
            }

            .medical-innovation-title {
                font-size: 2rem;
            }

            .therapy-buttons-sidebar {
                width: 250px;
                padding: 40px 30px;
            }

            .biotechnology-selector {
                padding: 20px 25px;
                font-size: 1.05rem;
            }

            .medical-paragraph {
                font-size: 1.15rem;
                line-height: 1.9;
                max-width: 800px;
            }

            .medical-paragraph strong {
                font-size: 1.4rem;
            }
        }


        /* 6 photos */

        .igem-photo-gallery-container-3x2-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 15px;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: transparent;
        }
        
        .igem-photo-gallery-individual-image-item {
            width: 100%;
            height: auto;
            object-fit: contain;
            border-radius: 8px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            max-height: 200px;
        }
        
        .igem-photo-gallery-individual-image-item:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        .igem-photo-gallery-main-title-heading {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
            font-size: 24px;
            display: none;
        }
        
        @media (max-width: 768px) {
            .igem-photo-gallery-container-3x2-grid {
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(3, 1fr);
                max-width: 400px;
            }
            
            .igem-photo-gallery-individual-image-item {
                max-height: 150px;
            }
        }
        
        @media (max-width: 480px) {
            .igem-photo-gallery-container-3x2-grid {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(6, 1fr);
                max-width: 300px;
            }
            
            .igem-photo-gallery-individual-image-item {
                max-height: 120px;
            }
        }

        /* calendar design */
        :root {
            --container-max-width-xs: 350px;
            --container-max-width-sm: 686px;
            --container-max-width-md: 880px;
            --container-max-width-lg: 992px;
            --container-max-width-xl: 1420px;
        }


        .calendar-container {
            width: 100%;
            max-width: none;
            margin: 0;
            border-radius: 15px;
            overflow: hidden;
            min-height: calc(100vh - 20px);
        }

        .calendar-content {
            padding: 20px;
            height: 100%;
        }

        .timeline-container {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 15px;
            padding: 10px 0;
            width: 100%;
        }

        .month-column {
            position: relative;
            padding-top: 20px;
        }

        .month-header {
            cursor: pointer;
            padding: 15px 10px;
            background: #2d3d4e;
            color: white;
            font-size: 1.2rem;
            font-weight: 500;
            border-radius: 8px;
            transition: all 0.3s ease;
            text-align: center;
            user-select: none;
            position: relative;
            margin-bottom: 20px;
        }

        .month-header:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }

        .month-header.expanded {
            background: #4A6E8C;
        }

        .month-header::after {
            content: '+';
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.2rem;
            transition: transform 0.3s ease;
        }

        .month-header.expanded::after {
            content: '−';
        }

        .weeks-container {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.4s ease;
            border: 0px solid transparent;
        }

        .weeks-container.expanded {
            max-height: 1500px;
            border: 2px solid #4A6E8C;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .week-item {
            padding: 12px 15px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 0.85rem;
            transition: all 0.2s ease;
            cursor: pointer;
            background: white;
            overflow: hidden;
        }

        .week-item:last-child {
            border-bottom: none;
        }

        .week-item:hover {
            background: #f8f9fa;
            transform: translateX(3px);
        }

        .week-number {
            font-weight: 600;
            color: #2d3d4e;
            display: block;
            margin-bottom: 4px;
        }

        .week-dates {
            color: #666;
            font-size: 0.8rem;
            line-height: 1.3;
        }

        .week-points {
            margin-top: 10px;
            padding: 8px 0;
            border-top: 1px solid #f0f0f0;
        }

        .week-point {
            display: flex;
            align-items: flex-start;
            margin-bottom: 6px;
            font-size: 0.75rem;
            color: #555;
            line-height: 1.4;
        }

        .week-point:last-child {
            margin-bottom: 0;
        }

        .week-point::before {
            content: "•";
            color: #2d3d4e;
            margin-right: 8px;
            font-weight: bold;
            flex-shrink: 0;
        }

        /* Color palette classes */
        .color-1 { background-color: #2d3d4e; }
        .color-2 { background-color: #2c4c5c; }
        .color-3 { background-color: #4A6E8C; }
        .color-4 { background-color: #0F74A3; }
        .color-5 { background-color: #A8ABAD; }
        .color-6 { background-color: #EFF3F4; color: #333; }
        .color-7 { background-color: #1D9798; }

        /* Animation for expanding weeks */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .weeks-container.expanded .week-item {
            animation: slideDown 0.3s ease forwards;
        }

        .weeks-container.expanded .week-item:nth-child(1) { animation-delay: 0.1s; }
        .weeks-container.expanded .week-item:nth-child(2) { animation-delay: 0.15s; }
        .weeks-container.expanded .week-item:nth-child(3) { animation-delay: 0.2s; }
        .weeks-container.expanded .week-item:nth-child(4) { animation-delay: 0.25s; }
        .weeks-container.expanded .week-item:nth-child(5) { animation-delay: 0.3s; }

        /* Media Queries */
        @media (max-width: 1420px) {
            .calendar-container {
                width: 100%;
            }
        }

        @media (max-width: 992px) {
            .calendar-container {
                width: 100%;
            }
            
            .timeline-container {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .calendar-content {
                padding: 20px;
            }
        }

        @media (max-width: 880px) {
            .calendar-container {
                width: 100%;
            }
            
            .month-header {
                font-size: 1.1rem;
                padding: 12px 8px;
            }
        }

        @media (max-width: 686px) {
            .calendar-container {
                width: 100%;
            }
            
            .timeline-container {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .calendar-content {
                padding: 15px;
            }
            
            .month-header {
                font-size: 1rem;
                padding: 12px;
            }
            
            .week-item {
                padding: 10px 12px;
                font-size: 0.8rem;
            }
        }

        @media (max-width: 350px) {
            .calendar-container {
                width: 100%;
                margin: 0;
                border-radius: 10px;
            }
            
            .calendar-content {
                padding: 10px;
            }
            
            .timeline-container {
                gap: 10px;
            }
        }

        /* card education */
        .teal-cards-grid-container {
           display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    padding: 20px;
    max-width: 1400px; 
    margin: 0 auto; 
    width: 100%; 
        }

        .teal-profile-card-container {
            background: white;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            position: relative;
            transition: all 0.4s ease;
            cursor: pointer;
            overflow: hidden;
            width: 100%;
            min-width: 0;
            max-width: 350px;
            margin: 0 auto;
          
        }

        .teal-profile-card-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(74, 155, 155, 0.1), transparent);
            transition: left 0.6s ease;
        }

        .teal-profile-card-container:hover::before {
            left: 100%;
        }

        .teal-profile-card-container:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(74, 155, 155, 0.2);
            border: 2px solid rgba(74, 155, 155, 0.3);
        }

        .teal-card-content-wrapper {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        .teal-profile-image-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid #4a9b9b;
            object-fit: cover;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .teal-profile-card-container:hover .teal-profile-image-circle {
            border-color: #3d8585;
            transform: scale(1.05);
        }

        .teal-profile-name-heading {
            font-size: 22px;
            font-weight: 600;
            color: #2c5aa0;
            margin: 0;
            letter-spacing: -0.5px;
            transition: color 0.3s ease;
        }

        .teal-profile-card-container:hover .teal-profile-name-heading {
            color: #1e3d6f;
        }

        .teal-read-more-button {
            background: #4a9b9b;
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(74, 155, 155, 0.3);
            position: relative;
            overflow: hidden;
        }

        .teal-read-more-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s ease;
        }

        .teal-read-more-button:hover::before {
            left: 100%;
        }

        .teal-read-more-button:hover {
            background: #3d8585;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(74, 155, 155, 0.4);
        }

        .teal-popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }

        .teal-popup-content-modal {
            background: white;
            border-radius: 20px;
            padding: 40px;
            max-width: 900px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: popupSlideIn 0.3s ease-out;
        }

        @keyframes popupSlideIn {
            from {
                opacity: 0;
                transform: scale(0.8) translateY(50px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .teal-popup-close-button {
            position: absolute;
            top: 15px;
            right: 20px;
            background: none;
            border: none;
            font-size: 28px;
            color: #999;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .teal-popup-close-button:hover {
            background: #f0f0f0;
            color: #333;
        }

        .teal-popup-profile-image {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid #4a9b9b;
            object-fit: cover;
            margin: 0 auto 20px;
            display: block;
        }

        .teal-popup-name-title {
            font-size: 28px;
            font-weight: 600;
            color: #2c5aa0;
            margin-bottom: 20px;
            text-align: center;
        }

        .teal-popup-description-text {
            font-size: 16px;
            line-height: 1.6;
            color: #555;
            text-align: left;
            margin-bottom: 25px;
        }

        /* Image Slider Styles */
        .slider-container {
            position: relative;
            width: 100%;
            margin: 0 auto 20px;
        }

        .slider-wrapper {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
        }

        .slider-images {
            display: flex;
            transition: transform 0.4s ease;
        }

        .slider-image {
            width: 100%;
            flex-shrink: 0;
            border: 3px solid #4a9b9b;
            border-radius: 10px;
            object-fit: contain;
            height: 300px;
            scale: 1;
        }
        .slider-image:hover {
            width: 100%;
            flex-shrink: 0;
            border: 3px solid #4a9b9b;
            border-radius: 10px;
            object-fit: contain;
            height: 300px;
            scale: 1.05;
            transition: transform 0.4s ease;
        }

        .slider-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(74, 155, 155, 0.8);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 5;
        }

        .slider-button:hover {
            background: rgba(74, 155, 155, 1);
            transform: translateY(-50%) scale(1.1);
        }

        .slider-button.prev {
            left: 10px;
        }

        .slider-button.next {
            right: 10px;
        }

        .slider-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 15px;
        }

        .slider-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ddd;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .slider-dot.active {
            background: #4a9b9b;
            width: 25px;
            border-radius: 5px;
        }

        .teal-popup-show {
            display: flex;
        }

        @media (max-width: 480px) {
            .teal-cards-grid-container {
                grid-template-columns: 1fr;
                gap: 20px;
                padding: 0 10px;
            }
            
            .teal-profile-card-container {
                padding: 20px;
            }
            
            .teal-card-content-wrapper {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            
            .teal-popup-content-modal {
                padding: 30px 20px;
                margin: 20px;
            }

            .slider-image {
                height: 200px;
            }
        }


        /* side nav 100% */ 

        :root{
            --sidebar-width: 320px;
            --page-gutter: clamp(14px, 3vw, 36px);
            --container-max-width: 1420px;
          }
          
          section.hp{ padding-inline: var(--page-gutter); }
          
          section.hp .linked-section-container{
            width: min(calc(100% - 2 * var(--page-gutter)), var(--container-max-width));
            margin-inline: auto;
          }
          
          @media (min-width: 992px){
            section.hp .linked-section-container{
              margin-left: calc(var(--sidebar-width) + var(--page-gutter)) !important;
              max-width: calc(100% - var(--sidebar-width) - 2 * var(--page-gutter)) !important;
            }
          }
          
          .side-nav{
            position: sticky;          /* or fixed */
            top: 8rem;                 /* adjust to clear your header */
            left: var(--page-gutter);  /* if fixed */
            width: var(--sidebar-width);
          }

        /* Software design Glooooo */   
        .section-separator {
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 40px 0;
        }

        .separator-line {
            flex: 1;
            height: 3px;
            background: linear-gradient(90deg, transparent, rgba(29, 151, 152, 0.5), rgba(74, 110, 140, 0.5), transparent);
            animation: pulse 3s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        .separator-text {
            padding: 0 30px;
            color: #2c4c5c;
            font-size: 1.5rem;
            font-weight: bold;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .workflow-container {
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 40px;
            margin-top: 80px;
        }

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

        .section-number {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #1D9798, #0F74A3);
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            font-weight: bold;
            box-shadow: 0 10px 20px rgba(29, 151, 152, 0.4);
            animation: numberPulse 2s ease-in-out infinite;
        }

        @keyframes numberPulse {
            0%, 100% {
                box-shadow: 0 10px 20px rgba(29, 151, 152, 0.4);
            }
            50% {
                box-shadow: 0 15px 30px rgba(29, 151, 152, 0.6);
                transform: translateX(-50%) scale(1.05);
            }
        }

        .main-header {
            text-align: center;
            margin-bottom: 40px;
            padding-top: 20px;
        }

        .main-title {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .subtitle {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 20px;
        }

        .objective-box {
            background: linear-gradient(135deg, #1D9798 0%, #0F74A3 100%);
            color: white;
            padding: 20px;
            border-radius: 15px;
            text-align: center;
            font-size: 1.1rem;
            margin-bottom: 20px;
            box-shadow: 0 8px 20px rgba(29, 151, 152, 0.3);
            animation: boxGlow 3s ease-in-out infinite;
        }

        @keyframes boxGlow {
            0%, 100% {
                box-shadow: 0 8px 20px rgba(29, 151, 152, 0.3);
            }
            50% {
                box-shadow: 0 12px 30px rgba(29, 151, 152, 0.5);
            }
        }

        .phases-container {
            display: flex;
            flex-direction: column;
            gap: 30px;
            position: relative;
        }

        .phase-section {
            border: 2px solid #4A6E8C;
            border-radius: 15px;
            padding: 30px;
            position: relative;
            transition: all 0.4s ease;
            animation: phaseSlideIn 0.6s ease;
        }

        @keyframes phaseSlideIn {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .phase-section:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(29, 151, 152, 0.3);
            border-color: #1D9798;
        }

        .phase-header {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
        }

        .phase-letter {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: bold;
            color: white;
            margin-right: 20px;
        }

        .phase-a .phase-letter {
            background: linear-gradient(135deg, #0F74A3 0%, #1D9798 100%);
            box-shadow: 0 5px 15px rgba(15, 116, 163, 0.4);
        }

        .phase-b .phase-letter {
            background: linear-gradient(135deg, #1D9798 0%, #4A6E8C 100%);
            box-shadow: 0 5px 15px rgba(29, 151, 152, 0.4);
        }

        .phase-c .phase-letter {
            background: linear-gradient(135deg, #4A6E8C 0%, #2c4c5c 100%);
            box-shadow: 0 5px 15px rgba(74, 110, 140, 0.4);
        }

        .phase-d .phase-letter {
            background: linear-gradient(135deg, #2c4c5c 0%, #2d3d4e 100%);
            box-shadow: 0 5px 15px rgba(44, 76, 92, 0.4);
        }
        .phase-e .phase-letter {
            background: linear-gradient(135deg, #2c4c5c 0%, #2d3d4e 100%);
            box-shadow: 0 5px 15px rgba(44, 76, 92, 0.4);
        }
        .phase-f .phase-letter {
            background: linear-gradient(135deg, #2c4c5c 0%, #1D9798 100%);
            box-shadow: 0 5px 15px rgba(44, 76, 92, 0.4);
        }

        .phase-letter {
            animation: letterRotate 4s ease-in-out infinite;
        }

        @keyframes letterRotate {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-5deg); }
            75% { transform: rotate(5deg); }
        }

        .phase-title {
            font-size: 1.8rem;
            color: #333;
            font-weight: 600;
        }

        .phase-content {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 20px;
            align-items: stretch;
        }

        .input-box, .output-box {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .input-box {
            border-left: 5px solid #4CAF50;
        }

        .output-box {
            border-left: 5px solid #2196F3;
        }

        .box-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .box-title::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .input-box .box-title::before {
            background: #4CAF50;
        }

        .output-box .box-title::before {
            background: #2196F3;
        }

        .box-content {
            font-size: 0.95rem;
            color: #555;
            line-height: 1.6;
        }

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

        .box-content li {
            padding: 5px 0;
            position: relative;
            padding-left: 20px;
        }

        .box-content li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: #667eea;
            font-weight: bold;
        }

        .process-center {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);
            border-radius: 15px;
            padding: 25px;
            border: 2px dashed #667eea;
        }

        .process-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }

        .process-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .process-description {
            font-size: 0.95rem;
            color: #555;
            line-height: 1.5;
        }

        .tools-used {
            background: rgba(102,126,234,0.1);
            border-radius: 8px;
            padding: 10px;
            margin-top: 10px;
            font-size: 0.9rem;
            color: #667eea;
            font-weight: 600;
        }

        .connection-arrow {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #EFF3F4, #ffffff);
            border: 3px solid #1D9798;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(29, 151, 152, 0.3);
            z-index: 10;
            bottom: -30px;
            animation: arrowPulse 2s ease-in-out infinite;
        }

        @keyframes arrowPulse {
            0%, 100% {
                transform: translateX(-50%) translateY(0);
                border-color: #1D9798;
            }
            50% {
                transform: translateX(-50%) translateY(-5px);
                border-color: #0F74A3;
                box-shadow: 0 8px 20px rgba(29, 151, 152, 0.5);
            }
        }

        .arrow-icon {
            font-size: 1.5rem;
            color: #1D9798;
            animation: arrowBounceDown 1.5s ease-in-out infinite;
        }

        @keyframes arrowBounceDown {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(5px); }
        }

        .read-more-btn {
            display: block;
            margin: 30px auto 0;
            padding: 12px 30px;
            background: linear-gradient(135deg, #1D9798 0%, #0F74A3 100%);
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.4s ease;
            text-align: center;
            width: 200px;
            box-shadow: 0 5px 15px rgba(29, 151, 152, 0.3);
            animation: buttonGlow 3s ease-in-out infinite;
        }

        @keyframes buttonGlow {
            0%, 100% {
                box-shadow: 0 5px 15px rgba(29, 151, 152, 0.3);
            }
            50% {
                box-shadow: 0 8px 25px rgba(29, 151, 152, 0.5);
            }
        }

        .read-more-btn:hover {
            transform: scale(1.08);
            background: linear-gradient(135deg, #0F74A3 0%, #4A6E8C 100%);
            box-shadow: 0 10px 30px rgba(29, 151, 152, 0.5);
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.7);
            animation: fadeIn 0.3s ease;
        }

        .modal.show {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal-content {
            background-color: white;
            margin: 3% auto;
            padding: 0;
            border-radius: 20px;
            width: 85%;
            max-width: 1000px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            animation: slideDown 0.4s ease;
            max-height: 90vh;
            overflow-y: auto;
        }

        @keyframes slideDown {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .modal-header {
            background: #2c4c5c;
            color: white;
            padding: 25px 30px;
            border-radius: 20px 20px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 1.8rem;
            font-weight: 600;
            margin: 0;
        }

        .close-btn {
            color: white;
            font-size: 2rem;
            font-weight: bold;
            cursor: pointer;
            background: none;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-btn:hover {
            background: rgba(255,255,255,0.2);
            transform: rotate(90deg);
        }

        .modal-body {
            padding: 30px;
        }

        .modal-section {
            margin-bottom: 30px;
        }

        .modal-section h3 {
            color: #667eea;
            font-size: 1.5rem;
            margin-bottom: 15px;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }

        .modal-section h4 {
            color: #333;
            font-size: 1.2rem;
            margin: 20px 0 10px;
        }

        .modal-section p {
            line-height: 1.8;
            color: #555;
            margin-bottom: 15px;
            text-align: justify;
        }

        .modal-section ul {
            list-style: disc;
            margin-left: 30px;
            color: #555;
            line-height: 1.8;
        }

        .modal-image {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #667eea20, #764ba220);
            border-radius: 10px;
            margin: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            border: 2px dashed #667eea;
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin: 20px 0;
        }

        .image-grid .modal-image {
            height: 200px;
            font-size: 3rem;
        }

        .highlight-box {
            background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
            border-left: 4px solid #667eea;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .data-table th,
        .data-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }

        .data-table th {
            background: #667eea;
            color: white;
            font-weight: 600;
        }

        .data-table tr:hover {
            background: #f5f5f5;
        }

        .tech-params {
            position: absolute;
            right: 20px;
            top: 80px;
            width: 300px;
            background: linear-gradient(135deg, rgba(239, 243, 244, 0.98), rgba(255, 255, 255, 0.98));
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(29, 151, 152, 0.3);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-20px);
            transition: all 0.4s ease;
            pointer-events: none;
            z-index: 100;
            border: 2px solid #1D9798;
        }

        .tech-params.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
            animation: paramsSlideIn 0.5s ease;
        }

        @keyframes paramsSlideIn {
            from {
                transform: translateY(-20px) scale(0.95);
                opacity: 0;
            }
            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        .params-title {
            font-size: 1.3rem;
            color: #0F74A3;
            margin-bottom: 15px;
            text-align: center;
            font-weight: bold;
            border-bottom: 2px solid #1D9798;
            padding-bottom: 10px;
        }

        .param-item {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
            padding: 8px;
            background: linear-gradient(135deg, rgba(29, 151, 152, 0.1), rgba(15, 116, 163, 0.1));
            border-radius: 5px;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }

        .param-item:hover {
            background: linear-gradient(135deg, rgba(29, 151, 152, 0.15), rgba(15, 116, 163, 0.15));
            transform: translateX(5px);
            border-left-color: #1D9798;
            box-shadow: 0 3px 10px rgba(29, 151, 152, 0.2);
        }

        .param-label {
            color: #4A6E8C;
            font-weight: 500;
        }

        .param-value {
            color: #0F74A3;
            font-weight: bold;
            animation: valueGlow 2s ease-in-out infinite;
        }

        @keyframes valueGlow {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .toggle-params {
            position: absolute;
            right: 20px;
            top: 20px;
            background: linear-gradient(135deg, #1D9798, #0F74A3);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.4s ease;
            z-index: 20;
            box-shadow: 0 5px 15px rgba(29, 151, 152, 0.3);
            animation: buttonPulse 3s ease-in-out infinite;
        }

        @keyframes buttonPulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 5px 15px rgba(29, 151, 152, 0.3);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 8px 20px rgba(29, 151, 152, 0.5);
            }
        }

        .toggle-params:hover {
            background: linear-gradient(135deg, #0F74A3, #4A6E8C);
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(29, 151, 152, 0.5);
        }

        @media (max-width: 1024px) {
            .phase-content {
                grid-template-columns: 1fr;
            }
            
            .tech-params {
                position: static;
                width: 100%;
                margin-top: 20px;
            }
            
            .toggle-params {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .workflow-container {
                padding: 20px;
            }
            
            .main-title {
                font-size: 2rem;
            }
        }

        .animate-in {
            animation: slideInUp 0.8s ease forwards;
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
       .tableimg {

            width:auto;
            max-width: 200px;
        }

      /* golden effect */
      .golden-animated-border {
        /* position: relative; */
        border-radius: 12px;
        padding: 1px 3px;
        background: #FFFFFF;
        border: 3px solid #FFD700;
        box-shadow: 
            0 0 15px rgba(255, 215, 0, 0.6),
            inset 0 0 10px rgba(255, 215, 0, 0.15);
        animation: goldenBorderPulse 2s ease-in-out infinite;
        display: inline-block;
        width: fit-content;
    }
    
    /* Animated border color flow */
    @keyframes goldenBorderPulse {
        0%, 100% {
            border-color: #FFD700;
            box-shadow: 
                0 0 15px rgba(255, 215, 0, 0.7),
                inset 0 0 10px rgba(255, 215, 0, 0.15);
        }
        25% {
            border-color: #FFA500;
            box-shadow: 
                0 0 20px rgba(255, 165, 0, 0.8),
                inset 0 0 12px rgba(255, 165, 0, 0.2);
        }
        50% {
            border-color: #FFD700;
            box-shadow: 
                0 0 25px rgba(255, 215, 0, 0.9),
                inset 0 0 15px rgba(255, 215, 0, 0.25);
        }
        75% {
            border-color: #DAA520;
            box-shadow: 
                0 0 20px rgba(218, 165, 32, 0.8),
                inset 0 0 12px rgba(218, 165, 32, 0.2);
        }
    }
    
    /* Hover effect - intensify glow */
    .golden-animated-border:hover {
        animation: goldenBorderPulse 1s ease-in-out infinite;
        border-width: 4px;
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 1),
            inset 0 0 20px rgba(255, 215, 0, 0.3);
    }
 
        /* btns cards */
        .nav-buttons {
            display: flex;
            justify-content: center;
            gap: 80px;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: 0 auto;
            margin-bottom: 60px;
        }
        
        .nav-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            position: relative;
            transition: all 0.4s ease;
            animation: float 3s ease-in-out infinite;
        }
        
        .nav-btn:hover {
            transform: scale(1.15) rotate(2deg);
            animation: floatHover 1.5s ease-in-out infinite;
        }
        
        .nav-btn.active {
            animation: buttonClick 0.3s ease;
        }
        
        .nav-btn img {
            width: fit-content;
            height: 30vh;
            transition: all 0.4s ease;
            display: block;
            position: relative;
        }
        
        .page-section {
            display: none;
            animation: fadeIn 0.5s ease;
            min-height: 500px;
        }
        
        .page-section.active {
            display: block;
        }
        
        /* Floating animation for idle state */
        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        /* Faster floating on hover */
        @keyframes floatHover {
            0%, 100% {
                transform: scale(1.15) rotate(2deg) translateY(0px);
            }
            50% {
                transform: scale(1.15) rotate(2deg) translateY(-15px);
            }
        }
        
        /* Click animation */
        @keyframes buttonClick {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1.1);
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @media (max-width: 768px) {
            .nav-buttons {
                gap: 15px;
            }
        
            .nav-btn img {
                width: 100px;
                height: 75px;
            }
            
            /* Reduce floating effect on mobile */
            @keyframes float {
                0%, 100% {
                    transform: translateY(0px);
                }
                50% {
                    transform: translateY(-5px);
                }
            }
        }

        .page-section{ display:none; }
.page-section.is-visible{ display:block; }




/* SDGS */
/* SDG Popup Title Styling */
.sdg-popup-title {
    font-weight: bold;
    font-size: 24px;
    transition: color 0.3s ease;
}

/* Bold text in popup content */
.sdg-popup-body b,
.sdg-popup-body strong {
    font-weight: 700;
    transition: color 0.3s ease;
}

/* Heading colors in popup */
.sdg-popup-body h3,
.sdg-popup-body h4 {
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}


/* Include AFTER your other styles */
body { min-height: 100vh !important; display: flex !important; flex-direction: column !important; }

/* Footer at the end, clearly separated from the last section, not hidden */
.custom-footer {
  position: relative !important;
  margin-top: clamp(48px, 6vw, 96px) !important; /* gap above footer */
  flex-shrink: 0 !important;
  z-index: 2 !important;      /* draw above any lingering shadows/pseudos */
  isolation: isolate;
}

/* Make sure the section-card doesn't spill over the footer */
section.hp .linked-section-container {
  position: relative;
  z-index: 1;
  margin-bottom: 0 !important;
}
.linked-section-container::after {
  z-index: 0;
  pointer-events: none;
}

/* Gooey menu stays above; JS lifts it when it reaches the footer */
#gooey-menu { z-index: 9999 !important; }

:root {
    /* Color Palette */
    --color-primary: #2d3d4e;
    --color-secondary: #2c4c5c;
    --color-tertiary: #4A6E8C;
    --color-accent: #0F74A3;
    --color-neutral: #A8ABAD;
    --color-light: #EFF3F4;
    --color-highlight: #1D9798;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
}

/* Kinked Progress Navigation Container */
.kinked-progress-sidebar-navigation-container {
  position: fixed !important;
  left: 2em !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 300px !important; /* Reduced from 350px */
  height: auto !important; /* Changed from auto to fit-content */
  min-height: auto !important;
    max-height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important; /* Remove horizontal scroll */
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) var(--spacing-lg); /* Reduced vertical padding */
  padding-right: 18px !important; /* Increased from 8px to 13px for 5px more gap */
  z-index: 1;
  opacity: 0; /* Restored original visibility logic */
  visibility: hidden; /* Restored original visibility logic */
  pointer-events: none; /* Restored original visibility logic */
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  /* Scrollbar always visible */
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: var(--color-accent) rgba(168, 171, 173, 0.1); /* For Firefox */
}
/* ===== SCROLL HINT SYSTEM ===== */

/* When visible via page switching */
.kinked-progress-sidebar-navigation-container.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.kinked-progress-sidebar-navigation-container.is-visible .individual-navigation-step-item {
  animation: fadeInUp 0.6s ease forwards;
}

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

/* Enhanced Scrollbar Styling - Always Visible */
.kinked-progress-sidebar-navigation-container::-webkit-scrollbar {
  width: 6px; /* Even smaller width */
  opacity: 1; /* Always visible */
}

.kinked-progress-sidebar-navigation-container::-webkit-scrollbar-track {
  background: rgba(168, 171, 173, 0.15);
  border-radius: 6px;
  margin: 3px 0; /* Reduced margin */
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
}

.kinked-progress-sidebar-navigation-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-accent), var(--color-highlight));
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  animation: scrollbarPulse 2s ease-in-out infinite;
}

.kinked-progress-sidebar-navigation-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--color-highlight), var(--color-accent));
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 6px rgba(15, 116, 163, 0.5);
  animation: none; /* Stop pulse on hover */
}

.kinked-progress-sidebar-navigation-container::-webkit-scrollbar-thumb:active {
  background: var(--color-accent);
  box-shadow: 0 0 10px rgba(15, 116, 163, 0.8);
}

/* Scrollbar Pulse Animation */
@keyframes scrollbarPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(15, 116, 163, 0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(15, 116, 163, 0.6);
  }
}

/* SVG Progress Path */
.zigzag-progress-indicator-svg-element {
  position: absolute;
  top: 0;
  left: 40px;
  width: 60px;
  height: 100%;
  min-height: 100%;
  z-index: 1;
}

.zigzag-background-path-stroke {
  fill: none;
  stroke: var(--color-neutral);
  stroke-width: 2;
  opacity: 0.3;
}

.zigzag-animated-progress-path-stroke {
  fill: none;
  stroke: url(#kinkedProgressGradientDefinition);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation Items */
.sidebar-navigation-items-wrapper {
  position: relative !important;
 height: auto !important;
 min-height: auto !important;
  display: flex;
  flex-direction: column;
  padding-top: 10px; /* Reduced from 20px */
  padding-bottom: 10px; /* Reduced from 20px */
  padding-right: 10px; /* Increased from 5px to 10px for 5px more gap */
  padding-left: 40px;
  height: fit-content !important; /* Changed from auto to fit-content */
  min-height: auto;
  overflow: visible;
  left: 30px;
}

.individual-navigation-step-item {
  position: relative; 
  margin-bottom: 25px; /* Reduced from 30px */
  display: flex;
  align-items: flex-start; 
  cursor: pointer;
  transition: all 0.3s ease;
  width: auto;
  min-width: 200px;
  padding-right: 5px; /* Reduced padding for scrollbar */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

/* Remove bottom margin from last item */
.individual-navigation-step-item:last-child {
  margin-bottom: 0 !important;
}

/* Staggered animation delays */
.individual-navigation-step-item:nth-child(1) { animation-delay: 0.1s; }
.individual-navigation-step-item:nth-child(2) { animation-delay: 0.2s; }
.individual-navigation-step-item:nth-child(3) { animation-delay: 0.3s; }
.individual-navigation-step-item:nth-child(4) { animation-delay: 0.4s; }
.individual-navigation-step-item:nth-child(5) { animation-delay: 0.5s; }
.individual-navigation-step-item:nth-child(6) { animation-delay: 0.6s; }
.individual-navigation-step-item:nth-child(7) { animation-delay: 0.7s; }
.individual-navigation-step-item:nth-child(8) { animation-delay: 0.8s; }
.individual-navigation-step-item:nth-child(9) { animation-delay: 0.9s; }
.individual-navigation-step-item:nth-child(10) { animation-delay: 1.0s; }

/* Progress Dots */
.circular-progress-indicator-dot {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-light);
  border: 3px solid var(--color-neutral);
  left: -50px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circular-progress-indicator-dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transition: all 0.3s ease;
}

.individual-navigation-step-item.currently-active-navigation-step .circular-progress-indicator-dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.2);
  box-shadow: 0 0 0 8px rgba(15, 116, 163, 0.1);
}

.individual-navigation-step-item.currently-active-navigation-step .circular-progress-indicator-dot::after {
  background: white;
}

.individual-navigation-step-item.previously-completed-navigation-step .circular-progress-indicator-dot {
  background: var(--color-highlight);
  border-color: var(--color-highlight);
}

.individual-navigation-step-item.previously-completed-navigation-step .circular-progress-indicator-dot::after {
  background: white;
}

/* Navigation Labels */
.navigation-step-text-label-container {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-light);
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-secondary);
  transition: all 0.3s ease;
  white-space: normal; 
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px; /* Reduced from 210px */
  position: relative;
  text-align: left !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

.navigation-step-text-label-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-highlight));
  transition: width 0.3s ease;
  opacity: 0.1;
}

.individual-navigation-step-item:hover .navigation-step-text-label-container {
  background: white;
  color: var(--color-primary);
  box-shadow: 0 4px 15px rgba(45, 61, 78, 0.1);
  transform: translateX(5px);
}

.individual-navigation-step-item:hover .navigation-step-text-label-container::before {
  width: 100%;
}

.individual-navigation-step-item.currently-active-navigation-step .navigation-step-text-label-container {
  background: linear-gradient(135deg, var(--color-accent), var(--color-highlight));
  color: white;
  box-shadow: 0 6px 20px rgba(15, 116, 163, 0.3);
}

.individual-navigation-step-item:hover .circular-progress-indicator-dot {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(15, 116, 163, 0.1);
}

/* Section number */
.navigation-step-numerical-indicator {
  display: inline;
  margin-right: 0.3em;
  font-weight: 700;
  opacity: 0.6;
}

.individual-navigation-step-item.currently-active-navigation-step .navigation-step-numerical-indicator {
  opacity: 1;
}

.individual-content-section-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Responsive Design */
@media (max-width: 1420px) {
  .kinked-progress-sidebar-navigation-container {
    width: 250px;
    height: min(650px, 85vh);
  }
  
  .zigzag-progress-indicator-svg-element {
    left: 35px;
    width: 55px;
  }
  
  .individual-navigation-step-item {
    transform: scale(0.95);
  }
}

@media (max-width: 992px) {
  .kinked-progress-sidebar-navigation-container {
    position: fixed;
    left: -280px;
    top: 0;
    width: 280px;
    height: 100vh;
    background: rgba(45, 61, 78, 0.98);
    backdrop-filter: blur(10px);
    padding: 80px 20px 20px 20px;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9998;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
  }
  
  .kinked-progress-sidebar-navigation-container.open {
    left: 0;
    z-index: 10000;
  }
  
  /* Hamburger Toggle Button */
  .progress-nav-toggle {
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #0F74A3, #1D9798);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(15, 116, 163, 0.4);
    transition: all 0.3s ease;
    z-index: 10001;
  }
  
  .progress-nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  .progress-nav-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  
  .progress-nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  
  .progress-nav-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
  
  /* Overlay when menu is open */
  .progress-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9998;
  }
  
  .progress-nav-overlay.open {
    opacity: 1;
    visibility: visible;
  }
  
  /* Adjust navigation items for vertical list */
  .sidebar-navigation-items-wrapper {
    position: relative;
    left: 0;
    top: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .individual-navigation-step-item {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    transform: none;
    width: 100%;
    padding: 0;
    opacity: 0;
    animation: slideInFromLeft 0.4s ease forwards;
  }
  
  .individual-navigation-step-item:nth-child(1) { animation-delay: 0.1s; }
  .individual-navigation-step-item:nth-child(2) { animation-delay: 0.15s; }
  .individual-navigation-step-item:nth-child(3) { animation-delay: 0.2s; }
  .individual-navigation-step-item:nth-child(4) { animation-delay: 0.25s; }
  .individual-navigation-step-item:nth-child(5) { animation-delay: 0.3s; }
  .individual-navigation-step-item:nth-child(6) { animation-delay: 0.35s; }
  .individual-navigation-step-item:nth-child(7) { animation-delay: 0.4s; }
  .individual-navigation-step-item:nth-child(8) { animation-delay: 0.45s; }
  .individual-navigation-step-item:nth-child(9) { animation-delay: 0.5s; }
  .individual-navigation-step-item:nth-child(10) { animation-delay: 0.55s; }
  .individual-navigation-step-item:nth-child(11) { animation-delay: 0.6s; }
  
  @keyframes slideInFromLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .navigation-step-text-label-container {
    font-size: 14px;
    padding: 12px 15px;
    background: rgba(239, 243, 244, 0.95);
    color: #2d3d4e;
    width: 100%;
    text-align: left;
  }
  
  .individual-navigation-step-item.currently-active-navigation-step .navigation-step-text-label-container {
    background: linear-gradient(135deg, #1D9798, #0F74A3);
    color: white;
  }
  
  .circular-progress-indicator-dot {
    position: relative;
    left: 0;
    margin-right: 12px;
  }
  
  .zigzag-progress-indicator-svg-element {
    display: none;
  }
}

/* Tablet specific adjustments */
@media (max-width: 992px) and (min-width: 769px) {
  .progress-nav-toggle {
    width: 55px;
    height: 55px;
  }
  
  .kinked-progress-sidebar-navigation-container {
    width: 320px;
    left: -320px;
  }
}

/* Phone landscape */
@media (max-width: 768px) and (orientation: landscape) {
  .kinked-progress-sidebar-navigation-container {
    width: 250px;
    left: -250px;
    padding: 60px 15px 15px 15px;
  }
  
  .progress-nav-toggle {
    width: 45px;
    height: 45px;
    top: 20px;
    transform: none;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .kinked-progress-sidebar-navigation-container {
    width: 260px;
    left: -260px;
  }
  
  .progress-nav-toggle {
    width: 45px;
    height: 45px;
  }
  
  .navigation-step-text-label-container {
    font-size: 13px;
    padding: 10px 12px;
  }
}

/* For pages with exactly 5 items or fewer */
.kinked-progress-sidebar-navigation-container:has(.individual-navigation-step-item:nth-child(5):last-child) {
  max-height: calc(5 * 55px + 40px) !important; /* 5 items * height + padding */
}

/* For pages with exactly 4 items or fewer */
.kinked-progress-sidebar-navigation-container:has(.individual-navigation-step-item:nth-child(4):last-child) {
  max-height: calc(4 * 55px + 40px) !important; /* 4 items * height + padding */
}


/* CRITICAL FIX FOR PAGE1 NAVIGATION SCROLLING */
/* OVERRIDE FOR ALL PAGES - Remove forced heights */
#page1 .kinked-progress-sidebar-navigation-container,
#page2 .kinked-progress-sidebar-navigation-container,
#page3 .kinked-progress-sidebar-navigation-container,
#page4 .kinked-progress-sidebar-navigation-container,
#sidenav1, #sidenav2, #sidenav3, #sidenav4 {
    height: auto !important;
    max-height: calc(100vh - 200px) !important;
    min-height: auto !important;
}

#page1 .sidebar-navigation-items-wrapper,
#page2 .sidebar-navigation-items-wrapper,
#page3 .sidebar-navigation-items-wrapper,
#page4 .sidebar-navigation-items-wrapper {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

#page1 .individual-navigation-step-item,
#page2 .individual-navigation-step-item,
#page3 .individual-navigation-step-item,
#page4 .individual-navigation-step-item {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-bottom: 25px !important;
}

#page1 .individual-navigation-step-item:last-child,
#page2 .individual-navigation-step-item:last-child,
#page3 .individual-navigation-step-item:last-child,
#page4 .individual-navigation-step-item:last-child {
    margin-bottom: 0 !important;
}

/* Remove any calculated SVG heights */
#page1 .zigzag-progress-indicator-svg-element,
#page2 .zigzag-progress-indicator-svg-element,
#page3 .zigzag-progress-indicator-svg-element,
#page4 .zigzag-progress-indicator-svg-element {
    height: 100% !important;
    max-height: none !important;
}


/* Force dropdown arrows to always show */
.nav-link.has-dropdown::after,
.dropdown-link.has-dropdown::after {
    content: '▼' !important;
    margin-left: 0.5rem !important;
    font-size: 0.8rem !important;
    display: inline-block !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    background-color: transparent !important;
    bottom: auto !important;
    left: auto !important;
    transition: transform 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Rotate arrow on hover for main nav items */
.nav-item:hover > .nav-link.has-dropdown::after { 
    transform: rotate(180deg) !important; 
}

/* Right arrow for nested dropdowns in header */
.dropdown .dropdown-link.has-dropdown::after {
    content: '▶' !important;
    margin-left: auto !important;
    transform: none !important;
}

.dropdown-item:hover > .dropdown-link.has-dropdown::after {
    transform: translateX(2px) !important;
}

/* Side menu arrows */
#gooey-menu .has-dropdown::after {
    content: '▼' !important;
    margin-left: 0.5rem !important;
    font-size: 0.8rem !important;
    display: inline-block !important;
    position: relative !important;
    transition: transform 0.3s ease !important;
}

/* ===== Block ::after on navigation EXCEPT dropdown arrows ===== */
.header a:not(.has-dropdown)::after,
#gooey-menu a:not(.has-dropdown)::after,
.custom-footer a::after {
    display: none !important;
    content: none !important;
}

/* ===== Navigation Link Base Styling ===== */
.nav-menu > .nav-item > a,
.nav-menu > .nav-item > ul > li > a {
    text-decoration: none;
    color: white !important;
}

/* ===== Content Area Links (Underline Effect) ===== */
.linked-section-container a:not(.has-dropdown),
main a:not(.has-dropdown):not(.nav-link):not(.dropdown-link),
section.hp a:not(.has-dropdown):not(.nav-link):not(.dropdown-link),
article a:not(.has-dropdown):not(.nav-link):not(.dropdown-link) {
    text-decoration: none;
    color: blue;
    position: relative;
    transition: color 0.3s ease;
}

.linked-section-container a:not(.has-dropdown)::after,
main a:not(.has-dropdown):not(.nav-link):not(.dropdown-link)::after,
section.hp a:not(.has-dropdown):not(.nav-link):not(.dropdown-link)::after,
article a:not(.has-dropdown):not(.nav-link):not(.dropdown-link)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #2c4c5c;
    transition: width 0.3s ease;
}

.linked-section-container a:not(.has-dropdown):hover::after,
main a:not(.has-dropdown):not(.nav-link):not(.dropdown-link):hover::after,
section.hp a:not(.has-dropdown):not(.nav-link):not(.dropdown-link):hover::after,
article a:not(.has-dropdown):not(.nav-link):not(.dropdown-link):hover::after {
    width: 100%;
}

.linked-section-container a:not(.has-dropdown):hover,
main a:not(.has-dropdown):not(.nav-link):not(.dropdown-link):hover,
section.hp a:not(.has-dropdown):not(.nav-link):not(.dropdown-link):hover,
article a:not(.has-dropdown):not(.nav-link):not(.dropdown-link):hover {
    color: #1d9798;
}

#gooey-menu a {
    color: white !important;
    text-decoration: none !important;
}

.ls-reset-all * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@keyframes ls-gradient-shift-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes ls-particle-float-animation {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(-20px) translateX(10px);
    }
    50% {
        transform: translateY(-10px) translateX(-10px);
    }
    75% {
        transform: translateY(-30px) translateX(5px);
    }
}

@keyframes ls-logo-pulse-animation {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(148, 224, 203, 0.5));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 40px rgba(148, 224, 203, 0.8));
    }
}

@keyframes ls-spinner-spin-animation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes ls-ripple-expand-animation {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.ls-main-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #94e0cb, #6bc9b3, #94e0cb, #b8f0e0);
    background-size: 400% 400%;
    animation: ls-gradient-shift-animation 8s ease infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    transition: opacity 0.5s ease-out;
    overflow: hidden;
}

.ls-main-loading-screen.ls-fade-out-state {
    opacity: 0;
    pointer-events: none;
}

.ls-floating-particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    pointer-events: none;
    animation: ls-particle-float-animation 6s ease-in-out infinite;
}

.ls-floating-particle.ls-particle-one {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 8s;
}

.ls-floating-particle.ls-particle-two {
    width: 60px;
    height: 60px;
    top: 70%;
    left: 80%;
    animation-delay: 1s;
    animation-duration: 7s;
}

.ls-floating-particle.ls-particle-three {
    width: 100px;
    height: 100px;
    top: 50%;
    left: 5%;
    animation-delay: 2s;
    animation-duration: 9s;
}

.ls-floating-particle.ls-particle-four {
    width: 70px;
    height: 70px;
    top: 20%;
    left: 85%;
    animation-delay: 1.5s;
    animation-duration: 6s;
}

.ls-floating-particle.ls-particle-five {
    width: 90px;
    height: 90px;
    top: 80%;
    left: 20%;
    animation-delay: 0.5s;
    animation-duration: 8.5s;
}

.ls-central-loading-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.ls-ripple-effects-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ls-expanding-ripple {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 3px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: ls-ripple-expand-animation 3s ease-out infinite;
}

.ls-expanding-ripple.ls-ripple-delay-one {
    animation-delay: 1s;
}

.ls-expanding-ripple.ls-ripple-delay-two {
    animation-delay: 2s;
}

.ls-brand-logo-image {
    width: 50%;
    height: 50%;
    object-fit: cover;
    animation: ls-logo-pulse-animation 2s ease-in-out infinite;
    position: relative;
    z-index: 3;
}

.ls-rotating-spinner {
    position: absolute;
    width: 60%;
    height: 60%;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: ls-spinner-spin-animation 2s linear infinite;
    z-index: 1;
}

.ls-loading-status-text {
    margin-top: 30px;
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 3;
    animation: ls-logo-pulse-animation 2s ease-in-out infinite;
}

.ls-page-main-content {
    padding: 50px;
    text-align: center;
}

/* === A11y header trigger: make it a round icon === */
.a11y-header{
    position: sticky; top: 0; z-index: 9999;
    display: inline-block;
  }
  
  /* Round icon button (desktop + mobile) */
  .a11y-hbtn{
    width: 48px; height: 48px;
    padding: 0; border: 0; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #0F74A3; color: #fff; cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
  }
  
  /* hide label & caret so it looks like a clean circle icon */
  .a11y-hbtn .a11y-hbtn-label,
  .a11y-hbtn .a11y-caret{ 
    display: none !important; 
  }
  
  /* Icon size */
  .a11y-hbtn i.fa-universal-access{ font-size: 18px; }
  
  /* Dropdown anchored under the circle */
  .a11y-dropdown{
    position: absolute;
    right: 0; top: calc(100% + 10px);
    min-width: 340px;
    background: #fff; color: #1c2731;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    padding: 14px;
    display: none;
  }
  
  /* tiny arrow pointer */
  .a11y-dropdown::before{
    content: ""; position: absolute; right: 16px; top: -8px;
    border: 8px solid transparent;
    border-bottom-color: #fff;
  }
  
  /* Open state */
  .a11y-dropdown.open{ display: block; }
  
  /* Grid inside dropdown */
  .a11y-row{
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;
  }
  .a11y-row button{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 12px; border: 1px solid #e8edf0;
    background: #f9fbfc; color: #0f2b3a; cursor: pointer;
  }
  .a11y-row button:hover{ background: #f2f6f8; }
  
  .a11y-ttsbar{ display:flex; align-items:center; gap:10px; margin: 6px 0 10px; }
  .a11y-tts-toggle{ padding: 10px 12px; border-radius: 12px; border: 1px solid #e8edf0; background:#fff; cursor:pointer; }
  
  .a11y-tts{
    display:flex; gap:8px; background:#0F74A3; color:#fff;
    padding:6px; border-radius:12px;
  }
  .a11y-tts.hidden{ display:none; }
  .a11y-tts button{
    width:34px; height:34px; border-radius:8px; border:0; background:rgba(255,255,255,.2); color:#fff; cursor:pointer;
  }
  
  .a11y-footer{ display:flex; justify-content:flex-end; margin-top: 6px; }
  .a11y-reset{
    background:#ffefef; color:#a10606; border:1px solid #ffd3d3;
    padding:10px 12px; border-radius:12px; cursor:pointer;
  }
  
  /* === Responsiveness === */
  
  /* Tablets (<= 1024px): keep 2 columns, slightly narrower */
  @media (max-width: 1024px){
    .a11y-dropdown{ min-width: 320px; right: 0; }
  }
  
  /* Phones (<= 640px): 1 column, fit screen width nicely */
  @media (max-width: 640px){
    /* keep round trigger the same */
    .a11y-hbtn{ width: 46px; height: 46px; }
  
    /* dropdown becomes almost full-width and anchored to the right edge */
    .a11y-dropdown{
      min-width: 0;
      width: min(92vw, 380px);
      right: 8px; left: auto;
      border-radius: 14px;
      padding: 12px;
    }
    .a11y-dropdown::before{ right: 22px; }
  
    /* stack tools vertically for easy tapping */
    .a11y-row{ grid-template-columns: 1fr; gap: 8px; }
    .a11y-row button{ padding: 12px; font-size: 0.98rem; }
    .a11y-ttsbar{ flex-direction: column; align-items: stretch; }
    .a11y-tts{ justify-content: space-between; }
  }
  
  /* High-contrast focus styles for keyboard users */
  .a11y-hbtn:focus,
  .a11y-row button:focus,
  .a11y-tts-toggle:focus,
  .a11y-tts button:focus,
  .a11y-reset:focus{
    outline: 3px solid #1D9798; outline-offset: 2px;
  }
  
  /* === A11y button: fixed at top-right, larger, stays on screen while scrolling === */
  
  /* If your top navbar has height, set it here (adjust as needed) */
  :root { --nav-offset: 12px; }  /* try 12–72px depending on your header height */
  
  .a11y-header{
    position: fixed;              /* stays put while scrolling */
    top: calc(12px + 6rem) !important;       /* distance from top (tweak if it overlaps navbar) */
    right: 16px;                  /* push to right edge */
    left: auto !important;        /* ensure it's not anchored left by other styles */
    margin: 0 !important;
    z-index: 2147483647;          /* above everything */
  }
  
  /* Bigger round trigger */
  .a11y-hbtn{
    width: 64px;                  /* was 48px */
    height: 64px;                 /* was 48px */
    border-radius: 9999px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #0F74A3; color: #fff;
    box-shadow: 0 10px 28px rgba(0,0,0,.2);
  }
  
  /* icon size inside the circle */
  .a11y-hbtn i.fa-universal-access{ font-size: 22px; }
  
  /* keep it a clean circle (hide text/caret if they still exist) */
  .a11y-hbtn .a11y-hbtn-label,
  .a11y-hbtn .a11y-caret{ display: none !important; }
  
  /* Dropdown should open from the RIGHT edge of the button */
  .a11y-dropdown{
    position: absolute;
    right: 0;                     /* anchor to right side of the button */
    left: auto !important;
    top: calc(100% + 12px);
    min-width: 340px;
  }
  
  /* arrow pointer aligned to the right edge */
  .a11y-dropdown::before{
    right: 18px;
    left: auto;
    border-bottom-color: #fff;
  }
  
  /* Mobile: keep full width-ish, still from right side */
  @media (max-width: 640px){
    .a11y-hbtn{ width: 60px; height: 60px; } /* slightly smaller if you like */
    .a11y-dropdown{
      width: min(92vw, 380px);
      right: 8px;
      left: auto !important;
      top: calc(100% + 10px);
    }
    .a11y-dropdown::before{ right: 24px; left: auto; }
  }
  
  html { font-size: var(--a11y-base-font, 100%); }
  .hidden { display: none !important; }
  
  body.a11y-dyslexic { font-family: "OpenDyslexic","Verdana","Segoe UI",system-ui,sans-serif !important; letter-spacing:.2px; }
  body.a11y-readable { line-height:1.8; letter-spacing:.15px; word-spacing:.2px; }
  body.a11y-readable p, body.a11y-readable li { max-width: 70ch; }
  
  :root.a11y-grayscale { filter: grayscale(1) contrast(1.05) !important; }
  :root.a11y-stop-anim * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  
  /* keep-visible helper */
  html.a11y-stop-anim .a11y-keep-visible,
  html.a11y-stop-anim .a11y-keep-visible *{
    opacity:1 !important; visibility:visible !important; transform:none !important; filter:none !important;
  }
  
  .a11y-icon {
    width: 40px;
    height: 40px;
    vertical-align: middle;
  }
  .a11y-caret {
    width: 12px;
    height: 12px;
    margin-left: 6px;
  }