:root{
  --bg:#F4F6F8;
  --card:#FFFFFF;
  --text:#0F172A;
  --muted:#64748B;
  --border:#E2E8F0;

  --charcoal:#0B1220;
  --orange:#F97316;
  --green:#16A34A;
  --sky:#0EA5E9;

  --radius:18px;
  --shadow:0 14px 40px rgba(0,0,0,.08);
  --shadow2:0 10px 28px rgba(0,0,0,.08);
  --wrap:1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans Bengali", "Hind Siliguri", "Noto Sans";
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  letter-spacing:.1px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(var(--wrap), calc(100% - 40px)); margin:0 auto}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(244,246,248,.84);
  border-bottom: 1px solid rgba(226,232,240,.9);
}
.navInner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brandLogo{
  width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,.06);padding:6px
}
.brandName{display:flex;flex-direction:column;line-height:1.15}
.brandName b{font-size:14px;letter-spacing:.4px}
.brandName span{font-size:12px;color:var(--muted)}
.navLinks{display:flex;align-items:center;gap:18px;font-size:13px}
.navLinks a{padding:8px 10px;border-radius:12px;transition:background .15s ease}
.navLinks a:hover{background:rgba(2,6,23,.04)}
.navCtas{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 14px;border-radius:14px;border:1px solid var(--border);
  background:var(--card); box-shadow:0 10px 22px rgba(0,0,0,.05);
  font-weight:700;font-size:13px;cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space:nowrap
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow2)}
.btnDark{background:var(--charcoal); color:#fff; border-color: rgba(255,255,255,.12); box-shadow:0 14px 34px rgba(11,18,32,.22)}
.btnOrange{background:var(--orange); border-color: rgba(0,0,0,.08)}
.btnSky{background:var(--sky); color:#fff; border-color: rgba(255,255,255,.14)}
.btnGreen{background:var(--green); color:#fff; border-color: rgba(255,255,255,.14)}
.btnGhost{background:rgba(255,255,255,.68)}

/* Hero */
.hero{padding:44px 0 10px}
.heroGrid{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:stretch}
.heroCard{
  border-radius:calc(var(--radius) + 6px); overflow:hidden;
  border:1px solid rgba(226,232,240,.95); box-shadow:var(--shadow);
  position:relative;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(14,165,233,.16), transparent 55%),
    radial-gradient(900px 520px at 90% 10%, rgba(22,163,74,.14), transparent 55%),
    radial-gradient(900px 520px at 70% 70%, rgba(249,115,22,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,246,248,.92));
}
.heroCard::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(0deg, rgba(2,6,23,.10), rgba(2,6,23,.02)),
    url("https://images.unsplash.com/photo-1581093458791-9f3c3900df4b?auto=format&fit=crop&w=1600&q=60");
  background-size:cover; background-position:center;
  opacity:.22; pointer-events:none;
}
.heroCardInner{position:relative; padding:38px; min-height:380px; display:flex; flex-direction:column; justify-content:space-between; gap:18px}
.kicker{
  display:inline-flex; gap:10px; align-items:center; font-size:12px;
  color:rgba(15,23,42,.85); background:rgba(255,255,255,.72);
  border:1px solid rgba(226,232,240,.9); padding:8px 12px; border-radius:999px;
  width:fit-content;
}
.dot{width:8px;height:8px;border-radius:999px;background:var(--sky); box-shadow:0 0 0 6px rgba(14,165,233,.18)}
h1{font-size:clamp(28px, 3.2vw, 44px); margin:10px 0 8px; line-height:1.05; letter-spacing:-.6px}
.subBangla{font-size:clamp(14px, 1.3vw, 16px); color:rgba(15,23,42,.82); margin:0 0 14px; font-weight:700}
.lead{margin:0; color:rgba(15,23,42,.78); font-size:15px; max-width:62ch}
.heroCtas{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.trustRow{margin-top:18px; display:flex; flex-wrap:wrap; gap:10px}
.pill{
  font-size:12px; color:rgba(15,23,42,.80);
  background:rgba(255,255,255,.74); border:1px solid rgba(226,232,240,.92);
  padding:8px 10px; border-radius:999px;
}
.pillSky{border-color: rgba(14,165,233,.28); background: rgba(14,165,233,.10)}
.pillGreen{border-color: rgba(22,163,74,.26); background: rgba(22,163,74,.10)}

.heroSide{display:grid; gap:14px}
.sideCard{
  border-radius:var(--radius); border:1px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.92); box-shadow:0 12px 30px rgba(0,0,0,.07);
  padding:18px; position:relative; overflow:hidden;
}
.sideCard::after{
  content:""; position:absolute; inset:-40px -40px auto auto;
  width:150px;height:150px;
  background: radial-gradient(circle at 30% 30%, rgba(22,163,74,.26), transparent 60%),
              radial-gradient(circle at 65% 50%, rgba(14,165,233,.22), transparent 60%);
  transform: rotate(10deg);
}
.sideCard h3{margin:0 0 6px; font-size:14px; letter-spacing:.2px}
.sideCard p{margin:0; font-size:13px; color:var(--muted); position:relative}
.quickList{display:grid; gap:10px; margin-top:12px; position:relative}
.quickItem{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(226,232,240,.9); background:rgba(244,246,248,.74);
}
.badge{
  width:20px;height:20px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto; margin-top:2px; font-weight:900;
  border:1px solid rgba(14,165,233,.28);
  background: rgba(14,165,233,.12);
}
.badge.green{border-color: rgba(22,163,74,.26); background: rgba(22,163,74,.12)}

/* Sections */
section.section{padding:64px 0}
.sectionHead{display:grid; gap:10px; margin-bottom:18px}
.sectionHead h2{margin:0; font-size:26px; letter-spacing:-.3px}
.sectionHead .bangla{margin:0; color:var(--muted); font-weight:700}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.card{
  border-radius:var(--radius);
  border:1px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding:20px;
}

/* Products */
.products{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.product{
  border-radius:var(--radius);
  border:1px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  overflow:hidden; display:flex; flex-direction:column; min-height:100%;
}
.productMedia{
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(22,163,74,.10), rgba(249,115,22,.10));
  border-bottom: 1px solid rgba(226,232,240,.95);
  display:flex; align-items:center; justify-content:center;
  padding:10px;
}
.productMedia img{
  max-height:100%; width:auto; height:100%;
  object-fit:contain;
  filter: drop-shadow(0 10px 16px rgba(2,6,23,.12));
}
.productBody{padding:16px; display:flex; flex-direction:column; gap:10px; height:100%}
.productBody h3{margin:0; font-size:15px; letter-spacing:-.1px}
.meta{font-size:12px; color:var(--muted); display:grid; gap:6px}
.tagRow{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.tag{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:rgba(244,246,248,.8); border:1px solid rgba(226,232,240,.95);
  color:rgba(15,23,42,.75);
}
.productFoot{margin-top:auto; padding-top:10px; display:flex; gap:10px; align-items:center; justify-content:space-between}
.productFoot small{color:rgba(15,23,42,.62); font-size:12px}

/* Why */
.whyGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:12px}
.why{
  border-radius:18px; border:1px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.9);
  padding:14px; box-shadow:0 10px 26px rgba(0,0,0,.05);
  display:flex; gap:10px; align-items:flex-start;
}
.whyIcon{
  width:36px;height:36px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;
  border:1px solid rgba(22,163,74,.26);
  background: rgba(22,163,74,.12);
}
.whyIcon.sky{border-color: rgba(14,165,233,.28); background: rgba(14,165,233,.12)}
.why b{font-size:13px}
.why span{display:block; font-size:12px; color:var(--muted); margin-top:2px}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(6, 1fr); gap:10px}
.g{
  border-radius:16px; border:1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.88);
  box-shadow:0 12px 26px rgba(0,0,0,.05);
  overflow:hidden; cursor:pointer; position:relative; min-height:110px;
}
.g::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(22,163,74,.14), rgba(249,115,22,.10));
}
.g::after{
  content: attr(data-label);
  position:absolute; left:12px; bottom:10px;
  font-size:12px; color: rgba(255,255,255,.92);
  background: rgba(11,18,32,.58);
  border:1px solid rgba(255,255,255,.14);
  padding:6px 10px; border-radius:999px; backdrop-filter: blur(8px);
}

