/* Mobinex — professional design layer (visual only, no content changes) */
:root{--steel:#0f1216;--steel2:#171b21;--line:#e4e7ec;--glow:0 10px 30px rgba(255,107,26,.28)}
body{background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--or);color:#fff}
html{scroll-padding-top:70px}

/* scroll progress bar */
body::before{content:'';position:fixed;top:0;left:0;height:3px;width:var(--sp,0%);background:linear-gradient(90deg,var(--or),#ffb27a);z-index:10000;transition:width .1s linear}

/* ---------- Header + nav ---------- */
.top-header{background:linear-gradient(180deg,#fff,#fafbfc);border-bottom:1px solid var(--line);padding:.85rem 5%}
.th-icon{background:linear-gradient(135deg,var(--or),#ff9552);box-shadow:0 6px 16px rgba(255,107,26,.3)}
.th-cta{border-radius:50px;border-width:1.5px;position:relative;overflow:hidden;z-index:1}
.th-cta::before{content:'';position:absolute;inset:0;background:var(--or);transform:translateX(-101%);transition:transform .35s ease;z-index:-1}
.th-cta:hover::before{transform:translateX(0)}
.th-cta span{border-radius:50%}
nav.main-nav{background:rgba(15,18,22,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.nav-links a{color:#b9bec7;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.76rem}
.nav-links a::after{height:3px;border-radius:3px 3px 0 0}

/* ---------- Hero + banners ---------- */
.hero-overlay{background:linear-gradient(100deg,rgba(10,12,15,.88) 0%,rgba(10,12,15,.55) 55%,rgba(10,12,15,.35) 100%)}
.hero-h1{letter-spacing:-.025em;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.hero-eyebrow,.pg-eyebrow{padding:.4rem 1rem;background:rgba(255,107,26,.12);border:1px solid rgba(255,107,26,.4);border-radius:30px;backdrop-filter:blur(6px)}
.hero-btn{border-radius:50px;background:linear-gradient(135deg,var(--or),#ff8a47)!important;border-color:transparent!important;box-shadow:var(--glow)}
.hero-btn:hover{box-shadow:0 14px 34px rgba(255,107,26,.5)}
.pg-banner{min-height:44vh;border-bottom:0!important}
.pg-banner::before{background:linear-gradient(120deg,rgba(10,12,15,.92),rgba(10,12,15,.7) 60%,rgba(10,12,15,.82))!important}
.pg-banner::after{background:radial-gradient(circle at 15% 40%,rgba(255,107,26,.22),transparent 48%)!important;border-bottom:0}
.pg-banner{box-shadow:inset 0 -6px 0 var(--or)}
.pg-h1{letter-spacing:-.03em}
.pg-crumb{padding:.4rem 1.1rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:30px;display:inline-flex;backdrop-filter:blur(6px)}
.pg-banner-inner{display:flex;flex-direction:column;align-items:center}

/* ---------- Section headings ---------- */
.sec{padding:6rem 5%}
.sec-eyebrow,.about-eyebrow,.srv-eyebrow,.wwd-eyebrow,.work-eyebrow{letter-spacing:.24em;font-weight:700}
.sec-h2,.about-h2{letter-spacing:-.03em;font-weight:800}
.sec-h2::after{width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--or),#ffb27a)!important}
.sec-sub{color:#667085}

/* ---------- About intro ---------- */
.about-wrap{padding:6.5rem 5%;background:linear-gradient(180deg,#fff,#f8f9fb)}
.about-img-frame{box-shadow:0 30px 70px rgba(15,18,22,.22)!important}
.about-imgs::after{content:'';position:absolute;inset:14px;border:1.5px solid rgba(255,255,255,.55);border-radius:10px;z-index:4;pointer-events:none}
.about-btn,.cf-submit,.cta-btn{background:linear-gradient(135deg,var(--or),#ff8a47);border-radius:50px;box-shadow:var(--glow);transition:transform .25s,box-shadow .25s}
.about-btn:hover,.cf-submit:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(255,107,26,.45);background:linear-gradient(135deg,var(--or2),var(--or))}
.about-btn span{border-radius:50%}
.about-pts li svg{filter:drop-shadow(0 2px 4px rgba(255,107,26,.35))}

/* ---------- Cards (values, services, work, process) ---------- */
.value-card,.svc-detail,.svc-feature{position:relative;overflow:hidden;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:0 4px 18px rgba(15,18,22,.05)!important;transition:transform .35s,box-shadow .35s,border-color .35s}
.value-card::before,.svc-detail::before,.svc-feature::before{content:'';position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--or),#ffb27a);transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
.value-card:hover::before,.svc-detail:hover::before,.svc-feature:hover::before{transform:scaleX(1)}
.value-card:hover,.svc-detail:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(15,18,22,.13)!important;border-color:rgba(255,107,26,.5)!important}
.value-icon{background:linear-gradient(135deg,rgba(255,107,26,.14),rgba(255,107,26,.04));border:1px solid rgba(255,107,26,.25)}
.value-card:hover .value-icon{background:linear-gradient(135deg,var(--or),#ff8a47);border-color:transparent}
.svc-tag{border-radius:30px!important}
.svc-detail-num{background:linear-gradient(180deg,rgba(255,107,26,.35),rgba(255,107,26,.05));-webkit-background-clip:text;background-clip:text;color:transparent}
.srv-cards{border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.srv-card{transition:background .3s,transform .3s}
.srv-card:hover{background:#fff7f2;transform:translateY(-4px)}
.wwd-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)!important;box-shadow:none!important;border-radius:12px!important}
.wwd-card:hover{background:rgba(255,107,26,.1);border-color:rgba(255,107,26,.45)!important;transform:translateY(-4px)}
.wwd-left,.process-wrap,.proc-wrap,.cta-band{background:linear-gradient(160deg,var(--steel2),var(--steel))}
.services-wrap{background:linear-gradient(160deg,var(--steel2),var(--steel))}
.process-num{background:linear-gradient(135deg,var(--or),#ff8a47);box-shadow:0 0 0 6px rgba(255,107,26,.15),var(--glow)}
.stat-strip{background:linear-gradient(135deg,var(--steel2),var(--steel))}
.stat-num{background:linear-gradient(180deg,#ffb27a,var(--or));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Gallery / work ---------- */
.g-item,.work-card{border-radius:12px!important;box-shadow:0 8px 24px rgba(15,18,22,.1)}
.g-item:hover,.work-card:hover{box-shadow:0 22px 50px rgba(15,18,22,.22)}
.gal-filter-btn,.work-tab{border-radius:50px;font-weight:600;letter-spacing:.03em}
.gal-filter-btn.active,.work-tab.active{background:linear-gradient(135deg,var(--or),#ff8a47);box-shadow:var(--glow)}

/* ---------- Team + certificate ---------- */
.team-sec{background:linear-gradient(180deg,#f5f6f8,#eef0f3)}
.team-card{border-radius:16px;border:1px solid var(--line);border-bottom:4px solid var(--or);box-shadow:0 10px 30px rgba(15,18,22,.08)}
.team-card:hover{box-shadow:0 26px 56px rgba(15,18,22,.18);transform:translateY(-8px)}
.team-photo{border-bottom:3px solid var(--or)}
.team-role{display:inline-block;padding:.3rem .9rem;background:rgba(255,107,26,.1);border-radius:30px}
.cert-frame{border-radius:16px;box-shadow:0 24px 60px rgba(15,18,22,.18)}

/* ---------- Roadmap (future growth) ---------- */
.future-sec{background:linear-gradient(160deg,var(--steel2),var(--steel))!important}
.rm-card{border-radius:14px!important;transition:transform .3s,box-shadow .3s}
.rm-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.rm-node{box-shadow:0 0 0 6px rgba(255,107,26,.15),var(--glow)}

/* ---------- Contact ---------- */
.contact-info-card{background:linear-gradient(160deg,var(--steel2),var(--steel))!important;border-radius:16px!important;box-shadow:0 24px 60px rgba(15,18,22,.25)}
.cic-icon{background:linear-gradient(135deg,var(--or),#ff8a47);box-shadow:var(--glow)}
.contact-form-card{border-radius:16px!important;box-shadow:0 24px 60px rgba(15,18,22,.1)!important}
.cf-field input,.cf-field select,.cf-field textarea{border-radius:8px;background:#f8f9fb}
.map-wrap{border-radius:0;box-shadow:inset 0 6px 0 var(--or)}
.map-card{border-radius:12px}
.faq-item{transition:background .25s}
.faq-item:hover{background:#fafbfc}

/* ---------- Sections just above footer: lighter slate-blue so footer stands apart ---------- */
.future-sec,.process-wrap,.proc-wrap,.cta-band{background:radial-gradient(circle at 88% 15%,rgba(255,107,26,.22),transparent 45%),linear-gradient(135deg,#34445f,#223049)!important}
.future-sec .rm-card{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.14)!important}

/* ---------- Footer ---------- */
footer{background:linear-gradient(180deg,var(--steel2),#0a0c0f);border-top:4px solid var(--or)}
.ft-col h4{position:relative;padding-bottom:.7rem}
.ft-col h4::after{content:'';position:absolute;left:0;bottom:0;width:30px;height:3px;border-radius:3px;background:var(--or)}
.ft-col ul li a{transition:color .2s,padding-left .25s}
.ft-col ul li a:hover{padding-left:6px}
.ft-top{border-bottom-color:rgba(255,255,255,.1)}
.ft-bot{border-top-color:rgba(255,255,255,.08)}

/* ---------- Floating buttons ---------- */
.float-wa,.float-call{box-shadow:0 8px 24px rgba(0,0,0,.28)}
.float-wa::after,.float-call::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;opacity:.5;animation:ring 2.4s ease-out infinite}
.float-wa{color:#25D366}.float-call{color:#007bff}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.float-wa::after,.float-call::after{animation:none}}

/* ---------- Tighter section spacing (desktop) ---------- */
.sec{padding:3.6rem 5%}
.about-wrap{padding:3.8rem 5%;gap:3rem}
.gallery-wrap,.work-wrap,.proc-wrap{padding:3.6rem 5%}
.services-wrap{padding:3.8rem 5% 3rem}
.srv-top{padding:3.2rem 5% 2rem}
.wwd-left{padding:3.2rem 5%}
.cta-band{padding:3.2rem 5%}
.svc-section,.svc-section-alt{padding-top:3.6rem;padding-bottom:3.6rem}
.stat-strip{padding:2.4rem 5%}
footer{padding:3.2rem 5% 0}
.ft-top{padding-bottom:2.2rem}
.pg-banner{min-height:36vh}
.sec-sub{margin-bottom:2rem}
.sec-h2{margin-bottom:.8rem}
.team-grid{margin-top:2rem}
.proc-head{margin-bottom:2.4rem}
.srv-cards-spacer{height:1.5rem}

/* ---------- Mobile ---------- */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%}
@media(max-width:768px){
  .sec,.gallery-wrap,.work-wrap,.proc-wrap{padding:2.6rem 5%}
  .about-wrap{padding:2.6rem 5%;gap:1.8rem}
  .services-wrap{padding:2.6rem 5% 2rem}
  .srv-top{padding:2.4rem 5% 1.4rem;gap:1.2rem}
  .wwd-left,.cta-band{padding:2.4rem 5%}
  .svc-section,.svc-section-alt{padding-top:2.4rem;padding-bottom:2.4rem}
  .stat-strip{padding:2rem 5%}
  footer{padding:2.4rem 5% 0}
  .ft-top{gap:1.6rem;padding-bottom:1.6rem}
  .pg-banner{min-height:26vh;padding:2.2rem 0}
  .pg-h1{font-size:clamp(1.7rem,7.5vw,2.4rem);margin-bottom:.8rem}
  .pg-eyebrow{font-size:.62rem;padding:.3rem .8rem;margin-bottom:.8rem}
  .pg-crumb{font-size:.78rem;padding:.3rem .9rem}
  .sec-h2,.about-h2,.srv-h2,.wwd-h2,.work-h2{font-size:clamp(1.4rem,6vw,1.8rem)}
  .sec-sub{font-size:.88rem;margin-bottom:1.5rem}
  .sec-h2::after{width:48px;height:3px;margin-top:.7rem}
  .about-p{font-size:.88rem;line-height:1.8}
  .value-card,.svc-detail{padding:1.5rem 1.2rem}
  .values-grid,.svc-detail-grid{gap:1rem}
  .team-grid{grid-template-columns:minmax(0,340px)!important;gap:1.4rem!important}
  .cert-frame{max-width:100%;padding:.5rem}
  .about-btn,.cf-submit{width:100%;justify-content:center}
  .contact-info-card,.contact-form-card{padding:1.6rem 1.2rem}
  .map-wrap{height:300px}
  .float-wa,.float-call{width:46px;height:46px;bottom:1rem}
  .float-wa{right:1rem}.float-call{left:1rem}
  .float-wa svg,.float-call svg{width:22px;height:22px}
  .ft-bot{padding:1rem 0;font-size:.74rem;line-height:1.6}
  .proc-step{padding:1.2rem 0}
  .cta-band h2{font-size:1.5rem}
  .contact-circle,.cta-band-btn{margin:0 auto}
}
@media(max-width:480px){
  .sec,.gallery-wrap,.work-wrap,.proc-wrap{padding:2.2rem 5%}
  .hero-h1{font-size:clamp(1.7rem,8vw,2.2rem)}
  .hero-p{font-size:.88rem}
  .team-grid{grid-template-columns:minmax(0,1fr)!important}
  .g-item img,.work-card img{height:200px}
  .th-cta{padding:.5rem .9rem}
}

/* ---------- Footer logo + description ---------- */
.ft-logo img{height:82px;width:auto;margin-bottom:.8rem}
.ft-desc{text-align:left!important;font-size:.8rem;line-height:1.7;max-width:310px;margin-bottom:1rem}
.ft-tagline{margin-bottom:.8rem}
@media(max-width:768px){.ft-logo img{height:66px}.ft-desc{max-width:100%}}

/* footer logo smaller + justified description */
.ft-logo img{height:64px}
.ft-desc{text-align:justify!important;max-width:320px}
@media(max-width:768px){.ft-logo img{height:56px}.ft-desc{max-width:100%}}

/* ---------- Clean logo (transparent PNG, tight crop) ---------- */
.th-logo img{height:54px;width:auto}
.mob-nav-bar img{height:36px!important;width:auto}
.ft-logo img{height:50px;width:auto;background:#fff;padding:.6rem 1rem;border-radius:10px;box-sizing:content-box;margin-bottom:1rem}
@media(max-width:768px){.ft-logo img{height:42px}}

/* ---------- Vision & Mission ---------- */
.vm-grid{gap:2rem!important;margin-top:2.4rem}
.value-card.vm-card{position:relative;padding:2.4rem 2.3rem 2.2rem!important;text-align:left;border-radius:18px!important;overflow:hidden}
.vm-card::after{content:'';position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;border:34px solid rgba(255,107,26,.09);pointer-events:none}
.vm-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.4rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(128,138,155,.25)}
.vm-ico{flex-shrink:0;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--or),#ff8a47);display:flex;align-items:center;justify-content:center;box-shadow:var(--glow)}
.vm-ico svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vm-card .vm-head h3{margin:0!important;font-size:1.45rem!important;font-weight:800;letter-spacing:-.02em}
.vm-card p{text-align:left!important;margin-bottom:1.1rem!important;font-size:.95rem;line-height:1.85}
.vm-card .about-pts{margin:0 0 1.3rem!important;display:grid;gap:.7rem}
.vm-card .about-pts li{padding:.7rem 1rem;border-radius:10px;font-weight:500;align-items:center}
.vm-card>p:last-child{margin:0!important;padding-top:1.1rem;border-top:1px dashed rgba(128,138,155,.4)}
/* vision = dark */
.value-card.vm-vision{background:linear-gradient(160deg,#1c2330,#0f1216)!important;border:1px solid #2a3140!important;box-shadow:0 22px 50px rgba(15,18,22,.28)!important}
.vm-vision .vm-head h3{color:#fff}
.vm-vision p{color:#b9bec7!important}
.vm-vision .about-pts li{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.08)}
/* mission = light */
.value-card.vm-mission{background:#fff!important;border-top:5px solid var(--or)!important}
.vm-mission .vm-head h3{color:#111827}
.vm-mission p{color:#475467!important}
.vm-mission .about-pts li{background:#f6f7f9;color:#1d2433;border:1px solid #eceef2}
@media(max-width:768px){.vm-grid{grid-template-columns:1fr!important;gap:1.2rem!important}.value-card.vm-card{padding:1.6rem 1.3rem!important}.vm-ico{width:48px;height:48px}.vm-card .vm-head h3{font-size:1.2rem!important}}
/* ---------- Inner page banner fixes ---------- */
/* navbar aur banner ke beech ki line hatayi */
nav.main-nav{border-bottom:0!important;box-shadow:none!important}
.top-header{border-bottom:0}
.pg-banner{border-top:0!important}

/* badge ab banner ke top edge pe overlap nahi karega */
.pg-banner{min-height:40vh;padding:4.5rem 0 4rem;box-sizing:border-box}
.pg-banner-inner{gap:0}
.pg-eyebrow{margin-bottom:1.4rem;line-height:1.4}
.pg-h1{line-height:1.2;margin-bottom:1.6rem}
.pg-crumb{margin-top:.2rem}

@media(max-width:768px){
  .pg-banner{min-height:30vh;padding:3rem 0 2.6rem}
  .pg-eyebrow{margin-bottom:1rem}
  .pg-h1{margin-bottom:1.1rem}
}

/* ---------- Sticky header fix (mobile + desktop) ---------- */
/* overflow-x:hidden on html/body makes body a scroll container, which breaks position:sticky.
   overflow-x:clip hides sideways overflow without creating a scroll container. */
html,body{overflow-x:clip!important}
nav.main-nav{position:sticky!important;top:0;z-index:1000}
@media(max-width:768px){
  .mob-nav-bar{position:relative;top:auto}
}