/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&family=Poppins:wght@400;500&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  --title-color: hsl(0, 0%, 95%);
  --text-color: hsl(0, 0%, 70%);
  --text-color-light: hsl(0, 0%, 60%);
  --body-color: hsl(0, 0%, 0%);
  --container-color: hsl(0, 0%, 8%);

  --body-font: "Poppins", sans-serif;
  --second-font: "Montserrat", sans-serif;
  --biggest-font-size: 2.75rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  --logo-h-mobile: 28px;
  --logo-h-desktop: 34px;
  --footer-logo-h-mobile: 34px;
  --footer-logo-h-desktop: 42px;

  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1152px) {
  :root {
    --biggest-font-size: 5.5rem;
    --h1-font-size: 2.5rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
* { box-sizing: border-box; padding: 0; margin: 0; }
html { scroll-behavior: smooth; }

body, button, input {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  color: var(--text-color);
}
body { background-color: var(--body-color); }
button, input { outline: none; border: none; }

h1, h2, h3, h4 {
  color: var(--title-color);
  font-family: var(--second-font);
  font-weight: var(--font-semi-bold);
}

ul { list-style: none; }
a { text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/*=============== REUSABLE CSS CLASSES ===============*/
.container { max-width: 1120px; margin-inline: 1.5rem; }
.grid { display: grid; gap: 1.5rem; }
.section { padding-block: 5rem 1rem; }
.section__title { text-align: center; font-size: var(--h1-font-size); margin-bottom: 1.5rem; }
.main { overflow: hidden; }

/*=============== HEADER & NAV ===============*/
.header{ position: fixed; width: 100%; background-color: transparent; top: 0; left: 0; z-index: var(--z-fixed); }
.nav{ height: var(--header-height); display: flex; justify-content: space-between; align-items: center; }

.nav__logo{ display: inline-flex; align-items: center; gap: .5rem; line-height: 0; }
.nav__logo-img{ height: var(--logo-h-mobile); width: auto; object-fit: contain; }
@media screen and (min-width: 1023px){ .nav__logo-img{ height: var(--logo-h-desktop); } }

.nav__toggle, .nav__close{ display: flex; font-size: 1.25rem; color: var(--title-color); cursor: pointer; }

/* Navigation for mobile devices */
@media screen and (max-width: 1023px){
  .nav__menu{
    position: fixed; top: -100%; left: 0; background-color: hsla(0, 0%, 0%, .3);
    width: 100%; padding-block: 4rem; backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px); transition: top .4s;
  }
}
.nav__list{ text-align: center; display: flex; flex-direction: column; row-gap: 2.5rem; }
.nav__link{ position: relative; color: var(--title-color); font-family: var(--second-font); font-weight: var(--font-medium); }
.nav__link::after{
  content: ''; width: 0; height: 2px; background-color: var(--title-color);
  position: absolute; left: 0; bottom: -0.5rem; transition: width .3s;
}
.nav__close{ position: absolute; top: 1rem; right: 1.5rem; }

/* Show menu */
.show-menu{ top: 0; }

/* Add blur to header */
.blur-header::after{
  content: ''; position: absolute; width: 100%; height: 100%;
  background-color: hsla(0, 0%, 0%, .3); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px); top: 0; left: 0; z-index: -1;
}

/* Active link */
.active-link::after{ width: 70%; }

/*=============== HOME ===============*/
.home{ position: relative; }
.home__bg{
  position: absolute; top: 0; left: 0; width: 100%; height: 750px;
  object-fit: cover; object-position: center;
}
.home__shadow{
  position: absolute; top: 0; left: 0; width: 100%; height: 800px;
  background: linear-gradient(180deg,
    hsl(0, 0%, 0%) 2%,
    hsla(0, 0%, 0%, 0) 40%,
    hsla(0, 0%, 0%, 0) 58%,
    hsl(0, 0%, 0%) 78%
  );
}
.home__container{ position: relative; padding-top: 3rem; row-gap: 3rem; }
.home__data{ text-align: center; }
.home__subtitle{ font-size: var(--h3-font-size); margin-bottom: .5rem; }
.home__title{ font-size: var(--biggest-font-size); margin-bottom: 1rem; }
.home__description{ margin-bottom: 2rem; color: var(--title-color); }
.home__cards{ grid-template-columns: 240px; justify-content: center; }
.home__card{ position: relative; overflow: hidden; }
.home__card-img{ transition: transform .4s; }
.home__card-shadow{
  position: absolute; width: 100%; height: 100%; top: 0; left: 0;
  background: linear-gradient(180deg, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 125%);
}
.home__card-title{
  position: absolute; left: 1rem; bottom: 1rem; font-size: var(--h3-font-size); z-index: 1;
}
.home__card:hover .home__card-img{ transform: scale(1.2); }


/* =============== BUTTON ===============
.button{
  background-color: hsla(147, 82%, 42%, 0.9);
  padding: 1.2rem 1.5rem; color: var(--title-color);
  display: inline-flex; align-items: center; column-gap: .5rem;
  font-family: var(--second-font); font-weight: var(--font-semi-bold);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.button i{ font-size: 1.2rem; transition: transform .4s; font-weight: initial; }
.button:hover i{ transform: translateX(.25rem); } */


/* .button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(40, 80, 255, 0.15);
  border: 1px solid rgba(120, 160, 255, 0.35);
  color: #ffffff;
  font-weight: 700;
  font-size: 17px;
  padding: 15px 38px; 
  border-radius: 9px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 0 16px rgba(90, 140, 255, 0.25);
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.button:hover {
  background: rgba(0, 140, 255, 0.25);
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(0, 180, 255, 0.55);
} */

:root {
  --btn-tint: 94,140,255;        /* neon blue (R,G,B) */
  --btn-border: 120,160,255;      /* border/light glow */
  --btn-sheen: 180,200,255;       /* sheen highlight */
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(40, 80, 255, 0.15);
  border: 1px solid rgba(var(--btn-border), 0.35);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 36px;
  border-radius: 8px; /* slightly rounded */
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 0 20px rgba(var(--btn-border), 0.3);
  text-decoration: none;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  animation: breathe 4.8s ease-in-out infinite;
}

/* Soft hover response */
.button:hover {
  background: rgba(90, 140, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(var(--btn-border), 0.55);
}

/* 1) Slower breathing neon glow */
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 18px rgba(var(--btn-border), .20); }
  50%      { box-shadow: 0 0 38px rgba(var(--btn-border), .50); }
}