/* Map */
.map{
  width:100%;
  border:1px solid rgba(226,232,240,.95);
  border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  background:#fff;
}
.map iframe{width:100%; height:380px; border:0; display:block}

/* Contact */
.contactGrid{display:grid; grid-template-columns:.9fr 1.1fr; gap:16px; align-items:start}
.contactList{display:grid; gap:10px; margin-top:12px}
.contactItem{
  display:flex; gap:10px; align-items:center;
  padding:12px 12px; border-radius:16px;
  background:rgba(244,246,248,.78); border:1px solid rgba(226,232,240,.95);
}
.contactItem b{font-size:13px}
.contactItem a{color:rgba(15,23,42,.92); text-decoration:underline; text-underline-offset:3px}
form{display:grid; gap:10px; margin-top:10px}
label{
  font-size:12px; color:rgba(15,23,42,.72); font-weight:700;
  display:grid; gap:6px;
}
input, textarea, select{
  width:100%; padding:12px 12px; border-radius:14px;
  border:1px solid rgba(226,232,240,.98);
  background:rgba(255,255,255,.98);
  outline:none; font:inherit; font-size:14px;
}
textarea{min-height:120px; resize:vertical}
.formRow{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.fine{font-size:12px; color:var(--muted); margin:6px 0 0}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:12px}
.stat{
  border-radius:18px; border:1px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.9);
  padding:14px; box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.stat b{font-size:22px; letter-spacing:-.3px}
