/* =========================================================
   INDIAN TANK CLEANER - STYLE FILE
   ---------------------------------------------------------
   WHAT THIS FILE IS FOR:
   - Website colors
   - Spacing
   - Layout
   - Responsive mobile/desktop design
   - Booking modal look
   ---------------------------------------------------------
   If you want to change visual design, this is the file.
========================================================= */

:root{
  --navy:#0a1f4f;
  --blue:#1f5bd0;
  --blue-dark:#1749ad;
  --sky:#eaf4ff;
  --gold:#ffc93c;
  --white:#ffffff;
  --text:#0c234f;
  --muted:#5b6780;
  --line:#dce8f7;
  --success:#22c55e;
  --footer:#112b69;
  --shadow:0 18px 48px rgba(10,31,79,.12);
  --radius:22px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}
.container{max-width:1280px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section-head{text-align:center;max-width:760px;margin:0 auto 40px}
.section-mini{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.section-head h2,.about-card h2,.contact-grid h2{font-size:clamp(30px,4vw,46px);font-weight:800;line-height:1.1;letter-spacing:-.7px}
.section-head h2 span,.about-card h2 span,.contact-grid h2 span{color:var(--blue)}
.section-head p,.about-card p,.contact-grid p{color:var(--muted)}

/* =========================================================
   REUSABLE BUTTONS
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  border-radius:12px;
  font-size:14px;
  font-weight:800;
  transition:.2s ease;
  border:2px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px rgba(31,91,208,.25)}
.btn-primary:hover{background:var(--blue-dark)}
.btn-outline{background:#fff;color:var(--blue);border-color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 10px 24px rgba(255,201,60,.28)}
.btn-gold:hover{background:#f3ba1f}
.full-btn{width:100%}
.mini-btn{padding:11px 16px;font-size:13px}

/* =========================================================
   TOP ANNOUNCEMENT BAR
========================================================= */
.announce-bar{background:linear-gradient(90deg,#ffcf43,#ffd45a,#ffcf43);padding:10px 0;font-weight:800;color:var(--navy);font-size:14px}
.announce-wrap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center}
.announce-wrap a{color:var(--blue);text-decoration:underline}
.announce-dot{width:8px;height:8px;border-radius:50%;background:#e53935;display:inline-block;animation:pulse 1.3s infinite}
@keyframes pulse{50%{transform:scale(1.4);opacity:.55}}

/* =========================================================
   HEADER / NAVBAR
========================================================= */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 2px 18px rgba(10,31,79,.06)}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-logo{width:62px;height:62px;object-fit:contain;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(10,31,79,.12)}
.brand-text strong{display:block;font-size:18px;line-height:1.05;font-weight:800;color:var(--navy)}
.brand-text span{display:block;font-size:11px;font-weight:700;color:#6080c2;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{font-weight:800;font-size:14px;color:var(--navy);position:relative;padding:8px 0}
.nav-links a.active,.nav-links a:hover{color:var(--blue)}
.nav-links a.active::after,.nav-links a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;border-radius:999px;background:var(--blue)}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-socials{display:flex;align-items:center;gap:10px}
.nav-socials a{font-size:12px;font-weight:700;color:#47659f;background:#f3f8ff;padding:8px 10px;border-radius:999px;border:1px solid var(--line)}
.nav-socials a:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.call-pill{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#f6fbff;border-radius:999px;border:1px solid var(--line)}
.call-pill-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#e8f2ff;color:var(--blue);font-size:18px}
.call-pill-text small{display:block;font-size:10px;line-height:1;color:var(--muted);font-weight:700}
.call-pill-text strong{display:block;font-size:16px;color:var(--blue);line-height:1.2}
.nav-book-btn{padding-inline:18px}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;background:#eaf4ff;color:var(--blue);font-size:24px;font-weight:800}
.mobile-menu,.mobile-backdrop{display:none}

/* =========================================================
   HERO SECTION
   Change hero background image here.
========================================================= */
.hero{
  min-height:610px;
  background-image:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.91) 28%,rgba(255,255,255,.2) 52%,rgba(255,255,255,0) 100%),url("images/hero-bg.webp");
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
}
.hero-grid{display:grid;grid-template-columns:1fr;align-items:center}
.hero-copy{max-width:630px;padding:56px 0}
.hero-tag{display:inline-block;background:var(--blue);color:#fff;padding:10px 20px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;margin-bottom:24px}
.hero h1{font-size:clamp(42px,6vw,76px);line-height:.95;letter-spacing:-2px;font-weight:800;color:var(--navy);margin-bottom:20px}
.hero h1 span{display:block;color:var(--blue);margin-top:8px}
.hero-lead{font-size:18px;color:#30435f;max-width:540px;margin-bottom:28px}
.hero-features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px;max-width:620px}
.feature-chip{background:rgba(255,255,255,.82);padding:12px;border-radius:16px;border:1px solid rgba(31,91,208,.12);box-shadow:0 8px 20px rgba(10,31,79,.04)}
.feature-chip strong{display:block;font-size:13px;line-height:1.2}
.feature-chip span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* =========================================================
   DIRTY TANK STRIP
========================================================= */
.risk-strip{background:#102b68;color:#fff;padding:26px 0}
.risk-strip-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px}
.risk-title-top,.risk-title-bottom{font-size:18px;font-weight:800;line-height:1.1}
.risk-title-bottom{color:#77a8ff}
.risk-items{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.risk-item{text-align:center}
.risk-icon{width:52px;height:52px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:22px;color:#90b5ff}
.risk-item span:last-child{display:block;font-size:12px;font-weight:700;color:#f1f6ff}
.risk-note-block{text-align:right}
.risk-note-block strong{display:block;font-size:16px;color:var(--gold);line-height:1.2}
.risk-note-block span{display:block;color:#e7eeff}

/* =========================================================
   ABOUT SECTION
========================================================= */
.about-section{background:#fff}
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.about-card,.about-benefits{background:#fff}
.about-card{padding:30px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.about-card p + p{margin-top:14px}
.about-benefits{display:grid;gap:18px}
.benefit-box{padding:24px;background:#f7fbff;border:1px solid var(--line);border-radius:20px}
.benefit-box strong{display:block;font-size:18px;margin-bottom:6px}
.benefit-box p{color:var(--muted);font-size:14px}

/* =========================================================
   PRICING SECTION
========================================================= */
.pricing-section{background:linear-gradient(180deg,#fff 0%,#f6fbff 100%)}
.pricing-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:24px}
.pricing-box-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.pricing-box-head h3{font-size:24px;font-weight:800}
.pricing-box-head p{font-size:14px;color:var(--muted);margin-top:4px}
.pricing-badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;background:#eaf4ff;color:var(--blue);font-size:12px;font-weight:800;text-transform:uppercase;white-space:nowrap}
.pricing-badge-gold{background:#fff1bf;color:#906600}
.table-wrap{overflow-x:auto;border-radius:18px;border:1px solid var(--line)}
.pricing-table{width:100%;border-collapse:collapse;min-width:820px;background:#fff}
.pricing-table th{padding:14px 12px;background:var(--navy);color:#fff;font-size:13px;font-weight:800;border:1px solid rgba(255,255,255,.12);text-transform:uppercase;letter-spacing:.5px}
.pricing-table th span{font-size:11px;color:#c7d6f6;text-transform:none}
.pricing-table td{padding:16px 12px;border:1px solid var(--line);vertical-align:middle;text-align:center}
.pricing-table tbody tr:nth-child(even){background:#fafcff}
.tank-cell{font-size:16px;font-weight:800;color:var(--navy)}
.plan-cell{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center}
.plan-price{font-size:24px;line-height:1;font-weight:800;color:var(--blue)}
.plan-sub{font-size:12px;color:var(--muted);font-weight:700}
.plan-book-btn{padding:10px 14px;border-radius:10px;background:var(--blue);color:#fff;font-size:12px;font-weight:800}
.plan-book-btn:hover{background:var(--blue-dark)}
.pricing-cta-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--navy);color:#fff;padding:24px;border-radius:22px;margin-top:30px}
.pricing-cta-strip p{color:#cfdbf7;font-size:14px;margin-top:4px}

/* =========================================================
   SERVICES SECTION
========================================================= */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{padding:30px;background:#fff;border:1px solid var(--line);border-radius:22px;text-align:center;box-shadow:0 12px 32px rgba(10,31,79,.08)}
.service-icon{font-size:42px;margin-bottom:14px}
.service-card h3{font-size:20px;font-weight:800;margin-bottom:8px}
.service-card p{color:var(--muted);font-size:14px}

/* =========================================================
   STATS SECTION
========================================================= */
.stats-section{padding:22px 0 0;background:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:30px}
.stat-card{display:flex;align-items:center;gap:16px;background:#f7fbff;border:1px solid var(--line);border-radius:20px;padding:22px}
.stat-icon{width:56px;height:56px;border-radius:16px;background:#e8f2ff;color:var(--blue);display:grid;place-items:center;font-size:28px;font-weight:800}
.stat-card strong{display:block;font-size:34px;line-height:1;color:var(--blue);font-weight:800}
.stat-card span{display:block;font-size:16px;color:#425471}

/* =========================================================
   CONTACT SECTION
========================================================= */
.contact-section{padding-top:56px}
.contact-grid{display:flex;align-items:center;justify-content:space-between;gap:24px}
.contact-action-group{display:flex;flex-wrap:wrap;gap:12px}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{background:#102b68;color:#fff;margin-top:34px}
.footer-main{display:grid;grid-template-columns:1.25fr .85fr .95fr .95fr;gap:34px;padding:54px 20px 34px}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.footer-brand-logo{width:64px;height:64px;border-radius:50%;object-fit:contain;background:#fff;padding:4px}
.footer-brand-text strong{display:block;font-size:17px;line-height:1.05;font-weight:800}
.footer-brand-text strong:last-child{color:#78a9ff}
.footer-brand-col p{color:#dce7ff;max-width:420px}
.footer-socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.footer-socials a{padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:13px;font-weight:700}
.footer-socials a:hover{background:var(--blue)}
.footer-links-col h3{font-size:18px;color:var(--gold);margin-bottom:18px}
.footer-links-col a{display:block;color:#eef4ff;font-size:15px;margin-bottom:12px}
.footer-links-col a:hover{color:#9ec0ff}
.footer-bottom{padding:0 20px 24px}
.footer-bottom p{text-align:center;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);color:#b8caf2}

/* =========================================================
   FLOATING BUTTONS
========================================================= */
.floating-actions{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:900}
.floating-btn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#fff;box-shadow:0 12px 24px rgba(0,0,0,.16)}
.floating-btn.whatsapp{background:#25d366}
.floating-btn.call{background:#2767e7}
.floating-btn.book{background:var(--gold);color:var(--navy)}
.mobile-sticky-bar{display:none}

/* =========================================================
   BOOKING MODAL
========================================================= */
.modal-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(9,23,59,.72);padding:20px;z-index:1100;backdrop-filter:blur(5px)}
.modal-overlay.active{display:flex}
.booking-modal{width:min(900px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:28px;padding:30px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.25);animation:modalIn .25s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:#f1f5fa;color:#667085;font-size:28px;line-height:1}
.modal-header{padding-right:42px;margin-bottom:22px}
.modal-header h3{font-size:30px;font-weight:800;line-height:1.1;margin-bottom:8px}
.modal-header p{color:var(--muted)}
.booking-config-area{background:#f9fcff;border:1px solid var(--line);border-radius:22px;padding:18px;margin-bottom:18px}
.picker-group{margin-bottom:14px}
.picker-group label,.booking-form label{display:block;font-size:13px;font-weight:800;color:var(--navy);margin-bottom:7px}
.pill-selector{display:flex;gap:10px;flex-wrap:wrap}
.option-pill{padding:12px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--navy);font-weight:800;font-size:14px}
.option-pill.active{background:var(--blue);border-color:var(--blue);color:#fff}
.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.booking-modal select,.booking-modal input,.booking-modal textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #d7e3f2;outline:none;color:var(--text);background:#fff}
.booking-modal select:focus,.booking-modal input:focus,.booking-modal textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,91,208,.12)}
.selected-plan-panel{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}
.selected-plan-top{display:flex;justify-content:space-between;gap:14px;align-items:center}
.selected-plan-top small,.selected-price-box small{display:block;font-size:12px;color:var(--muted);font-weight:700}
.selected-plan-top strong,.selected-price-box strong{display:block;font-size:18px;line-height:1.3;color:var(--navy)}
.selected-price-box{text-align:right}
.selected-price-box strong{font-size:28px;color:var(--blue)}
.selected-plan-bottom{font-size:14px;color:var(--muted);margin-top:8px;font-weight:700}
.booking-form{display:grid;gap:14px}
.form-grid.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-price-line{display:flex;align-items:center;justify-content:space-between;background:#f8fbff;border:1px dashed #bfd0ef;border-radius:16px;padding:14px 16px;font-weight:800}
.form-price-line span{color:var(--muted)}
.form-price-line strong{font-size:28px;color:var(--blue)}
.modal-helper-text{font-size:12px;color:var(--muted);text-align:center}
.modal-secondary-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.success-message,.error-message{padding:12px 14px;border-radius:14px;font-size:14px;font-weight:800}
.success-message{background:#eafbf0;border:1px solid #b7ebc9;color:#166534}
.error-message{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}

/* =========================================================
   RESPONSIVE DESIGN
   Very important because most visitors will book by phone.
========================================================= */
@media (max-width:1240px){
  .desktop-socials{display:none}
  .hero-features{grid-template-columns:repeat(2,1fr)}
  .risk-strip-inner{grid-template-columns:1fr;gap:18px;text-align:center}
  .risk-note-block{text-align:center}
}

@media (max-width:1024px){
  .nav-links,.call-pill,.nav-book-btn{display:none}
  .menu-btn{display:block}
  .mobile-backdrop.active{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1040}
  .mobile-menu.active{display:flex}
  .mobile-menu{position:fixed;top:0;right:0;z-index:1050;width:min(320px,82vw);height:100vh;background:#fff;padding:86px 22px 24px;box-shadow:-18px 0 50px rgba(0,0,0,.16);flex-direction:column;gap:14px}
  .mobile-menu a{font-size:15px;font-weight:800;color:var(--navy);padding:8px 0;border-bottom:1px solid #eff4fb}
  .mobile-socials{display:grid;gap:8px;margin-top:6px}
  .mobile-socials a{background:#f6fbff;border:1px solid var(--line);padding:10px 12px;border-radius:12px}
  .mobile-menu-book{margin-top:10px}

  .hero{background-position:67% center;min-height:520px}
  .about-grid,.service-grid,.stats-grid,.footer-main{grid-template-columns:1fr}
  .contact-grid,.pricing-cta-strip{flex-direction:column;align-items:flex-start}
  .risk-items{grid-template-columns:repeat(4,1fr)}
  .footer-main{padding-inline:20px}
}

@media (max-width:768px){
  .container{padding:0 16px}
  .announce-bar{font-size:12px}
  .brand-logo{width:54px;height:54px}
  .brand-text strong{font-size:16px}
  .hero{background-image:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 62%,rgba(255,255,255,.58) 100%),url("images/hero-bg.webp");background-position:72% center;min-height:auto}
  .hero-copy{padding:42px 0 60px}
  .hero h1{font-size:42px;letter-spacing:-1.4px}
  .hero-lead{font-size:16px}
  .hero-features{grid-template-columns:1fr 1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .risk-items{grid-template-columns:repeat(2,1fr)}
  .pricing-box,.about-card{padding:18px}
  .pricing-box-head{flex-direction:column;align-items:flex-start}
  .config-grid,.form-grid.two-col{grid-template-columns:1fr}
  .booking-modal{padding:22px;border-radius:24px}
  .selected-plan-top{flex-direction:column;align-items:flex-start}
  .selected-price-box{text-align:left}
  .floating-actions{display:none}
  .mobile-sticky-bar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;background:#fff;box-shadow:0 -10px 28px rgba(10,31,79,.12);z-index:950;border-top:1px solid var(--line)}
  .mobile-sticky-bar a,.mobile-sticky-bar button{padding:14px 8px;text-align:center;font-size:14px;font-weight:800;color:var(--navy);background:none;border:none}
  .mobile-sticky-bar a:nth-child(2){color:#0d9f4f}
  .mobile-sticky-bar button{background:var(--blue);color:#fff}
  body{padding-bottom:60px}
}

@media (max-width:480px){
  .hero-features{grid-template-columns:1fr}
  .risk-items{grid-template-columns:1fr 1fr}
  .pricing-table{min-width:700px}
  .stat-card strong{font-size:28px}
  .booking-modal{padding:18px}
}

/* =========================================================
   FINAL POLISH PATCH
   Purpose:
   - Make hero match reference better
   - Use professional social media icon buttons
   - Use proper problem icons in Dirty Tank strip
   - Improve responsiveness and avoid overlaps
========================================================= */

/* Header social icons: compact, clean, no text overlap */
.nav-socials{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.nav-socials .social-link{
  width:36px;
  height:36px;
  padding:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f4f8ff;
  border:1px solid #dbe7f8;
  color:#1f5bd0;
  transition:.2s ease;
}
.nav-socials .social-link svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-socials .facebook svg,
.nav-socials .twitter svg{fill:currentColor;stroke:none}
.nav-socials .instagram:hover{background:#e4405f;color:#fff;border-color:#e4405f}
.nav-socials .facebook:hover{background:#1877f2;color:#fff;border-color:#1877f2}
.nav-socials .twitter:hover{background:#111;color:#fff;border-color:#111}
.nav-socials .gmail:hover{background:#ea4335;color:#fff;border-color:#ea4335}

/* Hero: cleaner banner feel like reference image */
.hero{
  min-height:620px;
  background-image:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 30%,rgba(255,255,255,.28) 53%,rgba(255,255,255,0) 100%),url("images/hero-bg.webp");
  background-size:cover;
  background-position:center center;
}
.hero-copy{padding-left:8px}
.hero h1{max-width:650px}
.hero-features{align-items:stretch}
.feature-chip{backdrop-filter:blur(4px)}

/* Risk strip icons: relevant image icons instead of random symbols */
.risk-items{align-items:center}
.risk-item img{
  width:54px;
  height:54px;
  margin:0 auto 8px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  padding:6px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.risk-icon{display:none!important}
.risk-note-block strong{text-transform:none}

/* Footer social buttons: icon-style, professional */
.footer-socials a{
  width:40px;
  height:40px;
  padding:0!important;
  display:grid;
  place-items:center;
  border-radius:50%!important;
  font-size:17px!important;
  font-weight:900!important;
}
.footer-socials a:nth-child(1){background:#1877f2}
.footer-socials a:nth-child(2){background:#e4405f}
.footer-socials a:nth-child(3){background:#111}
.footer-socials a:nth-child(4){background:#ea4335}

/* Prevent header crowding on medium screens */
@media (max-width:1320px){
  .desktop-socials{display:none!important}
  .nav-links{gap:18px}
  .brand-text strong{font-size:16px}
  .call-pill-text strong{font-size:15px}
}

/* Large tablets */
@media (max-width:1024px){
  .hero{
    min-height:560px;
    background-position:62% center;
  }
  .risk-items{grid-template-columns:repeat(4,1fr)}
}

/* Mobile phones */
@media (max-width:768px){
  .hero{
    background-image:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.96) 60%,rgba(255,255,255,.70) 100%),url("images/hero-bg.webp");
    background-position:72% center;
  }
  .hero-copy{padding-left:0}
  .risk-item img{width:48px;height:48px}
  .risk-items{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:480px){
  .risk-item img{width:44px;height:44px}
  .risk-item span:last-child{font-size:11px}
}


/* =========================================================
   FINAL CORRECTION PATCH - HERO + NAVBAR + RESPONSIVE
   Purpose:
   - Keep the same hero image, but position text like the reference (left side).
   - Make navbar spacing cleaner and more premium.
   - Keep social media as professional icon buttons.
   - Make booking modal language fully Personal / Home instead of Personal / Home.
========================================================= */

/* Give the website more breathing room on wide screens */
.container{max-width:1540px}

/* Premium header spacing */
.site-header .container{max-width:1500px}
.navbar{
  gap:32px;
  padding:16px 0;
}
.brand{
  min-width:285px;
  flex-shrink:0;
}
.brand-logo{
  width:60px;
  height:60px;
}
.brand-text strong{
  font-size:18px;
  letter-spacing:.1px;
}
.nav-links{
  gap:34px;
  margin-left:10px;
}
.nav-links a{
  font-size:15px;
  white-space:nowrap;
}
.nav-actions{
  margin-left:auto;
  gap:14px;
}
.nav-socials .social-link{
  width:38px;
  height:38px;
}
.call-pill{
  padding:8px 14px;
  min-width:190px;
  justify-content:center;
}
.nav-book-btn{
  min-width:112px;
  padding:13px 20px;
}

/* Hero positioning like the reference screenshot */
.hero{
  min-height:640px;
  background-size:cover;
  background-position:center right;
}
.hero .container{
  max-width:1540px;
}
.hero-copy{
  max-width:640px;
  padding:70px 0 74px;
  margin-left:0;
}
.hero-tag{
  margin-bottom:28px;
}
.hero h1{
  font-size:clamp(54px,5.6vw,86px);
  line-height:.95;
  max-width:680px;
  margin-bottom:28px;
}
.hero-lead{
  max-width:590px;
  font-size:19px;
  line-height:1.55;
}
.hero-features{
  max-width:720px;
  gap:18px;
}
.feature-chip{
  min-width:150px;
}

/* Better looking booking modal colors */
.booking-modal{
  border:1px solid rgba(255,255,255,.4);
}
.modal-header h3{
  color:var(--navy);
}
.booking-config-area{
  background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);
}
.option-pill.active{
  box-shadow:0 8px 20px rgba(31,91,208,.22);
}
.selected-plan-panel{
  box-shadow:0 10px 24px rgba(10,31,79,.06);
}

@media (max-width:1480px){
  .container{max-width:1320px}
  .site-header .container{max-width:1320px}
  .brand{min-width:260px}
  .nav-links{gap:24px}
  .desktop-socials{display:none!important}
}

@media (max-width:1180px){
  .hero{
    background-position:62% center;
  }
  .hero-copy{
    max-width:560px;
  }
  .hero h1{
    font-size:clamp(46px,6vw,68px);
  }
  .hero-features{
    grid-template-columns:repeat(2,1fr);
    max-width:440px;
  }
}

@media (max-width:768px){
  .hero{
    min-height:auto;
    background-position:70% center;
  }
  .hero-copy{
    padding:44px 0 64px;
    max-width:100%;
  }
  .hero h1{
    font-size:42px;
  }
  .hero-lead{
    font-size:16px;
  }
  .hero-features{
    grid-template-columns:1fr 1fr;
    max-width:100%;
  }
}

@media (max-width:480px){
  .brand{min-width:0}
  .brand-text strong{font-size:14px}
  .brand-text span{font-size:10px}
  .hero{
    background-position:74% center;
  }
  .hero h1{
    font-size:36px;
  }
  .hero-features{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   FINAL V4 OVERRIDES - HERO POSITION + PREMIUM NAVBAR
   ---------------------------------------------------------
   These rules are intentionally at the end so they override
   older CSS above. They move the hero content to the left like
   the reference image and make the navbar spacing cleaner.
========================================================= */

/* Header spacing like a professional service website */
.site-header .container{
  max-width: 1500px;
}
.navbar{
  min-height: 86px;
  padding: 10px 0;
  gap: 34px;
}
.brand{
  flex: 0 0 auto;
  min-width: 315px;
}
.brand-logo{
  width: 64px;
  height: 64px;
}
.brand-text strong{
  font-size: 19px;
  letter-spacing: -.2px;
}
.brand-text span{
  font-size: 11px;
}
.nav-links{
  gap: 32px;
  margin-left: 10px;
  margin-right: auto;
}
.nav-links a{
  font-size: 15px;
  letter-spacing: .1px;
}
.nav-actions{
  gap: 14px;
  flex-shrink: 0;
}
.nav-socials{
  gap: 8px;
}
.nav-socials a{
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  font-size: 0;
}
.nav-socials a::first-letter{
  font-size: 0;
}
.call-pill{
  min-width: 205px;
  justify-content: center;
}
.nav-book-btn{
  min-width: 110px;
  height: 52px;
}

/* Hero section position exactly closer to user's reference */
.hero{
  min-height: 720px !important;
  align-items: center !important;
  background-image:
    linear-gradient(90deg,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.97) 22%,
      rgba(255,255,255,.86) 36%,
      rgba(255,255,255,.28) 56%,
      rgba(255,255,255,0) 100%),
    url("images/hero-bg.webp") !important;
  background-size: cover !important;
  background-position: center right !important;
}
.hero .container,
.hero-grid{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: clamp(26px, 9vw, 175px) !important;
  padding-right: 24px !important;
}
.hero-copy{
  max-width: 690px !important;
  padding: 72px 0 82px !important;
}
.hero-tag{
  margin-bottom: 28px !important;
}
.hero h1{
  font-size: clamp(54px, 5.4vw, 92px) !important;
  line-height: .96 !important;
  max-width: 720px !important;
  margin-bottom: 26px !important;
}
.hero-lead{
  max-width: 590px !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
  margin-bottom: 30px !important;
}
.hero-features{
  grid-template-columns: repeat(4, minmax(130px, 1fr)) !important;
  max-width: 760px !important;
  gap: 16px !important;
}
.feature-chip{
  min-height: 62px;
}
.hero-actions .btn{
  min-width: 178px;
  height: 58px;
}

/* Ensure the customer label is always professional */
[data-customer-type="Personal / Home"],
.option-pill[data-customer-type="Personal / Home"]{
  white-space: nowrap;
}

@media (max-width: 1380px){
  .desktop-socials{display:none !important;}
  .navbar{gap:24px;}
  .brand{min-width:300px;}
  .nav-links{gap:24px;}
  .hero{
    min-height: 660px !important;
    background-position: 62% center !important;
  }
  .hero .container,
  .hero-grid{
    padding-left: clamp(22px, 6vw, 90px) !important;
  }
  .hero h1{
    font-size: clamp(48px, 5.7vw, 76px) !important;
  }
}

@media (max-width: 1024px){
  .brand{min-width:auto;}
  .hero{
    min-height: 590px !important;
    background-position: 68% center !important;
  }
  .hero .container,
  .hero-grid{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .hero-copy{
    max-width: 600px !important;
  }
  .hero h1{
    font-size: clamp(42px, 8vw, 64px) !important;
  }
  .hero-lead{
    font-size: 17px !important;
  }
  .hero-features{
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    max-width: 430px !important;
  }
}

@media (max-width: 768px){
  .hero{
    min-height: auto !important;
    background-image:
      linear-gradient(90deg,
        rgba(255,255,255,.99) 0%,
        rgba(255,255,255,.97) 58%,
        rgba(255,255,255,.68) 100%),
      url("images/hero-bg.webp") !important;
    background-position: 72% center !important;
  }
  .hero-copy{
    max-width: 100% !important;
    padding: 44px 0 58px !important;
  }
  .hero h1{
    font-size: clamp(36px, 12vw, 48px) !important;
    letter-spacing: -1.2px !important;
  }
  .hero-lead{
    font-size: 16px !important;
    max-width: 100% !important;
  }
  .hero-features{
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px){
  .hero-features{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   MOBILE FINAL POLISH OVERRIDES
   Purpose:
   - Keep desktop design unchanged.
   - Make phone view clean, readable and professional.
   - Show hero image clearly on mobile instead of hiding it behind text.
   - Replace wide pricing tables with easy mobile cards.
========================================================= */

.mobile-hero-image-card{display:none;}
.mobile-pricing-cards{display:none;}

@media (max-width: 768px){
  body{background:#ffffff;}

  /* Header / navbar on phone */
  .announce-bar{padding:8px 0;font-size:11px;line-height:1.35;}
  .announce-wrap{gap:6px;}
  .site-header{box-shadow:0 6px 22px rgba(10,31,79,.08);}
  .navbar{padding:10px 0;gap:10px;}
  .brand{gap:10px;max-width:78%;}
  .brand-logo{width:46px !important;height:46px !important;flex:0 0 auto;}
  .brand-text strong{font-size:15px !important;letter-spacing:-.2px;white-space:normal;line-height:1.1;}
  .brand-text span{font-size:9px !important;}
  .menu-btn{width:42px;height:42px;border-radius:12px;flex:0 0 auto;}

  /* Mobile hero: text first, clean image card after buttons */
  .hero{
    min-height:auto !important;
    background-image:linear-gradient(180deg,#ffffff 0%,#eef7ff 100%) !important;
    background-position:center !important;
    padding:0 !important;
  }
  .hero .container,
  .hero-grid{
    padding-left:16px !important;
    padding-right:16px !important;
    margin:0 auto !important;
  }
  .hero-copy{
    padding:26px 0 20px !important;
    max-width:100% !important;
  }
  .hero-tag{
    font-size:10px !important;
    padding:8px 13px !important;
    margin-bottom:16px !important;
    max-width:100%;
    white-space:normal;
    line-height:1.35;
  }
  .hero h1{
    font-size:clamp(34px, 12.2vw, 48px) !important;
    line-height:.98 !important;
    letter-spacing:-1.4px !important;
    margin-bottom:14px !important;
    max-width:100% !important;
  }
  .hero-lead{
    font-size:15px !important;
    line-height:1.55 !important;
    margin-bottom:18px !important;
    color:#2f4059 !important;
  }
  .hero-features{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin-bottom:18px !important;
    max-width:100% !important;
  }
  .feature-chip{
    min-height:auto !important;
    padding:11px 12px !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 8px 24px rgba(10,31,79,.07) !important;
  }
  .feature-chip strong{font-size:12px !important;}
  .feature-chip span{font-size:11px !important;}
  .hero-actions{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important;margin-bottom:16px;}
  .hero-actions .btn{width:100% !important;min-width:0 !important;height:48px !important;padding:12px 10px !important;font-size:13px !important;}

  .mobile-hero-image-card{
    display:block;
    margin:16px 0 4px;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 16px 46px rgba(10,31,79,.16);
    border:1px solid rgba(31,91,208,.12);
    background:#eaf5ff;
  }
  .mobile-hero-image-card img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    object-position:68% center;
    display:block;
  }

  /* Risk strip: clean horizontal scroll instead of squeezed overlap */
  .risk-strip{padding:20px 0 18px !important;}
  .risk-strip-inner{display:block !important;text-align:left !important;}
  .risk-title-block{display:flex;align-items:baseline;gap:8px;margin-bottom:14px;}
  .risk-title-top,.risk-title-bottom{font-size:16px !important;}
  .risk-items{
    display:flex !important;
    gap:12px !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:2px 0 8px;
    -webkit-overflow-scrolling:touch;
  }
  .risk-items::-webkit-scrollbar{height:0;}
  .risk-item{min-width:92px;scroll-snap-align:start;}
  .risk-icon{width:48px !important;height:48px !important;margin-bottom:7px !important;}
  .risk-item span:last-child{font-size:11px !important;line-height:1.2;}
  .risk-note-block{text-align:left !important;margin-top:12px;}
  .risk-note-block strong{font-size:14px !important;}
  .risk-note-block span{font-size:13px !important;}

  /* Pricing: hide wide tables and show readable mobile cards */
  .table-wrap{display:none !important;}
  .mobile-pricing-cards{display:grid !important;gap:14px;margin-top:18px;}
  .pricing-box{padding:18px !important;margin-bottom:18px !important;border-radius:20px !important;}
  .pricing-box-head h3{font-size:21px !important;}
  .pricing-box-head p{font-size:13px !important;}
  .pricing-badge{font-size:11px !important;padding:7px 11px !important;}
  .mobile-plan-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
    box-shadow:0 12px 32px rgba(10,31,79,.08);
  }
  .mobile-plan-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
  .mobile-plan-title{font-size:16px;font-weight:900;color:var(--navy);line-height:1.25;}
  .mobile-plan-sub{font-size:12px;font-weight:700;color:var(--muted);margin-top:3px;}
  .mobile-plan-price{font-size:28px;font-weight:900;color:var(--blue);line-height:1;white-space:nowrap;}
  .mobile-plan-meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
  .mobile-plan-meta span{font-size:11px;font-weight:800;color:#24406f;background:#eef6ff;border:1px solid #dbeafd;border-radius:999px;padding:7px 9px;}
  .mobile-plan-card .plan-book-btn{width:100%;padding:12px 14px;border-radius:12px;font-size:13px;}
  .pricing-cta-strip{padding:18px !important;border-radius:18px !important;margin-top:18px !important;}
  .pricing-cta-strip strong{font-size:16px;}
  .pricing-cta-strip p{font-size:13px;}

  /* Modal as premium mobile bottom sheet */
  .modal-overlay{align-items:flex-end !important;padding:0 !important;}
  .booking-modal{
    width:100% !important;
    max-height:92vh !important;
    border-radius:26px 26px 0 0 !important;
    padding:20px 16px 24px !important;
  }
  .modal-header h3{font-size:24px !important;}
  .modal-header p{font-size:13px !important;line-height:1.45;}
  .booking-config-area{padding:14px !important;border-radius:18px !important;}
  .pill-selector{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;}
  .option-pill{font-size:12px !important;padding:11px 8px !important;text-align:center;}
  .selected-plan-panel{padding:14px !important;}
  .selected-plan-top strong{font-size:15px !important;}
  .selected-price-box strong{font-size:25px !important;}
  .booking-modal input,.booking-modal select,.booking-modal textarea{font-size:15px !important;padding:12px !important;border-radius:12px !important;}
  .form-price-line{padding:12px 14px !important;}
  .form-price-line strong{font-size:25px !important;}

  /* Service/about/footer mobile breathing space */
  .section{padding:46px 0 !important;}
  .section-head{margin-bottom:24px !important;}
  .section-head h2,.about-card h2,.contact-grid h2{font-size:28px !important;}
  .service-card,.about-card,.benefit-box{border-radius:18px !important;}
  .stats-grid{gap:12px !important;}
  .stat-card{padding:16px !important;border-radius:18px !important;}
  .footer-main{gap:24px !important;padding-top:38px !important;padding-bottom:22px !important;}
}

@media (max-width: 390px){
  .hero-actions{grid-template-columns:1fr !important;}
  .hero-features{grid-template-columns:1fr !important;}
  .mobile-hero-image-card img{aspect-ratio:4/3;object-position:70% center;}
}

/* =========================================================
   MOBILE FINAL FIX V5
   Purpose:
   - Do not affect desktop/PC layout.
   - Make mobile hero image look like a professional image card.
   - Replace long mobile pricing list with one compact plan finder.
========================================================= */
@media (max-width: 768px){
  /* Hero image: show earlier and fit better */
  .mobile-hero-image-card{
    display:block !important;
    margin:14px 0 18px !important;
    border-radius:24px !important;
    overflow:hidden !important;
    background:#eaf5ff !important;
    box-shadow:0 18px 46px rgba(10,31,79,.18) !important;
    border:1px solid rgba(31,91,208,.14) !important;
  }
  .mobile-hero-image-card img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16/10 !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block !important;
  }

  /* Make mobile hero feel premium and not over-stretched */
  .hero-copy{padding:24px 0 18px !important;}
  .hero-tag{margin-bottom:14px !important;}
  .hero h1{margin-bottom:12px !important;}
  .hero-lead{margin-bottom:10px !important;}
  .hero-features{margin-top:2px !important;margin-bottom:16px !important;}

  /* Mobile pricing: hide big desktop boxes; use compact finder only */
  .pricing-box{display:none !important;}
  .mobile-pricing-cards{
    display:block !important;
    margin-top:18px !important;
  }

  .mobile-plan-finder{
    background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
    border:1px solid #dbeafd;
    border-radius:24px;
    padding:18px;
    box-shadow:0 18px 48px rgba(10,31,79,.12);
  }
  .mobile-finder-head{
    margin-bottom:16px;
  }
  .mobile-finder-head span{
    display:inline-flex;
    padding:7px 10px;
    border-radius:999px;
    background:#e9f3ff;
    color:var(--blue);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:10px;
  }
  .mobile-finder-head strong{
    display:block;
    font-size:22px;
    line-height:1.15;
    color:var(--navy);
    font-weight:900;
  }
  .mobile-finder-head p{
    font-size:13px;
    color:var(--muted);
    margin-top:6px;
    line-height:1.45;
  }
  .mobile-finder-section{margin-bottom:14px;}
  .mobile-finder-section label{
    display:block;
    font-size:12px;
    font-weight:900;
    color:var(--navy);
    margin-bottom:7px;
  }
  .mobile-finder-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .mobile-finder-tabs button{
    min-height:44px;
    border:1px solid #d7e6f8;
    background:#fff;
    color:var(--navy);
    border-radius:14px;
    font-size:12px;
    font-weight:900;
    padding:10px 8px;
    box-shadow:0 6px 14px rgba(10,31,79,.04);
  }
  .mobile-finder-tabs button.active{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
    box-shadow:0 10px 22px rgba(31,91,208,.22);
  }
  .mobile-finder-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }
  .mobile-plan-finder select{
    width:100%;
    border:1px solid #d7e6f8;
    background:#fff;
    border-radius:14px;
    padding:13px 14px;
    font-size:15px;
    color:var(--navy);
    outline:none;
  }
  .mobile-finder-result{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:#0a1f4f;
    color:#fff;
    border-radius:18px;
    padding:16px;
    margin:4px 0 14px;
  }
  .mobile-finder-result small{
    display:block;
    color:#9fb6ef;
    font-size:11px;
    font-weight:800;
    margin-bottom:3px;
  }
  .mobile-finder-result strong{
    display:block;
    font-size:15px;
    line-height:1.25;
    font-weight:900;
  }
  .mobile-finder-result span{
    display:block;
    color:#d7e3ff;
    font-size:12px;
    margin-top:3px;
  }
  .mobile-finder-price{
    font-size:32px;
    line-height:1;
    font-weight:900;
    color:#ffc93c;
    white-space:nowrap;
  }
  .mobile-finder-book{
    width:100%;
    min-height:52px;
    border-radius:15px;
    background:var(--blue);
    color:#fff;
    font-size:15px;
    font-weight:900;
    box-shadow:0 12px 28px rgba(31,91,208,.25);
  }
  .mobile-finder-book:active{transform:scale(.99);}

  .pricing-cta-strip{
    display:none !important;
  }
}

@media (max-width:390px){
  .mobile-hero-image-card img{
    aspect-ratio:16/10 !important;
    object-position:center center !important;
  }
  .mobile-finder-result{
    flex-direction:column;
    align-items:flex-start;
  }
  .mobile-finder-price{font-size:30px;}
}

/* =========================================================
   V6 MOBILE HERO PREMIUM FIX
   Purpose:
   - Keep desktop exactly as it is.
   - On mobile, show the full worker/t-shirt logo clearly.
   - Add subtle movement so the image does not feel like a flat/static banner.
========================================================= */
@media (max-width: 768px){
  .mobile-hero-image-card{
    position:relative !important;
    display:block !important;
    margin:14px 0 20px !important;
    border-radius:24px !important;
    overflow:hidden !important;
    background:linear-gradient(135deg,#edf8ff,#ffffff) !important;
    box-shadow:0 18px 45px rgba(10,31,79,.18) !important;
    border:1px solid rgba(31,91,208,.16) !important;
    isolation:isolate !important;
  }

  .mobile-hero-image-card img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16/10 !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block !important;
    transform-origin:center center !important;
    animation:itcMobileHeroFloat 7s ease-in-out infinite alternate !important;
  }

  .mobile-hero-image-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.34) 46%,transparent 62%);
    transform:translateX(-120%);
    animation:itcHeroShine 5.5s ease-in-out infinite;
  }

  .mobile-hero-image-card::after{
    content:"";
    position:absolute;
    inset:auto 14px 14px auto;
    width:74px;
    height:74px;
    border-radius:50%;
    z-index:2;
    pointer-events:none;
    background:radial-gradient(circle,rgba(255,255,255,.45),rgba(31,91,208,.10) 45%,transparent 68%);
    animation:itcBubblePulse 4s ease-in-out infinite;
  }

  @keyframes itcMobileHeroFloat{
    0%{transform:scale(1) translateY(0)}
    100%{transform:scale(1.025) translateY(-4px)}
  }

  @keyframes itcHeroShine{
    0%,35%{transform:translateX(-120%);opacity:0}
    50%{opacity:1}
    75%,100%{transform:translateX(120%);opacity:0}
  }

  @keyframes itcBubblePulse{
    0%,100%{transform:scale(.92);opacity:.55}
    50%{transform:scale(1.08);opacity:.9}
  }

  @media (prefers-reduced-motion: reduce){
    .mobile-hero-image-card img,
    .mobile-hero-image-card::before,
    .mobile-hero-image-card::after{
      animation:none !important;
    }
  }
}

@media (max-width: 390px){
  .mobile-hero-image-card img{
    aspect-ratio:16/10 !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
}

/* =========================================================
   RAZORPAY ADVANCE PAYMENT SUMMARY
   Added for ₹299 advance payment booking flow.
========================================================= */
.payment-summary-card{
  background:linear-gradient(135deg,#f7fbff 0%,#eef6ff 100%);
  border:1px solid #d6e6fb;
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 24px rgba(10,31,79,.06);
}
.summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px 0;
  font-weight:800;
  color:var(--navy);
}
.summary-row + .summary-row{border-top:1px dashed #c6d9f5}
.summary-row span{color:var(--muted);font-size:14px}
.summary-row strong{font-size:20px;color:var(--blue)}
.advance-row strong{font-size:28px;color:#0f9f58}
.payment-summary-card small{display:block;margin-top:8px;color:#51627d;font-weight:700;line-height:1.45}
.pay-btn{background:linear-gradient(135deg,#1f5bd0,#1749ad) !important;box-shadow:0 14px 26px rgba(31,91,208,.28) !important;}
#customerState[readonly]{background:#f3f8ff;color:#102b68;font-weight:800;}
@media(max-width:768px){
  .summary-row{font-size:14px;align-items:flex-start;}
  .summary-row strong{font-size:18px;white-space:nowrap;}
  .advance-row strong{font-size:24px;}
}


/* =========================================================
   ₹299 OFFER ADVERTISEMENT BLOCKS
   Purpose: Highlights the 1000L tank cleaning introductory offer
   in the hero section, pricing section, and booking popup.
========================================================= */
.offer-mini-card{
  width:min(100%,470px);
  background:linear-gradient(135deg,#fff7d6 0%,#fff 55%,#eaf4ff 100%);
  border:1px solid rgba(255,201,60,.55);
  border-left:5px solid var(--gold);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 14px 32px rgba(10,31,79,.10);
  margin:0 0 18px;
}
.offer-mini-card span{
  display:inline-flex;
  background:#0a1f4f;
  color:#ffc93c;
  border-radius:999px;
  padding:5px 9px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  margin-bottom:8px;
}
.offer-mini-card strong{
  display:block;
  color:var(--navy);
  font-size:18px;
  line-height:1.22;
  font-weight:900;
}
.offer-mini-card p{
  color:#51627d;
  font-size:13px;
  font-weight:700;
  margin-top:5px;
}
.offer-banner-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:linear-gradient(135deg,#0a1f4f 0%,#1749ad 55%,#1f5bd0 100%);
  color:#fff;
  border-radius:26px;
  padding:24px;
  box-shadow:0 20px 55px rgba(31,91,208,.22);
  margin:0 0 26px;
  position:relative;
  overflow:hidden;
}
.offer-banner-card::after{
  content:"₹299";
  position:absolute;
  right:22px;
  top:-20px;
  font-size:110px;
  line-height:1;
  font-weight:900;
  color:rgba(255,255,255,.08);
  pointer-events:none;
}
.offer-banner-left{position:relative;z-index:1;max-width:680px;}
.offer-banner-left span{
  display:inline-flex;
  color:#0a1f4f;
  background:var(--gold);
  border-radius:999px;
  padding:7px 12px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom:10px;
}
.offer-banner-left strong{
  display:block;
  font-size:clamp(24px,3vw,38px);
  line-height:1.1;
  font-weight:900;
}
.offer-banner-left p{
  color:#dce7ff;
  margin-top:8px;
  font-weight:600;
}
.offer-banner-card .btn{position:relative;z-index:1;white-space:nowrap;}
.modal-offer-note{
  background:linear-gradient(135deg,#fff7d6 0%,#fff 100%);
  border:1px solid rgba(255,201,60,.65);
  border-radius:18px;
  padding:12px 14px;
  margin:0 0 16px;
}
.modal-offer-note span{
  display:inline-flex;
  color:#0a1f4f;
  background:#ffc93c;
  border-radius:999px;
  padding:4px 8px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:7px;
}
.modal-offer-note strong{
  display:block;
  color:#0a1f4f;
  font-size:14px;
  line-height:1.35;
}

@media(max-width:768px){
  .hero-offer-card{
    margin:12px 0 14px !important;
    border-radius:16px;
    padding:12px 13px;
  }
  .offer-mini-card strong{font-size:15px;}
  .offer-mini-card p{font-size:12px;}
  .offer-banner-card{
    flex-direction:column;
    align-items:flex-start;
    border-radius:22px;
    padding:18px;
    margin-bottom:20px;
  }
  .offer-banner-card::after{
    right:8px;
    top:4px;
    font-size:72px;
  }
  .offer-banner-left strong{font-size:24px;}
  .offer-banner-card .btn{width:100%;}
  .modal-offer-note{padding:11px 12px;}
}