/* 2) Slow, elegant diagonal light sweep */
.button::after {
  content: "";
  position: absolute;
  inset: -40% -120% auto auto;
  width: 200%;
  height: 220%;
  background: linear-gradient(
    60deg,
    rgba(var(--btn-sheen), 0) 35%,
    rgba(var(--btn-sheen), .18) 50%,
    rgba(var(--btn-sheen), 0) 65%
  );
  transform: translateX(-130%) rotate(12deg);
  pointer-events: none;
  animation: sheen 10s ease-in-out infinite; /* slower now */
  mix-blend-mode: screen;
  filter: blur(0.2px);
}

@keyframes sheen {
  0%   { transform: translateX(-130%) rotate(12deg); opacity: 0; }
  12%  { opacity: 0.9; }
  22%  { transform: translateX(25%) rotate(12deg); opacity: 0; }
  100% { transform: translateX(25%) rotate(12deg); opacity: 0; }
}

/* 3) Ripple click animation (paired with JS) */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(var(--btn-tint), .4) 0%,
    rgba(var(--btn-tint), .2) 28%,
    rgba(var(--btn-tint), 0) 60%
  );
  transform: scale(0);
  opacity: 0;
  transition: transform .6s ease, opacity .8s ease;
}
.button:active::before {
  transform: scale(2.8);
  opacity: 1;
}

/* For users with motion sensitivity */
@media (prefers-reduced-motion: reduce) {
  .button, .button::after { animation: none !important; }
  .button { transition: none; }
}




/*=============== ABOUT US ===============*/
.aboutus__container{ row-gap: 3rem; }
.aboutus__data{ text-align: center; }
.aboutus__description{ margin-bottom: 2rem; }
.aboutus__image{ position: relative; justify-self: center; overflow: hidden; }
.aboutus__img{ width: 300px; transition: transform .4s; }
.aboutus__shadow{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, hsla(0, 0%, 0, 0) 50%, hsl(0, 0%, 0) 125%);
}
.aboutus__image .aboutus__img{ transition: transform 0.3s ease-in-out; }
.aboutus__image:hover .aboutus__img{ transform: scale(1.2); }

