*{margin:0;padding:0;box-sizing:border-box}
html,body{scroll-behavior:smooth}
body{background:#0B0F13;color:#fff;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial}
.container{width:90%;max-width:1200px;margin:auto}
:root{--green:#0D490B;--gold:#3C7A38;--green-3:#5FBF4A;--soft:#f4f4f4;}



/* ======================
   HEADER STYLING (Final)
====================== */
.header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 998;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Scroll effect */
.header.scrolled {
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 10px 0;
}

/* === Logo Styling (fixed) === */
.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 12px;
  overflow: visible;
  padding: 0;
  transition: all 0.3s ease;
}

/* White background appears behind full logo only in dark mode */
/*body.dark .logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 330%;  /* matches logo scale */
 /* height: 230%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.98);
  border-radius: 14px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
  z-index: 0;
} /*

/* Transparent in light mode */
body.light .logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
}

/* Logo image */
.logo img {
  position: relative;
  z-index: 1;
  height: auto;
  max-height: 100px;
  width: auto;
  object-fit: contain;
  transform: scale(3.0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

/* === Navbar Links === */
.navbar ul {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
}

.navbar a {
  color: #fff;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.navbar a:hover,
.navbar a.active {
  background: #5FBF4A;
  color: #000;
}

/* Light mode navbar */
body.light .navbar a {
  color: #111827;
}

body.light .navbar a:hover,
body.light .navbar a.active {
  background: #0D490B;
  color: #fff;
}

/* Mobile menu */
.menu-toggle {
  display: none;
  font-size: 26px;
  color: #fff;
  cursor: pointer;
}

/* Responsive header */
@media (max-width: 768px) {
  .navbar ul {
    display: none;
    flex-direction: column;
    background: rgba(255,255, 255, 0.9);
    position: absolute;
    top: 70px;
    right: 20px;
    border-radius: 8px;
    padding: 20px;
  }

  .navbar ul.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

/* Hero Slider */
.hero-slider{position:relative;height:90vh;overflow:hidden;padding-top:90px}
.hero-slider .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease-in-out}
.hero-slider .slide::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.hero-slider .slide.active{opacity:3}
.slide-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;max-width:760px}
.slide-content h1{font-size:56px;margin-bottom:10px;text-shadow:0 10px 25px rgba(0,0,0,.35)}
.slide-content p{font-size:20px;margin-bottom:18px}
.slide-arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:40px;color:#fff;cursor:pointer;padding:10px;z-index:10;transition:.3s}
.slide-arrow:hover{opacity:.7}.prev-slide{left:20px}.next-slide{right:20px}

/* Generic */
.btn{background:var(--green);padding:10px 16px;color:#fff;border-radius:6px;text-decoration:none;font-weight:700;display:inline-block;border:0}
.btn:hover{background:var(--gold)}
.section{padding:80px 0}
.section-title{text-align:center;font-size:38px;font-weight:800;margin-bottom:10px}
.section-subtitle{text-align:center;color:#f1e642;margin-bottom:36px}
/* Light yellow for dark mode */
body.dark .section-subtitle {
  color: #fff;
}

/* Dark gray for light mode */
body.light .section-subtitle {
  color: #222; /* you can also use #111827 to match your theme */
}


/* About */
.home-about .container{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.home-about-img img{width:100%;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2)}

/* Allowed Forms (icons) */
.allowed-forms{padding:90px 0;background:#0B0F13}
.forms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.form-box{background:#111827;padding:24px;text-align:center;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:.3s}
.form-box img{width:72px;height:72px;margin-bottom:14px;filter:brightness(1) saturate(1.1);transition:.3s}
.form-box:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.form-box:hover img{transform:translateY(-4px);filter:brightness(1.15)}

/* Parallax centered section */
.parallax-centered{background:url('../images/imgi_22_Slider-Home.jpg') center/cover fixed no-repeat;padding:150px 0;display:flex;align-items:center;justify-content:center}
.parallax-box{background:#ffffff;color:#000;max-width:800px;text-align:center;padding:60px 50px;border-radius:6px;box-shadow:0 10px 50px rgba(0,0,0,.30)}
.parallax-box h2{font-size:42px;margin-bottom:10px}.parallax-box p{font-size:18px;margin-bottom:25px;color:#444}
.btn-outline{display:inline-block;padding:12px 26px;border:2px solid #000;color:#000;text-decoration:none;transition:.3s;font-weight:600}
.btn-outline:hover{background:#000;color:#fff}
body.dark .parallax-box{background:#0F1620;color:#fff} body.dark .parallax-box p{color:#ddd}
body.dark .btn-outline{border:2px solid #5FBF4A;color:#5FBF4A} body.dark .btn-outline:hover{background:#5FBF4A;color:#000}

/* Testimonials with background */
.testimonials-dark{padding:120px 0;background:url('../images/imgi_22_Slider-Home.jpg') center/cover no-repeat;position:relative}
body.dark .testimonials-dark{background:url('../images/imgi_22_Slider-Home.jpg') center/cover no-repeat}
.testimonial-slider{position:relative;max-width:780px;margin:auto;overflow:hidden}
.t-slide{display:none;justify-content:center;align-items:center}
.t-slide.active{display:flex;animation:slideIn .6s ease}
@keyframes slideIn{from{transform:translateX(60px);opacity:0}to{transform:translateX(0);opacity:1}}
.t-box{background:#ffffff;color:#0B0F13;padding:40px;border-radius:10px;max-width:600px;text-align:center;box-shadow:0 10px 35px rgba(0,0,0,.35)}
.t-box hr{margin:15px auto;width:160px;border:1px solid #0D490B}
.quote-icon{font-size:45px;color:#0D490B;margin-bottom:10px}
.t-arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:22px;color:#fff;background:rgba(223, 221, 221, 0.15);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s}
.t-arrow:hover{background:rgba(255,255,255,.35)} .prev{left:-40px}.next{right:-40px}

/* Photo showcase */
.photo-showcase {
  padding: 80px 0;
}

.photo-showcase .container {
  text-align: center;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.showcase-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.showcase-grid img:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}


/* Banner, stats, FAQ, contact */
.banner-full{height:360px;background:url('../images/imgi_29_find_bg.jpg') center/cover no-repeat fixed;position:relative;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center}
.banner-full::before{content:"";position:absolute;inset:0;background:rgba(13,73,11,.5)}.banner-full .inner{position:relative;z-index:2}
.banner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.banner-grid .tile{height:220px;border-radius:12px;overflow:hidden}
.banner-grid .tile img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:.35s}
.banner-grid .tile:hover img{transform:scale(1.08)}

.stats{padding:30px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat{background:#111827;border-radius:12px;padding:24px;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:.3s}
.stat .counter{font-size:36px;font-weight:800;color:#5FBF4A}.stat span{color:#151515}
.stat:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.35)}

/* Default (light mode style) */
.stat .counter {
  font-size: 36px;
  font-weight: 800;
  color: #5FBF4A; /* green */
}

.stat span {
  color: #151515;
}

/* === Dark mode adjustments === */
body.dark .stat .counter {
  color: #a2f08c; /* lighter green for dark background */
}

body.dark .stat span {
  color: #f1f1f1; /* light text for dark mode */
}

/* === Light mode adjustments (optional for clarity) === */
body.light .stat .counter {
  color: #5FBF4A; /* normal green */
}

body.light .stat span {
  color: #151515; /* dark text */
}


.faq{padding:80px 0}
.faq-item{border-bottom:1px solid #1f2937;padding:14px 0}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:#cbd5e1}
.faq-item.active .faq-a{max-height:200px;margin-top:8px}

.contact-map-section{padding:90px 0}
.contact-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact-box{background:#111827;padding:30px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.contact-box input,.contact-box textarea{width:100%;margin-bottom:15px;padding:12px;border-radius:6px;border:1px solid #333;background:#1f2937;color:#fff}
.contact-box input:focus,.contact-box textarea:focus{outline:none;border-color:#5FBF4A}
.map-box{width:100%;height:400px;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* Footer */
.footer{background:#0f172a;color:#e5e7eb;padding:28px 0}
.footer .container{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;align-items:start}
.footer .brand{font-weight:800;font-size:22px;margin-bottom:8px}
.footer .sub{color:#5db664;margin-bottom:12px}
.footer ul{list-style:none;line-height:1.9}
.footer a{color:#e5e7eb;text-decoration:none}
.footer a:hover{color:#5FBF4A}
.footer .copy{grid-column:1/-1;margin-top:12px;color:#9ca3af}

/* Lightbox */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);justify-content:center;align-items:center;z-index:99999}
.lightbox img{max-width:90%;max-height:90%;border-radius:10px}

/* WhatsApp */
.whatsapp-float{position:fixed;bottom:22px;right:22px;width:64px;height:64px;border-radius:50%;box-shadow:0 10px 25px rgba(0,0,0,.25);overflow:hidden;z-index:9999}
.whatsapp-float img{width:100%;height:100%}

/* USA Map section */
.usa-map-section{padding:100px 0;text-align:center}
.map-legend{display:flex;justify-content:center;gap:25px;background:#fff;padding:10px 25px;border-radius:8px;box-shadow:0 3px 18px rgba(0,0,0,0.1);margin-bottom:25px;color:#111}
.map-legend .dot{width:12px;height:12px;display:inline-block;border-radius:50%;margin-right:6px}
.dot.adult{background:#0B3A0B}.dot.medical{background:#0F6A0F}.dot.illegal{background:#9ACC65}
.map-container{margin:30px auto;max-width:1000px}
#usaMap{width:100%;height:auto}
.state-info-box{margin-top:25px;background:#fff;color:#111;display:inline-block;padding:20px 30px;border-radius:10px;box-shadow:0 5px 25px rgba(0,0,0,0.15);transition:.3s}
body.dark .map-legend, body.dark .state-info-box{background:#1d1d1d;color:#fff;box-shadow:none}

/* Light Mode overrides */
body.light{background:var(--soft);color:#0f172a}
body.light .header{background:rgba(255,255,255,.85);border-bottom:1px solid #e5e7eb}
body.light .navbar a{color:#111827}
body.light .navbar a:hover, body.light .navbar a.active{background:#013f0e;color:#f1e642}
body.light .form-box,body.light .stat{background:#f3eded;color:#080808;box-shadow:0 10px 24px rgba(255,255,255,0.8)}
body.light .contact-box{background:#ffffff;color:#013f0e}
body.light .contact-box input, body.light .contact-box textarea{background:#f3f4f6;color:#0f0f0f;border-color:#e5e7eb}
body.light .allowed-forms, body.light .photo-showcase, body.light .faq, body.light .contact-map-section, body.light .stats{background:var(--soft)}
body.light .t-box{background:#979797;color:#0e0d0d}


.usa-map-section { padding: 60px 0; text-align: center; }
.usa-map-img { width: 100%; max-width: 900px; margin: 0 auto; display: block; }
.map-legend { margin-bottom: 20px; display: flex; justify-content: center; gap: 20px; }
.map-legend span { font-size: 15px; display: flex; align-items: center; gap: 6px; }

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.legend-dot.adult   { background: #151515; }
.legend-dot.medical { background: #1f4a0d; }
.legend-dot.illegal { background: #a2ce42; }
/* Background switching for sections */
.bg-switch {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.6s ease-in-out;
  color: var(--text-color);
  position: relative;
  z-index: 1;
}

/* Optional soft overlay for readability */
.bg-switch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
}
.bg-switch .container {
  position: relative;
  z-index: 2;
}

/* Light mode */
body.light #about-section {
  background-image: url('../images/imgi_30_allowed_forms_bg.jpg');
}
body.dark #about-section {
  background-image: url('../images/imgi_23_home_bg_pages.png');
}

body.light #deliver-section {
  background-image: url('../images/imgi_30_allowed_forms_bg.jpg');
}
body.dark #deliver-section {
  background-image: url('../images/imgi_23_home_bg_pages.png');
}

/* My Artwork Section */
.my-artwork {
  padding: 90px 0;
  background: var(--bg-color, #111);
  text-align: center;
}

.my-artwork .section-title {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.my-artwork .section-subtitle {
  color: #1d1d1d;
  margin-bottom: 40px;
}

.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}

.art-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  overflow: hidden;
  padding: 15px;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.art-item img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.art-item:hover img {
  transform: scale(1.05);
}

.art-item h3 {
  font-size: 1.2rem;
  color: #5FBF4A;
  margin-bottom: 8px;
}

.art-item p {
  font-size: 0.95rem;
  color: #ccc;
}
/* Default (light mode style) */
.art-item p {
  font-size: 0.95rem;
  color: #333; /* dark gray for light mode */
}

/* Dark mode version */
body.dark .art-item p {
  color: #ccc; /* light gray for dark background */
}

/* (Optional, explicit light mode) */
body.light .art-item p {
  color: #333;
}


/* My Artwork Section */
.my-artwork {
  padding: 90px 0;
  background: #212221; /* default for dark mode */
  text-align: center;
  color: #fff;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Light mode fix */
body.light .my-artwork {
  background: #ffffff;
  color: #111827;
}

body.light .my-artwork .art-item {
  background: #cccdce;
  color: #111827;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.my-artwork .section-title {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.my-artwork .section-subtitle {
  color: #ccc;
  margin-bottom: 40px;
}

body.light .my-artwork .section-subtitle {
  color: #555;
}

/* === THEME TOGGLE BUTTON === */
.theme-toggle {
  position: fixed;
  bottom: 25px;
  left: 25px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 24px;
  border: none;
  background: #5FBF4A;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99999;
  box-shadow: 0 5px 20px rgba(0,0,0,.25);
  transition: background 0.3s, color 0.3s, transform 0.2s;
}
.theme-toggle:hover {
  background: #3C7A38;
  color: #fff;
  transform: scale(1.1);
}


/* Preloader overlay */
#preloader {
  position: fixed;
  inset: 0;
  background: #fff; /* or #000 for dark sites */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease;
}

/* Loader - dnaLoader */

.dnaLoader {
  height: 10rem;
  width: 30rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  -webkit-animation: rotateDna 15s ease-in-out infinite;
          animation: rotateDna 15s ease-in-out infinite;
}
.dnaLoader .spike {
  height: 80%;
  width: 0;
  position: relative;
  border: 1px transparent white;
}
.dnaLoader .spike::before, .dnaLoader .spike::after {
  content: "";
  position: absolute;
  height: 1rem;
  width: 1rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 0;
  right: 0;
  border-radius: 500px;
  margin: auto;
}
.dnaLoader .spike::before {
  top: 0;
  -webkit-animation: beforeAnimate 1.5s linear infinite;
          animation: beforeAnimate 1.5s linear infinite;
  background-color: #a2ce42;
}
.dnaLoader .spike::after {
  bottom: 0;
  -webkit-animation: afterAnimate 1.5s linear infinite;
          animation: afterAnimate 1.5s linear infinite;
  background-color: #1f4a0d;
}

.spike:nth-child(1)::before, .spike:nth-child(1)::after {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.spike:nth-child(2)::before, .spike:nth-child(2)::after {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.spike:nth-child(3)::before, .spike:nth-child(3)::after {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.spike:nth-child(4)::before, .spike:nth-child(4)::after {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.spike:nth-child(5)::before, .spike:nth-child(5)::after {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.spike:nth-child(6)::before, .spike:nth-child(6)::after {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.spike:nth-child(7)::before, .spike:nth-child(7)::after {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.spike:nth-child(8)::before, .spike:nth-child(8)::after {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.spike:nth-child(9)::before, .spike:nth-child(9)::after {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.spike:nth-child(10)::before, .spike:nth-child(10)::after {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.spike:nth-child(11)::before, .spike:nth-child(11)::after {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}

.spike:nth-child(12)::before, .spike:nth-child(12)::after {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.spike:nth-child(13)::before, .spike:nth-child(13)::after {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}

.spike:nth-child(14)::before, .spike:nth-child(14)::after {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

.spike:nth-child(15)::before, .spike:nth-child(15)::after {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

@-webkit-keyframes beforeAnimate {
  0% {
    top: 0;
    -webkit-transform: translateX(-50%) translateY(0) scale(0.5);
            transform: translateX(-50%) translateY(0) scale(0.5);
    opacity: 0.25;
  }
  25% {
    -webkit-transform: translateX(-50%) translateY(-100%) scale(0.5);
            transform: translateX(-50%) translateY(-100%) scale(0.5);
    z-index: -1;
    opacity: 0.5;
  }
  50% {
    top: 100%;
    -webkit-transform: translateX(-50%) translateY(-100%) scale(0.5);
            transform: translateX(-50%) translateY(-100%) scale(0.5);
    opacity: 0.75;
  }
  75% {
    -webkit-transform: translateX(-50%) translateY(-100%) scale(1.5);
            transform: translateX(-50%) translateY(-100%) scale(1.5);
    z-index: 1;
    opacity: 1;
  }
  100% {
    top: 0;
    -webkit-transform: translateX(-50%) translateY(0) scale(0.5);
            transform: translateX(-50%) translateY(0) scale(0.5);
    opacity: 0.75;
  }
}

@keyframes beforeAnimate {
  0% {
    top: 0;
    -webkit-transform: translateX(-50%) translateY(0) scale(0.5);
            transform: translateX(-50%) translateY(0) scale(0.5);
    opacity: 0.25;
  }
  25% {
    -webkit-transform: translateX(-50%) translateY(-100%) scale(0.5);
            transform: translateX(-50%) translateY(-100%) scale(0.5);
    z-index: -1;
    opacity: 0.5;
  }
  50% {
    top: 100%;
    -webkit-transform: translateX(-50%) translateY(-100%) scale(0.5);
            transform: translateX(-50%) translateY(-100%) scale(0.5);
    opacity: 0.75;
  }
  75% {
    -webkit-transform: translateX(-50%) translateY(-100%) scale(1.5);
            transform: translateX(-50%) translateY(-100%) scale(1.5);
    z-index: 1;
    opacity: 1;
  }
  100% {
    top: 0;
    -webkit-transform: translateX(-50%) translateY(0) scale(0.5);
            transform: translateX(-50%) translateY(0) scale(0.5);
    opacity: 0.75;
  }
}
@-webkit-keyframes afterAnimate {
  0% {
    bottom: 0;
    -webkit-transform: translateX(-50%) translateY(0) scale(0.5);
            transform: translateX(-50%) translateY(0) scale(0.5);
    opacity: 0.25;
  }
  25% {
    -webkit-transform: translateX(-50%) translateY(-100%) scale(1.5);
            transform: translateX(-50%) translateY(-100%) scale(1.5);
    z-index: 1;
    opacity: 1;
  }
  50% {
    bottom: 100%;
    -webkit-transform: translateX(-50%) translateY(100%) scale(0.5);
            transform: translateX(-50%) translateY(100%) scale(0.5);
    opacity: 0.75;
  }
  75% {
    -webkit-transform: translateX(-50%) translateY(-100%) scale(0.5);
            transform: translateX(-50%) translateY(-100%) scale(0.5);
    z-index: -1;
    opacity: 0.5;
  }
  100% {
    bottom: 0;
    -webkit-transform: translateX(-50%) translateY(0) scale(0.5);
            transform: translateX(-50%) translateY(0) scale(0.5);
    opacity: 0.25;
  }
}
@keyframes afterAnimate {
  0% {
    bottom: 0;
    -webkit-transform: translateX(-50%) translateY(0) scale(0.5);
            transform: translateX(-50%) translateY(0) scale(0.5);
    opacity: 0.25;
  }
  25% {
    -webkit-transform: translateX(-50%) translateY(-100%) scale(1.5);
            transform: translateX(-50%) translateY(-100%) scale(1.5);
    z-index: 1;
    opacity: 1;
  }
  50% {
    bottom: 100%;
    -webkit-transform: translateX(-50%) translateY(100%) scale(0.5);
            transform: translateX(-50%) translateY(100%) scale(0.5);
    opacity: 0.75;
  }
  75% {
    -webkit-transform: translateX(-50%) translateY(-100%) scale(0.5);
            transform: translateX(-50%) translateY(-100%) scale(0.5);
    z-index: -1;
    opacity: 0.5;
  }
  100% {
    bottom: 0;
    -webkit-transform: translateX(-50%) translateY(0) scale(0.5);
            transform: translateX(-50%) translateY(0) scale(0.5);
    opacity: 0.25;
  }
}
@-webkit-keyframes rotateDna {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotateDna {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* Loader - spinner */
.spinner {
  display: block;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 2s;
  background: #fff;
}
.spinner__item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pill {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pill__item {
  position: relative;
  box-sizing: border-box;
  width: 3.5rem;
  height: 1.5rem;
  border: 2px solid #8ab035;
  border-radius: 6rem;
  overflow: hidden;
  background: #fff;
  animation: pill 3s infinite;
}
.pill__half {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #284779;
  border-right: 2px solid #8ab035;
}
.pill__half:after {
  content: "";
  position: absolute;
  top: 80%;
  left: 40%;
  width: 0.5rem;
  height: 2px;
  background: #8ab035;
  border-radius: 1rem;
}
.pill__shadow {
  width: 3rem;
  height: 0.5rem;
  background: rgba(204,204,204,0.5);
  border-radius: 50%;
  animation: pill-shadow 3s infinite;
}
@-moz-keyframes pill {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-0.5rem);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-0.5rem);
  }
  100% {
    transform: translateY(0);
  }
}
@-webkit-keyframes pill {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-0.5rem);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-0.5rem);
  }
  100% {
    transform: translateY(0);
  }
}
@-o-keyframes pill {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-0.5rem);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-0.5rem);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes pill {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-0.5rem);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-0.5rem);
  }
  100% {
    transform: translateY(0);
  }
}
@-moz-keyframes pill-shadow {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes pill-shadow {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes pill-shadow {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pill-shadow {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

/* Fix for Contact button in header */

/* Default style (for all modes) */
.navbar a.active {
  background: #0D490B; /* your green color */
  color: #fff !important; /* make text white for contrast */
}

/* Light mode fix */
body.light .navbar a.active {
  background: #0D490B; /* keep same green background */
  color: #fff !important; /* force white text */
}

/* Dark mode fix */
body.dark .navbar a.active {
  background: #5FBF4A; /* lighter green for dark background */
  color: #000 !important; /* black text for contrast */
}