/* =====================================================================
   Servolink — Home page (Multikart-style e-commerce layout)
   Depends on tokens declared in the page <style> block:
   --red, --red-deep, --ink, --grey-950/800/600/300/100, fonts
   ===================================================================== */

:root{
  --red:#FF2836; --red-deep:#D01E2A;
  --grey-950:#1B1C1F; --grey-800:#2B2D31; --grey-600:#5B5F66;
  --grey-300:#D7D9DC; --grey-100:#F2F2F1; --white:#fff; --ink:#1B1C1F;
  --soft:#F7F6F4; --pc-bg:#E9E8EF;
  --font-display:'Poppins',sans-serif;
  --font-body:'Poppins',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ---------- shared section heading (centered, Multikart style) ------ */
.sec{padding:58px 0}
.sec.tight{padding:40px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 34px}
.sec-head .eyebrow{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;
  color:var(--red);font-weight:500;margin-bottom:2px;display:block;text-transform:none
}
.sec-head h2{
  font-size:32px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink);position:relative;padding-bottom:14px;display:inline-block
}
.sec-head h2::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:64px;height:2px;background:var(--red)
}
.sec-head p{margin-top:14px;color:var(--grey-600);font-size:14.5px}

.btn-shop{
  display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;
  font-weight:600;font-size:13px;letter-spacing:.03em;text-transform:uppercase;
  padding:11px 20px;border-radius:4px;border:0;cursor:pointer;transition:.25s
}
.btn-shop:hover{background:var(--red-deep);gap:12px;color:#fff}
.btn-shop svg{width:14px;height:14px}

/* =====================  1. HERO SLIDER  =============================
   Simple full-width banner slider — one image per slide, no overlay text.
   The banner artwork already carries its own headline, so the slide is
   kept at the artwork's own aspect ratio and never cropped.
   ==================================================================== */
.hero-slider{
  /* change these two if you swap in banners with a different shape */
  --hero-ratio:1920/686;
  --hero-ratio-mobile:900/1000;
  position:relative;width:100%;overflow:hidden;background:#F2F2F1;
  aspect-ratio:var(--hero-ratio)
}
.hero-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .7s ease,visibility .7s
}
.hero-slide.active{opacity:1;visibility:visible;z-index:2}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-slide a{display:block;width:100%;height:100%}

