: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 */


/* ====== Source Style Block #2 ====== */
/* === Flat slider CSS (for browsers) === */
.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: cover; }
.slider-controls *:hover{ background-color: rgba(255,255,255,.3); }


/* ====== Source Style Block #3 ====== */
/* === Responsive Override Patch #2 (header+footer + flatten nested CSS) === */

/* 1) Section card: mobile-first full width; reserve sidebar only on large screens */
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;
  }
}

/* 2) Container utility that actually responds without SCSS nesting */
.container{
  width: min(100% - 2rem, var(--container-max-width-xl));
  margin-inline: auto;
}

/* 3) Header: keep fixed; make logo responsive and inside header flow */
.header{
     position: fixed !important;
      top: 0; 
      left: 0; 
      width: 100%; 
      z-index: 10000;
     }

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

} 

/* space for fixed header */


.header-container{ 
max-width: 1430px; 
width: min(100%, 1430px); 
padding-inline: clamp(12px,2vw,24px);
 }

.logo{ position: absolute !important; top: 8px !important; left: clamp(16px, 4vw, 120px) !important; }
.logo img{ width: clamp(140px, 18vw, 240px) !important; height: auto !important; }

/* 4) Right/left decorative corner images bounded to viewport */
.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; }
}

/* 5) Slider: flatten nested SCSS so browsers apply it */
.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; }


/* ====== Source Style Block #4 ====== */
/* ===== Responsive Tables (auto) ===== */
: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 #5 ====== */
/* ===== Header Final Override (locks responsive behavior) ===== */
:root { --header-height: clamp(76px, 10vw, 120px); }

/* Keep header fixed and on top across all widths */
.header{
  position: fixed !important;
  top: 0; left: 0; width: 100%;
  z-index: 10000 !important;
}

/* Full-width responsive container instead of 350px cap */
.header-container{
  max-width: 1420px !important;
  width: min(100%, 1420px) !important;
  margin-inline: auto !important;
  padding-inline: clamp(12px, 2vw, 24px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: var(--header-height) !important;
  position: relative !important;
}

/* Logo participates in header flow (no negative/fixed offsets) */
.logo{
  position: relative !important;
  top: auto !important; left: auto !important;
}
.logo img{ width: clamp(120px, 18vw, 220px) !important; height: auto !important; }

/* Space content below a fixed header */
body{ padding-top: var(--header-height) !important; }

/* Prevent any overlay/pseudo elements from flowing over the header */
.home .slider-wrapper::before{ z-index: 0 !important; }


/* ====== Source Style Block #6 ====== */
/* ===== Header Non-Fixed + Logo (final override) ===== */
:root { --header-height: clamp(64px, 8vw, 104px); }

.header{
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  z-index: 3 !important;
}
body{ padding-top: 0 !important; } /* remove space reserved for fixed header */

.header-container{
  max-width: 1420px !important;
  width: min(100%, 1420px) !important;
  margin-inline: auto !important;
  padding-inline: clamp(12px, 2vw, 24px) !important;
  min-height: var(--header-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(8px, 2vw, 24px) !important;
  position: relative !important;
}

/* If a legacy .logo exists, make it behave and place the image responsively */
.logo{
  position: relative !important;
  top: auto !important; left: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .6rem !important;
}
.logo img, .brand-logo{
  height: clamp(28px, 4vw, 48px) !important;
  width: auto !important;
  display: block !important;
}

/* Optional brand link if we inject one */
.brand{ display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }

/* Prevent hero/slider overlays from covering the header area */
.home .slider-wrapper::before{ z-index: 0 !important; }


/* ====== Source Style Block #7 ====== */
/* ==== Page gutter + header nav alignment (final patch) ==== */

/* 1) Consistent page gutters on both sides */
:root{
  --page-gutter: clamp(14px, 3.2vw, 36px);
  --container-max-width: 1420px;
}

/* Give the section horizontal padding so the card is never flush with viewport edges */
section.hp{ padding-inline: var(--page-gutter) !important; }

/* Make the inner card width respect the gutters */
.linked-section-container{
  width: min(calc(100% - (2 * var(--page-gutter))), var(--container-max-width)) !important;
  margin-inline: auto !important;
}

/* If you have a large-screen sidebar offset elsewhere, keep it but add gutter */
@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;
  }
}

/* 2) Header: move nav/ul to the right to give logo room on the left */
.header-container{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(12px, 2vw, 32px) !important;
  padding-inline: var(--page-gutter) !important;
}

/* Ensure .logo sits first on the left */
.header-container .logo{ order: 0 !important; margin-right: clamp(12px, 2vw, 32px) !important; }

/* Push nav (or direct UL) to the right */
.header-container nav,
.header-container .header-nav,
.header-container > ul{
  margin-left: auto !important;
}

/* Make UL items spaced nicely on all screens */
.header-container nav ul,
.header-container .header-nav ul,
.header-container > ul{
  /* display: flex !important;
  flex-wrap: wrap; */
    align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}



/* ====== Source Style Block #8 ====== */
/* ==== Header nav offset + visible logo (responsive) ==== */
:root{
  /* how much to push the nav to the right to leave space for logo */
  --nav-left-offset: clamp(100px, 12vw, 180px);
}

/* Move UL/nav to the right by a fixed offset */
.header-container nav,
.header-container .header-nav,
.header-container > ul{
  margin-left: var(--nav-left-offset) !important;
}

/* On tablets/phones, don't offset; nav should align with content */
@media (max-width: 992px){
  .header-container nav,
  .header-container .header-nav,
  .header-container > ul{
    margin-left: 0 !important;
    display: none;
    visibility: hidden;
  }
}