/*=============== OUR SERVICES ===============*/
.services__container{
  padding-top: 1.5rem; grid-template-columns: 240px;
  justify-content: center; row-gap: 2.5rem;
}
.services__image{ position: relative; overflow: hidden; margin-bottom: 1rem; }
.services__img{ transition: transform .4s; }
.services__shadow{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, hsla(0, 0%, 0, 0) 50%, hsl(0, 0%, 0) 125%);
}
.services__title{ font-size: var(--h3-font-size); margin-bottom: .5rem; }
.services__location{
  display: inline-flex; align-items: center; column-gap: .25rem;
  font-size: var(--small-font-size); font-family: var(--second-font); font-weight: 500;
}
.services__location i{ font-size: 1rem; }
.services__image .services__img{ transition: transform 0.3s ease-in-out; }
.services__image:hover .services__img{ transform: scale(1.2); }

.no-link-style { text-decoration: none; color: inherit; }
.no-link-style:hover { text-decoration: none; color: inherit; }

/*=============== EXPLORE ===============*/
.explore{ position: relative; }
.explore__image{ position: absolute; overflow: hidden; }
.explore__img{
  width: 100%; height: 333px; object-fit: cover; object-position: center;
}
.explore__shadow{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg,
    hsl(0, 0%, 0%) 5%,
    hsla(0, 0%, 0%, 0) 40%,
    hsla(0, 0%, 0%, 0) 60%,
    hsl(0, 0%, 0%) 92%
  );
}
.explore__content{ position: relative; padding-top: 16rem; text-align: center; row-gap: 2.5rem; }
.explore__user{ display: inline-flex; align-items: center; justify-content: center; column-gap: .5rem; }
.explore__prefil{ width: 30px; border-radius: 50%; }
.explore__name{ font-size: var(--small-font-size); color: var(--title-color); }

/*=============== JOIN ===============*/
.join__container{ row-gap: 3rem; padding-bottom: 2.5rem; }
.join__data{ text-align: center; }
.join__description{ margin-bottom: 2rem; }
.join__form{ display: grid; row-gap: 1rem; }
.join__input{ padding: 1.2rem 1rem; background-color: var(--container-color); }
.join__button{ cursor: pointer; }

.join__map{
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  border-radius: 8px;
}
.join__map-iframe{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
  touch-action: pan-x pan-y;
}
.join__shadow{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg, hsla(0, 0%, 0, 0) 50%, hsl(0, 0%, 0) 125%);
}