.stat span{display:block; font-size:12px; color:var(--muted); margin-top:2px}

/* Footer */
footer{
  padding:42px 0 80px;
  border-top:1px solid rgba(226,232,240,.92);
  background: rgba(255,255,255,.35);
}
.footerGrid{display:grid; grid-template-columns:1.2fr .8fr; gap:16px; align-items:start}
.footLinks{display:grid; gap:8px; font-size:13px; color:rgba(15,23,42,.78)}
.footLinks a{text-decoration:underline; text-underline-offset:3px}

/* Floating */
.floatWrap{position:fixed; right:16px; bottom:16px; display:grid; gap:10px; z-index:60}
.floatBtn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:999px;
  border:1px solid rgba(2,6,23,.08);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow2);
  font-weight:800; font-size:13px;
}
.floatBtn strong{display:none}
.floatBtnPrimary{background:var(--green); color:#fff; border-color: rgba(255,255,255,.14)}

/* Mobile bar */
.mobileBar{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background: rgba(244,246,248,.88);
  border-top:1px solid rgba(226,232,240,.95);
  backdrop-filter: blur(10px);
  padding:10px 12px;
  display:none;
}
.mobileBarInner{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  width:min(var(--wrap), 100%); margin:0 auto;
}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(2,6,23,.55); display:none; align-items:center; justify-content:center; padding:18px; z-index:80}
.modalCard{
  width:min(920px, 100%);
  border-radius:20px; background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 30px 80px rgba(0,0,0,.30);
  overflow:hidden;
}
.modalTop{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid rgba(226,232,240,.95)}
.modalTop b{font-size:14px}
.modalTop button{
  border:1px solid rgba(226,232,240,.95);
  background: rgba(244,246,248,.95);
  border-radius:14px; padding:10px 12px;
  font-weight:800; cursor:pointer;
}
.modalBody{padding:16px; display:grid; gap:12px}
.modalImage{
  height:360px; border-radius:16px; border:1px solid rgba(226,232,240,.95);
  background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(22,163,74,.14), rgba(249,115,22,.10));
  display:flex; align-items:center; justify-content:center;
}
.modalImage img{max-height:100%; max-width:100%; object-fit:contain}
.modalBody p{margin:0; color:rgba(15,23,42,.78); font-size:13px}

/* Reveal */
.reveal{opacity:0; transform:translateY(12px); transition: opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:translateY(0)}

/* Responsive */
@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr}
  .navLinks{display:none}
  .products{grid-template-columns:1fr 1fr}
  .whyGrid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3, 1fr)}
  .stats{grid-template-columns:1fr 1fr}
  .contactGrid{grid-template-columns:1fr}
  .footerGrid{grid-template-columns:1fr}
  .floatBtn strong{display:inline}
  .mobileBar{display:block}
}
@media (max-width: 560px){
  .heroCardInner{padding:22px; min-height:360px}
  .products{grid-template-columns:1fr}
  .whyGrid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2, 1fr)}
  .formRow{grid-template-columns:1fr}
  .floatBtn strong{display:none}
}