/* Make sure the logo actually shows and has space */
.header-container{ display:flex; align-items:center; gap: clamp(10px, 2vw, 28px); }
.logo{
  position: relative !important;
  display: inline-flex !important; align-items: center !important;
  margin-left: clamp(8px, 2vw, 16px) !important;
  z-index: 5 !important;
}
.logo img{
  display: block !important;
  height: clamp(28px, 4vw, 48px) !important;
  width: auto !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ====== Source Style Block #9 ====== */
/* === Nav nowrap for top level only (sub ULs unaffected) === */
/* Keep top-level menus on one line */
.header-container .nav-row > nav,
.header-container .nav-row > ul,
.header-container nav > ul,
.header-container .header-nav > ul,
.header-container > ul.nav-menu{
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Prevent flex items from shrinking weirdly */
.header-container .nav-row > ul > .nav-item,
.header-container nav > ul > .nav-item,
.header-container .header-nav > ul > .nav-item,
.header-container > ul.nav-menu > .nav-item{
  flex: 0 0 auto !important;
}

/* Allow dropdown ULs to wrap normally */
.header-container .nav-row .dropdown,
.header-container .nav-row .dropdown ul{
  white-space: normal !important;
}


/* ====== Source Style Block #10 ====== */
/* ===== Nav ONE-LINE Auto-Fit (font + gap + letter-spacing) ===== */
:root{
  --navfit-font-max: 18;    /* px */
  --navfit-font-min: 11.5;  /* px */
  --navfit-gap-max: 26;     /* px */
  --navfit-gap-min: 6;      /* px */
  --navfit-letter-min: -0.3px; /* how tight we allow */
}

.header{ position: relative; z-index: 9999; overflow: visible; }
.header-container{ overflow: visible !important; }

/* Apply dynamic sizing only to the top row nav on desktop */
@media (min-width: 993px){
  .header-container .nav-row{ 
    min-width: 0; 
    display: flex; 
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: calc(var(--navfit-gap, var(--navfit-gap-max)) * 1px) !important;
    font-size: calc(var(--navfit-font, var(--navfit-font-max)) * 1px) !important;
    display: none;
    visibility: hidden;
  }
  .header-container .nav-row > nav,
  .header-container .nav-row > ul{
    display: flex !important;
    align-items: center;
    gap: inherit !important;
    margin: 0; padding: 0; list-style: none;
    white-space: nowrap !important;
  }
  .header-container .nav-row a{ letter-spacing: var(--navfit-letter, 0px); }
}


/* ====== Source Style Block #11 ====== */
/* ===== Fixed Logo + Full-Width Nav (non-fixed header) ===== */
:root{
  /* width to reserve for the fixed logo block on the left */
  --logo-fixed-slot: clamp(150px, 15vw, 260px);
  --header-pad-x: clamp(12px, 2.5vw, 24px);
}

/* Keep header itself in normal flow; just reserve left space for the fixed logo */
.header{ position: relative; z-index: 9; }
.header-container{
  max-width: 1420px; width: min(100%, 1420px);
  margin-inline: auto;
  padding-inline: var(--header-pad-x);
  padding-left: calc(var(--header-pad-x) + var(--logo-fixed-slot)); /* make room for fixed logo */
  display: flex;
  align-items: center;
  min-height: clamp(64px, 8vw, 104px);
  overflow: visible;
}

/* Fixed logo that stays during scroll */
.header .logo{
  position: fixed !important;
  top: clamp(10px, 2.2vw, 18px);
  left: var(--header-pad-x);
  z-index: 10000;
  display: inline-flex; align-items: center;
}
.header .logo img{
  height: clamp(52px, 7vw, 92px) !important; /* larger logo */
  width: auto !important; display: block;
}

/* Nav should take full available width */
.header-container .nav-row{
  flex: 1 1 auto !important;  /* fill width */
  min-width: 0 !important;
  width: 100% !important;
  justify-content: flex-end;
  overflow: visible;
}

/* Top-level lists stay on one line (we already added auto-fit JS earlier) */
.header-container .nav-row > nav,
.header-container .nav-row > ul{ flex-wrap: nowrap !important; white-space: nowrap !important; }

/* Mobile adjustments so the fixed logo doesn’t dominate */
@media (max-width: 992px){
  :root{ --logo-fixed-slot: clamp(110px, 20vw, 160px); }
  .header .logo img{ height: clamp(40px, 8vw, 56px) !important; }
  .header-container{ padding-left: calc(var(--header-pad-x) + var(--logo-fixed-slot));
    display: none;
    visibility: hidden; }
}


/* ====== Source Style Block #12 ====== */
/* === Global header background + visible nav links === */
.header{
  background: linear-gradient(135deg, #1d9798, #4a6e8c) !important;
  color: #fff !important;
}
.header a, .nav-link{ color:#fff !important; }


/* ====== 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;
    /* overflow-x: hidden; */
    /* outline: 2px solid salmon; */
  }
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(#0F74A3, #1D9798);
    border-radius: 10px;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    background-image: url(https://static.igem.wiki/teams/5545/img/back-04.webp);
    background-size: contain;
    position: relative;
    overflow-x: hidden;
    &.over-flow-hidden {
      overflow: hidden;
    }
  }
  a {
    text-decoration: none;
  }
  /* opening */
         .opening {
              position: relative;
              width: 100%;
              height: 90vh;
              min-height: 400px;
              padding-bottom: 50px;
              top: -50px;
              background: radial-gradient(ellipse at center, rgba(26, 217, 152, 0.1) 0%, rgba(15, 116, 163, 0.05) 40%, transparent 70%);
              backdrop-filter: blur(0.5px);
          }
  
          /* Responsive opening section adjustments */
          @media (max-width: 349px) {
              .opening {
                  height: 80vh;
                  min-height: 350px;
                  padding-bottom: 30px;
              }
          }
  
          @media (min-width: 350px) and (max-width: 685px) {
              .opening {
                  height: 85vh;
                  min-height: 400px;
                  padding-bottom: 40px;
              }
          }
  
          @media (min-width: 686px) and (max-width: 879px) {
              .opening {
                  height: 88vh;
                  min-height: 450px;
                  padding-bottom: 45px;
              }
          }
  
          @media (min-width: 880px) {
              .opening {
                  height: 90vh;
                  min-height: 500px;
                  padding-bottom: 50px;
              }
          }
  
          :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;
          }
  
          .heading-name {
              position: absolute;
              font-weight: 300;
              color: #EFF3F4;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 2rem;
              text-align: center;
              letter-spacing: 0.2em;
              text-transform: uppercase;
              padding: 0 20px;
              max-width: calc(var(--container-max-width-xs) - 40px);
              
              /* Airy neon glow - mobile */
              text-shadow: 
                  0 0 5px rgba(239, 243, 244, 0.2),
                  0 0 10px rgba(29, 217, 152, 0.3),
                  0 0 20px rgba(15, 116, 163, 0.2),
                  0 0 40px rgba(74, 110, 140, 0.15),
                  0 0 60px rgba(44, 76, 92, 0.1);
              
              animation: airyGlow 3s ease-in-out infinite alternate;
          }
  
          /* Small devices (phones, 350px and up) */
          @media (min-width: 350px) {
              .heading-name {
                  font-size: 2.2rem;
                  letter-spacing: 0.25em;
                  max-width: calc(var(--container-max-width-xs) - 40px);
              }
          }
  
          /* Small devices (large phones, 686px and up) */
          @media (min-width: 686px) {
              .heading-name {
                  font-size: 3rem;
                  letter-spacing: 0.25em;
                  max-width: calc(var(--container-max-width-sm) - 80px);
                  text-shadow: 
                      0 0 8px rgba(239, 243, 244, 0.25),
                      0 0 15px rgba(29, 217, 152, 0.35),
                      0 0 30px rgba(15, 116, 163, 0.25),
                      0 0 60px rgba(74, 110, 140, 0.18),
                      0 0 90px rgba(44, 76, 92, 0.12);
              }
          }
  
          /* Medium devices (tablets, 880px and up) */
          @media (min-width: 880px) {
              .heading-name {
                  font-size: 3.2rem;
                  letter-spacing: 0.3em;
                  max-width: calc(var(--container-max-width-md) - 100px);
                  text-shadow: 
                      0 0 10px rgba(239, 243, 244, 0.3),
                      0 0 20px rgba(29, 217, 152, 0.4),
                      0 0 40px rgba(15, 116, 163, 0.3),
                      0 0 80px rgba(74, 110, 140, 0.2),
                      0 0 120px rgba(44, 76, 92, 0.1);
              }
          }
  
          /* Large devices (desktops, 992px and up) */
          @media (min-width: 992px) {
              .heading-name {
                  font-size: 4.2rem;
                  letter-spacing: 0.25em;
                  max-width: calc(var(--container-max-width-lg) - 120px);
                  text-shadow: 
                      0 0 12px rgba(239, 243, 244, 0.35),
                      0 0 25px rgba(29, 217, 152, 0.45),
                      0 0 50px rgba(15, 116, 163, 0.35),
                      0 0 100px rgba(74, 110, 140, 0.25),
                      0 0 150px rgba(44, 76, 92, 0.15);
              }
          }
  
          /* Extra large devices (large desktops, 1420px and up) */
          @media (min-width: 1420px) {
              .heading-name {
                  font-size: 5rem;
                  letter-spacing: 0.25em;
                  max-width: calc(var(--container-max-width-xl) - 200px);
                  text-shadow: 
                      0 0 15px rgba(239, 243, 244, 0.4),
                      0 0 30px rgba(29, 217, 152, 0.5),
                      0 0 60px rgba(15, 116, 163, 0.4),
                      0 0 120px rgba(74, 110, 140, 0.3),
                      0 0 180px rgba(44, 76, 92, 0.2);
              }
          }
  
          /* Floating particles effect - responsive */
          .heading-name::before {
              content: '';
              position: absolute;
              top: -50%;
              left: -50%;
              width: 200%;
              height: 200%;
              background: 
                  radial-gradient(circle at 20% 20%, rgba(29, 217, 152, 0.08) 1px, transparent 2px),
                  radial-gradient(circle at 80% 40%, rgba(15, 116, 163, 0.06) 1px, transparent 2px),
                  radial-gradient(circle at 40% 80%, rgba(168, 171, 173, 0.04) 1px, transparent 2px);
              background-size: 60px 60px, 80px 80px, 100px 100px;
              animation: floatingParticles 8s linear infinite;
              pointer-events: none;
              z-index: -1;
          }
  
          @media (min-width: 686px) {
              .heading-name::before {
                  background: 
                      radial-gradient(circle at 20% 20%, rgba(29, 217, 152, 0.1) 2px, transparent 3px),
                      radial-gradient(circle at 80% 40%, rgba(15, 116, 163, 0.08) 1px, transparent 2px),
                      radial-gradient(circle at 40% 80%, rgba(168, 171, 173, 0.06) 1px, transparent 2px),
                      radial-gradient(circle at 90% 90%, rgba(239, 243, 244, 0.05) 1px, transparent 2px);
                  background-size: 80px 80px, 120px 120px, 150px 150px, 60px 60px;
              }
          }
  
          @media (min-width: 992px) {
              .heading-name::before {
                  background: 
                      radial-gradient(circle at 20% 20%, rgba(29, 217, 152, 0.1) 2px, transparent 3px),
                      radial-gradient(circle at 80% 40%, rgba(15, 116, 163, 0.08) 1px, transparent 2px),
                      radial-gradient(circle at 40% 80%, rgba(168, 171, 173, 0.06) 1px, transparent 2px),
                      radial-gradient(circle at 90% 90%, rgba(239, 243, 244, 0.05) 1px, transparent 2px);
                  background-size: 100px 100px, 150px 150px, 200px 200px, 80px 80px;
              }
          }
  
          @keyframes airyGlow {
              0% {
                  text-shadow: 
                      0 0 5px rgba(239, 243, 244, 0.2),
                      0 0 15px rgba(29, 217, 152, 0.3),
                      0 0 30px rgba(15, 116, 163, 0.2),
                      0 0 60px rgba(74, 110, 140, 0.1),
                      0 0 100px rgba(44, 76, 92, 0.05);
                  filter: brightness(0.9);
              }
              50% {
                  text-shadow: 
                      0 0 15px rgba(239, 243, 244, 0.4),
                      0 0 30px rgba(29, 217, 152, 0.5),
                      0 0 60px rgba(15, 116, 163, 0.4),
                      0 0 100px rgba(74, 110, 140, 0.3),
                      0 0 140px rgba(44, 76, 92, 0.2);
                  filter: brightness(1.1);
              }
              100% {
                  text-shadow: 
                      0 0 20px rgba(239, 243, 244, 0.5),
                      0 0 40px rgba(29, 217, 152, 0.6),
                      0 0 80px rgba(15, 116, 163, 0.5),
                      0 0 120px rgba(74, 110, 140, 0.4),
                      0 0 160px rgba(44, 76, 92, 0.3);
                  filter: brightness(1.2);
              }
          }
  
          @keyframes floatingParticles {
              0% {
                  transform: translateY(0) rotate(0deg);
                  opacity: 0.3;
              }
              50% {
                  opacity: 0.7;
              }
              100% {
                  transform: translateY(-20px) rotate(360deg);
                  opacity: 0.3;
              }
          }
  
          /* Optional: Add some ambient lighting effects */
          .opening::after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: 
                  radial-gradient(circle at 25% 25%, rgba(29, 217, 152, 0.03) 0%, transparent 50%),
                  radial-gradient(circle at 75% 75%, rgba(15, 116, 163, 0.02) 0%, transparent 50%);
              animation: ambientShift 6s ease-in-out infinite alternate;
              pointer-events: none;
          }
  
          @keyframes ambientShift {
              0% {
                  opacity: 0.5;
                  transform: scale(1);
              }
              100% {
                  opacity: 0.8;
                  transform: scale(1.05);
              }
          }
  
  .container {
    width: var(--container-max-width-xl);
    margin: auto;
    @media (max-width: 1420px) {
      max-width: var(--container-max-width-lg);
    }
    @media (max-width: 993px) {
      max-width: var(--container-max-width-md);
    }
    @media (max-width: 769px) {
      max-width: var(--container-max-width-sm);
    }
    @media (max-width: 426px) {
      max-width: var(--container-max-width-xs);
    }
  }
  
  /* 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%,          /* Bright teal - matching the wave image */
        #4A6E8C 15%,         /* Mid teal */
        #1D9798 30%,         /* Back to bright teal for wave effect */
        rgba(29, 151, 152, 0.85) 45%,  /* Semi-transparent bright teal */
        #A8ABAD 60%,         /* Light gray for contrast */
        rgba(74, 110, 140, 0.9) 75%,   /* Semi-transparent mid teal */
        #1D9798 90%,         /* Bright teal */
        rgba(29, 151, 152, 0.95) 100%); /* Semi-transparent bright teal */
    padding: 1rem 0;
    box-shadow: 0 4px 20px rgba(29, 151, 152, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    border-radius: 0 0 60% 60% / 0 0 15% 15%;
    /* Add subtle wave animation */
    background-size: 200% 200%;
    animation: waveGradient 8s ease infinite;
  }
  
  /* Wave gradient animation */
  @keyframes waveGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  .header-container {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    position: relative;
  }
  
  .logo {
    position: fixed;
    top: -60px;
    left: 100px;
    z-index: 100;
    padding: 5px 10px;
  }
  
  .logo img {
    width: auto;
    height: 30px;
    max-width: 30000px;
    object-fit: contain;
    display: block;
    width: 250px;
    height: 200px;
  }
  
  .nav-menu {
    display: none;
    list-style: none;
    align-items: center;
    padding: 0.25rem 0.5rem;
    gap: 0.25rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    position: absolute;
    right: 1rem;
    margin: 0;
  }
  
  .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.875rem;
    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);
  }
  
  /* FIXED: Dropdown with wave-matching gradient */
  .dropdown {
    position: absolute;
    top: calc(100% + 2px); /* Small gap to prevent hover loss */
    left: 0;
    background: linear-gradient(145deg,
      rgba(29, 151, 152, 0.95) 0%,     /* Bright teal with transparency */
      rgba(74, 110, 140, 0.92) 35%,     /* Mid teal */
      rgba(74, 110, 140, 0.92) 65%,     /* Back to mid teal */
      rgba(29, 151, 152, 0.95) 100%);   /* Bright teal */
    min-width: 200px;
    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;
    /* CRITICAL: Add invisible bridge area */
    padding-top: 2px;
    margin-top: -2px;
  }
  
  /* CRITICAL: Multi-level hover state management for top level */
  .nav-item:hover > .dropdown,
  .nav-item:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  /* Keep dropdown open when hovering directly over it */
  .dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .dropdown-item {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;             /* ✔ needed for submenus */
  }
  
  .dropdown-link {
    display: block;
    padding: 0.75rem 1.5rem;
    color: white;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(168,171,173,0.25);
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
    text-shadow: 0 1px 2px rgba(45, 61, 78, 0.3);
    overflow: hidden;
  }
  
  /* Add shimmer effect for dropdown links */
  .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%;
  }
  
  /* FIXED: First item accounts for bridge padding */
  .dropdown-item:first-child .dropdown-link {
    padding-top: calc(0.75rem + 2px); /* Account for bridge padding */
  }
  
  .dropdown-link:hover {
    background: rgba(29,151,152,0.3);
    padding-left: 2rem;
    color: #EFF3F4;
  }
  
  /* FIXED: Last item with proper hover area */
  .dropdown-item:last-child .dropdown-link {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
    padding-bottom: 0.75rem;
    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; }
  
  /* ▼ default caret */
  .has-dropdown::after {
    content: '▼';
    margin-left: 0.5rem;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
  }
  .nav-item:hover .has-dropdown::after { transform: rotate(180deg); }
  
  /* ===================== */
  /* ADDITIONS for NESTING */
  /* ===================== */
  
  /* level-2+ submenus: open to the right of parent */
  .dropdown .dropdown {
    position: absolute;
    top: -2px;                       /* tiny bridge so hover doesn't break */
    left: calc(100% + 2px);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.25s ease;
    z-index: 10003;                  /* above first dropdown */
    padding-top: 2px;
    margin-top: 0;
    /* Matching gradient for nested dropdowns */
    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);
  }
  
  /* show nested submenu when its parent is hovered/focused */
  .dropdown-item:hover > .dropdown,
  .dropdown-item:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  
  /* nested caret -> points right */
  .dropdown .dropdown-link.has-dropdown::after {
    content: '▶';
    margin-left: auto;
    font-size: 0.8rem;
    transition: transform 0.2s ease;
  }
  .dropdown-item:hover > .dropdown-link.has-dropdown::after {
    transform: translateX(2px);
  }
  
  /* Add body padding for fixed header */
  body { padding-top: 120px; }
  
  /* Media Queries */
  @media (max-width: 350px) {
    .container { max-width: 350px; padding: 0 0.5rem; }
    .nav-menu { display: none !important; }
    .logo { left: 20px; }
    .logo img { width: 150px; height: 100px; }
  }
  
  @media (min-width: 351px) and (max-width: 686px) {
    .container { max-width: 686px; padding: 0 1rem; }
    .nav-menu { display: none !important; }
    .logo { left: 50px; }
  }
  
  @media (min-width: 687px) and (max-width: 880px) {
    .container { max-width: 880px; padding: 0 1.5rem; }
    .nav-menu { display: none !important; }
  }
  
  @media (min-width: 881px) and (max-width: 992px) {
    .container { max-width: 992px; padding: 0 2rem; justify-content: flex-end; }
    .nav-menu { display: flex !important; position: static; gap: 0.25rem; padding: 0.25rem 0.5rem; }
    .nav-link { padding: 0.4rem 0.6rem; font-size: 0.8rem; }
    .dropdown { min-width: 180px; }
  }
  
  @media (min-width: 993px) {
    .container { max-width: 1420px; padding: 0 2rem; justify-content: flex-end; }
    .nav-menu { display: flex !important; position: static; gap: 0.5rem; padding: 0.5rem 1rem; }
    .nav-link { padding: 0.75rem 1rem; font-size: 1rem; }
    .dropdown { min-width: 200px; }
  }
  
  /* 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; }
  
  @keyframes fadeInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  /* Z-index management for overlapping elements */
  .nav-item .dropdown { z-index: 10002 !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% - 320px); 
       margin-left: 280px;
       padding: 20px 40px;
       transition: all 0.3s ease;
       background-color: #eff3f4;
       border: 5px solid rgb(44, 76, 92);
       border-radius: 50px 50px 50px 150px;        
   }
   .linked-section-container::after {
    content: "";
    position: absolute;
    left: -70px;                  /* put -8px if you want it to sit outside the border */
    bottom: -70px;                /* put -8px if you want it outside the border */
    width: 650px;    /* responsive: % of container, capped at 220px */
    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 {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0;
}

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

figcaption {
    padding: 20px 24px;
}

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

.content-paragraph {
    color: #2c3e50;
    font-size: 0.95rem;
    margin: 0;
}

/* 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;
    }
} 
   .content-paragraph{
      color: #2d3d4e;
      font-size: 1.2em;
      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: 50px 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);
      text-transform: uppercase;
      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;
  }
  .first p {
    font-size: 22px;
    font-weight: bold;
    color: #3a539b;
    word-spacing: 2px;
  }
  .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;  
              z-index: 100;
          }
  
          .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: 1420px) {
              .footer-container {
                  max-width: var(--footer-container-max-width-lg);
              }
          }
  
          @media (max-width: 992px) {
              .footer-container {
                  max-width: var(--footer-container-max-width-md);
              }
              .footer-grid {
                  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                  gap: 30px;
              }
          }
  
          @media (max-width: 880px) {
              .footer-container {
                  max-width: var(--footer-container-max-width-sm);
              }
          }
  
          @media (max-width: 686px) {
              .footer-container {
                  max-width: var(--footer-container-max-width-xs);
              }
              .custom-footer {
                  padding: 40px 0 20px;
              }
              .footer-grid {
                  grid-template-columns: 1fr;
                  gap: 20px;
              }
              .footer-icon-slider {
                  animation-duration: 15s;
              }
              .footer-top-icons {
                  flex-direction: row;
                  justify-content: center;
                  gap: 30px;
                  flex-wrap: wrap;
              }
              .footer-icon-item {
                  flex-direction: column;
                  text-align: center;
                  gap: 8px;
              }
              .footer-icon-text {
                  font-size: 14px;
              }
          }
  
          @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;
              }
              
              section.hp .linked-section-container {
                  margin-left: 20px;
                  flex-basis: 100%;
                  max-width: 100%;
              }
          }
  
          @media (max-width: 480px) {
              .right-corner-icon img {
                  display: none;
              }
              
              .left-corner-icon img {
                  display: none;
              }
              
              .row {
                  padding: 15px;
                  gap: 1rem;
              }
              
              .row .caption {
                  font-size: 13px;
                  padding: 8px 12px;
              }
          }
  
          @media (max-width: 426px) {
              section.hp.container {
                  flex-direction: column;
              }
          }
  
  /* 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;
  }
  
  .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;
        bottom: 35px;
        right: 45px;
        cursor: pointer;
        width: 250px;
        height: 150px;
        transition: transform 0.3s ease;
        z-index: 1000;
      }
  
      .back-to-top:hover {
        transform: translateY(-5px) scale(1.1); 
      }
  
      /* progrres bar */
      
  
  
  
  /* gooey */
      /* Gooey Navigation Styles */
      #gooey-menu {
              height: 100vh;
              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: 10000;
              box-shadow: 0 0 50px rgba(29, 151, 152, 0.3);
              backdrop-filter: blur(10px);
              background-size: 200% 200%;
              animation: waveGradient 8s ease infinite;
          }
  
          @keyframes waveGradient {
              0% { background-position: 0% 50%; }
              50% { background-position: 100% 50%; }
              100% { background-position: 0% 50%; }
          }
  
          #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;
              transition: opacity 0.5s ease 0.3s;
              overflow: visible;
          }
  
          #gooey-menu:hover .gooey-menu-inner,
          #gooey-menu.expanded .gooey-menu-inner {
              opacity: 1;
          }
  
          .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(100vh - 160px);
              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;
          }
  
          #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);
          }
  
          /* 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;
              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);
          }
  
          .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 {
                  width: 280px;
                  transform: translateX(-240px);
              }
              
              #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 (min-width: 361px) and (max-width: 686px) {
              #gooey-menu {
                  width: 300px;
                  transform: translateX(-260px);
              }
              
              .gooey-hamburger {
                  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 (min-width: 687px) and (max-width: 880px) {
              #gooey-menu {
                  width: 320px;
                  transform: translateX(-280px);
              }
              
              .gooey-hamburger {
                  right: 15px;
              }
          }
  
          /* Large Devices (lg) - 881px to 992px */
          @media (min-width: 881px) and (max-width: 992px) {
              #gooey-menu {
                  width: 340px;
                  transform: translateX(-280px);
              }
              
              .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;
              text-transform: uppercase;
              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;
              animation: pulse 2s infinite;
          }
  
          @keyframes pulse {
              0%, 100% { opacity: 1; }
              50% { opacity: 0.7; }
          }
  
          .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: linear-gradient(135deg, #EFF3F4, rgba(168, 171, 173, 0.8));
              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::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: #2d3d4e;
              text-align: center;
              letter-spacing: 0.5px;
              transition: all 0.4s ease;
          }
  
          .afcm-igem-hover-card-secondary-title {
              font-size: 16px;
              color: #4A6E8C;
              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);
              }
          }
  
  
          /* curved progress bar */
              :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;
              left: 5em;         /* shift right by 2em */
              bottom: 50px;      /*shift upward so bottom is 20px from screen */
              width: 320px;
              height: min(600px, 80vh);
              max-height: 600px;
              padding: var(--spacing-lg);
              z-index: 1000;
              transition: opacity 0.5s ease;
              overflow-y: auto;
              overflow-x: visible;
              z-index: 1000;
          }
          .kinked-progress-sidebar-navigation-container::-webkit-scrollbar {
      width: 6px;
      opacity: 0;
      transition: opacity 0.3s;
  }
  .kinked-progress-sidebar-navigation-container:hover::-webkit-scrollbar {
      opacity: 1;
  }
  
  .kinked-progress-sidebar-navigation-container::-webkit-scrollbar-track {
      background: rgba(168, 171, 173, 0.1);
      border-radius: 3px;
  }
  
  .kinked-progress-sidebar-navigation-container::-webkit-scrollbar-thumb {
      background: var(--color-accent);
      border-radius: 3px;
  }
  
  .kinked-progress-sidebar-navigation-container::-webkit-scrollbar-thumb:hover {
      background: var(--color-highlight);
  }
  
  
          /* 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;
          display: flex;
          flex-direction: column;
          padding-top: 20px;
          padding-bottom: 20px;
          padding-right: 20px;
          padding-left: 40px;
          height: auto;
          overflow: visible;
  
          }
  
          .individual-navigation-step-item {
              position: absolute;
              display: flex;
              align-items: center;
              cursor: pointer;
              transition: all 0.3s ease;
              width: auto;
              min-width: 200px;
              padding-right: 10px;
          }
  
          /* 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: 500;
              color: var(--color-secondary);
              transition: all 0.3s ease;
              white-space: nowrap;
              position: relative;
              overflow: visible;
              min-width: fit-content;
          }
  
          .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-block;
              margin-right: var(--spacing-sm);
              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 - Only size adjustments */
          @media (max-width: 1420px) {
              .kinked-progress-sidebar-navigation-container {
                  width: 250px;
                  height: 580px;
              }
              
              .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 {
                  width: 220px;
                  height: 550px;
                  padding: var(--spacing-md);
              }
              .navigation-step-text-label-container {
                  font-size: 13px;
                  padding: var(--spacing-sm) var(--spacing-md);
              }
           
              .zigzag-progress-indicator-svg-element {
                  left: 30px;
                  width: 50px;
              }
              .circular-progress-indicator-dot {
                  width: 18px;
                  height: 18px;
                  left: -45px;
              }
              .individual-navigation-step-item {
                  transform: scale(0.9);
              }
          }
  
          @media (max-width: 880px) {
              .kinked-progress-sidebar-navigation-container {
                  width: 200px;
                  height: 520px;
                  padding: var(--spacing-sm);
              }
              .navigation-step-text-label-container {
                  font-size: 12px;
              }
              .individual-navigation-step-item {
                  transform: scale(0.85);
              }
              .individual-content-section-container h2 {
                  font-size: 2.2rem;
              }
          }
  
          @media (max-width: 686px) {
              .kinked-progress-sidebar-navigation-container {
                  width: 180px;
                  height: 500px;
              }
              .navigation-step-text-label-container {
                  font-size: 11px;
                  padding: var(--spacing-xs) var(--spacing-sm);
              }
              .navigation-step-numerical-indicator {
                  margin-right: var(--spacing-xs);
              }
              .individual-content-section-container h2 {
                  font-size: 2rem;
              }
              .individual-content-section-container p {
                  font-size: 1rem;
              }
              .zigzag-progress-indicator-svg-element {
                  left: 25px;
                  width: 45px;
              }
              .circular-progress-indicator-dot {
                  width: 16px;
                  height: 16px;
                  left: -40px;
              }
              .individual-navigation-step-item {
                  transform: scale(0.8);
              }
          }
  
          @media (max-width: 480px) {
              .kinked-progress-sidebar-navigation-container {
                  width: 160px;
                  height: 480px;
                  border-radius: 0 15px 15px 0;
              }
              .navigation-step-text-label-container {
                  font-size: 10px;
                  border-radius: 8px;
              }
              .individual-content-section-container h2 {
                  font-size: 1.8rem;
              }
              .individual-content-section-container p {
                  font-size: 0.95rem;
              }
              .zigzag-progress-indicator-svg-element {
                  left: 20px;
                  width: 40px;
              }
              .circular-progress-indicator-dot {
                  width: 14px;
                  height: 14px;
                  left: -35px;
                  border-width: 2px;
              }
              .individual-navigation-step-item {
                  transform: scale(0.75);
              }
          }
  
          @media (max-width: 350px) {
              .kinked-progress-sidebar-navigation-container {
                  width: 140px;
                  height: 460px;
                  border-radius: 0 10px 10px 0;
                  padding: var(--spacing-xs);
              }
              .navigation-step-text-label-container {
                  font-size: 9px;
                  padding: 2px 6px;
                  border-radius: 6px;
              }
              .individual-content-section-container h2 {
                  font-size: 1.5rem;
              }
              .individual-content-section-container p {
                  font-size: 0.9rem;
              }
              .zigzag-progress-indicator-svg-element {
                  left: 15px;
                  width: 35px;
              }
              .circular-progress-indicator-dot {
                  width: 12px;
                  height: 12px;
                  left: -30px;
              }
              .circular-progress-indicator-dot::after {
                  width: 4px;
                  height: 4px;
              }
              .individual-navigation-step-item {
                  transform: scale(0.7);
              }
          }
  
          /* 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;
          }
  
          .stakeholders-hospital-name {
              text-decoration: underline;
              text-decoration-color: #0F74A3;
              font-weight: 500;
          }
  
          @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(31, 151, 163, 0.2) 0%, rgba(15, 116, 163, 0.2) 100%);
              transform: scale(1.05);
          }
  
          @keyframes stakeholders-fadeInUp {
              from {
                  opacity: 0;
                  transform: translateY(30px);
              }
              to {
                  opacity: 1;
                  transform: translateY(0);
              }
          }
  
          /* 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: 190px;
              height: 190px;
              background: #0F74A3;
              z-index: 3;
              left: 65px;
              top: 65px;
          }
  
          .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: "3";
          }
  
          .circle.how .circle-subtitle::after {
              content: "2";
          }
  
          .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;
              }
          }
        
   /* ISOLATED STYLES - Won't conflict with your existing CSS */
   .svg-popup-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

