/* ===========================================================================
   SECTION: GLOBAL / BASE UTILITIES  + NAV + MOBILE MENU
   ACTION: heavy rules commented (kept for reference) + lightweight replacements
   NOTE : Paste/replace this entire block where your original global/nav/menu CSS sits
   ============================================================================ */

/* ============================================================
   :root & base
   ============================================================ */
:root{
  --brand:#6DC849;
  --brandDark:#2CA04B;
  --accent:#3CB8D9;
}

/* basic */
html { scroll-behavior: smooth; }
::selection { background:var(--brand); color:#fff; }


a { transition: color .22s ease, opacity .22s ease, transform .18s ease; -webkit-tap-highlight-color: transparent; }

/* keep body fade-in but slightly faster */
body { opacity:0; transition:opacity .45s ease; }
body.fade-in { opacity:1; }


.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: transform .56s cubic-bezier(.2,.7,.2,1), opacity .46s ease;
  will-change: transform, opacity;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
.stagger > .reveal{
  transition-delay: calc(var(--i) * 90ms);
}

/* cheaper keyframes (kept small) */
@keyframes pop { 0%{transform:scale(.98)} 100%{transform:scale(1)} }
@keyframes fade-in{ from{opacity:0; transform:translateY(8px)} to{opacity:1;} }
@keyframes slide-up{ from{opacity:0; transform:translateY(14px)} to{opacity:1;} }





/* ============================================================
   INFO BAR (TOP SMALL STRIP)
   ============================================================ */
/* ================ Info bar + nav ================ */
.infobar{background:linear-gradient(90deg,var(--brandDark),var(--accent));color:#fff;font-size:.95rem}
.infobar-deco{position:absolute;left:0;top:0;bottom:0;width:80px;background:linear-gradient(135deg,var(--accent),var(--brand));clip-path:polygon(0 0,100% 0,75% 100%,0% 100%);opacity:.95}

/* =========================================================
   INFO BAR — MOBILE HARD FIX
   Single line | Center | No wrap (email + phone together)
   ========================================================= */

@media (max-width: 768px){

  /* infobar container */
  .infobar{
    overflow: hidden !important;
  }

  /* main row */
  .infobar .max-w-7xl{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important; /* MID */
    gap: 12px !important;

    flex-wrap: nowrap !important;       /* ❌ wrap band */
    white-space: nowrap !important;     /* ❌ line break band */

    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* email + phone blocks */
  .infobar .max-w-7xl > div{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  /* links */
  .infobar a{
    white-space: nowrap !important;
    font-size: .9rem !important;        /* thora compact so fit ho jaye */
  }

  /* icons fixed size */
  .infobar svg{
    flex-shrink: 0 !important;
  }

  /* "|" separator stable */
  .infobar .opacity-50{
    flex: 0 0 auto !important;
  }
}

/* =========================================================
   INFOBAR — BULLETPROOF MOBILE FIX (1 line, centered)
   Paste at VERY END
   ========================================================= */

@media (max-width: 768px){

  /* infobar ke andar common wrappers ko force row + center */
  .infobar :is(.max-w-7xl, .container, .wrap, .inner, .infobar-inner, .topbar-inner, .top-info, .top-strip){
    display: flex !important;
    flex-direction: row !important;     /* 🔥 no column */
    align-items: center !important;
    justify-content: center !important; /* 🔥 mid */
    gap: 12px !important;

    flex-wrap: nowrap !important;       /* 🔥 no wrap */
    white-space: nowrap !important;     /* 🔥 no line break */

    width: 100% !important;
    max-width: 100% !important;
  }

  /* direct children agar w-full / block ban rahe hon to unko inline karo */
  .infobar :is(.max-w-7xl, .container, .wrap, .inner, .infobar-inner, .topbar-inner, .top-info, .top-strip) > *{
    width: auto !important;             /* 🔥 w-full break karega */
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* links ko wrap se roko */
  .infobar a{
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    font-size: .92rem !important;       /* thora compact so fit */
  }

  /* separator ko bhi shrink na hone do */
  .infobar :is(.sep, .divider, .opacity-50){
    flex: 0 0 auto !important;
  }
}


/* =========================================================
   FINAL INFIX LOCK — Infinix Note 40 Pro fix
   Email + phone MUST be centered as one group
   Paste at VERY END
   ========================================================= */

@media (max-width: 450px){

  /* infobar ke andar jitne wrappers hain sab ko flex + center */
  .infobar :is(.max-w-7xl, .container, .wrap, .inner, .infobar-inner, .topbar-inner, .top-info, .top-strip){
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;   /* ✅ center */
    gap: 12px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* children ko w-full / block / auto-push se roko */
  .infobar :is(.max-w-7xl, .container, .wrap, .inner, .infobar-inner, .topbar-inner, .top-info, .top-strip) > *{
    width: auto !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;            /* ✅ ml-auto kill */
    justify-content: center !important;   /* ✅ agar inner also justify-between ho */
  }

  /* Agar kisi item pe specifically margin-left:auto laga hua ho */
  .infobar *{
    margin-left: 0 !important;
  }

  /* divider / separator stable */
  .infobar :is(.opacity-50, .sep, .divider){
    flex: 0 0 auto !important;
  }
}
















/* ============================================================
   NAVBAR CTA + HEADER BUTTONS  (UI SAME)
   ============================================================ */

.nav-cta{
  background: linear-gradient(90deg,var(--brandDark) 0%, var(--brand) 52%, var(--accent) 100%);
  color:#fff; font-weight:700; border-radius:12px;
  padding:.65rem 1.1rem; line-height:1; display:inline-flex; align-items:center; gap:.5rem;
  box-shadow:0 8px 20px rgba(60,184,217,0.12);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.nav-cta:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 12px 28px rgba(60,184,217,.18); }

.nav-appointment-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem; font-weight: 700; font-size: 1rem;
  color: #fff; border-radius: 9999px;
  background: linear-gradient(90deg, #2CA04B 0%, #3CB8D9 100%);
  box-shadow: 0 6px 18px rgba(60,184,217,0.12);
  transition: transform .18s ease, filter .18s ease;
}
.nav-appointment-btn:hover {
  filter: brightness(1.1); transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(44, 160, 75, 0.14);
}
@media (max-width: 768px){
  .nav-appointment-btn{ display:none !important; }
}

/* ============================================================
   NAVBAR (ONLY STICKY)  ✅  INFOBAR UNCHANGED
   ============================================================ */

/* IMPORTANT: yahan sticky rakho, fixed bilkul nahi */
header.nav-pro,
.nav-pro{
  position: sticky !important;
  top: 40px !important;                 /* infobar ki height */
  z-index: 2147483000 !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(16,24,40,0.035);
  border-top: 1px solid rgba(10,18,30,0.02);
}

/* 🔥 Sticky ko break karne wali cheez fix (UI change nahi) */
html, body { overflow-x: hidden; }
main, section, .wrapper, .page-wrap{
  overflow: visible !important;
  transform: none !important;
}

/* Logo container */
.nav-pro .nav-logo {
  display: inline-flex;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  line-height: 1;
  vertical-align: middle;
}

/* Logo image */
.nav-pro img.nav-logo {
  height: 64px !important;
  width: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-height: 120px;
}
@media (max-width: 768px){
  .nav-pro img.nav-logo { height: 54px !important; }
}

/* header row sizing */
.nav-pro .max-w-7xl,
.nav-pro > .max-w-7xl,
.nav-pro .max-w-7xl > div {
  min-height: 64px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center;
}
.nav-pro img.nav-logo { height: 48px !important; }
@media (max-width: 768px){
  .nav-pro img.nav-logo { height: 42px !important; }
}

/* remove unwanted gap (safe) */
body > .site-top-space { display: none !important; height: 0 !important; }
main, section:first-of-type { margin-top: 0 !important; padding-top: 0 !important; }


/* ============================================================
   MOBILE MENU (AS IS)
   ============================================================ */

.mobile-menu { display:none; }
.mobile-open .mobile-menu{ display:block; }
#overlay.hidden{ display:none; }

.mobile-menu{
  position: fixed; top:0; right:-100%; bottom:0;
  width:min(86vw,380px); z-index:60;
  background:#fff; border-left:1px solid rgba(0,0,0,.06);
  box-shadow: -12px 0 28px rgba(0,0,0,0.08);
  transition: right .32s cubic-bezier(.2,.7,.2,1);
}
.mobile-open #overlay{ display:block; }
.mobile-open #mobileMenu{ right:0; }

.mobile-link{ display:block; padding:12px 10px; border-radius:10px; font-weight:700; color:#0f172a; }
.mobile-link:hover{ background:#f7fafc; color:var(--brandDark); }

.menu-cta {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.4rem; font-weight:700; color:#fff;
  border-radius:9999px; background: linear-gradient(90deg,#2CA04B 0%, #3CB8D9 100%);
  box-shadow:0 8px 20px rgba(60,184,217,0.12);
  transition: transform .18s ease, filter .18s ease;
}
.menu-cta:hover{ filter:brightness(1.08); transform:translateY(-2px); }


/* ============================================================
   NAVBAR TEXT — EXACT MATCH
   ============================================================ */
.nav-pro a,
.nav-pro .nav-link,
.nav-pro nav a{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15.5px !important;
  color: #0F172A !important;
  letter-spacing: normal !important;
}
.mobile-menu a,
.mobile-link{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15.5px !important;
  color: #0F172A !important;
}

/* CTA text color lock */
.nav-pro a.nav-appointment-btn,
.nav-pro .nav-appointment-btn,
.nav-pro a.nav-cta,
.nav-pro .nav-cta{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
  background: linear-gradient(90deg, #2CA04B 0%, #3CB8D9 100%) !important;
  background-image: linear-gradient(90deg, #2CA04B 0%, #3CB8D9 100%) !important;
}
.nav-pro a.nav-appointment-btn:hover,
.nav-pro a.nav-cta:hover,
.nav-pro .nav-appointment-btn:hover,
.nav-pro .nav-cta:hover{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.nav-pro a.nav-appointment-btn * ,
.nav-pro a.nav-cta *{
  color: #fff !important;
  fill: #fff !important;
}













/* ===========================================================================
   MOBILE DRAWER (Optimized, comments kept)
   Replace your existing drawer CSS with this block.
   - Heavy rules are COMMENTED OUT (kept for reference)
   - Lighter replacements follow immediately
   - UI/look preserved; performance improved (less paint + cheaper shadows)
   =========================================================================== */

/* -----------------------------------------------------------
   Drawer variables (local overrides)
   ----------------------------------------------------------- */
:root{
  --drawer-bg: #fff;
  --drawer-shadow: rgba(6,22,36,0.32);
  --drawer-border: rgba(10,20,30,0.04);
  --navText: #0b1220;
}

/* -----------------------------------------------------------
   Overlay that dims page when drawer is open
   ⚠️ heavy: backdrop-filter + high-opacity can cause expensive paints on mobile.
   (we keep it but reduce intensity and provide commented original)
   ----------------------------------------------------------- */
/*
#drawerOverlay {
  position: fixed; inset: 0;
  background: rgba(7,12,17,0.48);
  backdrop-filter: blur(6px) saturate(120%);
  z-index: 12040;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
*/
#drawerOverlay {
  position: fixed; inset: 0;
  /* lighter dim + cheaper backdrop usage */
  background: rgba(7,12,17,0.42);
  /* keep a subtle blur but much cheaper: use blur(4px) (less GPU pressure) */
  backdrop-filter: blur(4px) saturate(110%);
  z-index: 12040;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
  -webkit-backdrop-filter: blur(4px) saturate(110%);
}
/* show state (unchanged) */
#drawerOverlay.show { opacity: 1; pointer-events: auto; }


/* Drawer: hamesha full screen + bottom padding safe */
#proMobileDrawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(92vw,420px);
  max-width:420px;

  /* pehle 100vh fallback, phir 100dvh (Android/iOS new) */
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;

  background: linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow: -14px 18px 36px rgba(6,22,36,0.12);
  border-left: 1px solid var(--drawer-border);
  border-radius: 18px 0 0 18px;
  transform: translateX(110%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: transform .36s cubic-bezier(.2,.8,.2), opacity .24s ease;
  z-index: 12050;

  /* upar + side same, neeche extra padding taa ke button cut na ho */
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));

  display:flex;
  flex-direction:column;
  gap:12px;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform, opacity;
}


/* Drawer open state (unchanged behaviour) */
#proMobileDrawer.open {
  transform: translateX(0); opacity:1; visibility: visible; pointer-events:auto;
  transition-delay: 0s;
}

/* ensure z-index priority (kept) */
#proMobileDrawer { z-index: 12050 !important; }
#drawerOverlay { z-index: 12040 !important; }

/* -----------------------------------------------------------
   When drawer is open, keep header under it and non-interactive
   (keep transforms cheap)
   ----------------------------------------------------------- */
.drawer-open .nav-pro {
  z-index: 11500 !important; /* lower than drawer */
  pointer-events: none; user-select: none;
  /* keep transform to a simple translateZ to create new stacking context */
  transform: translateZ(0);
}

/* -----------------------------------------------------------
   Drawer header area (title + close button)
   - Keep heights and spacing same for UI stability
   - Tone down button shadow slightly
   ----------------------------------------------------------- */
#proMobileDrawer .drawer-top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:6px; }
#proMobileDrawer .drawer-title { font-weight:800; font-size:1.05rem; color:var(--navText); }

/* Close button: original had heavier shadow -> commented; replacement lighter */
 /*
#proMobileDrawer .drawer-close {
  height:44px; width:44px; display:grid; place-items:center; border-radius:10px; background:#fff;
  border:1px solid rgba(11,18,32,.06); box-shadow:0 6px 18px rgba(8,20,34,.06); cursor:pointer;
}
*/
#proMobileDrawer .drawer-close {
  height:44px; width:44px; display:grid; place-items:center; border-radius:10px; background:#fff;
  border:1px solid rgba(11,18,32,.06);
  /* lighter shadow */
  box-shadow: 0 4px 10px rgba(8,20,34,0.05);
  cursor:pointer;
}

/* -----------------------------------------------------------
   Navigation links inside drawer
   - Keep same padding/font but prefer transform on hover (cheap)
   - transition only background + transform (cheap)
   ----------------------------------------------------------- */
#proMobileDrawer nav { display:flex; flex-direction:column; gap:10px; padding-top:6px; margin-top:6px; }
.pro-drawer-link {
  display:flex; align-items:center; gap:14px; padding:14px 12px; border-radius:12px;
  font-weight:700; color:var(--navText); font-size:1.05rem;
  transition: background .18s ease, transform .12s ease;
}
.pro-drawer-link svg{ flex:0 0 28px; height:28px; width:28px; opacity:.95; }

/* hover: keep subtle bg + small translate (cheap) */
.pro-drawer-link:hover { background: rgba(44,160,75,0.06); transform: translateX(4px); color:var(--brandDark); }
.pro-drawer-link:focus { outline: 3px solid rgba(44,160,75,.12); outline-offset:3px; }

/* divider inside drawer (cheap gradient) */
.pro-drawer-divider { height:1px; background: linear-gradient(90deg,transparent, rgba(11,18,32,.06), transparent); margin:6px 0; border-radius:2px; }

/* -----------------------------------------------------------
   Bottom CTA inside drawer
   - Heavy shadow commented; lighter replacement used
   ----------------------------------------------------------- */

.pro-drawer-cta {
  margin-top:auto; display:block; width:100%; text-align:center; padding:13px 16px; font-weight:800;
  border-radius:999px; background: linear-gradient(90deg,var(--brandDark),var(--accent));
  color:#fff;
  /* lighter box-shadow to reduce GPU cost */
  box-shadow: 0 8px 20px rgba(44,160,75,0.10);
  transition: transform .14s ease, filter .14s ease;
}
.pro-drawer-cta:hover { transform: translateY(-3px); filter: brightness(1.03); }

/* small subtext under CTA in drawer */
.pro-drawer-sub { font-size:0.88rem; color:#556272; margin-top:8px; text-align:center; }


/* CTA & subtext ko hamesha visible rakho (scroll se upar na katain) */
.pro-drawer-cta,
.pro-drawer-sub {
  flex-shrink: 0;    /* height kabhi compress na ho */
}


/* responsive narrow drawer (full-width on tiny screens) */
@media (max-width:420px){
  #proMobileDrawer{ width:100vw; border-radius:0; }
  .pro-drawer-link{ font-size:1rem }
  /* On tiny screens reduce blur on overlay even more for battery/CPU */
  #drawerOverlay { backdrop-filter: blur(3px) saturate(105%); -webkit-backdrop-filter: blur(3px) saturate(105%); }
}

@media (max-height: 640px) {
  #proMobileDrawer {
    padding-top: 10px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}



/* FIX: Drawer open ho to WhatsApp FAB hide */
.drawer-open #sellify-fab-wrap{
  display: none !important;
}


/* -----------------------------------------------------------
   NOTE: Duplicate blocks removed in final (we kept only one canonical drawer block),
   but original duplicate is preserved in your old file above — I commented heavy originals
   so you can find/restore if needed.
   ----------------------------------------------------------- */

/* ===========================================================================
   End MOBILE DRAWER (optimized)
   =========================================================================== */









/* ================================================
   FIX: Infobar + Navbar responsive only (UI same)
   Place AFTER your existing NAV + DRAWER CSS
   ================================================ */

/* 1) Infobar: mid–small phones par clean wrapping */
@media (max-width: 768px) {
  .infobar .max-w-7xl {
    justify-content: center;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .infobar .max-w-7xl {
    flex-wrap: wrap;
    row-gap: 6px;
    padding-inline: 12px;
  }

  /* email + phone line center align ho jayein */
  .infobar .max-w-7xl > div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 2) Navbar: small screens par safer padding + logo size */
/* UI same, sirf space control */
@media (max-width: 768px) {
  .nav-pro .max-w-7xl {
    padding-inline: 16px !important;
  }
}

/* bohot chhoti screens (old / narrow phones) */
@media (max-width: 400px) {
  .nav-pro img.nav-logo {
    height: 38px !important;   /* thora sa chhota, design same */
  }

  /* menu button ko squeeze hone se bachao */
  #menuBtn {
    flex-shrink: 0;
  }
}
/* MOBILE: hero image hamesha hide (Note 11 Pro, sab phones) */
@media (max-width: 979px) {
  .hero-visual {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
  }

  .hero-img {
    display: none !important;
  }
}

/* =========================================================
   FIX: Email always ONE LINE (no .com on next line)
   Mobile safe + premium (horizontal scroll, no scrollbar)
   Paste at VERY END
   ========================================================= */

.info-card .card-text{ min-width:0 !important; }

/* force single-line row */
.info-card .email-row{
  display:flex !important;
  align-items:center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 10px !important;

  max-width: 100% !important;
  overflow-x: auto !important;     /* ✅ 1 line, scroll if needed */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* firefox hide */
}
.info-card .email-row::-webkit-scrollbar{ display:none; } /* chrome hide */

.info-card .email-row a{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* separator line in between */
.info-card .email-sep{
  display:inline-block !important;
  opacity:.45 !important;
  flex: 0 0 auto !important;
}



/* =========================================================
   FIX: INFOBAR responsive (mobile clean row, no weird stacking)
   Paste at VERY END
   ========================================================= */

@media (max-width: 640px){

  /* infobar container */
  .infobar .max-w-7xl{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap: 12px !important;

    flex-wrap: nowrap !important;   /* ✅ stop 2-line stacking */
    padding: 8px 12px !important;
  }

  /* each item (email/phone block) */
  .infobar .max-w-7xl > div{
    display:flex !important;
    align-items:center !important;
    gap: 8px !important;

    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important; /* ✅ keep single line */
  }

  /* text sizing */
  .infobar,
  .infobar a{
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  /* OPTIONAL: add divider between email and phone (nice look) */
  .infobar .max-w-7xl > div + div{
    position: relative;
    padding-left: 12px;
  }
  .infobar .max-w-7xl > div + div::before{
    content:"";
    position:absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.55);
  }
}

/* ultra-small phones: allow wrap instead of broken layout */
@media (max-width: 360px){
  .infobar .max-w-7xl{
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
  .infobar .max-w-7xl > div + div{
    padding-left: 0 !important;
  }
  .infobar .max-w-7xl > div + div::before{
    display:none !important;
  }
}




                                /* END OF NAV + MOBILE DRAWER CSS */











/* FIX — Mobile ONLY (Desktop-site ON me image hide na ho) */
@media (max-width: 899px){
  .contact-right-lite img{ display:none !important; }
  .contact-right-lite{ display:none !important; height:0 !important; margin:0 !important; padding:0 !important; }
  .contact-hero-grid{ grid-template-columns:1fr !important; }
}
























/* ---------- CONTACT HERO — cleaned & safe (modified: extra slow, staggerable, card/form anims) ---------- */
:root{
  --brandDark:#2CA04B;
  --muted:#556272;
  --text:#0f172a;

  /* control defaults — slowed for a smooth, premium feel */
  --hero-duration: 2.4s;   /* was 1.4s */
  --img-duration: 2.8s;    /* was 1.6s */
  --card-duration: 1.4s;   /* was 1.0s */
  --form-duration: 1.4s;   /* was 1.0s */
}

/* prevent horizontal scrollbar when elements slide in */
html, body { overflow-x: hidden; }

/* wrapper: clip anything overflowing and isolate rendering */
.contact-hero-lite{
  position:relative;
  background: linear-gradient(140deg, rgba(126,211,33,0.10) 0%, rgba(60,184,217,0.08) 100%);
  padding:72px 0;
  overflow:hidden;        /* clips drop-shadows / motion */
  isolation:isolate;
  contain: paint;         /* isolate paints so animations don't trigger page reflow */
  color:var(--text);
}

/* subtle dot texture */
.contact-hero-lite::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,0.05), transparent 8%),
    radial-gradient(circle at 88% 88%, rgba(255,255,255,0.03), transparent 6%);
  mix-blend-mode: overlay; pointer-events:none;
}

/* grid */
.contact-inner-lite{
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; padding:0 22px;
  display:grid; grid-template-columns:1fr 44%; gap:40px; align-items:center;
  overflow:hidden;       /* additional clipping so children can't escape */
  contain: paint;
}
@media (max-width:980px){
  .contact-inner-lite{ grid-template-columns:1fr; gap:28px; text-align:center; padding:0 18px }
}

/* left */
.contact-kicker-lite{
  display:inline-flex; gap:10px; align-items:center; background:#fff;
  padding:8px 14px; border-radius:999px; font-weight:700;
  box-shadow:0 6px 18px rgba(15,23,42,0.06); color:var(--text);
}
.contact-title-lite{
  font-weight:800; font-size:clamp(1.9rem,3.4vw,2.8rem);
  margin:14px 0 10px; line-height:1.03; color:#06202a;
}
.contact-sub-lite{
  color:rgba(6,32,42,0.82); font-size:1.02rem; max-width:60ch; margin-bottom:18px;
}

/* ctas */
.contact-ctas-lite{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-start; }
@media (max-width:980px){ .contact-ctas-lite{ justify-content:center } }
.cta-lite-primary{ background:#fff; color:var(--brandDark); font-weight:800; padding:12px 18px; border-radius:12px; box-shadow:0 10px 30px rgba(13,40,30,0.06); text-decoration:none; border:0 }
.cta-lite-ghost{ background:transparent; color:rgba(6,32,42,0.85); font-weight:700; padding:11px 16px; border-radius:12px; border:2px solid rgba(6,32,42,0.06); text-decoration:none }

/* right image: keep offset via margin, not transform (prevents overflow) */
.contact-right-lite{
  display:flex; justify-content:center; align-items:center;
  overflow:hidden; position:relative; contain: paint;
}
.contact-right-lite img{
  width:86%;                /* was 92% → slightly smaller */
  max-width:440px;          /* was 460px → a bit reduced */
  height:auto;
  border-radius:12px;
  filter:drop-shadow(0 12px 28px rgba(6,32,42,0.08));
  transform:none;
  margin-left:18px;
  display:block;
  margin-top:-12px;         /* keeps it aligned nicely with text */
}














/* ============================================================
   CONTACT HERO LAYOUT FIX (Form left | Image+Info right)
   Keep UI same — just layout/responsive (CLEAN FINAL)
   ============================================================ */

/* FIX — Grid layout */
.contact-hero-grid{
  grid-template-columns: 1fr 44%;
  gap: 34px;
  align-items: start;
}

.contact-right-stack{
  display:flex;
  flex-direction:column;
  gap: 16px;
}

.side-col--hero{
  position: static;
  gap: 14px;
}

/* FIX — Form spacing */
.contact-left-lite .contact-form-card{
  margin-top: 14px;
}

/* FIX — Image sizing balance */
.contact-right-lite img{
  width: 92%;
  max-width: 460px;
  margin-left: 0;
  margin-top: 18px;  /* ✅ navbar gap ke sath align */
}

/* ============================================================
   ✅ MAIN FIX — NAVBAR ke neeche proper top gap
   (pill + image dono ke upar “air”)
   ============================================================ */
.contact-hero-lite{
  padding-top: clamp(400px, 3.5vw, 44px) !important;   /* ✅ gap under nav */
  padding-bottom: clamp(32px, 4vw, 48px) !important;
}

/* Pill (Get in touch...) ko thora neeche */
.contact-kicker-lite{
  margin-top: 10px !important;
}

/* Responsive */
@media (max-width: 980px){
  .contact-hero-grid{
    grid-template-columns: 1fr;
    gap: 18px;
    text-align:left;
  }
  .contact-right-lite{ justify-content:flex-start; }
  .contact-right-lite img{
    width: 100%;
    max-width: 520px;
    margin-top: 12px; /* mobile/tablet pe thora kam */
  }
  .contact-kicker-lite{ justify-content:flex-start; }
}

/* Mobile spacing */
@media (max-width: 520px){
  .contact-hero-lite{
    padding-top: 22px !important;
    padding-bottom: 30px !important;
  }
  .contact-inner-lite{ padding: 0 16px !important; }
  .contact-kicker-lite{ margin-top: 8px !important; }
}









/* FIX — FORCE gap under navbar (paste at VERY END) */
.contact-hero-lite{
  margin-top: 40px !important;      /* ✅ visible gap */
  padding-top: 0 !important;        /* ✅ old padding cancel */
}

/* optional: pill + image bhi thora neeche */
.contact-kicker-lite{ margin-top: 16px !important; }
.contact-right-lite img{ margin-top: 46px !important; }




/* ============================================================
   CONTACT PAGE — FINAL FIXES (paste at VERY END)
   1) Email button gradient
   2) Right info card align with form bottom
   3) Extra bottom space so shadows visible
   ============================================================ */

/* 1) Email button — force gradient */
.btn-email{
  background: linear-gradient(90deg, var(--brandDark), var(--accent)) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow: 0 14px 34px rgba(44,160,75,0.16) !important;
}

/* 3) Shadows visible — give breathing room (and avoid clipping) */
.contact-hero-lite{
  padding-bottom: 64px !important;   /* shadow ke liye extra space */
}
.contact-inner-lite{
  overflow: visible !important;      /* agar clip ho raha ho to stop */
}
.contact-form-card,
.info-card{
  margin-bottom: 14px !important;    /* bottom shadow clear */
}

/* 2) Make both columns same height + push info card to bottom */
.contact-hero-grid{
  align-items: stretch !important;   /* columns stretch same height */
}

.contact-left-lite,
.contact-right-stack{
  height: 100% !important;
}

.contact-right-stack{
  display:flex !important;
  flex-direction: column !important;
}

/* image area takes remaining space, card goes to bottom */
.contact-right-lite{
  flex: 1 1 auto !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
}

.contact-right-lite img{
  margin-top: 18px !important;
  max-height: 430px !important;      /* image zyada tall ho to card neeche na jaye */
  object-fit: contain !important;
}

/* info block sticks to bottom of column */
.side-col--hero{
  margin-top: auto !important;
}
/* FIX */
.contact-hero-lite{
  padding-bottom: clamp(90px, 8vw, 140px) !important;
}

/* thora extra gap cards ke niche */
.contact-right-stack,
.contact-left-lite{
  padding-bottom: 24px;
}




/* ============================================================
   FINAL FIX — EMAIL US BUTTON (FORCED PREMIUM)
   ============================================================ */

a.btn-email{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  padding:14px 28px !important;
  min-height:54px !important;

  font-weight:800 !important;
  font-size:15px !important;
  letter-spacing:.4px !important;

  color:#fff !important;
  border-radius:999px !important;
  border:none !important;
  text-decoration:none !important;

  background: linear-gradient(
    135deg,
    #2CA04B 0%,
    #6DC849 45%,
    #3CB8D9 100%
  ) !important;

  box-shadow:
    0 16px 36px rgba(44,160,75,0.45),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease !important;
}

a.btn-email::after{
  content:"→";
  font-size:16px;
  transition: transform .25s ease;
}

a.btn-email:hover{
  transform: translateY(-3px);
  box-shadow:
    0 24px 52px rgba(44,160,75,0.55) !important;
  filter: brightness(1.05);
}

a.btn-email:hover::after{
  transform: translateX(4px);
}

a.btn-email:active{
  transform: translateY(-1px);
}
/* ============================================================
   EMAIL US — EXACT SAME AS INFO ICON (NO DIFFERENCE)
   ============================================================ */

a.btn-email{
  background: linear-gradient(
    135deg,
    var(--brandDark),
    var(--accent)
  ) !important;

  box-shadow:
    0 14px 32px rgba(44,160,75,0.35),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;

  border-radius: 999px !important;
  font-weight: 800;
}

/* hover — SAME gradient, sirf depth change */
a.btn-email:hover{
  background: linear-gradient(
    135deg,
    var(--brandDark),
    var(--accent)
  ) !important;

  box-shadow:
    0 22px 48px rgba(44,160,75,0.45) !important;
}





















/* ===== SELLIFY — Modern / Professional Contact Section ===== */
:root{
  --brand: #6DC849;
  --brandDark: #2CA04B;
  --accent: #3CB8D9;
  --bg: #F7FBF8;
  --card: #ffffff;
  --muted: #6b7785;
  --text: #0f172a;
  --soft-shadow: 0 18px 40px rgba(12,20,30,0.06);
  --glass: rgba(255,255,255,0.8);
  --radius-lg: 14px;
  --radius-md: 10px;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* wrapper grid */
.contact-wrap-pro {
  max-width:1200px;
  margin:28px auto;
  padding:22px;
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:28px;
  align-items:start;
  background:transparent;
}
@media (max-width:980px){
  .contact-wrap-pro{ grid-template-columns:1fr; padding:18px; gap:18px; }
}

/* HERO intro */
.contact-intro {
  grid-column: 1 / -1;
  margin-bottom:6px;
}
.kicker {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--card); padding:8px 14px; border-radius:999px;
  box-shadow:0 8px 30px rgba(12,20,30,0.04); border:1px solid rgba(15,23,42,0.03);
  font-weight:700; color:var(--text); font-size:13px;
}
.kicker svg{ opacity:.9; }

.contact-h {
  margin:14px 0 10px; font-weight:800; color:var(--text);
  font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1.03;
}
.contact-p {
  color:var(--muted); max-width:78ch; font-size:1rem; line-height:1.6;
}

/* left: form card */
.contact-form-card{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,252,251,1));
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--soft-shadow);
  border:1px solid rgba(10,18,30,0.04);
  transition: transform .12s ease, box-shadow .12s ease;
}
.contact-form-card:hover{ transform: translateY(-4px); box-shadow:0 30px 70px rgba(12,20,30,0.08); }

/* form layout */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr } }

.form-group{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
label.form-label{ font-size:13px; color:var(--muted); font-weight:700; }

/* inputs */
input.form-input, textarea.form-input {
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid #edf2f4;
  font-size:15px; color:var(--text); background:var(--card); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: box-shadow .14s ease, border-color .12s ease;
}
textarea.form-input{ min-height:150px; resize:vertical; }
.form-input::placeholder{ color:#aeb8b8; }

.form-input:focus, textarea.form-input:focus{
  outline:none;
  border-color:var(--brandDark);
  box-shadow: 0 18px 44px rgba(44,160,75,0.06);
}

/* footer row inside form */
.form-actions{ display:flex; gap:12px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.btn-primary{
  background: linear-gradient(90deg,var(--brandDark), var(--accent));
  color:#fff; padding:12px 18px; border-radius:12px; font-weight:800; border:0; cursor:pointer;
  box-shadow:0 12px 36px rgba(44,160,75,0.12);
  display:inline-flex; align-items:center; gap:8px;
}
.btn-ghost{
  background:transparent; border:1px solid rgba(15,23,42,0.06); color:var(--text);
  padding:10px 14px; border-radius:10px; font-weight:700;
}
.form-note{ color:var(--muted); margin-left:auto; font-size:13px; }

/* SMALL hints */
.hint-small{ color:var(--muted); font-size:0.95rem; margin-top:10px; }

/* RIGHT column — info cards */
.side-col{ display:flex; flex-direction:column; gap:16px; position:relative; }

.info-card{
  background: linear-gradient(180deg,#ffffff,#fbfefc);
  border-radius:12px; padding:14px; display:flex; gap:12px; align-items:center;
  box-shadow:0 18px 40px rgba(12,20,30,0.05); border:1px solid rgba(10,18,30,0.03);
}
.icon-square{ width:52px; height:52px; border-radius:12px; display:grid; place-items:center; color:#fff;
  background: linear-gradient(135deg,var(--brandDark),var(--accent)); flex-shrink:0; box-shadow:0 10px 28px rgba(60,184,217,0.06);
}
.info-card .card-text{ display:flex; flex-direction:column; }
.card-title{ font-weight:800; color:var(--text); font-size:15px; }
.card-sub{ color:var(--muted); font-weight:700; margin-top:6px; }

/* map card */
.map-card{ border-radius:12px; overflow:hidden; height:170px; background:linear-gradient(180deg,#f2fbf7,#e8f9ef); display:flex; align-items:center; justify-content:center; color:var(--muted); border:1px solid rgba(10,18,30,0.02) }

/* business hours card smaller layout */
.info-grid{ display:grid; gap:14px; }

/* bottom mini legal */
.legal-note{ grid-column: 1 / -1; color:var(--muted); font-size:0.95rem; margin-top:6px; }

/* responsive tweaks */
@media (max-width:520px){
  .icon-square{ width:44px; height:44px }
  .map-card{ height:160px }
  .contact-h{ font-size:1.45rem }
  .form-note{ width:100%; margin-left:0; text-align:left; }
}


/* =========================================================
   FINAL FIX: Email overflow — clean & professional
   ========================================================= */

.info-card .card-text{
  min-width: 0 !important;
}

.info-card .email-row{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  max-width: 100% !important;
  line-height: 1.4;
}

/* email links wrap nicely, never overflow */
.info-card .email-row a{
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  font-size: 14px;
  font-weight: 700;
}

/* separator stays inline but safe */
.info-card .email-sep{
  opacity: .5;
}




/* =========================================================
   FIX: Book Appointment CTA text turned black (override nav links rule)
   Paste at VERY END
   ========================================================= */

/* cover both CTA classes */
.nav-pro a.nav-appointment-btn,
.nav-pro .nav-appointment-btn,
.nav-pro a.nav-cta,
.nav-pro .nav-cta{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;

  background: linear-gradient(90deg, #2CA04B 0%, #3CB8D9 100%) !important;
  background-image: linear-gradient(90deg, #2CA04B 0%, #3CB8D9 100%) !important;
}

/* hover/focus lock */
.nav-pro a.nav-appointment-btn:hover,
.nav-pro a.nav-cta:hover,
.nav-pro .nav-appointment-btn:hover,
.nav-pro .nav-cta:hover{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* if button has inner span/icon inheriting black */
.nav-pro a.nav-appointment-btn * ,
.nav-pro a.nav-cta *{
  color: #fff !important;
  fill: #fff !important;
}



/* =========================================================
   FIX: Email text smaller on MOBILE (one-line fit)
   Paste at VERY END
   ========================================================= */

@media (max-width: 520px){

  /* info card email row text */
  .info-card .email-row,
  .info-card .email-row a{
    font-size: 12px !important;   /* 👈 thora chhota */
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

}

/* very small phones (Infinix, old Android) */
@media (max-width: 380px){

  .info-card .email-row,
  .info-card .email-row a{
    font-size: 11.5px !important; /* 👌 ultra safe */
  }

}




















/* ===========================================================================
   FOOTER — ORGANIZED & COMMENTED (NO STYLE CHANGES)
   =========================================================================== */

/* ===========================================================================
   1) SCROLLBAR BEHAVIOR
   - hide scrollbars visually but keep scrolling functional
   =========================================================================== */
html, body {
  overflow-x: hidden;
  overflow-y: auto;            /* scroll allowed */
  -ms-overflow-style: none;    /* IE / Edge hide */
  scrollbar-width: none;       /* Firefox hide */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;               /* Chrome / Safari hide */
}

/* ===========================================================================
   2) WRAPPER + BACKDROP (gradient base + soft glows)
   - .footer-pro is the outer wrapper for the footer module
   =========================================================================== */
.footer-pro {
  position: relative;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  will-change: transform, opacity;
  transform: translateZ(0);
  animation: footerFadeIn 0.9s ease-in-out;
}

/* same gradient as hero & store setup */
.footer-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(135deg, #2CA04B 0%, #3CB8D9 100%) !important;
}

/* soft highlight blobs (reduced area) */
.footer-pro::after {
  content: "";
  position: absolute;
  inset: -4% -6% -8% -6%;
  z-index: -2;
  background:
    radial-gradient(60% 40% at 12% 10%, rgba(255, 255, 255, 0.12), transparent 60%),
    radial-gradient(45% 35% at 88% 70%, rgba(255, 255, 255, 0.08), transparent 60%);
  mix-blend-mode: soft-light;
  filter: blur(2px);
}

/* glassy film for depth (overlay inside wrapper) */
.footer-glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
}

/* ===========================================================================
   3) GRID LAYOUT (columns & responsive breakpoints)
   - .f-grid holds the main footer column layout
   =========================================================================== */
.f-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
}
@media (max-width: 920px) {
  .f-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .f-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   4) BRAND / TYPOGRAPHY
   - brand title, small tagline and section titles
   =========================================================================== */
/* BASE (desktop default) */
.f-brand > span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: 6px;

  background: #ffffff !important;
  border: 2px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10) !important;

  vertical-align: middle !important;
  transform: translateY(3px) !important;  /* Desktop — 3px down = perfect alignment */
}

/* MOBILE FIX — smaller font, dot needs LESS downward shift */
@media (max-width: 640px) {
  .f-brand > span {
    transform: translateY(1px) !important;  /* Mobile — 1px down = perfect */
  }
}

.f-tag {
  color: #ffffffcc;
  margin-top: 0.55rem;
  font-size: 0.98rem;
}

.f-title {
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 1rem;
}

/* ===========================================================================
   5) LINK LISTS (navigation / resource links)
   =========================================================================== */
.f-list a {
  color: #ffffffd1;
  display: block;
  padding: 0.34rem 0;
  transition: transform 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.f-list a:hover {
  color: #fff;
  transform: translateX(3px);
  opacity: 1;
}

/* mini underline spacing for links */
.f-list a, .f-mini a { text-underline-offset: 3px; }

/* ===========================================================================
   6) SOCIAL ICONS (subtle card-like buttons)
   =========================================================================== */
.f-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.f-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffffee;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.f-social a:hover {
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}


.f-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffffee;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.f-social a:hover {
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

/* ============================================================
   FIX — Footer social icons horizontal (index jesa)
   ============================================================ */

/* FIX */
footer.footer-pro .f-social{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

/* keep each icon same size */
footer.footer-pro .f-social a{
  flex: 0 0 auto !important;
}
footer.footer-pro .f-social{
  margin-top: 16px !important;   /* description se gap */
  display: flex !important;
  gap: 12px !important;
}


/* ===========================================================================
   7) CONTACT LINES (address, phone, email)
   =========================================================================== */
.f-contact li {
  color: #ffffffd9;
  padding: 0.32rem 0;
}
.f-contact a {
  color: #fff;
  font-weight: 700;
}

/* ===========================================================================
   8) WHATSAPP / CTA PILL
   =========================================================================== */
.f-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 600;
  padding: 0.55rem 0.9rem;
  border-radius: 9999px;
  border: 1px dashed rgba(255, 255, 255, 0.38);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  transition: all 0.25s ease;
}
.f-wa:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

/* ===========================================================================
   9) TOPLINE / BOTTOM MINI BAR (separators & bottom area)
   =========================================================================== */
.f-topline {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) 1;
}
.f-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.20));
  color: #ffffffc9;
}
.f-mini a {
  color: #ffffffc9;
  transition: color 0.2s ease;
}
.f-mini a:hover {
  color: #fff;
}

/* ===========================================================================
   10) ANIMATIONS / KEYFRAMES
   - footerFadeIn used on .footer-pro
   =========================================================================== */
@keyframes footerFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* FAQ Gradient Heading */
.faq-heading-gradient {
  background: linear-gradient(90deg, #1A2B3F 0%, #2CA04B 55%, #3CB8D9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

@media (max-width: 640px){
  .faq-heading-gradient {
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }
}




/* ============================================================
   FOOTER (MINIMAL PRO FOOTER)
   ============================================================ */
.footer-min {
  position: relative; color:#fff;
}
.footer-min::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, var(--brandDark), var(--brand), var(--accent));
}
.f-grid{ display:grid; gap:28px; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.f-brand{ font-size:1.6rem; font-weight:800; }
.f-list a:hover{ transform:translateX(2px); }




/* HEAVY - commented */
/*
.f-grid{ display:grid; gap:28px; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
*/

/* FIX — Footer grid responsive (FINAL override) */
footer.footer-pro .f-grid{
  display:grid;
  gap:28px;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
}

@media (max-width: 920px){
  footer.footer-pro .f-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px){
  footer.footer-pro .f-grid{
    grid-template-columns: 1fr;
  }
}






/* ============================================================
   FIX: Contact footer height same as index footer
   ============================================================ */

/* 1) footer wrapper padding same as index (py-14) */
footer.footer-pro > .relative{
  padding-top: 56px !important;     /* py-14 top */
  padding-bottom: 56px !important;  /* py-14 bottom */
}

/* 2) contact section ka extra bottom gap remove (footer ko push na kare) */
.contact-hero-lite{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 3) footer ko start se chipka do (no extra space) */
.contact-hero-lite + footer.footer-pro{
  margin-top: 0 !important;
}


/* ===========================================================================
 






























/* FIX — show FULL emails in one line (no wrap), scroll inside row */
.email-row{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  overflow-x:auto;                 /* ✅ full email visible via scroll */
  overflow-y:hidden;
  max-width:100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* Firefox hide scrollbar */
}
.email-row::-webkit-scrollbar{ display:none; } /* Chrome/Safari hide */

.email-row a{
  white-space:nowrap;
  flex: 0 0 auto;                  /* ✅ don’t shrink */
}
.sep{ opacity:.5; flex: 0 0 auto; }
/* ================================
   EMAIL ROW — DESKTOP vs MOBILE FIX
   ================================ */

/* Desktop / Tablet — same line */
.email-row{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

/* Mobile — allow next line */
@media (max-width: 520px){
  .email-row{
    flex-wrap:wrap;          /* ✅ neeche aa jaye */
    white-space:normal;      /* ✅ wrap allow */
  }

  .email-row a{
    white-space:normal;
    word-break:break-word;   /* long email safely break */
  }

  .sep{
    display:none;            /* | hide on mobile (clean look) */
  }
}


/* =====================================
   CONTACT INFO — Email font size tweak
   ===================================== */

.info-card .card-sub,
.info-card .card-sub a,
.email-row,
.email-row a{
  font-size: 13.5px;     /* 👌 desktop clean */
  line-height: 1.45;
}

/* Mobile — thora aur compact */
@media (max-width: 520px){
  .info-card .card-sub,
  .info-card .card-sub a,
  .email-row,
  .email-row a{
    font-size: 13px;
    line-height: 1.4;
  }
}
.email-row a{
  cursor: pointer;
  text-decoration: none;
}

.email-row a:hover{
  text-decoration: underline;
}




/* ============================================================
   CONTACT PAGE — REDUCE SPACE ABOVE FOOTER (BALANCED)
   ============================================================ */

/* cards + hero section bottom gap kam */
.contact-hero-lite{
  padding-bottom: 70px !important;   /* pehle bohat zyada thi */
  margin-bottom: 0 !important;
}

/* right + left stacks ke extra gaps clean */
.contact-left-lite,
.contact-right-stack{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* footer se pehle jo empty area lag rahi hai usko control */
.contact-hero-lite + footer.footer-pro{
  margin-top: 0 !important;
}

/* footer ke andar top padding thori kam (but breathable) */
footer.footer-pro > .relative{
  padding-top: 36px !important;  /* pehle ~56px+ lag rahi thi */
}














/* ============================================================
   FIX: Desktop-site ON (900px+) -> Desktop jesa layout
   Left: Form | Right: Image + Info
   Paste at VERY END
   ============================================================ */

@media (min-width: 900px){

  /* 2-column force */
  .contact-inner-lite,
  .contact-hero-grid{
    display: grid !important;
    grid-template-columns: 1fr 44% !important;
    align-items: start !important;
    gap: 34px !important;
  }

  /* Left form stays left */
  .contact-left-lite{
    grid-column: 1 !important;
    order: 1 !important;
  }

  /* Right stack stays right (image on top, info card below) */
  .contact-right-stack{
    grid-column: 2 !important;
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .contact-right-lite{
    display: flex !important;
    order: 1 !important;
    justify-content: center !important;
  }

  .contact-right-lite img{
    display: block !important;
    width: 92% !important;
    max-width: 460px !important;
    height: auto !important;
    margin-top: 18px !important;
  }

  .side-col--hero{
    order: 2 !important; /* ✅ info card image ke neechy */
    margin-top: 0 !important;
  }
}











/* ============================================================
   FIX: Show FULL email (awii.marketinghead@gmail.com)
   Desktop-site + mobile dono me
   ============================================================ */

/* Force email row to wrap properly */
.info-card .email-row{
  display:flex !important;
  flex-wrap: wrap !important;     /* ✅ allow next line */
  gap: 6px 10px !important;
  white-space: normal !important; /* ❌ no nowrap */
  overflow: visible !important;   /* ❌ no clipping */
  max-width: 100% !important;
}

/* Individual email links */
.info-card .email-row a{
  white-space: normal !important;
  word-break: break-all !important;   /* long email safe */
  overflow-wrap: anywhere !important;
  font-size: 13.5px;
  line-height: 1.45;
}

/* Separator | handling */
.info-card .email-sep,
.info-card .sep{
  display:none !important;   /* mobile + desktop-site me clean look */
}














/* ============================================================
   FIX: iPad/Tablet pe bhi FULL email show (no cut)
   ============================================================ */

.info-card .email-row{
  display:flex !important;
  align-items:center !important;
  gap: 6px 10px !important;

  flex-wrap: wrap !important;        /* ✅ iPad pe wrap allow */
  white-space: normal !important;    /* ✅ NO nowrap */
  overflow: visible !important;      /* ✅ NO clipping */
  max-width: 100% !important;
}

.info-card .email-row a{
  white-space: normal !important;
  overflow-wrap: anywhere !important; /* ✅ long email break */
  word-break: break-word !important;
}

/* Separator "|" ko iPad/mobile pe hide (clean) */
@media (max-width: 1100px){
  .info-card .sep,
  .info-card .email-sep{
    display:none !important;
  }
}






















/* ============================================================
   FIX: Section → Footer breathing space (balanced)
   Keep footer height same as index
   ============================================================ */

/* footer height same as index */
footer.footer-pro > .relative{
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* ✅ add nice gap between last section and footer */
.contact-hero-lite{
  padding-bottom: clamp(40px, 5vw, 70px) !important; /* space between section & footer */
  margin-bottom: 0 !important;
}

/* ensure no extra margin from footer itself */
.contact-hero-lite + footer.footer-pro{
  margin-top: 0 !important;
}





/* HOW WE WORK SCROLL BUTTON TO SECTION  */


html{
  scroll-behavior: smooth;
}




#services{
  scroll-margin-top: 50px; /* apne navbar ki height ke hisaab se 70-110px */
}































/* ==========================================
   SELLIFY — FLOATING WHATSAPP BUTTON
   ========================================== */

/* wrapper */
#sellify-fab-wrap{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99999;
}

/* main button (anchor OR button both supported) */
.swy-wa-simple{
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #25D366;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 14px 32px rgba(37,211,102,0.35);
  cursor: pointer;

  border: none;
  outline: none;
  text-decoration: none;

  transition: transform .25s ease, box-shadow .25s ease;
}

/* hover effect */
.swy-wa-simple:hover{
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 20px 44px rgba(37,211,102,0.45);
}

/* white inner ring */
.swy-ring-white{
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
  z-index: 1;
}

/* whatsapp icon */
.swy-wa-simple svg{
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  fill: #25D366;
}

/* screen-reader text (hide visually) */
.swy-sr{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* mobile size */
@media (max-width: 640px){
  .swy-wa-simple{
    width: 56px;
    height: 56px;
  }

  .swy-wa-simple svg{
    width: 24px;
    height: 24px;
  }
}




/* FIX: <a> ko button jesa behave karwana */
.swy-wa-simple{
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}