/* Gold contact links */
.contact-link { color: #d4af37; text-decoration: none; font-weight: 500; }
.contact-link:hover { color: #b8860b; text-decoration: underline; }

/*=============== FOOTER ===============*/
.footer{ padding-block: 2.5rem; background-color: var(--container-color); }
.footer__content{ row-gap: 3.5rem; }
.footer__logo{ display: inline-flex; align-items: center; line-height: 0; margin-bottom: 1rem; }
.footer__logo-img{ height: var(--footer-logo-h-mobile); width: auto; object-fit: contain; }
.footer__data{ grid-template-columns: repeat(2, max-content); gap: 2.5rem 3.5rem; }
.footer__title{ font-size: var(--h3-font-size); margin-bottom: 1rem; }
.footer__links{ display: grid; row-gap: .75rem; }
.footer__link{ color: var(--text-color); transition: color .4s; }
.footer__link:hover{ color: var(--title-color); }
.footer__group, .footer__social{ display: flex; }
.footer__group{ margin-top: 5rem; flex-direction: column; align-items: center; row-gap: 2rem; }
.footer__social{ column-gap: 1.5rem; }
.footer__social-link{ color: var(--text-color); font-size: 1.2rem; transition: color .4s, transform .4s; }
.footer__social-link:hover{ color: var(--title-color); transform: translateY(-.25rem); }
.footer__copy{ font-size: var(--smaller-font-size); color: var(--text-color-light); text-align: center; }
@media screen and (min-width: 1023px){ .footer__logo-img{ height: var(--footer-logo-h-desktop); } }

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{ width: 0.6rem; border-radius: .5rem; background-color: hsl(0, 0%, 10%); }
::-webkit-scrollbar-thumb{ border-radius: .5rem; background-color: hsl(0, 0%, 20%); }
::-webkit-scrollbar-thumb:hover{ background-color: hsl(0, 0%, 30%); }

/*=============== SCROLL UP ===============*/
.scrollup{
  position: fixed; right: 1rem; bottom: -50%;
  background-color: hsla(0, 0%, 100%, .1); padding: 6px; display: inline-flex;
  color: var(--title-color); font-size: 1.25rem; backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px); z-index: var(--z-tooltip); transition: bottom .4s, transform .4s;
}
.scrollup:hover{ transform: translateY(-.25rem); }
.show-scroll{ bottom: 3rem; }

/*=============== BREAKPOINTS ===============*/
@media screen and (max-width: 340px) {
  .container { margin-inline: 1rem; }
  .footer__data { grid-template-columns: max-content; }
}
@media screen and (min-width: 576px) {
  .home__container,
  .aboutus__container,
  .explore__content,
  .join__container {
    grid-template-columns: 380px;
    justify-content: center;
  }
  .footer__data{ grid-template-columns: repeat(3, max-content); }
}
@media screen and (min-width: 768px){
  .home__cards{ grid-template-columns: repeat(2, 240px); }
  .aboutus__container,
  .join__container{
    grid-template-columns: repeat(2, 350px);
    align-items: center;
  }
  .aboutus__data,
  .aboutus__data .section__title,
  .join__data,
  .join__data .section__title{
    text-align: initial;
  }
  .services__container{ grid-template-columns: repeat(2, 240px); }
  .explore__img{ width: 100vw; }
  .join__map{ order: -1; }
  .footer__content{
    grid-template-columns: repeat(2, max-content);
    justify-content: space-between;
  }
  .footer__group{ flex-direction: row; justify-content: space-between; }
  .footer__copy{ order: -1; }
}
@media screen and (min-width:1023px){
  .nav__close, .nav__toggle{ display: none; }
  .nav__list{ flex-direction: row; column-gap: 4rem; }
  .services__container{ grid-template-columns: repeat(3, 240px); }
  .footer__data{
    grid-template-columns: repeat(4, max-content);
    column-gap: 4.5rem;
  }
}
@media screen and (min-width: 1152px){
  .container{ margin-inline: auto; }
  .section{ padding-block: 7rem 2rem; }
  .nav{ height: calc(var(--header-height) + 1.5rem); }
  .blur-header::after{ backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
  .home__container{
    grid-template-columns: initial; justify-content: initial;
    row-gap: 4rem; padding-top: 6.5rem;
  }
  .home__shadow{ height: 980px; }
  .home__data{ text-align: initial; width: 480px; }
  .home__subtitle{ font-size: var(--h2-font-size); }
  .home__description{ margin-bottom: 2.5rem; }
  .home__cards{ grid-template-columns: repeat(4, 260px); }
  .home__card-title{ left: 1.5rem; bottom: 1.5rem; }
  .button{ column-gap: 1.5rem; }
  .aboutus__container{
    grid-template-columns: 400px 460px;
    column-gap: 8.5rem; padding-block: 1rem;
  }
  .aboutus__description{ margin-bottom: 3rem; }
  .aboutus__img{ width: 460px; }
  .services__container{
    grid-template-columns: repeat(3, 300px);
    column-gap: 3rem; padding-top: 4rem;
  }
  .services__title{ font-size: var(--h2-font-size); }
  .services__location{ font-size: var(--normal-font-size); }
  .explore__img{ height: 600px; }
  .explore__content{ padding-top: 28rem; grid-template-columns: 670px 1fr; }
  .explore__data, .explore__data .section__title{ text-align: initial; }
  .explore__user{ justify-content: flex-end; align-self: flex-end; margin-bottom: 1.25rem; }
  .join__container { grid-template-columns: 460px 340px; column-gap: 8.5rem; padding-block: 1rem 5rem; }
  .join__map { max-width: 460px; }
  .join__map-iframe { aspect-ratio: 4 / 3; }
  .join__description { margin-bottom: 3rem; }
  .footer{ padding-block: 5rem 3rem; }
  .footer__title{ margin-bottom: 1.5rem; }
  .footer__group{ margin-top: 7rem; }
  .footer__social{ column-gap: 2rem; }
  .footer__social-link{ font-size: 1.5rem; }
  .scrollup{ right: 3rem; }
}

/* ==== MOBILE-ONLY TWEAKS FOR HOME HERO IMAGE ==== */
@media screen and (max-width: 576px) {
  .home__bg{
    height: 520px; object-fit: cover; object-position: 50% 35%;
  }
  .home__shadow{ height: 560px; }
  .home__container{ padding-top: 2.25rem; row-gap: 2.25rem; }
  .home__description{
    background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
    padding: .75rem 1rem; border-radius: 10px; display: inline-block;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25); backdrop-filter: saturate(120%);
  }
}
@media screen and (max-width: 360px) {
  .home__bg{ height: 460px; object-position: 50% 28%; }
  .home__shadow{ height: 500px; }
  .home__description{ padding: .6rem .85rem; border-radius: 8px; }
}

/* ===== Our Projects title (left-aligned) ===== */
.projects__section-title{
  font-size: var(--h2-font-size);
  text-align: left;          /* left align per style */
  margin: .75rem 0 1rem 0;   /* top / right / bottom / left */
  font-family: var(--second-font);
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
}

/* Mobile: center "Our Projects" */
@media screen and (max-width: 576px){
  .projects__section-title{
    text-align: center;
    margin-left: 0; /* ensure no leftover offset */
  }
}




/* ===== Featured label: plain text with dark gradient box ===== */
.home__card::after {
  content: "Featured";
  position: absolute;
  top: .75rem;
  left: .75rem;
  font-size: var(--smaller-font-size);
  font-weight: 450;
  color: #fff; /* white text for contrast */
  z-index: 2;

  /* pill styling */
  padding: .25rem .6rem;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6));
  backdrop-filter: blur(2px);
}


  /* ===== Floating WhatsApp CTA ===== */
  .whatsapp-float {
    --cta-size: 64px;
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 9998; /* below your successPopup (9999) */
    width: var(--cta-size);
    height: var(--cta-size);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: #1cab51;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(37, 211, 102, .35), 0 3px 8px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    overflow: visible;
  }
  .whatsapp-float i {
    font-size: 1.6rem;
    line-height: 1;
  }
  /* Label pill (shown on mobile & tablets) */
  .whatsapp-label {
    display: none;
    padding-right: .9rem;
    font-size: .95rem;
  }

  /* Pulse ring + glow */
  .whatsapp-float::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 999px;
    border: 2px solid rgba(37, 211, 102, .45);
    animation: wa-pulse 1.8s ease-out infinite;
  }
  .whatsapp-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 6px rgba(37, 211, 102, .15);
    opacity: .9;
    animation: wa-breathe 3.6s ease-in-out infinite;
  }

  .whatsapp-float:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 16px 36px rgba(37, 211, 102, .45), 0 6px 14px rgba(0,0,0,.28);
  }

  /* Gentle nudge every 7s to catch the eye (desktop only) */
  @media (hover:hover) {
    .whatsapp-float { animation: wa-nudge 7s ease-in-out infinite; }
  }

  @keyframes wa-pulse {
    0% { transform: scale(0.9); opacity: 1; }
    70% { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(1.15); opacity: 0; }
  }
  @keyframes wa-breathe {
    0%,100% { box-shadow: 0 0 0 6px rgba(37, 211, 102, .15); }
    50%     { box-shadow: 0 0 0 10px rgba(37, 211, 102, .25); }
  }
  @keyframes wa-nudge {
    0%, 92%, 100% { transform: translateY(0); }
    94% { transform: translateY(-2px); }
    96% { transform: translateY(2px); }
    98% { transform: translateY(-1px); }
  }

  /* Make space if your "scroll to top" button sits bottom-right */
  #scroll-up {
    right: calc(1.25rem + 72px); /* push it left so they don't overlap */
  }

  /* On small screens, show the label to look like a pill CTA */
  @media (max-width: 768px) {
    .whatsapp-float {
      --cta-size: 56px;
      padding-right: .5rem;
      padding-left: .6rem;
      width: auto;
    }
    .whatsapp-label { display: inline-block; }
    .whatsapp-float i { font-size: 1.4rem; }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .whatsapp-float,
    .whatsapp-float::before,
    .whatsapp-float::after {
      animation: none !important;
      transition: none !important;
    }
  }

  /* ============================
   🎄 CHRISTMAS THEME
   ============================ */