/* Namespace all popup-related styles to avoid conflicts */
.svg-interactive-element {
    cursor: pointer;
    transition: all 0.3s ease;
    transform-origin: center;
}

.svg-interactive-element:hover {
    transform: scale(1.01);
    filter: drop-shadow(0 36px 36px rgb(15, 218, 218));
}

.svg-interactive-element:active {
    transform: scale(1);
    opacity: 0.4;
}

.svg-interactive-element.svg-pulse-animation {
    animation: svg-dynamic-pulse 5s infinite;
}

@keyframes svg-dynamic-pulse {
    0%, 100% { 
        transform: scale(1.0); 
    }
    50% { 
        transform: scale(1.01); 
    }
}

/* Popup overlay - namespaced to avoid conflicts */
.svg-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 52, 61, 0.8);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Higher than most other elements */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.svg-popup-overlay.svg-popup-active {
    display: flex;
    opacity: 1;
}

.svg-popup-content {
    background: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 1000px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(30px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.svg-popup-overlay.svg-popup-active .svg-popup-content {
    transform: scale(1) translateY(0);
}

.svg-popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: #f1f3f4;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #666;
    transition: all 0.2s ease;
}

.svg-popup-close:hover {
    background: #e8eaed;
    transform: rotate(90deg);
}

.svg-popup-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--svg-popup-color, #4CAF50);
}