/* prev / next arrows */
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(255,255,255,.82);color:#1B1C1F;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:.22s;
  box-shadow:0 3px 14px rgba(0,0,0,.16)
}
.hero-arrow svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2}
.hero-arrow:hover{background:var(--red);color:#fff;transform:translateY(-50%) scale(1.07)}
.hero-prev{left:18px}
.hero-next{right:18px}

/* dash indicators */
/* Dots slider ke NEECHE, page ke center mein */
.hero-dots{
  position:static;
  display:flex;gap:9px;align-items:center;justify-content:center;
  width:100%;
  padding:14px 0;
  background:transparent;backdrop-filter:none;
  border-radius:0
}
.hero-dots button{
  width:32px;height:3px;border:0;padding:0;border-radius:3px;cursor:pointer;
  background:rgba(27,28,31,.35);transition:.28s
}
.hero-dots button:hover{background:rgba(27,28,31,.6)}
.hero-dots button.on{background:var(--red);width:52px;height:4px}

/* =====================  2. COOKIE POPUP  ============================ */
.cookie-pop{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
.cookie-pop[hidden]{display:none}
.ck-backdrop{position:absolute;inset:0;background:rgba(15,16,19,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .25s ease}
.cookie-pop.on .ck-backdrop{opacity:1}

.ck-card:focus{outline:none}
.ck-card{
  position:relative;width:100%;max-width:410px;
  background:#fff;border-radius:16px;padding:30px 28px 26px;text-align:center;
  box-shadow:0 24px 60px rgba(16,24,40,.24);
  transform:translateY(14px) scale(.97);opacity:0;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .28s ease
}
.cookie-pop.on .ck-card{transform:none;opacity:1}

.ck-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;margin-bottom:14px;
  background:rgba(255,40,54,.09);color:var(--red)
}
.ck-ico svg{width:28px;height:28px}

.ck-title{margin:0 0 8px;font-family:var(--font-display,'Poppins'),sans-serif;
  font-size:19px;font-weight:700;color:var(--ink,#1B1C1F)}
.ck-text{margin:0 0 20px;font-size:13.5px;line-height:1.6;color:#5C5F66}

.ck-actions{display:flex;gap:10px}
.ck-card .ck-btn{
  flex:1 1 0;border:0;cursor:pointer;font-family:var(--font-body);
  font-size:13.5px;font-weight:600;padding:11px 16px;border-radius:9px;
  background:var(--red);color:#fff;transition:background .18s,transform .12s
}
.ck-card .ck-btn:hover{background:var(--red-deep,#D01E2A)}
.ck-card .ck-btn:active{transform:translateY(1px)}
.ck-card .ck-btn.ghost{background:#fff;border:1px solid #DDE0E4;color:#4A4D53}
.ck-card .ck-btn.ghost:hover{background:#F5F6F7;border-color:#C9CDD2}
.ck-card .ck-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@media (max-width:480px){
  .cookie-pop{padding:16px;align-items:flex-end}         /* phone pe neeche se aata hai */
  .ck-card{max-width:none;border-radius:18px;padding:26px 20px 22px}
  .cookie-pop .ck-card{transform:translateY(24px)}
  .cookie-pop.on .ck-card{transform:none}
  .ck-title{font-size:17.5px}
  .ck-text{font-size:13px;margin-bottom:18px}
  .ck-ico{width:50px;height:50px}
  .ck-ico svg{width:25px;height:25px}
}
@media (prefers-reduced-motion:reduce){
  .ck-card,.ck-backdrop{transition:none}
  .ck-card{transform:none}
}

/* =====================  3. COLLECTION BANNERS  ====================== */
.collection-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:38px 0}
.coll-card{
  position:relative;border-radius:6px;overflow:hidden;background:var(--grey-100);
  display:flex;align-items:center;min-height:190px
}
.coll-card .txt{padding:26px 24px;position:relative;z-index:2;max-width:58%}
.coll-card .save{font-size:12.5px;color:var(--grey-600);margin-bottom:4px;font-family:var(--font-mono)}
.coll-card .save b{color:var(--red)}
.coll-card h3{font-size:25px;font-weight:800;margin-bottom:16px}
.coll-card .pic{position:absolute;right:0;top:0;bottom:0;width:48%}
.coll-card .pic img{width:100%;height:100%;object-fit:contain;object-position:center}
.coll-card::after{
  content:"";position:absolute;left:52%;top:0;bottom:0;width:110px;z-index:1;
  background:linear-gradient(90deg,var(--grey-100),rgba(242,242,241,0))
}

/* =====================  4. PRODUCT GRID / CARD  ===================== */
.p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pc{
  border:1px solid var(--grey-300);border-radius:6px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:.28s;position:relative
}
.pc:hover{box-shadow:0 14px 32px rgba(0,0,0,.10);transform:translateY(-4px)}
/* Sabhi product photos ka background ek jaisa halka grey dikhe.
   Zyada-tar photos ka apna background safed hai — 'multiply' se wo safed
   card ke grey mein ghul jaata hai, photo chhede bina. */
.pc-img{position:relative;background:var(--pc-bg,#F6F5F8);aspect-ratio:1/1;overflow:hidden;isolation:isolate}
.pc-img img{
  width:100%;height:100%;object-fit:contain;padding:4px;transition:.5s;
  mix-blend-mode:multiply;background:transparent
}
/* badges/buttons blend se bahar rahein */
.pc-img .pc-tag,.pc-img .pc-wish,.pc-img .pc-rate{mix-blend-mode:normal;isolation:isolate}
.pc:hover .pc-img img{transform:scale(1.06)}
.pc-tag{
  position:absolute;top:0;left:0;background:var(--red);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 22px;transform:rotate(-45deg) translate(-24px,-2px);
  transform-origin:center;width:110px;text-align:center
}
.pc-wish{
  position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:#fff;
  border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.12);transition:.2s;padding:0
}
.pc-wish svg{width:15px;height:15px;stroke:var(--grey-800);fill:none;stroke-width:2}
.pc-wish:hover,.pc-wish.on{background:var(--red)}
.pc-wish:hover svg,.pc-wish.on svg{stroke:#fff;fill:#fff}
.pc-rate{
  position:absolute;left:10px;bottom:10px;background:#fff;border-radius:3px;
  font-size:11px;font-weight:700;padding:2px 7px;display:flex;align-items:center;gap:3px;
  box-shadow:0 2px 6px rgba(0,0,0,.12)
}
.pc-rate i{color:#F5A623;font-style:normal}
.pc-body{padding:12px 13px 0;flex:1}
.pc-body .brand{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:14px;font-weight:700;font-family:var(--font-display);margin-bottom:3px;min-width:0
}
.pc-body .brand > a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pc-swatch{display:flex;align-items:center;gap:3px;flex-shrink:0}
.pc-swatch span{width:11px;height:11px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.1)}
.pc-swatch em{font-style:normal;font-size:10.5px;color:var(--grey-600)}
.pc-body .title{font-size:12.5px;color:var(--grey-600);margin-bottom:7px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pc-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-bottom:11px}
.pc-price .now{font-size:15px;font-weight:800;font-family:var(--font-display)}
.pc-price .was{font-size:12.5px;color:var(--grey-600);text-decoration:line-through}
.pc-price .off{font-size:12px;color:var(--red);font-weight:700}
.pc-offer{
  border-top:1px solid var(--grey-300);padding:8px 13px;font-size:11.5px;color:var(--grey-600);
  display:flex;align-items:center;gap:6px
}
.pc-offer svg{width:13px;height:13px;stroke:var(--red);fill:none;stroke-width:2;flex-shrink:0}
.pc-actions{display:flex;gap:6px;padding:0 13px 12px}
.pc-actions a{
  flex:1;text-align:center;font-size:12px;font-weight:600;padding:8px 4px;border-radius:4px;transition:.2s
}
.pc-actions .add{background:var(--red);color:#fff}
.pc-actions .add:hover{background:var(--red-deep)}
.pc-actions .view{border:1px solid var(--grey-300);color:var(--grey-800)}
.pc-actions .view:hover{border-color:var(--ink)}

.sec-cta{text-align:center;margin-top:34px}

/* =====================  5. DARK PARALLAX BANNER  ==================== */
.promo-band{
  position:relative;min-height:340px;display:flex;align-items:center;
  background:var(--grey-950) center/cover no-repeat;overflow:hidden;margin:20px 0
}
.promo-band::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,16,18,.93) 30%,rgba(15,16,18,.72) 62%,rgba(15,16,18,.86))}
/* the wrap is a flex child, so it needs an explicit width or it shrinks to its text */
.promo-band .wrap{
  position:relative;z-index:2;width:100%;padding-top:44px;padding-bottom:44px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center
}
.promo-band .word{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;
  font-family:var(--font-display);font-weight:900;font-size:64px;color:rgba(255,255,255,.06);z-index:1;letter-spacing:.08em
}
.promo-band .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.promo-band h2{color:#fff;font-size:36px;font-weight:800;max-width:18ch;margin-bottom:12px;line-height:1.14}
.promo-band p{color:#C7C8CB;font-size:14.5px;max-width:50ch;margin-bottom:24px}

/* right-hand stat panel — fills the space the copy used to leave empty */
.promo-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.promo-stat{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:20px 18px;backdrop-filter:blur(3px);transition:.25s
}
.promo-stat:hover{background:rgba(255,255,255,.1);border-color:rgba(255,40,54,.5);transform:translateY(-3px)}
.promo-stat b{
  display:block;font-family:var(--font-display);font-size:27px;font-weight:800;color:#fff;
  line-height:1;margin-bottom:6px
}
.promo-stat b em{font-style:normal;color:var(--red);font-size:19px}
.promo-stat span{font-size:12.5px;color:#B4B6BA;line-height:1.4;display:block}
.promo-stat.wide{grid-column:1 / -1;display:flex;align-items:center;gap:14px}
.promo-stat.wide svg{width:30px;height:30px;stroke:var(--red);fill:none;stroke-width:1.5;flex-shrink:0}
.promo-stat.wide b{font-size:15px;margin-bottom:2px}

/* =====================  6. TABS  ==================================== */
.tab-bar{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin-bottom:28px}
.tab-bar button{
  background:none;border:0;cursor:pointer;font-family:var(--font-body);font-size:13.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-600);
  padding:4px 0;position:relative;transition:.2s
}
.tab-bar button::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.tab-bar button.on{color:var(--red)}
.tab-bar button.on::after{transform:scaleX(1)}

/* ── Hover: cursor jaate hi text red aur neeche ki line slide hoke aaye ── */
.tab-bar button:hover{color:var(--red);transform:translateY(-1px)}
.tab-bar button:hover::after{transform:scaleX(1);background:rgba(255,40,54,.55)}
.tab-bar button.on:hover::after{background:var(--red)}
.tab-bar button:active{transform:translateY(0)}
.tab-bar button:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:3px}
/* touch devices pe hover chipakta hai — wahan band */
@media (hover:none){
  .tab-bar button:hover{color:var(--grey-600);transform:none}
  .tab-bar button:hover::after{transform:scaleX(0)}
  .tab-bar button.on:hover{color:var(--red)}
  .tab-bar button.on:hover::after{transform:scaleX(1)}
}
.tab-panel{display:none}
.tab-panel.on{display:block;animation:heroFade .35s ease}

/* =====================  7. SERVICE STRIP  =========================== */
.service-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--grey-300);border-bottom:1px solid var(--grey-300);margin:20px 0
}
.svc{display:flex;align-items:center;gap:14px;padding:26px 22px;justify-content:center}
.svc + .svc{border-left:1px solid var(--grey-300)}
.svc svg{width:38px;height:38px;stroke:var(--red);fill:none;stroke-width:1.4;flex-shrink:0}
.svc h4{font-size:14.5px;font-weight:700;margin-bottom:2px}
.svc p{font-size:12.5px;color:var(--grey-600)}

/* =====================  8. BLOG  ==================================== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bc{text-align:center}
.bc .pic{aspect-ratio:16/11;overflow:hidden;border-radius:4px;background:var(--soft);margin-bottom:16px}
.bc .pic img{width:100%;height:100%;object-fit:contain;padding:6px;transition:.5s}
.bc:hover .pic img{transform:scale(1.05)}
.bc .date{font-size:12.5px;color:var(--red);font-family:var(--font-mono);margin-bottom:6px}
.bc h3{font-size:16px;font-weight:700;line-height:1.35;margin-bottom:7px}
.bc h3 a:hover{color:var(--red)}
.bc .by{font-size:12px;color:var(--grey-600)}

/* =====================  9. GALLERY STRIP  =========================== */
.gallery-head{text-align:center;padding:44px 0 20px}
.gallery-head h2{font-size:26px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.gallery-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.gallery-strip a{position:relative;aspect-ratio:1/1;overflow:hidden;display:block;
  background:var(--pc-bg,#E9E8EF);isolation:isolate}
.gallery-strip img{width:100%;height:100%;object-fit:contain;padding:10px;transition:.5s;
  mix-blend-mode:multiply}
.gallery-strip a:hover img{transform:scale(1.08)}
.gallery-strip a::after{
  content:"";position:absolute;inset:0;background:rgba(255,40,54,.0);transition:.3s
}
.gallery-strip a:hover::after{background:rgba(255,40,54,.22)}

/* =====================  10. LOGO ROW  =============================== */
.logo-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:center;
  padding:44px 0;border-top:1px solid var(--grey-300)
}
.logo-row div{
  display:flex;align-items:center;justify-content:center;height:84px;
  filter:grayscale(1);opacity:.55;transition:.3s;text-align:center;padding:10px
}
.logo-row div:hover{filter:none;opacity:1}
.logo-row img{max-height:74px;width:auto;object-fit:contain}
.logo-row .txt-logo{
  font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey-800);border:1px solid var(--grey-300);
  border-radius:2px;width:100%;height:100%;flex-direction:column;gap:2px
}
.logo-row .txt-logo small{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--grey-600);font-weight:400}

/* =====================  RESPONSIVE  ================================= */
@media (max-width:1024px){
  .p-grid{grid-template-columns:repeat(3,1fr)}
  .gallery-strip{grid-template-columns:repeat(4,1fr)}
  .logo-row{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .sec{padding:42px 0}
  .hero-arrow{width:34px;height:34px}
  .hero-arrow svg{width:15px;height:15px}
  .hero-prev{left:8px}
  .hero-next{right:8px}
  /* only go portrait when the phone-shaped artwork is really present,
     otherwise a wide banner would be cropped down to a sliver */
  .hero-slider.has-mobile-art{aspect-ratio:var(--hero-ratio-mobile)}
  /* the phone banner fills the screen — arrows would sit on the artwork, so swipe + dots only */
  .hero-arrow{display:none}
  .hero-dots{gap:6px;padding:12px 0}
  .hero-dots button{width:20px;height:2.5px}
  .hero-dots button.on{width:34px;height:3px}
  .collection-row{grid-template-columns:1fr;gap:16px;padding:26px 0}
  .blog-grid{grid-template-columns:1fr;gap:30px}
  .service-strip{grid-template-columns:1fr}
  .svc + .svc{border-left:0;border-top:1px solid var(--grey-300)}
  .promo-band h2{font-size:25px;max-width:none}
  .promo-band .word{display:none}
  .promo-band .wrap{grid-template-columns:1fr;gap:26px;padding-top:34px;padding-bottom:34px}
  .promo-band p{max-width:none}
  .sec-head h2{font-size:25px}
}
@media (max-width:600px){
  .p-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .pc-body{padding:10px 10px 0}
  .pc-body .brand{font-size:13px}
  .pc-actions{padding:0 10px 10px;flex-direction:column}
  .pc-offer{padding:7px 10px;font-size:10.5px}
  .gallery-strip{grid-template-columns:repeat(3,1fr)}
  .logo-row{grid-template-columns:repeat(2,1fr);padding:30px 0}
  .tab-bar{gap:18px}
  .tab-bar button{font-size:12px}
  .coll-card{min-height:158px}
  .coll-card h3{font-size:20px}
  .coll-card .txt{padding:18px 16px}
  .promo-stats{gap:10px}
  .promo-stat{padding:14px 13px}
  .promo-stat b{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ═══════════════ Trust / Certification Bar (below hero) ═══════════════ */
.trust-bar{background:#0c0d0f;color:#fff;border-bottom:1px solid #1e1f22}
.trust-row{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;align-items:center;
  flex-wrap:wrap;min-height:88px}
.trust-row.top{border-bottom:1px solid #1e1f22}
.trust-item{display:flex;align-items:center;gap:10px;padding:14px 22px;flex:1 1 auto;
  border-right:1px solid #1e1f22;min-height:60px}
.trust-item:last-child{border-right:0}
.trust-item .ic{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1px solid #3a3b3f;border-radius:50%;color:#fff}
.trust-item .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.trust-item .ic.filled{background:var(--red);border-color:var(--red)}
.trust-item .txt{display:flex;flex-direction:column;line-height:1.3}
.trust-item .txt b{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap}
.trust-item .txt small{font-family:var(--font-mono,monospace);font-size:9.5px;letter-spacing:.04em;
  color:#8a8b90;white-space:nowrap;margin-top:2px}
.trust-item.made-india .txt b{color:var(--red);font-size:13px}
.trust-item.made-india .flag{display:flex;gap:2px;margin-top:4px}
.trust-item.made-india .flag span{width:16px;height:3px;border-radius:1px}
.trust-item.made-india .flag span:nth-child(1){background:#FF9933}
.trust-item.made-india .flag span:nth-child(2){background:#fff}
.trust-item.made-india .flag span:nth-child(3){background:#128807}

.trust-item.logo-item{padding:12px 24px;justify-content:center}
.trust-item.logo-item img{max-height:46px;width:auto;display:block}

.trust-row.bottom{min-height:56px}
.trust-row.bottom .trust-item{gap:12px}
.trust-row.bottom .trust-item a{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.trust-row.bottom .trust-item a:hover .txt{color:var(--red)}
.trust-social{margin-left:auto;display:flex;align-items:center;gap:14px;padding:14px 0 14px 22px}
.trust-social span{font-family:var(--font-mono,monospace);font-size:10.5px;letter-spacing:.08em;
  color:#8a8b90;white-space:nowrap}
.trust-social a{width:32px;height:32px;border-radius:50%;border:1px solid #3a3b3f;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:.18s;flex-shrink:0}
.trust-social a:hover{background:var(--red);border-color:var(--red)}
.trust-social a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

@media(max-width:1024px){
  .trust-row{min-height:auto}
  .trust-item{flex:1 1 33.33%;border-bottom:1px solid #1e1f22}
}
@media(max-width:640px){
  .trust-item.logo-item img{max-height:38px}
  .trust-item{flex:1 1 50%;padding:12px 14px}
  .trust-item .txt b{font-size:11px}
  .trust-item .txt small{font-size:8.5px}
  .trust-social{margin-left:0;flex:1 1 100%;justify-content:center;padding:14px 0 0;border-top:1px solid #1e1f22}
}

/* ═══════════════ About / Company Intro (homepage) ═══════════════ */
.about-intro{padding:64px 0;background:#fff}
.about-intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.about-intro-copy .eyebrow{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;
  color:var(--red);font-weight:500;margin-bottom:10px;display:block
}
.about-intro-copy h2{
  font-size:clamp(26px,3vw,36px);font-weight:800;line-height:1.22;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 20px;max-width:560px;
  position:relative;padding-bottom:30px
}
.about-intro-copy h2 em{font-style:normal;color:var(--red)}
.about-intro-grid.no-image .about-intro-copy h2::before{
  content:"";position:absolute;left:50%;bottom:7px;
  width:9px;height:9px;background:var(--red);
  transform:translateX(-48px) rotate(-45deg)
}
.about-intro-grid.no-image .about-intro-copy h2::after{
  content:"";position:absolute;left:50%;bottom:10.5px;transform:translateX(-36px);
  width:85px;height:2px;background:var(--red)
}
.about-intro-copy p{font-size:15px;line-height:1.85;color:var(--grey-600);margin:0 0 18px}
.about-intro-copy p:last-of-type{margin-bottom:26px}
.btn-outline-red{
  display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:2px;
  border:1.5px solid var(--red);color:var(--red);font-weight:700;font-size:14px;
  text-decoration:none;transition:.18s
}
.btn-outline-red:hover{background:var(--red);color:#fff}
.about-intro-fig{position:relative;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 50px rgba(15,23,42,.14)}
.about-intro-fig img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:700/500}

.about-intro-grid.no-image{display:block;max-width:820px;margin:0 auto;text-align:center}
.about-intro-grid.no-image .about-intro-copy h2{max-width:100%;margin-left:auto;margin-right:auto}
.about-intro-grid.no-image .about-intro-copy p{text-align:left}

@media(max-width:900px){
  .about-intro{padding:48px 0}
  .about-intro-grid{grid-template-columns:1fr;gap:32px}
  .about-intro-fig{order:-1;max-width:420px;margin:0 auto}
  .about-intro-copy h2{max-width:100%}
}

/* ═══════════════════════════════════════════════════════
   HERO SLIDER 2.0 — layered (background img + product img +
   REAL HTML text) so headings/copy never blur when zoomed.
   ═══════════════════════════════════════════════════════ */
/* width:100% zaroori hai — warna aspect-ratio + min-height milkar width ko
   viewport se chauda bana dete hain aur slider ka daaya hissa kat jaata hai */
.hero-slider2{position:relative;width:100%;max-width:100%;aspect-ratio:1920/686;overflow:hidden;background:#f4f4f4;min-height:480px}
.hs2-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease;pointer-events:none}
.hs2-slide.active{opacity:1;visibility:visible;pointer-events:auto}
.hs2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hs2-product{
  position:absolute;right:7%;bottom:0;height:74%;width:auto;object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.22))
}
.hs2-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 4.5% 0 6%;max-width:52%;text-decoration:none;color:inherit}

.hs2-title{margin:0 0 .5em;font-family:var(--font-display,'Poppins'),sans-serif;line-height:1.06}
.hs2-title span{display:block;font-size:clamp(20px,2.5vw,34px);font-weight:400;color:#2b2d31;letter-spacing:.01em}
.hs2-title b{display:block;font-size:clamp(30px,4.6vw,60px);font-weight:800;color:#15161a;letter-spacing:-.01em}
.hs2-title span em{font-style:normal;color:var(--red);font-family:'Brush Script MT',cursive;font-weight:400}
.hs2-title::after{content:"";display:block;width:70px;height:3px;background:var(--red);margin-top:.35em}

.hs2-title.alt{text-align:left}
.hs2-title.alt::after{display:none}
.hs2-title.alt em{color:var(--red);font-style:normal}
.hs2-slide.dark .hs2-title.alt{color:#fff;font-size:clamp(26px,3.6vw,46px);font-weight:800}

.hs2-sub{font-size:clamp(13px,1.15vw,16px);line-height:1.65;color:#4a4c52;margin:0 0 22px;max-width:440px}
.hs2-sub em{font-style:normal;color:var(--red);font-weight:600}
.hs2-slide.dark .hs2-sub{color:rgba(255,255,255,.72);max-width:none;text-align:left;font-size:clamp(14px,1.3vw,18px)}

.hs2-feats{display:flex;gap:26px;margin-top:8px}
.hs2-feat{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hs2-feat-ic{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--red);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hs2-feat-ic svg{width:20px;height:20px;stroke:var(--red);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.hs2-feat b{font-size:12.5px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.02em;line-height:1.4}
.hs2-feat small{display:block;font-size:11px;font-weight:500;color:#6b6d72;letter-spacing:.01em;text-transform:none !important}

/* centered/dark layout (Power Solutions slide) */
.hs2-slide.dark .hs2-content{max-width:100%;align-items:center;text-align:center;padding:0 4%;
  justify-content:flex-end;padding-bottom:3%}
.hs2-slide.dark .hs2-title.alt{text-align:center;white-space:normal;font-size:clamp(16px,2.1vw,26px)}
.hs2-slide.dark .hs2-product{
  left:50%;right:auto;bottom:auto;top:1%;height:auto;width:56%;
  transform:translateX(-50%);
  filter:none
}

@media(max-width:900px){
  /* Slider — grid stacking: height apne aap sabse lambi slide jitni,
     na content katega na neeche khali jagah bachegi */
  .hero-slider2{
    display:grid;
    aspect-ratio:auto;background:#f4f4f4;
    position:relative;overflow:hidden;
    height:auto;min-height:0;
  }
  .hs2-slide{
    grid-area:1/1;
    position:relative;inset:auto;
    opacity:0;visibility:hidden;
    display:flex;flex-direction:column;
    /* center nahi — top se shuru, taki har slide ka text ek hi height par ho */
    justify-content:flex-start;align-items:center;
    height:auto;min-height:0;
    transition:opacity .4s ease;
    padding:18px 0 22px;
  }
  .hs2-slide.active{opacity:1;visibility:visible;}
  .hs2-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
  /* text block sabhi slides mein ek hi unchai le — warna slide badalne par
     heading/icons upar-neeche khiskte hain */
  .hs2-content{position:relative;z-index:1;order:1;display:flex;flex-direction:column;
    align-items:center;text-align:center;max-width:100%;width:100%;
    padding:8px 18px 4px;justify-content:flex-start;flex:0 0 auto;
    min-height:clamp(210px,56vw,268px)}
  /* product ki HEIGHT fix — width alag-alag ho sakti hai (chaudi group photo bhi
     utni hi jagah leti hai), isliye slide change par kuch nahi hilta */
  .hs2-product{position:relative;z-index:1;order:2;left:auto;right:auto;top:auto;bottom:auto;
    transform:none;
    /* 36vw isliye — sabse chaudi photo (group, aspect 2.64) bhi screen ke andar
       poori height bhar le. Isse slot bhi fix rehta hai aur khali jagah bhi nahi bachti. */
    height:clamp(105px,36vw,230px);width:auto;max-width:96%;
    object-fit:contain;object-position:center bottom;
    margin:6px auto 0;display:block;flex:0 0 auto}
  .hs2-title span,.hs2-title b{text-align:center}
  .hs2-title::after{margin-left:auto;margin-right:auto}
  .hs2-sub{margin-left:auto;margin-right:auto;text-align:center}
  .hs2-feats{justify-content:center;flex-wrap:nowrap;gap:8px;margin-top:auto;padding-top:14px;width:100%}
  .hs2-feat{flex:1 1 0;min-width:0}
  .hs2-feat-ic{width:32px;height:32px}
  .hs2-feat-ic svg{width:16px;height:16px}
  .hs2-feat b{font-size:10.5px;white-space:nowrap}
  .hs2-feat small{font-size:9px;white-space:nowrap}
  .hs2-feat{align-items:center;text-align:center}

  /* dark slide — ab isme bhi feats hain, baaki slides jaisa flow */
  .hs2-slide.dark .hs2-content{padding:8px 18px 4px;order:2;justify-content:flex-start}
  .hs2-slide.dark .hs2-product{
    width:78%;max-width:290px;
    margin:0 auto 8px;order:1;
    left:auto;right:auto;
    transform:none;
    position:relative;
    display:block;
  }
  .hs2-slide.dark .hs2-title.alt{font-size:clamp(17px,4.4vw,24px)}

  .hero-dots{position:static;justify-content:center;margin:0;padding:12px 0}
  .hero-arrow{display:none}
}

/* ============================ SOLUTIONS BY INDUSTRY ======================== */
.industries-sec{background:#fff}
.industries-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:32px
}
.industry-card{
  display:block;
  text-decoration:none;
  border:1.5px solid #e8e8e8;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  transition:box-shadow .2s,transform .2s;
  color:inherit
}
.industry-card:hover{
  box-shadow:0 6px 24px rgba(0,0,0,.10);
  transform:translateY(-3px)
}
.industry-img{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#f4f4f4
}
.industry-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease
}
.industry-card:hover .industry-img img{transform:scale(1.04)}
.industry-label{
  font-weight:700;
  font-size:15px;
  text-align:center;
  padding:14px 12px 16px;
  color:var(--ink,#1B1C1F);
  letter-spacing:.01em
}

@media(min-width:768px){
  .industries-grid{
    grid-template-columns:repeat(3,1fr);
    gap:22px
  }
  .industry-label{font-size:16px}
}
@media(min-width:1100px){
  .industries-grid{gap:28px}
}

/* ============================ TRANSFORMER SUB-CATEGORY HEADERS ============= */
.transformer-sub-head{
  display:flex;
  align-items:center;
  margin:28px 0 16px;
  gap:12px
}
.transformer-sub-head:first-child{margin-top:4px}
.transformer-sub-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:15px;
  color:var(--ink,#1B1C1F);
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:7px 18px 7px 12px;
  border-left:3px solid var(--red,#FF2836);
  background:#f9f9f9;
  border-radius:0 6px 6px 0
}
.transformer-sub-label svg{
  width:18px;height:18px;
  stroke:var(--red,#FF2836);
  flex-shrink:0
}
.transformer-sub-head::after{
  content:'';
  flex:1;
  height:1px;
  background:#ebebeb
}

/* ============================ TRANSFORMER SIDE-BY-SIDE COLS ================ */
.transformer-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start
}
.transformer-col .transformer-sub-head{margin-top:0}
.transformer-col .p-grid{
  grid-template-columns:repeat(2,1fr)
}
@media(max-width:700px){
  .transformer-cols{
    grid-template-columns:1fr;
    gap:8px
  }
}

/* ============================ WHY SERVOLINK SECTION ======================= */
.why-servolink-sec{background:#fff}
.why-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:36px
}
.why-card{
  border:1.5px solid #efefef;
  border-radius:14px;
  padding:28px 24px 26px;
  background:#fff;
  transition:box-shadow .2s,transform .2s
}
.why-card:hover{
  box-shadow:0 6px 24px rgba(0,0,0,.08);
  transform:translateY(-3px)
}
.why-icon{
  width:60px;height:60px;
  background:#fff0f1;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px
}
.why-icon svg{
  width:28px;height:28px;
  stroke:var(--red,#FF2836)
}
.why-card h4{
  font-size:17px;
  font-weight:700;
  color:var(--ink,#1B1C1F);
  margin:0 0 8px
}
.why-card p{
  font-size:14px;
  color:#666;
  line-height:1.55;
  margin:0
}

@media(min-width:768px){
  .why-grid{
    grid-template-columns:repeat(4,1fr);
    gap:24px
  }
}
@media(max-width:480px){
  .why-card{padding:22px 18px 20px}
  .why-icon{width:52px;height:52px}
  .why-icon svg{width:24px;height:24px}
}

/* ============================ CUSTOMER REVIEWS + MAP ====================== */
.reviews-map-sec {
  background: #f7f7f8;
  padding-bottom: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.reviews-map-sec .wrap {
  overflow: hidden;
}

/* ---- Google Rating Bar ---- */
.google-rating-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  margin: 20px 0 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.g-logo svg { width: 34px; height: 34px; flex-shrink: 0; }
.g-score { display: flex; align-items: center; gap: 8px; }
.g-number { font-size: 30px; font-weight: 800; color: #1B1C1F; line-height: 1; }
.g-stars { display: flex; gap: 2px; }
.g-stars svg { width: 17px; height: 17px; }
.g-label { font-size: 12px; color: #777; }
.g-name { font-size: 12px; font-weight: 600; color: #555; margin-left: auto; }

/* ---- Slider wrapper ---- */
.reviews-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ---- Track: flex row, all cards in one line ---- */
.reviews-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
  transition: transform 0.4s ease;
  will-change: transform;
}

/* ---- Each card ---- */
.review-card {
  flex: 0 0 calc(25% - 12px);
  background: #fff;
  border-radius: 14px;
  padding: 20px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  box-sizing: border-box;
}
.rv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rv-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.rv-meta strong { display: block; font-size: 13px; font-weight: 700; color: #1B1C1F; }
.rv-meta span { font-size: 11px; color: #999; }
.rv-stars { display: flex; gap: 2px; margin-bottom: 8px; }
.rv-stars svg { width: 14px; height: 14px; }
.rv-text { font-size: 12.5px; color: #555; line-height: 1.55; margin: 0; }

/* ---- Dots ---- */
.rv-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  padding-bottom: 4px;
}
.rv-dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: none; background: #ddd; cursor: pointer; padding: 0;
  transition: background .2s, width .2s;
}
.rv-dot.on { background: var(--red,#FF2836); width: 22px; border-radius: 5px; }



/* ==== MOBILE (≤ 700px): 2 cards visible, slider ==== */
@media (max-width: 700px) {
  .review-card { flex: 0 0 calc(50% - 8px); }
  .rv-dots { display: flex; }
  .g-name { display: none; }
}

/* ==== TABLET (701px–1099px): 3 cards visible ==== */
@media (min-width: 701px) and (max-width: 1099px) {
  .review-card { flex: 0 0 calc(33.333% - 11px); }
  .rv-dots { display: flex; }
  .gmap-bar { flex-direction: row; align-items: center; justify-content: space-between; padding: 16px 24px; }
  .gmap-btns { flex: 0 0 auto; }
  .gmap-btn { padding: 11px 20px; flex: none; }
  .gmap-wrap iframe { height: 340px; }
}

/* ==== DESKTOP (≥ 1100px): 4 cards visible ==== */
@media (min-width: 1100px) {
  .review-card { flex: 0 0 calc(25% - 12px); }
  .rv-dots { display: flex; }
  .gmap-bar { flex-direction: row; align-items: center; justify-content: space-between; padding: 18px 28px; }
  .gmap-btns { flex: 0 0 auto; gap: 14px; }
  .gmap-btn { padding: 12px 28px; flex: none; }
  .gmap-wrap iframe { height: 380px; }
}

/* ---- Google Map ---- */
.gmap-outer {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: #fff;
}
/* Aspect-ratio wrapper — locks iframe to container width */
.gmap-iframe-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 35%; /* height = 35% of width */
  height: 0;
  overflow: hidden;
}
.gmap-iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 700px) {
  .gmap-iframe-wrap { padding-bottom: 60%; }
}
.gmap-bar {
  background: #fff;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}
.gmap-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #1B1C1F;
}
.gmap-label svg { width: 18px; height: 18px; stroke: var(--red,#FF2836); flex-shrink: 0; }
.gmap-btns { display: flex; gap: 10px; }
.gmap-btn {
  flex: 1;
  padding: 12px 8px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  transition: opacity .2s;
  display: block;
  box-sizing: border-box;
}
.gmap-btn.primary { background: var(--red,#FF2836); color: #fff; }
.gmap-btn.outline { border: 2px solid var(--red,#FF2836); color: var(--red,#FF2836); background: #fff; }
.gmap-btn:hover { opacity: .85; }

@media (min-width: 701px) {
  .gmap-outer iframe { height: 420px; }
  .gmap-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 18px 40px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .gmap-btns { flex: 0 0 auto; gap: 14px; }
  .gmap-btn { padding: 12px 28px; flex: none; }
}

/* ============================ KVA CALCULATOR SECTION ====================== */
.kva-calc-sec{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#F2F3F6 32%,#EDEFF3 100%);
}
/* halka dot pattern */
.kva-calc-sec::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(27,28,31,.055) 1.2px, transparent 1.2px);
  background-size:20px 20px;
}
.kva-calc-sec > .wrap{position:relative;z-index:1}

.kva-calc-inner{display:grid;grid-template-columns:1fr;gap:22px}

/* ───────── LEFT: dark panel ───────── */
.kva-calc-copy{
  position:relative;overflow:hidden;border-radius:22px;
  padding:34px 30px;color:#fff;
  background:linear-gradient(145deg,#212328 0%,#15161A 58%,#1E2026 100%);
  box-shadow:0 18px 40px rgba(16,24,40,.18);
}
/* product image */
.kva-calc-copy::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/assets/images/banners/kva-calc-bg.webp") center center / cover no-repeat;
  opacity:.30;filter:grayscale(.25);
}
/* dark layer — text saaf padhe */
.kva-calc-copy::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(21,22,26,.90) 0%,rgba(21,22,26,.72) 45%,rgba(21,22,26,.86) 100%);
}
.kva-calc-copy > *{position:relative;z-index:1}

.kc-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 11px;border-radius:999px;
  background:rgba(255,40,54,.14);border:1px solid rgba(255,40,54,.35);
  color:#FF6A73;font-size:11.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
}
.kc-badge svg{width:15px;height:15px;color:var(--red,#FF2836)}

.kva-calc-copy h2{
  margin:16px 0 10px;color:#fff;font-size:30px;line-height:1.22;font-weight:800;letter-spacing:-.01em;
}
.kva-calc-copy h2 em{font-style:normal;color:var(--red,#FF2836)}
.kva-calc-copy p{color:#B9BCC3;font-size:14.5px;line-height:1.65;margin:0}

.kc-points{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.kc-points li{display:flex;align-items:center;gap:11px;font-size:13.5px;color:#E3E4E8}
.kc-tick{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;
  background:rgba(255,40,54,.16);color:var(--red,#FF2836);
  display:flex;align-items:center;justify-content:center
}
.kc-tick svg{width:12px;height:12px}

.kc-call{
  margin-top:24px;display:inline-flex;align-items:center;gap:12px;
  padding:12px 18px 12px 12px;border-radius:14px;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  transition:background .2s,border-color .2s,transform .2s
}
.kc-call:hover{background:rgba(255,40,54,.14);border-color:rgba(255,40,54,.4);transform:translateY(-2px)}
.kc-call-ic{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--red,#FF2836);color:#fff;display:flex;align-items:center;justify-content:center
}
.kc-call-ic svg{width:17px;height:17px}
.kc-call span{display:flex;flex-direction:column;gap:2px}
.kc-call em{font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9A9DA5}
.kc-call b{font-size:15px;font-weight:700;color:#fff}

/* ───────── RIGHT: form card ───────── */
.kva-calc-form{
  background:#fff;border:1px solid #ECEEF1;border-radius:22px;
  padding:30px 28px;box-shadow:0 18px 40px rgba(16,24,40,.10);
  display:flex;flex-direction:column;gap:17px
}
.calc-field{display:flex;flex-direction:column;gap:9px}
.calc-field label{
  font-size:11.5px;font-weight:700;color:#7A7E86;
  letter-spacing:.09em;text-transform:uppercase
}

/* segmented toggle */
.calc-toggle{display:flex;gap:6px;padding:5px;border-radius:12px;background:#F2F3F6;border:1px solid #E7E9ED}
.tog-btn{
  flex:1;padding:11px 8px;border:0;border-radius:9px;background:transparent;
  font-family:var(--font-body);font-size:13.5px;font-weight:600;color:#6B6F77;
  cursor:pointer;transition:background .2s,color .2s,box-shadow .2s
}
.tog-btn:hover{color:var(--red,#FF2836)}
.tog-btn.on{
  background:var(--red,#FF2836);color:#fff;
  box-shadow:0 4px 12px rgba(255,40,54,.28)
}
.tog-btn.on:hover{color:#fff}

/* inputs */
.calc-load-row{display:flex;gap:10px}
.calc-load-row input,.calc-load-row select,.calc-select-full{
  border:1.5px solid #E2E4E9;border-radius:12px;background:#fff;
  font-family:var(--font-body);color:#1B1C1F;outline:none;
  transition:border-color .18s,box-shadow .18s
}
.calc-load-row input{flex:1;padding:13px 15px;font-size:16px;font-weight:600}
.calc-load-row select{padding:13px 12px;font-size:13.5px;font-weight:700;color:#333;cursor:pointer}
.calc-select-full{width:100%;padding:13px 15px;font-size:14px;color:#333;cursor:pointer}
/* apna chevron */
.calc-load-row select,.calc-select-full{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7E86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:15px;background-position:right 12px center;
  padding-right:34px
}
.calc-load-row input:focus,.calc-load-row select:focus,.calc-select-full:focus{
  border-color:var(--red,#FF2836);box-shadow:0 0 0 3px rgba(255,40,54,.12)
}

/* submit */
.calc-submit-btn{
  width:100%;padding:16px;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,var(--red,#FF2836) 0%,var(--red-deep,#D01E2A) 100%);
  color:#fff;font-family:var(--font-body);font-size:14.5px;font-weight:700;letter-spacing:.07em;
  box-shadow:0 10px 24px rgba(255,40,54,.28);
  transition:transform .18s,box-shadow .18s,filter .18s
}
.calc-submit-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,40,54,.36);filter:brightness(1.05)}
.calc-submit-btn:active{transform:translateY(0)}

/* result */
.calc-result{
  border:0;border-radius:16px;padding:20px 18px;text-align:center;line-height:1.55;
  background:linear-gradient(135deg,#FFF3F4 0%,#FFE9EB 100%);
  border:1.5px solid rgba(255,40,54,.28);
  font-size:14.5px;font-weight:600;color:#1B1C1F;
  animation:kcPop .35s cubic-bezier(.2,.8,.3,1)
}
.calc-result .rec-kva{display:block;font-size:34px;font-weight:800;line-height:1.1;color:var(--red,#FF2836)}
@keyframes kcPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* footnote */
.calc-footnote{font-size:12.5px;color:#8A8E96;text-align:center;margin:0}
.calc-footnote a{color:var(--red,#FF2836);font-weight:700;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.calc-footnote a:hover{border-bottom-color:var(--red,#FF2836)}

/* Desktop: side by side */
@media (min-width: 900px) {
  .kva-calc-inner{
    grid-template-columns:1fr 1.15fr;
    gap:34px;
    align-items:stretch;
  }
  .kva-calc-copy{display:flex;flex-direction:column;justify-content:center;padding:44px 40px}
  .kva-calc-copy h2{font-size:34px}
  .kva-calc-form{padding:36px 34px}
}

/* ==================== OUR SOLUTIONS ==================== */
.our-solutions-sec { background: #fff; padding: 28px 0 24px; }
.our-solutions-head {
  display: flex; align-items: center; gap: 14px;
  justify-content: center; margin-bottom: 20px;
}
.our-solutions-head h2 {
  font-size: 18px; font-weight: 800; letter-spacing: .06em;
  white-space: nowrap; margin: 0; color: #1B1C1F;
}
.our-solutions-head h2 span { color: var(--red,#FF2836); }
.our-solutions-line { flex: 1; height: 1.5px; background: #e0e0e0; }
.our-solutions-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1.5px solid #efefef;
  border-radius: 12px;
  overflow: hidden;
}
.sol-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 18px 10px;
  border-right: 1.5px solid #efefef;
  text-decoration: none; color: #1B1C1F;
  transition: background .18s;
  text-align: center;
}
.sol-card:last-child { border-right: none; }
.sol-card:hover { background: #fff5f5; }
.sol-icon {
  width: 44px; height: 44px; border-radius: 8px;
  background: #fff0f1; display: flex; align-items: center; justify-content: center;
}
.sol-icon svg { width: 22px; height: 22px; stroke: var(--red,#FF2836); }
.sol-info b { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; line-height: 1.3; display: block; }
.sol-info small { font-size: 10px; color: #888; line-height: 1.4; margin-top: 4px; display: block; }

@media (max-width: 600px) {
  .our-solutions-grid { grid-template-columns: repeat(3, 1fr); }
  .sol-card:nth-child(3) { border-right: none; }
  .sol-card:nth-child(4), .sol-card:nth-child(5) { border-top: 1.5px solid #efefef; }
  .sol-card:nth-child(5) { border-right: none; }
}

/* ==================== CONTACT BAR ==================== */
.hm-contact-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0; background: #f9f9f9;
  border-top: 1px solid #efefef; border-bottom: 1px solid #efefef;
}
.hm-contact-bar a {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px; font-size: 13px; font-weight: 600;
  color: #444; text-decoration: none;
  border-right: 1px solid #e0e0e0;
  transition: color .2s;
}
.hm-contact-bar a:last-child { border-right: none; }
.hm-contact-bar a svg { width: 16px; height: 16px; stroke: var(--red,#FF2836); flex-shrink: 0; }
.hm-contact-bar a:hover { color: var(--red,#FF2836); }
@media (max-width: 500px) {
  .hm-contact-bar { flex-direction: column; }
  .hm-contact-bar a { border-right: none; border-bottom: 1px solid #efefef; width: 100%; justify-content: center; }
  .hm-contact-bar a:last-child { border-bottom: none; }
}

/* ==================== COMBINED CRED + AVAILABLE BAR ==================== */
/* =====================================================================
   SERVOLINK — TRUST SECTION (Credentials + Available On + Action Bar)
   Responsive: Mobile → MacBook → Desktop
   ===================================================================== */

/* ── Wrapper: controls stacking order on mobile ── */
.hm-trust-wrapper {
  display: flex;
  flex-direction: column;
}

/* =====================================================================
   CREDENTIALS + AVAILABLE ON BAR
   Desktop: [cert cells ──── | vsep | ── AVAILABLE ON logos]
   Mobile:  stacked full-width, action bar floats to top via order
   ===================================================================== */
.hm-cred-avail-bar {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-top: 1px solid #E8EAED;
  border-bottom: 1px solid #E8EAED;
}

/* ── Mobile section heading (hidden desktop) ── */
.hm-mob-section-heading {
  display: none;
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  color: #555; text-transform: uppercase; text-align: center;
  padding: 14px 16px 6px; margin: 0;
}

/* ── LEFT: Cert panel ── */
.hm-cab-certs-panel {
  display: flex;
  flex-direction: column;
  flex: 2;
  border-right: 1px solid #E8EAED;
}
.hm-creds-row {
  display: flex;
  align-items: stretch;
  flex: 1;
}
.hm-cred-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 7px; padding: 16px 8px; text-align: center;
  flex: 1;
  border-right: 1px solid #E8EAED;
}
.hm-cred-cell:last-child { border-right: none; }
.hm-cred-cell img {
  max-height: 52px; max-width: 96px;
  object-fit: contain;
}
.hm-cred-cell span {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .04em; color: #555;
  line-height: 1.4; text-transform: uppercase;
}

/* Make in India — center, slight highlight */
.hm-mii-cell {
  flex: 0 0 148px;
  background: linear-gradient(180deg, rgba(255,164,0,.05) 0%, rgba(19,136,8,.05) 100%);
  border-left: 1px solid #E8EAED;
  border-right: 1px solid #E8EAED;
  position: relative;
}
.hm-mii-cell img {
  max-height: 90px; max-width: 120px;
}
.hm-mii-cell span {
  color: #444;
}

/* ── Vertical separator ── */
.hm-cab-vsep {
  width: 1px;
  background: #E8EAED;
  align-self: stretch;
  flex-shrink: 0;
}

/* ── RIGHT: Available On panel ── */
.hm-cab-avail-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1.1;
  padding: 12px 20px;
  gap: 10px;
}
.hm-avail-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: .14em; color: #999;
  text-transform: uppercase; margin: 0;
}
.hm-avail-logos {
  display: flex;
  align-items: center;
  gap: 20px;
}
.hm-avl-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 5px;
  text-decoration: none; transition: opacity .18s;
}
.hm-avl-item:hover { opacity: .72; }
.hm-avl-item img {
  max-height: 44px; max-width: 96px;
  object-fit: contain;
}
.hm-avl-item span {
  font-size: 9px; font-weight: 600;
  color: #777; text-align: center; line-height: 1.3;
}

/* Amazon: make black text visible */
.hm-avl-amazon img { /* keep original black/white logo as-is */ }

/* IndiaMART: desktop pe hide karo */
.hm-avl-indiamart { display: none; }

/* Official Shop: desktop pe show karo */
.hm-avl-shop { display: flex; }


/* =====================================================================
   ACTION BAR — single row on desktop
   ===================================================================== */
.hm-action-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border-top: 1px solid #E8EAED;
  border-bottom: 1px solid #E8EAED;
  padding: 0 20px;
  height: 64px;
}
.hm-action-card {
  display: flex; flex-direction: row;
  align-items: center;
  gap: 11px; padding: 0 20px; flex: 1;
  text-decoration: none; color: #333;
  transition: background .18s; height: 100%;
}
.hm-action-card:hover { background: rgba(255,40,54,.04); }

/* Pipe separator */
.hm-pipe {
  color: #D5D8DC; font-size: 22px; font-weight: 200;
  flex-shrink: 0; line-height: 1; user-select: none;
}

/* Icon circle */
.hm-ac-icon {
  width: 38px; height: 38px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hm-ac-red { background: rgba(255,40,54,.10); }
.hm-ac-icon svg {
  width: 18px; height: 18px;
  stroke: var(--red, #FF2836);
}

/* Text: two-line label + value */
.hm-ac-text {
  display: flex; flex-direction: column; gap: 1px;
}
.hm-ac-text em {
  font-size: 9px; font-weight: 700; font-style: normal;
  letter-spacing: .08em; color: #999; text-transform: uppercase;
}
.hm-ac-text b {
  font-size: 12.5px; font-weight: 600;
  color: #1B1C1F; white-space: nowrap;
}

/* Follow Us */
.hm-follow-cell {
  flex-direction: row !important;
  gap: 14px !important;
  flex: 0 0 auto !important;
  padding: 0 0 0 20px !important;
  cursor: default;
}
.hm-follow-cell:hover { background: transparent !important; }
.hm-follow-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: .1em; color: #777;
  text-transform: uppercase; white-space: nowrap;
}
.hm-follow-icons {
  display: flex; gap: 8px; align-items: center;
}
.hm-follow-icons a {
  width: 30px; height: 30px; border-radius: 50%;
  background: #F3F4F6;
  display: flex; align-items: center; justify-content: center;
  color: #555; text-decoration: none;
  transition: background .18s, color .18s;
}
.hm-follow-icons a:hover {
  background: var(--red, #FF2836);
  color: #fff;
}
.hm-follow-icons svg { width: 14px; height: 14px; }


/* =====================================================================
   MACBOOK / LAPTOP  (901px — 1280px)
   ===================================================================== */
@media (min-width: 901px) and (max-width: 1280px) {

  .hm-mii-cell { flex: 0 0 124px; }
  .hm-mii-cell img { max-height: 76px; max-width: 104px; }
  .hm-cred-cell { padding: 14px 5px; gap: 5px; }
  .hm-cred-cell img { max-height: 44px; max-width: 76px; }
  .hm-cred-cell span { font-size: 8.5px; }

  .hm-cab-avail-panel { padding: 10px 12px; gap: 8px; }
  .hm-avail-logos { gap: 14px; }
  .hm-avl-item img { max-height: 36px; max-width: 76px; }
  .hm-avl-item span { font-size: 8px; }

  .hm-action-bar { padding: 0 12px; height: 60px; }
  .hm-action-card { padding: 0 14px; gap: 9px; }
  .hm-ac-text b { font-size: 11.5px; }
  .hm-ac-text em { font-size: 8.5px; }
}


/* =====================================================================
   TABLET  (601px — 900px)
   ===================================================================== */
@media (max-width: 900px) {

  /* Cred+Avail: column stack */
  .hm-cred-avail-bar {
    flex-direction: column;
    border-top: none; border-bottom: none;
  }
  .hm-mob-section-heading { display: block; }
  .hm-cab-certs-panel { border-right: none; border-bottom: 1px solid #E8EAED; }
  .hm-creds-row { border-top: 1px solid #E8EAED; }
  .hm-cred-cell { padding: 13px 4px; gap: 5px; }
  .hm-cred-cell img { max-height: 40px; max-width: 60px; }
  .hm-cred-cell span { font-size: 7.5px; }
  .hm-mii-cell { flex: 0 0 auto; flex: 1; }
  .hm-mii-cell img { max-height: 68px; max-width: 100%; }

  .hm-cab-vsep { display: none; }

  /* Available On: full width, logos in a row */
  .hm-cab-avail-panel {
    flex: none; width: 100%;
    padding: 0; gap: 0;
    align-items: stretch;
    border-top: 1px solid #E8EAED;
  }
  .hm-avail-label {
    font-size: 11px; letter-spacing: .14em;
    padding: 13px 16px 6px; text-align: center;
  }
  .hm-avail-logos {
    gap: 0;
    border-top: 1px solid #E8EAED;
  }
  .hm-avl-item {
    flex: 1 1 0; min-width: 0;
    padding: 10px 4px; gap: 4px;
    border-right: 1px solid #E8EAED;
    justify-content: center;
  }
  .hm-avl-item:last-child { border-right: none; }
  .hm-avl-item img { max-height: 34px; max-width: 100%; }
  .hm-avl-item span { font-size: 7px; }

  /* IndiaMART: show on tablet/mobile */
  .hm-avl-indiamart { display: flex; }

  /* Action bar: moves to TOP of hm-trust-wrapper */
  .hm-action-bar {
    order: -1;
    height: auto; flex-wrap: wrap;
    padding: 0;
    border-top: none; border-bottom: 1px solid #E8EAED;
  }
  .hm-cred-avail-bar { order: 0; }

  .hm-pipe { display: none; }
  .hm-action-card {
    flex: 1 1 0; min-width: 0;
    padding: 14px 6px; height: auto;
    flex-direction: column; align-items: center;
    gap: 6px; text-align: center;
    border-right: 1px solid #E8EAED;
  }
  .hm-action-card:last-child,
  .hm-action-card:nth-last-child(3) { border-right: none; } /* WhatsApp = last visible */
  .hm-action-card:hover { background: rgba(255,40,54,.05); }

  .hm-ac-icon { width: 36px; height: 36px; }
  .hm-ac-icon svg { width: 16px; height: 16px; }

  .hm-ac-text { align-items: center; gap: 2px; }
  .hm-ac-text em { font-size: 7.5px; }
  .hm-ac-text b { font-size: 9.5px; white-space: nowrap; }

  /* Mobile pe Follow Us nahi — social icons footer/utility bar mein already hain */
  .hm-follow-cell { display: none !important; }
  .hm-follow-cell-unused {
    flex: 1 1 100% !important;
    padding: 11px 16px !important;
    justify-content: center;
    border-top: 1px solid #E8EAED !important;
    border-right: none !important;
    gap: 12px !important;
  }
  .hm-follow-label { font-size: 9px; }
  .hm-follow-icons a { width: 28px; height: 28px; }
  .hm-follow-icons svg { width: 13px; height: 13px; }
}


/* =====================================================================
   SMALL MOBILE  (≤540px)
   ===================================================================== */
@media (max-width: 540px) {

  .hm-cred-cell { padding: 11px 2px; gap: 4px; }
  .hm-cred-cell img { max-height: 32px; max-width: 48px; }
  .hm-cred-cell span { font-size: 6.5px; }
  .hm-mii-cell img { max-height: 58px; }

  .hm-avl-item img { max-height: 28px; }
  .hm-avl-item span { font-size: 6.5px; }

  .hm-ac-text b { font-size: 8.5px; }
  .hm-ac-text em { font-size: 7px; }
}


/* =====================================================================
   EXTRA SMALL  (≤380px)
   ===================================================================== */
@media (max-width: 380px) {

  .hm-cred-cell { padding: 9px 1px; gap: 3px; }
  .hm-cred-cell img { max-height: 26px; max-width: 38px; }
  .hm-cred-cell span { font-size: 5.5px; }
  .hm-mii-cell img { max-height: 48px; }

  .hm-avl-item img { max-height: 24px; }
  .hm-avl-item span { font-size: 6px; }

  .hm-ac-text b { font-size: 8px; }
  .hm-mob-section-heading { font-size: 10px; }
}

/* =====================================================================
   TRUST SECTION — DESKTOP v2 (reference design: 3 white rounded cards)
   ===================================================================== */
/* Shop logo (inline, sab devices) */
.hm-shop-logo { display: inline-flex; align-items: center; gap: 7px; height: 44px; }
.hm-shop-logo svg { width: 34px; height: 34px; flex-shrink: 0; }
.hm-shop-word {
  font-size: 12px !important; font-weight: 800 !important; color: #1B1C1F !important;
  line-height: 1.15 !important; text-align: left !important; letter-spacing: .01em;
}
.hm-shop-word sup { font-size: 7px; font-weight: 600; }

@media (min-width: 901px) {
  .hm-trust-wrapper {
    background: #F3F4F6;
    padding: 12px 24px 14px;
    gap: 10px;
  }
  .hm-trust-wrapper > .hm-cred-avail-bar,
  .hm-trust-wrapper > .hm-action-bar {
    width: 100%; max-width: 1340px; margin: 0 auto;
  }

  /* Cred + Avail = 2 alag cards, beech mein "AVAILABLE ON" */
  .hm-trust-wrapper .hm-cred-avail-bar {
    flex-direction: column; gap: 18px;
    background: transparent; border: none;
  }
  .hm-trust-wrapper .hm-cab-vsep { display: none; }

  .hm-trust-wrapper .hm-cab-certs-panel,
  .hm-trust-wrapper .hm-cab-avail-panel,
  .hm-trust-wrapper .hm-action-bar {
    background: #fff;
    border: 1px solid #ECEEF1;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16,24,40,.05);
  }

  /* ── Card 1: certificates ── */
  .hm-trust-wrapper .hm-cab-certs-panel { flex: none; }
  .hm-trust-wrapper .hm-creds-row { padding: 14px 0; }
  .hm-trust-wrapper .hm-cred-cell {
    flex: 1 1 0; padding: 2px 16px; gap: 0;
    border-right: 1px solid #E3E5E8;
    background: none;
  }
  .hm-trust-wrapper .hm-cred-cell:last-child { border-right: none; }
  .hm-trust-wrapper .hm-mii-cell {
    flex: 1 1 0; background: none; border-left: none;
    border-right: 1px solid #E3E5E8;
  }
  .hm-trust-wrapper .hm-cred-cell img,
  .hm-trust-wrapper .hm-mii-cell img {
    height: 84px; width: auto; max-width: 100%; max-height: none;
    object-fit: contain; display: block; margin: 0 auto;
  }
  /* MSME logo chaudi hai — thoda chhota */
  .hm-trust-wrapper .hm-cred-cell:first-child img { height: 64px; }

  /* ── Card 2: available on ── */
  .hm-trust-wrapper .hm-cab-avail-panel {
    position: relative; flex: none;
    padding: 12px 0; gap: 0; align-items: stretch;
  }
  .hm-trust-wrapper .hm-avail-label {
    position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
    padding: 0 12px; background: #F3F4F6;
    font-size: 13px; font-weight: 600; letter-spacing: .03em;
    color: #1B1C1F; line-height: 18px; white-space: nowrap;
  }
  .hm-trust-wrapper .hm-avail-logos { width: 100%; gap: 0; }
  .hm-trust-wrapper .hm-avl-item {
    flex: 1 1 0; justify-content: center; gap: 6px;
    padding: 2px 12px; border-right: 1px solid #E3E5E8;
  }
  .hm-trust-wrapper .hm-avl-item:last-child { border-right: none; }
  .hm-trust-wrapper .hm-avl-indiamart { display: none; }
  .hm-trust-wrapper .hm-avl-item img {
    height: 44px; width: auto; max-width: 150px; max-height: none; object-fit: contain;
  }
  .hm-trust-wrapper .hm-avl-name { font-size: 12.5px; font-weight: 500; color: #333; }

  /* ── Card 3: action bar ── */
  .hm-trust-wrapper .hm-action-bar {
    height: auto; padding: 10px 0; order: 0;
  }
  .hm-trust-wrapper .hm-pipe { display: none; }
  .hm-trust-wrapper .hm-follow-cell { display: none !important; }
  .hm-trust-wrapper .hm-action-card {
    flex: 1 1 0; justify-content: center; gap: 12px;
    padding: 4px 16px; height: auto;
    border-right: 1px solid #E3E5E8;
  }
  .hm-trust-wrapper .hm-action-card:nth-last-child(3) { border-right: none; } /* WhatsApp = last visible */
  .hm-trust-wrapper .hm-action-card:hover { background: none; opacity: .8; }
  .hm-trust-wrapper .hm-ac-icon { width: 34px; height: 34px; background: none; }
  .hm-trust-wrapper .hm-ac-icon svg { width: 28px; height: 28px; stroke-width: 1.8; }
  .hm-trust-wrapper .hm-ac-text { gap: 2px; }
  .hm-trust-wrapper .hm-ac-text em {
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #1B1C1F;
  }
  .hm-trust-wrapper .hm-ac-text b { font-size: 12.5px; font-weight: 400; color: #333; }
}

/* MacBook / laptop (901–1280) — thoda compact */
@media (min-width: 901px) and (max-width: 1280px) {
  .hm-trust-wrapper { padding: 10px 16px 12px; }
  .hm-trust-wrapper .hm-cred-cell img,
  .hm-trust-wrapper .hm-mii-cell img { height: 70px; }
  .hm-trust-wrapper .hm-cred-cell:first-child img { height: 54px; }
  .hm-trust-wrapper .hm-avl-item img { height: 38px; max-width: 124px; }
  .hm-shop-logo { height: 38px; }
  .hm-shop-logo svg { width: 30px; height: 30px; }
  .hm-trust-wrapper .hm-action-card { gap: 9px; padding: 4px 10px; }
  .hm-trust-wrapper .hm-ac-icon svg { width: 24px; height: 24px; }
  .hm-trust-wrapper .hm-ac-text em { font-size: 10.5px; }
  .hm-trust-wrapper .hm-ac-text b { font-size: 11.5px; }
}

/* Large screens (≥1600) */
@media (min-width: 1600px) {
  .hm-trust-wrapper > .hm-cred-avail-bar,
  .hm-trust-wrapper > .hm-action-bar { max-width: 1440px; }
  .hm-trust-wrapper .hm-cred-cell img,
  .hm-trust-wrapper .hm-mii-cell img { height: 92px; }
  .hm-trust-wrapper .hm-cred-cell:first-child img { height: 70px; }
}

/* Mobile: logos ke neeche naam nahi (mobile reference jaisa), shop logo chhota */
@media (max-width: 900px) {
  .hm-avl-name { display: none; }
  .hm-shop-logo { height: 34px; gap: 4px; }
  .hm-shop-logo svg { width: 22px; height: 22px; }
  .hm-shop-word { font-size: 8px !important; }
  .hm-shop-word sup { font-size: 5px; }
}
@media (max-width: 540px) {
  .hm-shop-logo svg { width: 18px; height: 18px; }
  .hm-shop-word { font-size: 6.5px !important; }
}


/* Desktop v2 — logo size balance */
@media (min-width: 901px) {
  .hm-trust-wrapper .hm-avl-amazon img { height: 38px; }
  .hm-trust-wrapper .hm-avl-item:nth-child(2) img { height: 52px; max-width: 170px; } /* GeM */
  .hm-trust-wrapper .hm-avl-item:nth-child(3) img { height: 34px; } /* Justdial */
  .hm-trust-wrapper .hm-ac-icon { width: 38px; height: 38px; }
  .hm-trust-wrapper .hm-ac-icon svg { width: 32px; height: 32px; }
  .hm-trust-wrapper .hm-avail-label { font-weight: 500; font-size: 13.5px; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .hm-trust-wrapper .hm-avl-amazon img { height: 32px; }
  .hm-trust-wrapper .hm-avl-item:nth-child(2) img { height: 44px; }
  .hm-trust-wrapper .hm-avl-item:nth-child(3) img { height: 29px; }
  .hm-trust-wrapper .hm-ac-icon svg { width: 27px; height: 27px; }
}

@media (min-width: 901px) {
  .hm-trust-wrapper .hm-avl-item {
    display: grid; grid-template-rows: 54px auto;
    justify-items: center; align-items: center; row-gap: 4px;
  }
  /* Desktop: Official Shop ki jagah IndiaMART */
  .hm-trust-wrapper .hm-avl-item.hm-avl-indiamart { display: grid; }
  .hm-trust-wrapper .hm-avl-item.hm-avl-shop { display: none; }
  .hm-trust-wrapper .hm-avl-item.hm-avl-indiamart { border-right: none; }
  .hm-trust-wrapper .hm-avl-item.hm-avl-indiamart img { height: 52px; max-width: 120px; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .hm-trust-wrapper .hm-avl-item { grid-template-rows: 46px auto; }
}


/* ═══════════════════════════════════════════════════════
   Slide 2 — chaudi group photo. Height se size karne par wo text ke
   upar chadh jaati thi, isliye width se size karo aur text ko jagah do.
   ═══════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .hs2-slide.wide-prod .hs2-product{
    height:auto;width:52%;max-width:52%;
    max-height:76%;object-fit:contain;object-position:right bottom;
    right:1.5%;bottom:7%;
  }
  .hs2-slide.wide-prod .hs2-content{max-width:46%;padding-right:2%}
}
@media (min-width: 901px) and (max-width: 1200px) {
  .hs2-slide.wide-prod .hs2-product{width:48%;max-width:48%;max-height:70%;right:0;bottom:12%}
  .hs2-slide.wide-prod .hs2-content{max-width:48%}
}
@media (min-width: 1600px) {
  .hs2-slide.wide-prod .hs2-product{width:50%;max-width:50%;bottom:10%}
}

/* ═══════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE FIX
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── General ── */
  .wrap { padding-left: 14px !important; padding-right: 14px !important; }
  .sec { padding: 32px 0; }

  /* ── Hero Slider ── */
  .hs2-slide { min-height: 420px; }
  .hs2-title b { font-size: clamp(22px, 7vw, 34px); }
  .hs2-title span { font-size: clamp(14px, 4vw, 20px); }
  .hs2-sub { font-size: 13px; margin-bottom: 14px; }
  .hs2-feats { gap: 8px; flex-wrap: nowrap; justify-content: center; }
  .hs2-feat b { font-size: 10px; }
  .hs2-feat small { font-size: 9px; }
  .hs2-feat-ic { width: 30px; height: 30px; }
  .hs2-feat-ic svg { width: 14px; height: 14px; }
  /* width cap hata diya — ab .hs2-product ki fixed height slot chalati hai */

  /* ── Collection Row (Air/Oil cooled) ── */
  .collection-row { grid-template-columns: 1fr; gap: 12px; padding: 20px 14px; }
  .coll-card { min-height: 160px; border-radius: 12px; }
  .coll-card h3 { font-size: 18px; }
  .coll-card .pic img { max-height: 130px; }

  /* ── Latest Stock / Product Grid ── */
  .p-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pc-img { height: 130px; }
  .pc-body { padding: 8px 8px 0; }
  .pc-name { font-size: 12px; line-height: 1.3; }
  .pc-price { font-size: 13px; }
  .pc-actions { padding: 0 8px 8px; flex-direction: column; gap: 6px; }
  .pc-actions .btn { font-size: 11px; padding: 7px 10px; text-align: center; justify-content: center; }

  /* ── KVA Calculator ── */
  .kva-calc-sec .wrap { padding: 24px 14px; }
  .kva-calc-copy{padding:26px 20px;border-radius:18px}
  .kva-calc-copy h2{font-size:24px;margin:14px 0 9px}
  .kva-calc-copy p{font-size:13.5px}
  .kva-calc-copy::before{background-size:170% auto;background-position:42% 18%}
  .kc-points{margin-top:16px;gap:9px}
  .kc-points li{font-size:12.5px}
  .kc-call{margin-top:18px;width:100%}
  .kva-calc-form{padding:22px 18px;border-radius:18px}
  .calc-result .rec-kva{font-size:28px}


  .calc-grid { grid-template-columns: 1fr; gap: 14px; }
  .calc-col-left h2 { font-size: 20px; }

  /* ── Promo Band ── */
  .promo-band { padding: 32px 14px; }
  .promo-band h2 { font-size: 22px; }
  .promo-stats { gap: 8px; flex-wrap: wrap; }
  .promo-stat { flex: 1 1 45%; padding: 12px 10px; }
  .promo-stat b { font-size: 24px; }
  .promo-stat small { font-size: 10px; }

  /* ── Tabbed Products (Official Store) ── */
  .tab-bar { gap: 0; flex-wrap: nowrap; border-bottom: 2px solid #eee; overflow: visible; justify-content: center; }
  .tab-bar button { font-size: 9.5px; padding: 10px 4px; white-space: nowrap; flex: 1 1 0; text-align: center; letter-spacing: .02em; }

  /* ── Solutions by Industry ── */
  .industries-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .industry-card { border-radius: 10px; }
  .industry-card img { height: 100px; }
  .industry-card span { font-size: 11px; padding: 6px; }

  /* ── Why Servolink (Built. Tested. Supported.) ── */
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .why-item { padding: 16px 12px; }
  .why-item h4 { font-size: 13px; }
  .why-item p { font-size: 12px; }

  /* ── Customer Reviews ── */
  .reviews-slider { gap: 12px; }
  .review-card { flex: 0 0 calc(100% - 8px); padding: 16px; }
  .review-rating { font-size: 13px; }
  .review-text { font-size: 12.5px; }

  /* ── Google Map ── */
  .gmap-outer iframe { height: 220px; }

  /* ── Blog Grid ── */
  .blog-grid { grid-template-columns: 1fr; gap: 16px; }
  .blog-card img { height: 170px; }

  /* ── Gallery Strip ── */
  .gallery-strip { grid-template-columns: repeat(3, 1fr); gap: 4px; }

  /* ── Section headings ── */
  .sec-head h2 { font-size: 22px; }
  .sec-head p { font-size: 13px; }
  h2 { font-size: clamp(20px, 5vw, 28px); }

  /* ── Buttons ── */
  .btn { padding: 10px 18px; font-size: 13px; }
  .btn-red { padding: 10px 18px; }
}

@media (max-width: 480px) {
  /* ── Even smaller phones ── */
  .p-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .promo-stat { flex: 1 1 100%; }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
  .hs2-slide { min-height: 360px; }

}

/* ═══════════════════════════════════════════════════════
   Full-image hero slide (text artwork ke andar hai)
   ═══════════════════════════════════════════════════════ */
.hs2-full{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;text-decoration:none;z-index:2;
}
.hs2-bg-full{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  background:#f1f2f4;
  display:block;
}

/* Mobile: slide grid-stacked hai, isliye full image ko relative rakho.
   Height bandhi hui hai taaki slider dusri slides se bahut lamba na ho jaye. */
@media(max-width:900px){
  .hs2-slide.img-only{padding:0}
  .hs2-full{position:relative;inset:auto;width:100%;height:auto;background:#f4f4f4}
  .hs2-bg-full{
    width:100%;height:auto;
    max-height:78vh;
    object-fit:contain;object-position:center;
  }
}

/* Landscape phone / chhoti height — banner aur chhota rakho */
@media(max-width:900px) and (max-height:520px){
  .hs2-bg-full{max-height:62vh}
}

/* Tablet portrait (601–900px) — landscape banner hi use hota hai,
   isliye crop se bachne ke liye contain rakho */
@media(min-width:601px) and (max-width:900px){
  .hs2-bg-full{max-height:60vh}
}

/* ═══════════════════════════════════════════════════════
   Laptop / tablet landscape — 901px se 1200px
   (jaise 1024 x 600 screens)
   ═══════════════════════════════════════════════════════ */
@media(min-width:901px) and (max-width:1200px){
  .hero-slider2{aspect-ratio:1920/700}
  .hs2-content{max-width:58%;padding:0 3.5% 0 4.5%}
  .hs2-title b{font-size:clamp(24px,3.4vw,40px)}
  .hs2-title span{font-size:clamp(14px,1.9vw,22px)}
  .hs2-sub{font-size:13px;margin-bottom:12px}
  .hs2-feats{gap:14px;flex-wrap:wrap}
  .hs2-feat b{font-size:11px}
  .hs2-feat small{font-size:9.5px}
  .hs2-feat-ic{width:32px;height:32px}
  .hs2-feat-ic svg{width:15px;height:15px}
  .hs2-product{right:-1%;height:70%;max-width:40%}
  .hero-arrow{width:34px;height:34px}
}

/* Chhoti height wali screens (600px tak) — slider zyada jagah na le */
@media(min-width:901px) and (max-height:700px){
  .hero-slider2{aspect-ratio:auto;height:78vh;min-height:360px;max-height:520px}
  .hs2-slide{height:100%}
}


/* Bahut badi screens — banner stretch na ho */
@media(min-width:1600px){
  .hero-slider2{max-height:820px}
}

/* Bahut sankri phones (360px se kam) */
@media(max-width:380px){
  .hs2-title b{font-size:20px}
  .hs2-title span{font-size:13px}
  .hs2-sub{font-size:11.5px}
  .hs2-feats{gap:5px}
  .hs2-feat b{font-size:9px}
  .hs2-feat small{font-size:8px}
  .hs2-feat-ic{width:27px;height:27px}
  .hs2-feat-ic svg{width:13px;height:13px}
  .hs2-product{max-width:98%}
}

/* ═══════════════════════════════════════════════════
   Mobile-only banner artwork (slide 2)
   Desktop pe chhupa rehta hai, mobile pe poora artwork
   ═══════════════════════════════════════════════════ */
.hs2-mob-link{display:none}

@media(max-width:900px){
  .hs2-slide.has-mob{padding:0}
  /* mobile pe composed parts hata do */
  .hs2-slide.has-mob .hs2-bg,
  .hs2-slide.has-mob .hs2-product,
  .hs2-slide.has-mob .hs2-content{display:none!important}
  .hs2-mob-link{
    display:block;position:relative;
    width:100%;text-decoration:none;background:#f3f4f6;
  }
  .hs2-mob-banner{
    display:block;width:100%;height:auto;
    max-height:82vh;object-fit:contain;object-position:center;
  }
}

/* Landscape phone — banner chhota rakho */
@media(max-width:900px) and (max-height:520px){
  .hs2-mob-banner{max-height:64vh}
}