/* =========================================================
   MOBILE FIX PACK (SCB) — single source of truth
   Only applies on screens 768px and below.
   ========================================================= */
@media (max-width: 768px){

  /* ---------- HERO: CTA buttons clean layout ---------- */
  .hero .ctaRow{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .hero .ctaRow a,
  .hero .ctaRow button{
    width: 100% !important;
    justify-content: center;
  }
  .hero .ctaRow a:last-child,
  .hero .ctaRow button:last-child{
    grid-column: 1 / -1; /* last CTA spans full width */
  }

  /* ---------- HERO: pills/tags horizontal scroll ---------- */
  .hero .pills{
    display: flex !important;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero .pills::-webkit-scrollbar{ display:none; }
  .hero .pill{
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* ---------- ABOUT: better readability + stacked cards ---------- */
  #about .grid2{
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
  }
  #about .card{
    padding: 22px;
    border-radius: 18px;
  }
  #about p{
    font-size: 15px;
    line-height: 1.7;
  }
  #about h3{
    font-size: 18px;
  }

  /* ---------- AWARDS: stop squeeze, make images look premium ---------- */
  #awards .gallery{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
  }
  #awards .g{
    width: 100% !important;
  }
  #awards img{
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
  }

  /* If you use a dedicated awards stack layout */
  .awardsStack{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .awardsStack img.plaque{
    width: 88%;
    align-self: center;
  }

/* Hide floating call/whatsapp button ONLY on mobile */ @media (max-width: 768px){ .floatBtn, .floatingBtn, .fab, .whatsapp-float, .wa-float, .call-float, .chat-float, .sticky-float, .fixed-float, #floatingBtn, #whatsapp, #waBtn, #callBtn, .wafloat, .wa-widget, .wa-button, .whatsapp-widget, .whatsapp-button, .mobile-float { display: none !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } }
}

/* =========================================================
   MOBILE HEADER MENU (FIX)
   Desktop: show Call Now + Get Quote
   Mobile: hide CTAs and show hamburger that toggles .navLinks.open
   ========================================================= */

.mobileMenuBtn{display:none;}

@media (max-width: 980px){
  /* Hide header CTAs on mobile/tablet */
  .navCtas{display:none !important;}

  /* Show hamburger */
  .mobileMenuBtn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:12px;
    border:1px solid rgba(2,6,23,.12);
    background:#fff;
    font-size:22px;
    font-weight:900;
    margin-left:auto;
    cursor:pointer;
  }

  /* Make header a positioning context for dropdown */
  .navInner{position:relative;}

  /* Mobile dropdown menu */
  .navLinks{
    display:none !important;
    position:absolute;
    top:calc(100% + 10px);
    left:12px;
    right:12px;
    flex-direction:column;
    gap:8px;
    padding:12px;
    border-radius:16px;
    background:#fff;
    border:1px solid rgba(2,6,23,.10);
    box-shadow:0 20px 50px rgba(0,0,0,.10);
    z-index:9999;
  }
  .navLinks a{padding:10px 12px;}
  .navLinks.open{display:flex !important;}

  /* Hide floating right-side buttons; keep bottom mobile bar */
  .floatWrap{display:none !important;}
}


/* Legal page cards */
.legalGrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
.legalCard{text-decoration:none; color:inherit; display:block;}
.legalCard img{width:100%; border-radius:14px; border:1px solid rgba(2,6,23,.10);}
.legalMeta{padding-top:10px;}
@media (max-width: 680px){.legalGrid{grid-template-columns:1fr;}}

/* =========================================================
   MOBILE FIX: Google Map positioning (Location section)
   Put this at VERY BOTTOM of styles.css
   ========================================================= */
@media (max-width: 768px){

  /* Force Location layout to stack */
  #location .grid2{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  /* Ensure both columns become full width */
  #location .grid2 > *{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Make the map box responsive + clean */
  #location .map{
    width: 100% !important;
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  /* Make iframe full width and consistent height */
  #location .map iframe{
    width: 100% !important;
    height: 280px !important;
    display: block !important;
    border: 0 !important;
  }
}