.svg-popup-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--svg-popup-color, #4CAF50), var(--svg-popup-color-dark, #2E7D32));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.svg-popup-title {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    line-height: 1.2;
}

.svg-popup-subtitle {
    font-size: 14px;
    color: #7f8c8d;
    margin: 5px 0 0 0;
}

.svg-popup-text {
    font-size: 15px;
    line-height: 1.6;
    color: #495057;
}

.svg-popup-text p {
    margin-bottom: 15px;
}

.svg-highlight {
    background: linear-gradient(120deg, var(--svg-popup-color, #4CAF50), var(--svg-popup-color-dark, #2E7D32));
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    color: white;
}

.svg-info-box {
    background: linear-gradient(135deg, #f8f9ff 0%, var(--svg-popup-bg, #e8f5e8) 100%);
    border-left: 4px solid var(--svg-popup-color, #4CAF50);
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
}

.svg-info-box h4 {
    color: var(--svg-popup-color-dark, #2E7D32);
    margin: 0 0 12px 0;
    font-size: 16px;
}

.svg-info-box ul {
    margin: 0;
    padding-left: 18px;
}

.svg-info-box li {
    margin-bottom: 6px;
    color: #495057;
}
sdg15-1
/* Progress indicator */
.svg-progress-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 12px 16px;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: bold;
    color: #2c3e50;
    z-index: 9999;
    font-size: 13px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .svg-popup-content {
        padding: 30px 20px;
        margin: 20px;
    }
    
    .svg-popup-header {
        flex-direction: column;
        text-align: center;
    }
    
    .svg-popup-icon {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/* More precise match for #0F74A3 */
.svg-interactive-element.svg-clicked {
opacity: 0.4;
filter: sepia(100%) saturate(300%) hue-rotate(195deg) brightness(0.3) contrast(1.5);
}

.svg-interactive-element.svg-clicked:hover {
opacity: 1;
transform: scale(1.01);
filter: sepia(100%) saturate(200%) hue-rotate(200deg) brightness(0.5) contrast(1.2);}

section.hp .linked-section-container-sdg {
    position: relative;
    overflow: visible;
    padding: 25px;
    padding-bottom: 150px;
    max-width: calc(100% - 70px); 
    padding: 20px 40px;
    transition: all 0.3s ease;
    background-color: #eff3f4;
    border: 5px solid rgb(44, 76, 92);
    border-radius: 50px 50px 50px 150px;        
}


         /* === EDUCATION.HTML SPECIFIC STYLES - NO INTERFERENCE === */
       
         .asthma-education-page .edu-header {
            text-align: center;
            margin-bottom: 30px;
            color: white;
        }

        .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.01);
                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(4, 103, 128, 0.753);
            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: 1000px;
            width: 80%;
            max-height: 80vh;
            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: scale(0.9);
            }
            to {
                opacity: 1;
                transform: 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 #1493c5;
        }

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

        .asthma-education-page .edu-close-btn {
            background: #1096be;
            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: #0e9adb;
            transform: scale(1.1);
        }

        .asthma-education-page .edu-popup-body h3 {
            color: #095b92;
            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 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .asthma-education-page .edu-popup-image {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transition: transform 0.3s ease;
        }

        .asthma-education-page .edu-popup-image:hover {
            transform: scale(1.05);
        }

        .asthma-education-page .edu-popup-image img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            display: block;
        }

        .asthma-education-page .edu-popup-image .edu-image-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
            padding: 10px;
            font-size: 0.9em;
            font-weight: 500;
        }

        .asthma-education-page .edu-image-grid-2 {
            grid-template-columns: 1fr 1fr;
        }

        .asthma-education-page .edu-image-grid-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .asthma-education-page .edu-large-image {
            grid-column: span 2;
        }

        .asthma-education-page .edu-large-image img {
            height: 200px;
        }

        .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 #198fd3;
        }

        .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;
                padding: 20px;
            }
            
            .asthma-education-page .edu-header h1 {
                font-size: 2em;
            }
            
            .asthma-education-page .edu-container {
                padding: 10px;
            }
        }

        /* engenering cards */
        /* Mobile First - Base Styles (XS: 0-350px) */
        /* .tech-healing-wrapper {
            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;
            display: flex;
            flex-direction: column;
        }

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

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

        /* 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;
        }

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

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

        
        /* 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;
        }

        .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: 800px;
            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-fill, minmax(280px, 1fr));
            gap: 30px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .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: 30%;
            margin-bottom: 50px;
            margin-top: 30px;
        }

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


          /* header meida   */
          @media (max-width: 992px) {
            body {
                padding-top: 0 !important; /* Remove padding since header is hidden */
            }
        
            .header {
                opacity: 0;
                pointer-events: none;
                transform: translateY(-100%);
                transition: opacity 0.3s ease, transform 0.3s ease;
            }
        }
        
        /* Alternative: Use this for instant hide instead of fade-out */
        
        @media (max-width: 992px) {
            body {
                padding-top: 0 !important;
            }
        
            .header {
                display: none !important;
                opacity: 0;
                pointer-events: none;
                transform: translateY(-100%);
            }
        }
       
        
        @media (max-width: 768px) {
            body {
                padding-top: 0 !important;
            }
        
            .header {
                opacity: 0;
                pointer-events: none;
                transform: translateY(-100%);
            }
        }
        
        @media (max-width: 480px) {
            body {
                padding-top: 0 !important;
            }
        
            .header {
                opacity: 0;
                pointer-events: none;
                transform: translateY(-100%);
            }
        }
        
        @media (max-width: 350px) {
            body {
                padding-top: 0 !important;
            }
        
            .header {
                opacity: 0;
                pointer-events: none;
                transform: translateY(-100%);
            }
        }


        /* 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: #EFF3F4;
            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 {
            background: linear-gradient(135deg, #EFF3F4 0%, #A8ABAD 10%, #EFF3F4 100%);
            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-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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            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;
        }