/* Allow hat to position on logo */
.nav__logo {
  position: relative;
}

/* Snow hidden by default */
.snow {
  display: none;
}

/* Enable snow only in December */
.is-december .snow {
  display: block;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
}

/* Snowflakes base */
/* Bigger, nicer snowflakes */
.snowflake {
  position: absolute;
  top: -10%;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  animation: snowfall 14s linear infinite;
  opacity: 0.95;
}

/* Variation in size & behaviour */
.snowflake:nth-child(1)  { left: 5%;  animation-duration: 14s; animation-delay: 0s;  font-size: 1.6rem; }
.snowflake:nth-child(2)  { left: 15%; animation-duration: 18s; animation-delay: 2s;  font-size: 1.2rem; }
.snowflake:nth-child(3)  { left: 25%; animation-duration: 16s; animation-delay: 4s;  font-size: 2rem; }
.snowflake:nth-child(4)  { left: 35%; animation-duration: 20s; animation-delay: 1s;  font-size: 1.3rem; }
.snowflake:nth-child(5)  { left: 45%; animation-duration: 17s; animation-delay: 3s;  font-size: 1.8rem; }
.snowflake:nth-child(6)  { left: 55%; animation-duration: 19s; animation-delay: 5s;  font-size: 1.4rem; }
.snowflake:nth-child(7)  { left: 65%; animation-duration: 15s; animation-delay: 1.5s; font-size: 2.2rem; }
.snowflake:nth-child(8)  { left: 75%; animation-duration: 21s; animation-delay: 3.5s; font-size: 1.3rem; }
.snowflake:nth-child(9)  { left: 85%; animation-duration: 18s; animation-delay: 0.8s; font-size: 2.1rem; }
.snowflake:nth-child(10) { left: 12%; animation-duration: 22s; animation-delay: 6s;  font-size: 1.1rem; }
.snowflake:nth-child(11) { left: 32%; animation-duration: 19s; animation-delay: 7s;  font-size: 1.6rem; }
.snowflake:nth-child(12) { left: 52%; animation-duration: 17s; animation-delay: 2.7s; font-size: 1.4rem; }
.snowflake:nth-child(13) { left: 72%; animation-duration: 20s; animation-delay: 4.5s; font-size: 2.3rem; }
.snowflake:nth-child(14) { left: 90%; animation-duration: 23s; animation-delay: 1.2s; font-size: 1.3rem; }
.snowflake:nth-child(15) { left: 40%; animation-duration: 21s; animation-delay: 5.2s; font-size: 2rem; }
.snowflake:nth-child(16) { left: 8%;  animation-duration: 18s; animation-delay: 3.8s; font-size: 1.5rem; }


@keyframes snowfall {
  0%   { transform: translateY(-10vh) translateX(0); }
  100% { transform: translateY(110vh) translateX(20px); }
}

/* 🎅 Santa hat on top of the header logo (responsive) */
.is-december .nav__logo::after {
  content: "";
  position: absolute;
  background: url("/images/Santa_hat.png") no-repeat center / contain;
  width: 46px;
  height: 46px;
  top: -70%;        /* above the logo */
  right: -24%;      /* slightly past the right edge */
  transform: rotate(-1deg);
  pointer-events: none;
}

/* 820–900px (problem zone where yours breaks) */
@media (max-width: 900px) {
  .is-december .nav__logo::after {
    width: 46px;
    height: 46px;
    top: -75%;
    right: -25%;     /* ✔ Perfect for 720–900px range */
  }
}

/* 720px and below (tablet portrait) */
@media (max-width: 720px) {
  .is-december .nav__logo::after {
    width: 40px;
    height: 40px;
    top: -70%;
    right: -25%;      /* ✔ Eliminates the drift completely */
  }
}

/* 600px and below (large mobile) */
@media (max-width: 600px) {
  .is-december .nav__logo::after {
    width: 36px;
    height: 36px;
    top: -70%;
    right: -25%;
  }
}



/* Extra tiny screens */
@media (max-width: 480px) {
  .is-december .nav__logo::after {
    width: 28px;
    height: 28px;
    top: -45%;
    right: -15%;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .snowflake { animation: none !important; }
}