:root{
      --nav-bg:#010080;
      --ink:#0e1a24;
      --text:#ffffff;
      --muted:#d7e2ea;
      --hover:#eef3f8;
      --drop-border:rgba(0,0,0,.06);
      --shadow:0 22px 60px -24px rgba(0,0,0,.55);
      --underline:#ffffff;

       --slide-speed: 8000ms;
  --fade-speed: 400ms;
  --hero-min: 420px;
  --hero-max: 75vh;
  --content-bg: rgba(0,0,0,.15);
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{font-family:'Raleway', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}

    .site-header{background:var(--nav-bg); color:var(--text); box-shadow:0 1px 0 rgba(255,255,255,.14)}
    .site-header .wrap{margin:auto; padding:24px 24px; display:flex; align-items:center; gap:18px; width:100%}

    .logo img{height:44px; width:auto; display:block}

    nav.nav{margin-left:24px}
    .menu{list-style:none; display:flex; align-items:center; gap:34px; padding:0; margin:0}
    .menu > li{position:relative}
    .menu > li > a,
    .menu > li > .dd-toggle{color:var(--text); text-decoration:none; font-weight:600; letter-spacing:.4px; padding:12px 6px; background:none; cursor:pointer; text-transform:uppercase; font-size:14px}
    .menu > li > a:hover,
    .menu > li > button.dd-toggle:hover{background:rgba(255,255,255,.08); border-radius:6px}
    .menu > li.active > a::after{    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    width: 100%;
    height: 2px;
    background: var(--underline);
    border-radius: 2px;
    top: 25px;}

    .cta{margin-left:auto; background:#ffffff; color:var(--nav-bg); padding:12px 16px; border-radius:8px; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:8px; box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}

    .has-dropdown{position:relative}
    .dropdown{position:absolute; left:0; top:calc(100% + 10px); min-width:360px; background:#ffffff; color:var(--ink); border-radius:12px; padding:10px; box-shadow:var(--shadow); border:1px solid var(--drop-border); display:none; list-style:none;     z-index: 9;}
    .dropdown a{display:block; padding:14px 16px; border-radius:10px; color:var(--ink); text-decoration:none; font-weight:600; font-size:15px}
    .dropdown a:hover{background:var(--hover)}
    @media (hover:hover){
      .has-dropdown:hover > .dropdown{display:block}
      .has-dropdown:focus-within > .dropdown{display:block}
    }

    .hamburger{margin-left:auto; display:none; border:0; cursor:pointer}
    .hambox{display:inline-flex; align-items:center; gap:10px; background:#ffffff; color:var(--nav-bg); padding:10px 14px; border-radius:4px; font-weight:800; box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}

    #mobileMenu{background:#ffffff; color:#0f1720; border-top:1px solid #e8eef2}
    .mobile-list{list-style:none; margin:0; padding:6px}
    .mobile-list > li{border-bottom:1px solid #edf2f6}
    .mobile-list a{display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px; color:#0f1720; text-decoration:none; padding:14px 10px; font-weight:600; text-transform:uppercase; font-size:14px}
    .mobile-list a:hover{background:#f7f9fc}
    .chev{transition:transform .2s ease}
    .mobile-sub{list-style:none; margin:0; padding:0 0 10px 12px; display:none}
    .mobile-sub a{display:block; padding:10px 8px; color:#314152; text-decoration:none; font-weight:600; text-transform:none !important;}

    @media (max-width: 1024px){
      nav.nav{display:none !important}
      .cta{display:none !important}
      .hamburger{display:inline !important}
    }
    @media (min-width: 1025px){
      #mobileMenu{display:none !important}
      .hamburger{display:none !important}
    }

    /* ---------- HERO WRAPPER (FULLY CENTERED) ---------- */
.hero{
  position:relative;
  height: var(--hero-max);
  min-height: var(--hero-min);
  overflow:hidden;
  
  /* ✅ Ye line hero-content ko PERFECT CENTER karegi */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Slides */
.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition: opacity var(--fade-speed) linear;
}
.hero-slide.active{opacity:1}

/* Overlay */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.55)), rgba(0,0,0,.35);
  z-index:1;
}

/* Content Box */
.hero-content{
  position:relative;
  z-index:2;
  width:min(92vw,900px);
  padding: clamp(14px, 2.8vw, 24px) clamp(16px, 3.5vw, 32px);
  background:var(--content-bg);
  backdrop-filter:blur(6px);
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.hero-content h1{
  font-size:clamp(26px,5vw,48px);
  font-weight:800;
  margin-bottom:.4em;
  color:#ffffff;
}
.hero-content p{
  font-size:clamp(14px,3.2vw,18px);
  opacity:.95;
}

/* ---------- MOBILE RESPONSIVE ---------- */
@media (max-width:640px){
  :root{ --hero-max: 65vh; --hero-min: 360px; }
  .hero-content{
    width:min(96vw,600px);
    padding:14px 16px;
    border-radius:14px;
  }
}

@media (max-width:360px){
  .hero-content{padding:12px 14px}
  .hero-content h1{font-size:clamp(20px,7vw,26px)}
  .hero-content p{font-size:13px}
}

/* asbestos section styles */
/* ===== Scoped to .asb-sec only ===== */
.asb-sec{padding:28px 18px 40px;background:#fff;color:#0f172a}
.asb-sec *{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}

/* layout */
.asb-sec__wrap{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:34px;align-items:start}
.asb-sec__left{padding:6px 2px;max-width:720px}

/* badges + accent */
.asb-sec__badges{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.asb-sec__badges img{width:80px;height:55px;object-fit:contain}
.asb-sec__accent{
    display:block;width:66px;height:5px;background:linear-gradient(90deg, #2563eb, #22d3ee);;border-radius:6px;margin:16px 0 10px
}

/* heading + sub */
.asb-sec__title{margin:0 0 10px;font-size:44px;line-height:1.14;font-weight:800;color:#1e2b4d;letter-spacing:.2px}
.asb-sec__sub{margin:0 0 20px;color:#6b7280;font-size:15.5px}

/* paragraphs */
.asb-sec__p{margin:0 0 14px;line-height:1.72;color:#1f2937;font-size:16px}

/* bullet list (blue tick with small blue dot) */
.asb-sec__list{margin:14px 0 20px;padding:0;list-style:none}
.asb-sec__list li{display:flex;gap:12px;align-items:flex-start;margin:9px 0;font-size:15.5px;color:#203055}
.asb-sec__list li i{
  width:16px;height:16px;margin-top:2px;flex:0 0 16px;position:relative;border-radius:50%;
  background:#010080;
}
.asb-sec__list li i:before{
  content:"";position:absolute;inset:3px;background:#010080;border-radius:50%;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M9.55 17.54L4.5 12.5l1.41-1.41l3.64 3.63l8.54-8.54l1.41 1.41z"/></svg>') center/12px 12px no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M9.55 17.54L4.5 12.5l1.41-1.41l3.64 3.63l8.54-8.54l1.41 1.41z"/></svg>') center/12px 12px no-repeat;
  box-shadow:0 0 0 5px #e7efff inset; /* thin blue ring feel */
}

/* note + outlined CTA */
.asb-sec__note{font-size:14.5px;color:#1f2937;margin:14px 0 18px}
.asb-sec__btn-outlined{display:inline-block;padding:12px 28px;border:2px solid #010080;color:#010080;border-radius:8px;font-weight:700;text-decoration:none;background:#fff;transition:transform .15s}
.asb-sec__btn-outlined:hover{transform:translateY(-1px)}

/* RIGHT CARD */
.asb-sec__card{
  background:#f7f9ff;border:1px solid #e3e9ff;border-radius:16px;padding:24px;text-align:center;
  box-shadow:0 10px 28px rgba(39,94,255,.12);
}
.asb-sec__card-title{margin:2px 0 10px;font-size:18px;letter-spacing:.6px;font-weight:800;color:#1e2b4d}

/* phone row */
.asb-sec__phone{display:flex;justify-content:center;align-items:center;gap:10px;margin:6px 0 6px}
.asb-sec__phone a{color:#010080;font-weight:800;font-size:22px;text-decoration:none}
.asb-sec__phone-ic{width:22px;height:22px;display:inline-block;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23c12e2b" d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 011 1v3.5a1 1 0 01-1 1C11.3 21 3 12.7 3 2.99a1 1 0 011-1H7.5a1 1 0 011 1c0 1.24.2 2.45.57 3.57a1 1 0 01-.24 1.02l-2.2 2.2z"/></svg>') center/contain no-repeat}

/* small label */
.asb-sec__mini{font-size:14px;color:#5e667f;margin:4px 0 16px}

/* form controls: exact height + soft inner highlight */
.asb-sec__form input{
  width:100%;height:48px;border:1px solid #dfe5f3;border-radius:10px;padding:12px 14px;font-size:15px;
  outline:none;margin-bottom:12px;background:#fff;box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 rgba(0,0,0,.02)
}
.asb-sec__form input::placeholder{color:#8a93a8}
.asb-sec__form input:focus{border-color:#b9c7ff;box-shadow:0 0 0 3px rgba(61,112,255,.16)}

/* CTA button: gradient + correct radius/height */
.asb-sec__btn-primary{
  height:48px;width:100%;border:none;cursor:pointer;border-radius:10px;font-weight:800;
  color:#fff;letter-spacing:.5px;font-size:14.6px;
  background:linear-gradient(180deg,#010080 0%,#010080 100%);
  box-shadow:0 10px 20px rgba(27,98,255,.25)
}
.asb-sec__btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)}

/* card foot */
.asb-sec__foot{margin-top:12px;color:#7a819a;font-size:12.8px}
.asb-sec__mail{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:6px}
.asb-sec__mail-ic{width:15px;height:15px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%239aa5cc" d="M12 13 2 6.76V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.76z"/><path fill="%239aa5cc" d="M22 6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2l10 6z"/></svg>') center/contain no-repeat}

/* responsive */
@media (max-width: 1024px){
  .asb-sec__wrap{grid-template-columns:1fr;gap:24px}
  .asb-sec__card{order:2}
  .asb-sec__left{order:1}
}
@media (max-width: 560px){
  .asb-sec{padding:22px 14px 34px}
  .asb-sec__title{font-size:32px;line-height:1.18}
  .asb-sec__card{padding:20px;border-radius:14px}
}

/* =========================================
   FAQs (Card Style • Light • Scoped)
   Scope: .faqs-section
========================================= */
.faqs-section{
  --faq-blue: #2c65b7;
  --faq-blue-dark: #204f91;
  --faq-border: #dfe6ed;
  --faq-row-bg: #eef3f7;
  --faq-title: #2f4b6b;
  --faq-ink:#0f172a;
  --faq-muted:#3b4b5b;
  --faq-ring: rgba(44,101,183,.18);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f5ff 100%);   
     padding: 20px;
}

/* Card wrapper */
.faqs-section .faqs-wrap{
  margin: 0 auto;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--faq-border);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

/* Title */
.faqs-section .faqs-title{
  margin: 4px 0 12px;
  font-size: 22px;
  color: var(--faq-title);
  font-weight: 700;
}
.faqs-section .faqs-title::after{
  content:"";
  display:block; width: 180px; height: 3px; margin-top: 10px;
  background: linear-gradient(90deg, var(--faq-blue), var(--faq-blue-dark));
  border-radius: 3px;
}

/* Rows */
.faqs-section .faq-item{ border-bottom: 1px solid var(--faq-border); }
.faqs-section .faq-item:last-child{ border-bottom: none; }

/* Trigger row */
.faqs-section .faq-trigger{
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 18px 10px;
  background: transparent;
  border: none; cursor: pointer; text-align: left;
  outline: none;
}
.faqs-section .faq-trigger:hover{ background: var(--faq-row-bg); }
.faqs-section .faq-trigger span{
  color: var(--faq-blue);
  font-size: 16px; font-weight: 600; line-height: 1.4;
}

/* Chevron SVG */
.faqs-section .chev{
  width: 18px; height: 18px; flex: 0 0 18px;
  color: #6b7a8a;
  transition: transform .25s ease, color .25s ease;
}

/* Open state */
.faqs-section .faq-item.is-open .faq-trigger{ background: var(--faq-row-bg); }
.faqs-section .faq-item.is-open .faq-trigger span{ color: var(--faq-blue-dark); }
.faqs-section .faq-item.is-open .chev{ transform: rotate(180deg); color: var(--faq-blue-dark); }

/* Panel */
.faqs-section .faq-panel{
  padding: 10px 10px 16px;
  color: var(--faq-muted);
  font-size: 14px; line-height: 1.6;
  border-top: 1px solid var(--faq-border);
}

/* Focus ring */
.faqs-section :where(button).faq-trigger:focus-visible{
  box-shadow: 0 0 0 4px var(--faq-ring);
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 640px){
  .faqs-section .faqs-title{ font-size: 20px; }
  .faqs-section .faq-trigger{ padding: 16px 8px; }
  .faqs-section .faq-trigger span{ font-size: 15px; }
}

/* =========================================
   Sec 6 → FAQ Skin (Light, uses your FAQ palette)
   HTML stays the same; rotates your <svg class="chev">
========================================= */
.sec-green{
  --faq-blue: #2c65b7;
  --faq-blue-dark: #204f91;
  --faq-border: #dfe6ed;
  --faq-row-bg: #eef3f7;
  --faq-title: #2f4b6b;
  --faq-ink:#0f172a;
  --faq-muted:#3b4b5b;
  --faq-ring: rgba(44,101,183,.18);
  background: linear-gradient(180deg, #f8fbff 0%, #f1f5ff 100%);
  color: var(--faq-ink);
  padding: 70px 0;
}

/* Header block */
.sec-green .sec-6-content{
  background:#fff;
  border:1px solid var(--faq-border);
  border-radius:14px;
  padding:18px;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  margin-bottom:12px;
}
.sec-green .sec-6-content h2{
  margin:0 0 6px; color:var(--faq-title); font-size: clamp(22px,2vw,28px);
}
.sec-green .sec-6-content h2::after{
  content:""; display:block; width:160px; height:3px; margin-top:10px;
  background: linear-gradient(90deg, var(--faq-blue), var(--faq-blue-dark));
  border-radius:3px;
}
.sec-green .sec-6-content p{ margin:0; color:var(--faq-muted); }

/* ---------- FIRST GROUP: inside .d-flex.flex-column.gap-3 ---------- */
.sec-green .d-flex.flex-column.gap-3{
  gap:0 !important;
  background:#fff;
  border:1px solid var(--faq-border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}

/* Question row (your <a class="btn btn-outline-success"> … <svg class="chev">) */
.sec-green .btn.btn-outline-success{
  --pad-x:12px; --pad-y:20px;
  width:100%;
  text-align:left;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:var(--pad-y) var(--pad-x);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--faq-border);
  color:var(--faq-blue);
  font-weight:600; letter-spacing:.1px;
  border-radius:0;
  box-shadow:none !important;
}
.sec-green .btn.btn-outline-success:hover{
  background: var(--faq-row-bg);
}

/* Chevron SVG styling + rotation on open */
.sec-green .btn.btn-outline-success .chev{
  width:18px; height:18px; flex:0 0 18px;
  color:#6b7a8a; transition: transform .25s ease, color .25s ease;
}
.sec-green .btn[aria-expanded="true"]{
  background: var(--faq-row-bg);
  color: var(--faq-blue-dark);
}
.sec-green .btn[aria-expanded="true"] .chev{
  transform: rotate(180deg);
  color: var(--faq-blue-dark);
}

/* Answer panel */
.sec-green .collapse{ transition: height .25s ease; }
.sec-green .collapse .card{
  border:none; border-bottom:1px solid var(--faq-border);
  border-radius:0; background:#fff; box-shadow:none;
}
.sec-green .collapse .card.card-body{
  padding:10px 12px 16px;
  color:var(--faq-muted);
  font-size:14px; line-height:1.55;
}
.sec-green .collapse .card h2,
.sec-green .collapse .card h4{
  color:var(--faq-title);
  font-size:18px; margin:4px 0 6px;
}
.sec-green .collapse .row > [class*="col-"]{ margin-bottom:10px; }

/* ---------- NEXT GROUP TRIGGERS (Shower Tray / Sink) match same look ---------- */
.sec-green > .container > a.btn.btn-outline-success{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%;
  background:#fff; color:var(--faq-blue);
  padding:20px 12px;
  border:1px solid var(--faq-border);
  border-radius:12px; margin-top:12px;
}
.sec-green > .container > a.btn.btn-outline-success:hover{
  background: var(--faq-row-bg);
}
/* Their SVG chevrons rotate, too */
.sec-green > .container > a.btn.btn-outline-success .chev{
  width:18px; height:18px; color:#6b7a8a; transition:.25s;
}
.sec-green > .container > a.btn[aria-expanded="true"]{
  background:var(--faq-row-bg); color:var(--faq-blue-dark);
}
.sec-green > .container > a.btn[aria-expanded="true"] .chev{
  transform: rotate(180deg); color: var(--faq-blue-dark);
}

/* Their answers (card after trigger) */
.sec-green > .container > .collapse .card{
  border:1px solid var(--faq-border); border-top:none;
  border-radius:0 0 12px 12px; background:#fff;
}

/* Focus / a11y */
.sec-green :where(a,button):focus-visible{
  outline:none; box-shadow:0 0 0 4px var(--faq-ring);
  border-radius:8px;
}

/* Responsive */
@media (max-width: 991.98px){
  .sec-green{ padding:56px 0; }
  .sec-green .btn.btn-outline-success{ --pad-y:16px; }
}
@media (max-width: 575.98px){
  .sec-green .sec-6-content h2{ font-size: 20px; }
  .sec-green .collapse .card h2,
  .sec-green .collapse .card h4{ font-size: 16px; }
}


/*.tg-footer ===== */
  .tg-footer { --bg:#010080; --text:#ffffff; --muted:rgba(255,255,255,.8); --line:rgba(255,255,255,.15); font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }
  .tg-footer *, .tg-footer *::before, .tg-footer *::after { box-sizing: border-box; }
  .tg-footer a { color: var(--muted); text-decoration: none; }
  .tg-footer a:hover { text-decoration: underline; color: #fff; }

  .tg-footer__container { max-width: 1200px; margin: 0 auto; padding: 48px 20px; }
  .tg-footer h3 { font-size: 18px; font-weight: 800; margin: 0 0 14px; color:#fff; }
  .tg-footer h4 { font-size: 16px; font-weight: 800; margin: 0 0 14px; color:#fff; }

  .tg-footer ul { list-style: none; margin: 0; padding: 0; }
  .tg-footer li { margin: 10px 0; }

  /* Top grid */
  .tg-footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }

  /* Middle row */
  .tg-footer__mid { display: grid; grid-template-columns: 1.2fr .9fr 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line); }
  .tg-footer__stores img { display: inline-block; height: 40px; width: auto; margin-right: 10px; border-radius: 6px; background: rgba(255,255,255,.08); }
  .tg-footer__social { display: flex; gap: 12px; margin-top: 14px; }
  .tg-footer__social img { width: 36px; height: 36px; border-radius: 50%; display: block; background: rgba(255,255,255,.08); }

  .tg-footer__badge img { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; display: block; background: rgba(255,255,255,.08); }

  .tg-footer__award { display: flex; align-items: center; gap: 14px; }
  .tg-footer__award img { width: 140px; height: 110px; object-fit: cover; border-radius: 10px; display: block; background: rgba(255,255,255,.08); }
  .tg-footer__award-text p { margin: 0; line-height: 1.25; color: var(--muted); }

  /* Bottom bar */
  .tg-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; }
  .tg-footer__brand img { width: 110px; height: 36px; object-fit: contain; display: block; }
  .tg-footer__copy { color: var(--muted); font-size: 14px; }

  /* Responsive */
  @media (max-width: 1024px) {
    .tg-footer__mid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 768px) {
    .tg-footer__grid { grid-template-columns: 1fr; }
    .tg-footer__mid { grid-template-columns: 1fr; }
    .tg-footer__award { align-items: flex-start; }
  }

  /* about us   */

  /* ------------------------------
   Company Info Section (scoped)
--------------------------------*/
.company-info-section{
  --bg:#0b1220;            /* section bg */
  --card:#0f172a;          /* card bg */
  --ink:#e6edf6;           /* text */
  --muted:#a6b0c3;         /* secondary text */
  --accent:#5b9fff;        /* primary accent */
  --accent-2:#6ee7ff;      /* secondary accent */
  --ring:rgba(91,159,255,.25);
  position: relative;
  isolation: isolate;
  color: var(--ink);
  overflow: hidden;
  padding: 70px 0; /* fallback if .section-space not present */
  background:
    radial-gradient(1000px 400px at 10% 0%, rgba(91,159,255,.08), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(110,231,255,.08), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0b1426 100%);
}

.company-info-section .container{
  position: relative;
  z-index: 2;
}

/* Subtle grid dots */
.company-info-section::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.35;
  pointer-events:none;
}

/* Card-like content area */
.company-info-section .company-content{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)),
              var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 34px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.02) inset;
}

/* Section header */
.company-info-section .section-header{
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 28px !important;
}

.company-info-section .section-header::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width: 120px; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
}

.company-info-section .section-title{
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.15;
  letter-spacing: .2px;
  margin: 0 0 6px;
  color: #fff;
}

.company-info-section .section-subtitle{
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--muted);
  margin: 0;
}

/* Image wrapper with glow ring */
.company-info-section .company-image-wrapper{
  position: relative;
  display: inline-block;
  padding: 14px;
  border-radius: 20px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(91,159,255,.12), rgba(110,231,255,.05));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  transition: transform .35s ease, box-shadow .35s ease;
}

.company-info-section .company-image-wrapper::before{
  content:"";
  position:absolute; inset:-10px;
  border-radius: 24px;
  background:
    conic-gradient(from 0deg, var(--accent) 0%, var(--accent-2) 25%, transparent 25% 100%);
  filter: blur(18px);
  opacity:.25;
  z-index:-1;
  pointer-events:none;
}

.company-info-section .company-image-wrapper:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.company-info-section .company-image-wrapper img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 14px;
}

/* Content blocks */
.company-info-section .content-block{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 18px 18px 6px;
  margin-bottom: 18px !important;
}

.company-info-section .content-block h4{
  font-size: 18px;
  color:#fff;
  margin: 0 0 10px !important;
}

.company-info-section p{
  color: var(--ink);
  opacity: .92;
  line-height: 1.7;
}

/* Fancy left accent on paragraphs */
.company-info-section .content-block p{
  position: relative;
  padding-left: 14px;
}
.company-info-section .content-block p::before{
  content:"";
  position:absolute; left:0; top:.6em;
  width: 4px; height: 1.1em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity:.7;
}
.company-info-section .cta-block{
  margin-top: 26px;
  background: linear-gradient(180deg, rgba(1,0,128,.32), rgba(1,0,128,.18));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Text Always Above */
.company-info-section .cta-block p{
  margin: 0;
  color: #ffffff;
  font-weight: 600;
  max-width: 650px;
}

/* Buttons Always Center */
.company-info-section .cta-actions{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* CTA Button */
.company-info-section .btn-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 700;
  border: none;
  color: #fff;
  background: linear-gradient(90deg, #010080, #4C6BFF);
  box-shadow: 0 8px 22px rgba(1,0,128,.25);
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.company-info-section .btn-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(1,0,128,.32);
}

/* Second Button Ghost Style */
.company-info-section .btn-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
}
.company-info-section .btn-ghost:hover{
  border-color: rgba(255,255,255,.85);
}

/* Mobile responsive (buttons 100% width) */
@media (max-width: 600px){
  .company-info-section .btn-cta{
    width: 100%;
    justify-content: center;
  }
}


/* Responsive tweaks */
@media (max-width: 991.98px){
  .company-info-section .col-lg-4{ order:2; }
  .company-info-section .col-lg-8{ order:1; }
  .company-info-section .company-content{ padding: 22px; }
  .company-info-section .cta-block{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px){
  .company-info-section{ padding: 56px 0; }
  .company-info-section .section-title{ font-size: 24px; }
  .company-info-section .section-subtitle{ font-size: 15px; }
}


/* =========================================
   Testimonials Section (scoped styling only)
========================================= */
.testimonials-section{
  --bg:#0b1220;           /* section background */
  --card:#0f172a;         /* card background */
  --ink:#e6edf6;          /* main text */
  --muted:#a6b0c3;        /* secondary text */
  --accent:#5b9fff;       /* primary accent */
  --accent-2:#6ee7ff;     /* secondary accent */
  --ring:rgba(91,159,255,.25);

  position: relative;
  isolation: isolate;
  color: var(--ink);
  padding: 70px 0; /* fallback if .section-space is missing */
  background:
    radial-gradient(900px 400px at 10% 0%, rgba(91,159,255,.08), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(110,231,255,.08), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0b1426 100%);
  overflow: hidden;
}

.testimonials-section .container{ position: relative; z-index: 2; }

/* dotted texture overlay */
.testimonials-section::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.35; pointer-events:none;
}

/* --- Header --- */
.testimonials-section .testimonials-header{
  max-width: 820px;
  margin-inline: auto;
}

.testimonials-section .section-title{
  color:#fff;
  font-size: clamp(26px, 2.3vw, 36px);
  line-height: 1.15;
  margin-bottom: 10px;
}

.testimonials-section .section-description{
  color: var(--muted);
  font-size: clamp(15px, 1.15vw, 17px);
  margin: 0 auto;
}

.testimonials-section .testimonials-header::after{
  content:"";
  display:block;
  width:130px; height:3px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
  opacity:.9;
}

/* --- Cards --- */
.testimonials-section .testimonial-card{
  position: relative;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)),
    var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.02) inset;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}

.testimonials-section .testimonial-card::before{
  /* soft gradient halo on top-right */
  content:"";
  position:absolute; right:-30px; top:-30px;
  width:180px; height:180px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(91,159,255,.18), transparent 70%);
  pointer-events:none;
}

.testimonials-section .testimonial-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.12);
}

/* header row inside card */
.testimonials-section .customer-name{
  font-weight: 700; color:#fff; margin:0 0 2px !important;
}

.testimonials-section .service-type{
  color: var(--muted);
}

/* rating stars */
.testimonials-section .rating{
  font-size: 14px;
  background: linear-gradient(90deg, #ffd966, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  vertical-align: middle;
}

/* profile picture (initials / image-ready) */
.testimonials-section .profile-picture{
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(91,159,255,.22), rgba(110,231,255,.10)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 5px 10px rgba(0, 0, 0, .35) inset, 0 5px 10px rgba(0, 0, 0, .25);;
  position: relative;
  overflow: hidden;
}

/* if you have photos, set as background in .review-one/.review-two */
.testimonials-section .review-one{
  background-size: cover; background-position: center;
}
.testimonials-section .review-two{
  background-size: cover; background-position: center;
}

/* quotation decoration */
.testimonials-section .testimonial-content{
  position: relative;
  padding-top: 6px;
}
.testimonials-section .testimonial-content::before{
  content: "“";
  position: absolute; left: -6px; top: -8px;
  font-size: 68px; line-height: 1;
  color: #ffffff1a;
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
}

.testimonials-section .testimonial-text{
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
}

/* subtle left bar accent on paragraph */
.testimonials-section .testimonial-text{
  position: relative; padding-left: 14px;
}
.testimonials-section .testimonial-text::after{
  content:"";
  position:absolute; left:0; top:.5em;
  width: 4px; height: 1.2em; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity:.8;
}

/* --- Google reviews link --- */
.testimonials-section .reviews-link-wrapper{
  margin-top: 28px !important;
}
.testimonials-section .reviews-link{
  color: var(--muted); margin:0;
}
.testimonials-section .reviews-link a{
  color:#fff; text-underline-offset: 3px;
  border-bottom: 1px dashed transparent;
  transition: color .2s ease, border-color .2s ease;
}
.testimonials-section .reviews-link a:hover{
  color: var(--accent);
  border-color: var(--accent);
}

/* --- subtle card divider line between header and text (optional) --- */
.testimonials-section .testimonial-header{
  position: relative;
  margin-bottom: 8px;
}
.testimonials-section .testimonial-header::after{
  content:"";
  display:block; height:1px; width:100%;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  margin-top: 10px;
}

/* --- Responsive --- */
@media (max-width: 991.98px){
  .testimonials-section{ padding: 56px 0; }
}
@media (max-width: 575.98px){
  .testimonials-section .section-title{ font-size: 24px; }
  .testimonials-section .section-description{ font-size: 15px; }
  .testimonials-section .profile-picture{ width: 50px; height: 50px; }
  .testimonials-section .testimonial-card{ padding: 18px; }
}

/* ======== Optional: light theme variant ======== */
.testimonials-section.light{
  --bg:#f7f9fc; --card:#ffffff; --ink:#0f172a; --muted:#475569;
  --accent:#2563eb; --accent-2:#22d3ee; --ring:rgba(37,99,235,.25);
  background: radial-gradient(900px 400px at 10% 0%, rgba(37,99,235,.06), transparent 60%),
              radial-gradient(800px 500px at 100% 100%, rgba(34,211,238,.06), transparent 60%),
              linear-gradient(180deg, #f6faff 0%, #eef2ff 100%);
}
.testimonials-section.light .section-title,
.testimonials-section.light .customer-name{ color:#0f172a; }
.testimonials-section.light .reviews-link a{ color:#0f172a; }

/* Example */
.testimonials-section .review-one{
  background-image: url('../image/google.png');
}
.testimonials-section .review-two{
  background-image: url('../image/google.png');
}
/* =========================================
   Features Section (Light Theme • Scoped)
   - Left design unchanged
   - Optional: limit left items to 6 via .six-only
   - Optional: right 2 stacked images via .two-stack
========================================= */
.features-section{
  --bg:#f7f9fc;          /* page/section bg */
  --card:#ffffff;        /* cards */
  --ink:#0f172a;         /* main text */
  --muted:#475569;       /* secondary text */
  --line:#e5e7eb;        /* borders */
  --accent:#2563eb;      /* primary accent */
  --accent-2:#22d3ee;    /* secondary accent */
  --ring:rgba(37,99,235,.15);

  color: var(--ink);
  background:
    radial-gradient(900px 400px at 10% 0%, rgba(37,99,235,.06), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(34,211,238,.06), transparent 60%),
    linear-gradient(180deg, #f6faff 0%, #eef2ff 100%);
  padding: 70px 0; /* fallback if .section-space missing */
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.features-section .container{ position: relative; z-index: 2; }

/* --- Left content/card wrapper --- */
.features-section .features-content{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}

/* Title underline accent */
.features-section .section-title{
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.15;
  margin-bottom: 18px !important;
  color: var(--ink);
}
.features-section .section-title::after{
  content:"";
  display:block;
  width: 140px; height: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
}

/* --- Feature list items (soft cards) --- */
.features-section .features-list{
  display: grid;
  gap: 14px;
}

/* Optional limiter: keep design same, just hide after 6 */
/* .features-section .features-list.six-only > .feature-item:nth-child(n+7){
  display: none !important;
} */

.features-section .feature-item{
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 16px 12px;
  box-shadow: 0 4px 14px rgba(15,23,42,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.features-section .feature-item:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--line), var(--accent) 25%);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}

/* Title row */
.features-section .feature-title{
  display:flex; align-items:center;
  gap: 10px;
  font-size: 18px;
  margin: 0 0 8px !important;
  color: var(--ink);
}

/* Emoji icon as pill badge */
.features-section .feature-icon{
  display:inline-grid; place-items:center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 10px;
  background: linear-gradient(180deg, #eef2ff, #e6f9ff);
  border: 1px solid #e5efff;
  box-shadow: 0 3px 10px var(--ring) inset;
  font-size: 18px;
}

/* Description text with subtle left accent */
.features-section .feature-description{
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
  position: relative; padding-left: 12px;
}
.features-section .feature-description::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width: 3px; height: 1.1em; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity:.8;
}

/* --- Right side: default collage (3 images) --- */
.features-section .features-image-wrapper{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: auto auto;
  gap: 14px;
  position: relative;
  padding: 8px;
  border-radius: 20px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(37,99,235,.08), rgba(34,211,238,.04));
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

/* collage placement */
.features-section .features-image-wrapper img:nth-child(1){
  grid-column: 1 / 2; grid-row: 1 / 3;
  align-self: stretch; justify-self: stretch;
  object-fit: cover; width: 100%; height: 100%;
  transform: rotate(-.5deg);
}
.features-section .features-image-wrapper img:nth-child(2){
  grid-column: 2 / 3; grid-row: 1 / 2;
  object-fit: cover; width: 100%; height: 100%;
  transform: translateY(4px) rotate(.6deg);
}
.features-section .features-image-wrapper img:nth-child(3){
  grid-column: 2 / 3; grid-row: 2 / 3;
  object-fit: cover; width: 100%; height: 100%;
  transform: translateY(-4px) rotate(-.8deg);
}

.features-section .features-image-wrapper img{
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(15,23,42,.10);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.features-section .features-image-wrapper img:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: color-mix(in oklab, var(--line), var(--accent) 25%);
  box-shadow: 0 16px 34px rgba(15,23,42,.14);
}

/* --- Variant: Right side 2 stacked large images --- */
.features-section .features-image-wrapper.two-stack{
  display: flex;
  flex-direction: column;   /* force vertical stacking */
  gap: 16px;
  padding: 8px;
  border-radius: 20px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(37,99,235,.08), rgba(34,211,238,.04));
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  height: 100%;
}
.features-section .features-image-wrapper.two-stack img{
  width: 100%;
  object-fit: cover;     /* clean fit */
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(15,23,42,.10);
  transform: none !important; /* removes old collage tilt */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.features-section .features-image-wrapper.two-stack img:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: color-mix(in oklab, var(--line), var(--accent) 25%);
  box-shadow: 0 16px 34px rgba(15,23,42,.14);
}

/* --- Focus states (accessibility) --- */
.features-section :where(a, button, .feature-item){
  outline: none;
}
.features-section :where(a, button, .feature-item):focus-visible{
  box-shadow: 0 0 0 4px var(--ring);
  border-color: var(--accent);
}

/* --- Responsive tweaks --- */
@media (max-width: 1199.98px){
  .features-section .features-image-wrapper{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991.98px){
  .features-section{ padding: 56px 0; }
  .features-section .features-content{ padding: 22px; }
  .features-section .features-image-wrapper.two-stack{ min-height: 420px; }
}
@media (max-width: 575.98px){
  .features-section .section-title{ font-size: 24px; }
  .features-section .feature-title{ font-size: 17px; }
  .features-section .feature-icon{ width: 32px; height: 32px; font-size: 16px; }

  /* default collage becomes single column */
  .features-section .features-image-wrapper{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .features-section .features-image-wrapper img:nth-child(1),
  .features-section .features-image-wrapper img:nth-child(2),
  .features-section .features-image-wrapper img:nth-child(3){
    grid-column: 1 / -1; transform: none;
  }

  /* two-stack mobile: natural height */
  .features-section .features-image-wrapper.two-stack{
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .features-section .features-image-wrapper.two-stack img{
    height: auto;
  }
}


/* --- Motion respect --- */
@media (prefers-reduced-motion: reduce){
  .features-section *{ transition: none !important; }
}

/* =========================================
   CTA – Dark Theme (scoped to .cta-content)
========================================= */
.cta-content{
  --bg:#0b1220;            /* section bg */
  --panel:#0f172a;         /* card bg */
  --ink:#e6edf6;           /* main text */
  --muted:#a6b0c3;         /* secondary */
  --accent:#60a5fa;        /* primary accent */
  --accent-2:#22d3ee;      /* secondary accent */
  --ring:rgba(96,165,250,.25);

  position: relative;
  isolation: isolate;
  color: var(--ink);
  padding: 70px 0; /* fallback if .section-space missing */
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(96,165,250,.12), transparent 60%),
    radial-gradient(800px 480px at 110% 110%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0b1426 100%);
  overflow: hidden;
}

.cta-content::after{
  /* subtle dotted texture */
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.35; pointer-events:none;
}

.cta-content .container{ position: relative; z-index: 2; }

/* ---- Card / content box ---- */
.cta-content .contact-content{
  max-width: 900px;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)),
    var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 32px 26px;
  box-shadow: 0 14px 44px rgba(0,0,0,.45), 0 0 0 8px rgba(255,255,255,.02) inset;
}

/* headline */
.cta-content h2{
  color:#fff;
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing:.2px;
}
.cta-content h2::after{
  content:"";
  display:block; width: 140px; height: 3px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
}

/* subtext */
.cta-content p{
  color: var(--muted);
  margin: 12px auto 24px;
  max-width: 760px;
  line-height: 1.7;
}

/* ---- CTA button(s) ---- */
.cta-content .cta-btn{
  display:inline-flex; flex-direction: column; align-items:center; justify-content:center;
  gap: 4px;
  min-width: 220px;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing:.3px;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, border-color .2s ease;
  box-shadow: 0 12px 28px var(--ring);
  line-height: 1.2;
  will-change: transform;
}

/* gradient primary */
.cta-content .cta-btn-primary-g-bg{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #0b1220;
}
.cta-content .cta-btn-primary-g-bg:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px var(--ring);
  opacity: .95;
}

/* optional ghost variant if you add a second button */
.cta-content .cta-btn-ghost{
  background: transparent;
  color:#fff;
  border-color: rgba(255,255,255,.22);
  box-shadow: none;
}
.cta-content .cta-btn-ghost:hover{
  border-color: rgba(255,255,255,.45);
}

/* phone number formatting inside button */
.cta-content .cta-btn br{ display:none; }           /* desktop single-line */
@media (max-width: 480px){
  .cta-content .cta-btn{ min-width: 200px; padding: 12px 18px; }
  .cta-content .cta-btn br{ display: inline; }      /* mobile two-line */
}

/* add a phone emoji bubble before the text (accessible) */
.cta-content .cta-btn::before{
  content:"📞";
  margin-right: 8px;
  font-size: 18px;
}

/* focus states for a11y */
.cta-content .cta-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring), 0 12px 28px var(--ring);
}

/* spacing when you add multiple CTAs */
.cta-content .cta-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}

/* responsive paddings */
@media (max-width: 991.98px){
  .cta-content{ padding: 56px 0; }
  .cta-content .contact-content{ padding: 24px; }
}


/* ==============================
   Services Tabs – Pro Light UI
   (scoped to .services-section)
============================== */
.services-section{
  --bg:#f7f9fc; --panel:#fff; --ink:#0f172a; --muted:#475569;
  --line:#e5e7eb; --accent:#2563eb; --accent-2:#22d3ee; --ring:rgba(37,99,235,.18);
  padding: 30px 0;
}
.services-section .tab-content img{
  margin-bottom: 20px;
}
/* wrapper card */
.services-section .services-tabs-wrapper{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
  position: relative;
}

/* pill list */
.services-section .srvlist{
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0 !important;
  position: relative;
}

/* tab buttons */
.services-section .nav-pills .nav-link{
  display:flex; align-items:center; gap:8px;
  position: relative;
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  padding: 10px 10px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  outline: none;
}

/* small icon badge */
.services-section .nav-pills .nav-link .tab-ico{
  display:inline-grid; place-items:center;
  width:28px; height:28px; flex:0 0 28px;
  border-radius: 8px;
  background: linear-gradient(180deg, #eef2ff, #e6f9ff);
  border: 1px solid #e5efff;
  box-shadow: 0 3px 10px var(--ring) inset;
  font-size: 16px;
}

.services-section .nav-pills .nav-link:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--line), var(--accent) 25%);
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
}

/* active state (gradient + indicator underline) */
.services-section .nav-pills .nav-link.active{
  color:#0b1220;
  border-color: transparent;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 24px var(--ring);
}
.services-section .nav-pills .nav-link.active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-8px;
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* sticky tabs (feel more pro) – remove if not needed */
@media (min-width: 992px){
  .services-section .services-tabs-wrapper{
    position: sticky; top: 12px; z-index: 11;
  }
}

/* focus a11y */
.services-section .nav-pills .nav-link:focus-visible{
  box-shadow: 0 0 0 4px var(--ring);
}

/* responsive sizes */
@media (max-width: 575.98px){
  .services-section .nav-pills .nav-link{
    font-weight: 600; padding: 9px 12px;
  }
  .services-section .nav-pills .nav-link .tab-ico{
    width:26px; height:26px; font-size:15px;
  }
}

/* ========================================
   Services CTA (Dark Theme • Scoped)
======================================== */
.services-cta{
  --bg:#0b1220;
  --panel:#0f172a;
  --ink:#e6edf6;
  --muted:#a6b0c3;
  --accent:#60a5fa;
  --accent-2:#22d3ee;
  --ring:rgba(96,165,250,.25);
}

.services-cta{
  text-align:center;
}

.services-cta .cta-content-wrapper{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)),
    var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 36px 32px 32px;
  margin: 0 auto;
  box-shadow: 0 14px 44px rgba(0,0,0,.45), 0 0 0 8px rgba(255,255,255,.02) inset;
  position: relative;
}

/* subtle background glow halo */
.services-cta .cta-content-wrapper::before{
  content:"";
  position:absolute; inset:-20px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(96,165,250,.25), transparent 70%);
  pointer-events:none;
  opacity:.4;
}

.services-cta .cta-title{
  font-size: clamp(22px, 2vw, 30px);
  color:#fff;
  margin-bottom: 10px !important;
  line-height:1.3;
}

.services-cta .cta-subtitle{
  color: var(--muted);
  margin-bottom: 22px !important;
  font-size: 16px;
  line-height: 1.6;
}

/* CTA BUTTON */
.services-cta .cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.3px;
  border:1px solid transparent;
  box-shadow: 0 12px 28px var(--ring);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.services-cta .cta-btn-primary-g-bg{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#0b1220;
}

.services-cta .cta-btn-primary-g-bg:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 44px var(--ring);
  opacity:.93;
}

/* responsive tweaks */
@media (max-width:576px){
  .services-cta .cta-content-wrapper{
    padding: 28px 20px;
  }
}

/* Mobile: make tabs horizontally scrollable with snap */
@media (max-width: 575.98px){
  .services-section .services-tabs-wrapper{ padding: 8px 0; }
  .services-section .srvlist{
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding: 6px 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .services-section .srvlist::-webkit-scrollbar{ height: 6px; }
  .services-section .srvlist::-webkit-scrollbar-thumb{
    background: #d8e0ff; border-radius: 6px;
  }
  .services-section .nav-pills .nav-link{
    scroll-snap-align: start;
    padding: 10px 12px;
    border-radius: 999px; /* chip look */
    font-size: 14px;
  }
}
/* ---- Sticky config */
.services-section{
  /* change if your fixed header is taller/shorter */
  --sticky-top: 12px;           /* desktop default */
  --sticky-top-mobile: 64px;    /* mobile: header height + gap */
}

/* make the tabs wrapper sticky */
.services-section .services-tabs-wrapper{
  position: sticky;
  top: var(--sticky-top);
  z-index: 20;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* mobile: a bit lower to clear your fixed header */
@media (max-width: 575.98px){
  .services-section .services-tabs-wrapper{
    top: 0;
    border-radius: 14px 14px 12px 12px; /* nice docked look */
  }
}

/* optional: add a soft edge mask so content doesn't peek behind */
.services-section .services-tabs-wrapper::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-8px; height:8px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.06), transparent);
  opacity:.25;
}

/* (Recommended) Mobile tabs scrollable for better UX */
@media (max-width: 575.98px){
  .services-section .srvlist{
    overflow-x:auto; overflow-y:hidden; white-space:nowrap; flex-wrap:nowrap !important;
    gap:8px; padding:6px 12px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
  }
  .services-section .srvlist::-webkit-scrollbar{ height:6px; }
  .services-section .srvlist::-webkit-scrollbar-thumb{ background:#d8e0ff; border-radius:6px; }
  .services-section .nav-pills .nav-link{ scroll-snap-align:start; }
}

/* prevent first content row from hiding under the sticky bar when scrolled into view via anchors */
.services-section .tab-pane{ scroll-margin-top: calc(var(--sticky-top-mobile) + 16px); }
@media (min-width: 576px){
  .services-section .tab-pane{ scroll-margin-top: calc(var(--sticky-top) + 16px); }
}



/* =========================================
   Process Section – Light + Navy Accent
   (Scoped to any section that contains .process-content)
========================================= */

/* Scope root (works even if section pe extra class na ho) */
section:has(.process-content){
  --bg:#f7f8ff;
  --panel:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e3e6f5;
  --accent:#010080;   /* your brand navy */
  --accent-2:#4C6BFF; /* soft partner for gradients */
  --ring:rgba(1,0,128,.18);

  color: var(--ink);
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(1,0,128,.08), transparent 60%),
    radial-gradient(800px 460px at 100% 100%, rgba(76,107,255,.08), transparent 60%),
    linear-gradient(180deg, #f8f9ff 0%, #eef1ff 100%);
  padding: 70px 0; /* fallback if .section-space missing */
  position: relative;
  isolation: isolate;
}

/* Header card */
section:has(.process-content) .process-content{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  margin-bottom: 20px;
}
section:has(.process-content) .process-content h2{
  font-size: clamp(26px, 2.2vw, 34px);
  margin: 0;
  line-height: 1.2;
}
section:has(.process-content) .process-content h2::after{
  content:"";
  display:block; width: 180px; height:3px; margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
}

/* ------- Timeline-style steps (auto-numbered paragraphs) ------- */
section:has(.process-content) .row .col-md-8{
  position: relative;
  counter-reset: step;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 18px 6px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

/* vertical line */
section:has(.process-content) .row .col-md-8::before{
      content: "";
    position: absolute;
    left: 28px;
    top: 25px;
    bottom: 16px;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    border-radius: 2px;
    opacity: .45;
}

/* paragraphs as steps */
section:has(.process-content) .row .col-md-8 p{
  position: relative;
  padding-left: 44px;
  margin-bottom: 14px;
  color: var(--muted);
  line-height: 1.75;
  counter-increment: step;
}

/* numbered badges */
section:has(.process-content) .row .col-md-8 p::before{
  content: counter(step);
  position: absolute;
  left: -2px; top: 0.15em;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-weight: 800;
  background: linear-gradient(180deg, #eef2ff, #e6f0ff);
  border: 1px solid #dfe6ff;
  box-shadow: 0 3px 10px var(--ring) inset;
  color: var(--accent);
}

/* subtle connector dot */
section:has(.process-content) .row .col-md-8 p::after{
  content:"";
  position:absolute; left:22px; top: 1.35em;
  width: 8px; height:8px; border-radius:50%;
  background: var(--accent);
  opacity:.25;
}

/* ------- Right image column (polaroid stack look) ------- */
section:has(.process-content) .col-md-2.col-6{
  position: relative;
}
section:has(.process-content) .col-md-2.col-6 img{
  display:block; width:100%; height:auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
section:has(.process-content) .col-md-2.col-6 img:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: color-mix(in oklab, var(--line), var(--accent) 28%);
  box-shadow: 0 18px 34px rgba(15,23,42,.12);
}

/* sticky images on desktop for nice reading flow */
@media (min-width: 992px){
  section:has(.process-content) .col-md-2.col-6{
    position: sticky; top: 18px;
  }
}

/* ------- CTA inside this section (keeps your global CTA styles untouched) ------- */
section:has(.process-content) .services-cta .cta-content-wrapper{
  background:
    linear-gradient(180deg, rgba(1,0,128,.05), rgba(76,107,255,.04)),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
section:has(.process-content) .services-cta .cta-title{
  color: var(--ink);
}
section:has(.process-content) .services-cta p{
  color: var(--muted);
}
section:has(.process-content) .services-cta .cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 160px; padding: 10px 18px;
  border-radius: 999px; text-decoration:none; font-weight: 800;
  border: 1px solid transparent;
  box-shadow: 0 10px 22px var(--ring);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
section:has(.process-content) .services-cta .cta-btn-primary-g-bg{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff;
}
section:has(.process-content) .services-cta .cta-btn-primary-g-bg:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px var(--ring);
  opacity: .95;
}

/* ------- Responsive tweaks ------- */
@media (max-width: 991.98px){
  section:has(.process-content){ padding: 56px 0; }
  section:has(.process-content) .process-content{ padding: 22px; }
  section:has(.process-content) .row .col-md-8{ padding: 18px 16px 6px; }
  section:has(.process-content) .row .col-md-8 p{ padding-left: 40px; }
  section:has(.process-content) .row .col-md-8::before{ left:12px; }
}
@media (max-width: 575.98px){
  section:has(.process-content) .process-content h2{ font-size: 22px; }
  section:has(.process-content) .row .col-md-8 p{ font-size: 15px; }
}

/* process-session-two */

/* =========================================
   Process Section – Polished (Navy Accent)
   Scope: .process-content + siblings in same container
========================================= */

/* ---- Header card ---- */
.process-session-two .process-content{
  background: #ffffff;
  border: 1px solid #e3e6f5;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  margin-bottom: 20px;
}
.process-session-two .process-content h2{
  color:#0f172a;
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.2;
  margin:0;
}
.process-session-two .process-content h2::after{
  content:"";
  display:block; width: 180px; height:3px; margin-top:10px;
  background: linear-gradient(90deg, #010080, #4C6BFF);
  border-radius: 3px;
}

/* ---- Left: numbered steps as timeline ---- */
.process-session-two .process-content + .row .col-md-8{
  position: relative;
  background: #ffffff;
  border: 1px solid #e3e6f5;
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

/* Sub-title paragraph (first <p>) */
.process-session-two .process-content + .row .col-md-8 > p:first-child{
  margin: 0 0 10px;
  font-weight: 700;
  color:#0f172a;
}

/* UL → timeline */
.process-session-two .process-content + .row .col-md-8 ul{
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  position: relative;
}

/* vertical guide line */
.process-session-two .process-content + .row .col-md-8 ul::before{
  content:"";
  position:absolute; left:14px; top: 6px; bottom: 6px; width:2px;
  background: linear-gradient(180deg, #010080, #4C6BFF);
  border-radius: 2px; opacity:.45;
}

/* items */
.process-session-two .process-content + .row .col-md-8 li{
  position: relative;
  counter-increment: step;
  padding-left: 46px;
  margin: 12px 0;
  color:#475569;
  line-height: 1.75;
}

/* number badge */
.process-session-two .process-content + .row .col-md-8 li::before{
  content: counter(step);
  position:absolute; left:0; top: 0.2em;
  width: 28px; height: 28px; border-radius: 8px;
  display:grid; place-items:center;
  font-weight: 800;
  color:#010080;
  background: linear-gradient(180deg, #eef2ff, #e6f0ff);
  border: 1px solid #dfe6ff;
  box-shadow: 0 3px 10px rgba(1,0,128,.18) inset;
}

/* connector dot */
.process-session-two .process-content + .row .col-md-8 li::after{
  content:"";
  position:absolute; left:22px; top: 1.35em;
  width:8px; height:8px; border-radius:50%;
  background:#010080; opacity:.25;
}

/* bold labels inside item */
.process-session-two .process-content + .row .col-md-8 li b{
  color:#0f172a;
}

/* ---- Right: images (polaroid + hover) ---- */
.process-session-two .process-content + .row .col-md-2.col-6 img{
  display:block; width:100%; height:auto;
  border-radius: 14px;
  border: 1px solid #e3e6f5;
  background:#fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  margin-bottom:10px !important;
}
.process-session-two .process-content + .row .col-md-2.col-6 img:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: #c9d2ff;
  box-shadow: 0 18px 34px rgba(15,23,42,.12);
}

/* sticky images on desktop */
@media (min-width: 992px){
  .process-session-two .process-content + .row .col-md-2.col-6{ position: sticky; top: 18px; }
}

/* ---- Responsive tweaks ---- */
@media (max-width: 991.98px){
  .process-session-two .process-content{ padding: 22px; }
  .process-session-two .process-content + .row .col-md-8{ padding: 18px 16px; }
  .process-session-two .process-content + .row .col-md-8 ul::before{ left:12px; }
  .process-session-two .process-content + .row .col-md-8 li{ padding-left: 42px; }
}
@media (max-width: 575.98px){
  .process-session-two .process-content h2{ font-size: 22px; }
  .process-session-two .process-content + .row .col-md-8 li{ font-size: 15px; }
}
.not-line::before{
    content: '' !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
.not-line::after{
    content: '' !important;
    background: none !important;
}

/* =========================================
   Hidden Danger – Dark + Navy Accent
   Scope: .hidden-content (your section has this class)
========================================= */
.hidden-content{
  --bg:#0b0f1c;          /* section bg */
  --panel:#0f1629;       /* card bg */
  --ink:#e6edf6;         /* main text */
  --muted:#a6b0c3;       /* secondary text */
  --line:#1f2a44;        /* borders */
  --accent:#010080;      /* primary navy */
  --accent-2:#4C6BFF;    /* gradient partner */
  --ring:rgba(76,107,255,.25);

  color: var(--ink);
  position: relative;
  isolation: isolate;
  padding: 70px 0; /* fallback if .section-space missing */
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(76,107,255,.12), transparent 60%),
    radial-gradient(800px 520px at 110% 110%, rgba(1,0,128,.12), transparent 60%),
    linear-gradient(180deg, #0b0f1c 0%, #0a1124 100%);
  overflow: hidden;
}

/* subtle dotted texture */
.hidden-content::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.35; pointer-events:none;
}

.hidden-content .container{ position: relative; z-index: 2; }

/* --- Title block --- */
.hidden-content .title-block{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)), var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 24px 22px;
  box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.02) inset;
  margin-bottom: 18px;
}
.hidden-content .title-block h2{
  color:#fff;
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.2;
  margin:0;
}
.hidden-content .title-block h2::after{
  content:"";
  display:block; width: 180px; height: 3px; margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
}

/* --- Intro & outro paragraphs --- */
.hidden-content > .container > p,
.hidden-content > .container > h3 + p{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)), var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px 18px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 18px;
}

/* --- Section subheading --- */
.hidden-content h3{
  color:#fff;
  font-size: clamp(20px, 1.6vw, 24px);
  margin: 18px 0 10px;
}

/* --- Bullet list as elegant cards --- */
.hidden-content ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.hidden-content ul > li{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)),
    var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px 16px 12px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.02) inset;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* left gradient bar */
.hidden-content ul > li::before{
  content:"";
  position:absolute; left:0; top:12px; bottom:12px; width:4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity:.9;
}

.hidden-content ul > li:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
}

/* headings inside list */
.hidden-content ul h4{
  color:#fff;
  font-size: 18px;
  margin: 0 0 6px;
}

/* text inside list */
.hidden-content ul p{
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
  position: relative; padding-left: 12px;
}
.hidden-content ul p::after{
  content:"";
  position:absolute; left:0; top:.58em; width:3px; height:1.05em; border-radius:2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity:.7;
}

/* --- “Value” block styling --- */
.hidden-content h3{
  position: relative;
}
.hidden-content h3::before{
  content:"";
  position:absolute; left:-15px; top:50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 6px rgba(76,107,255,.15);
}

/* --- Responsive tweaks --- */
@media (max-width: 991.98px){
  .hidden-content{ padding: 56px 0; }
}
@media (max-width: 575.98px){
  .hidden-content .title-block h2{ font-size: 24px; }
  .hidden-content ul h4{ font-size: 17px; }
}

/* =========================================
   Shared tokens (safe to duplicate)
========================================= */
.expert-content,
.sec-diy,
.sec-superior{
  --accent:#010080;
  --accent-2:#4C6BFF;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e3e6f5;
}

/* =========================================
   1) Expert’s Solution (Light, clean)
   .expert-content
========================================= */
.expert-content{
  --bg:#f7f8ff;
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(1,0,128,.08), transparent 60%),
    radial-gradient(800px 460px at 100% 100%, rgba(76,107,255,.08), transparent 60%),
    linear-gradient(180deg, #f8f9ff 0%, #eef1ff 100%);
  color: var(--ink);
  padding: 70px 0; /* fallback if .section-space absent */
}

.expert-content h2{
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.2;
  margin: 0 0 16px;
}
.expert-content h2::after{
  content:"";
  display:block; width: 180px; height: 3px; margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
}

.expert-content .col-md-8{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
.expert-content p{
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 12px;
  position: relative; padding-left: 12px;
}
.expert-content p::before{
  content:"";
  position:absolute; left:0; top:.58em;
  width:3px; height:1.05em; border-radius:2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity:.9;
}

.expert-content .col-md-4 img{
  display:block; width:100%; height:auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(15,23,42,.10);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.expert-content .col-md-4 img:hover{
  transform: translateY(-2px) scale(1.01);
  border-color:#c9d2ff;
  box-shadow: 0 18px 34px rgba(15,23,42,.14);
}

/* =========================================
   2) Professional Solutions (Dark contrast)
   .sec-diy
========================================= */
.sec-diy{
  --ink:#e6edf6; --muted:#a6b0c3; --line:#1f2a44;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(76,107,255,.12), transparent 60%),
    radial-gradient(800px 520px at 110% 110%, rgba(1,0,128,.12), transparent 60%),
    linear-gradient(180deg, #0b0f1c 0%, #0a1124 100%);
  color: var(--ink);
  padding: 70px 0;
  position: relative; isolation:isolate; overflow:hidden;
}
.sec-diy::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px; opacity:.35; pointer-events:none;
}
.sec-diy .container{ position: relative; z-index: 2; }

.sec-diy .title-block{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)), #0f1629;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.02) inset;
  margin-bottom: 16px;
}
.sec-diy .title-block h2{
  color:#fff; margin:0; font-size: clamp(26px, 2.2vw, 36px);
}
.sec-diy .title-block h2::after{
  content:""; display:block; width: 180px; height: 3px; margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 3px;
}

.sec-diy > .container > p{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)), #0f1629;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px 18px;
  color: var(--muted); line-height:1.75; margin-bottom: 16px;
}

.sec-diy ul{
  list-style:none; padding:0; margin:0;
  display:grid; gap:12px;
}
.sec-diy ul > li{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)), #0f1629;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px 16px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.02) inset;
  position:relative; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sec-diy ul > li::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px;
  border-radius:3px; background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.sec-diy ul > li:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.sec-diy ul h4{
  color:#fff; font-size:18px; margin:0 0 6px;
}
.sec-diy ul p{
  color: var(--muted); margin:0; line-height:1.7;
  position:relative; padding-left:12px;
}
.sec-diy ul p::after{
  content:""; position:absolute; left:0; top:.58em; width:3px; height:1.05em; border-radius:2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2)); opacity:.7;
}

.sec-diy h3{
  color:#fff; font-size: clamp(20px, 1.6vw, 24px);
  margin: 18px 0 10px; position: relative;
}
.sec-diy h3::before{
  content:""; position:absolute; left:-8px; top:50%; transform: translateY(-50%);
  width:6px; height:6px; border-radius:50%; background: var(--accent-2);
  box-shadow: 0 0 0 6px rgba(76,107,255,.15);
}

/* =========================================
   3) Superior Section (Light, split layout)
   .sec-superior
========================================= */
.sec-superior{
  --bg:#f7f8ff;
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(1,0,128,.08), transparent 60%),
    radial-gradient(800px 460px at 100% 100%, rgba(76,107,255,.08), transparent 60%),
    linear-gradient(180deg, #f8f9ff 0%, #eef1ff 100%);
  color: var(--ink);
  padding: 70px 0;
}
.sec-superior h2{
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.2; margin: 0 0 16px;
}
.sec-superior h2::after{
  content:""; display:block; width: 220px; height: 3px; margin-top:10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:3px;
}

.sec-superior .col-md-8{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding: 20px 18px; box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
.sec-superior p{
  color: var(--muted); line-height:1.75; margin-bottom:12px;
  position:relative; padding-left:12px;
}
.sec-superior p::before{
  content:""; position:absolute; left:0; top:.58em; width:3px; height:1.05em; border-radius:2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

.sec-superior .col-md-4 img{
  display:block; width:100%; height:auto;
  border-radius:16px; border:1px solid var(--line);
  box-shadow: 0 10px 26px rgba(15,23,42,.10);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sec-superior .col-md-4 img:hover{
  transform: translateY(-2px) scale(1.01);
  border-color:#c9d2ff; box-shadow: 0 18px 34px rgba(15,23,42,.14);
}

/* =========================================
   Responsive tweaks
========================================= */
@media (max-width: 991.98px){
  .expert-content,
  .sec-diy,
  .sec-superior{ padding: 56px 0; }
  .expert-content .col-md-8,
  .sec-superior .col-md-8{ padding: 18px 16px; }
}
@media (max-width: 575.98px){
  .expert-content h2,
  .sec-superior h2{ font-size: 24px; }
  .sec-diy .title-block h2{ font-size: 24px; }
}

/* =========================================
   Contact Section – Light + Navy Accent
   Scope: #contact.contact-form
========================================= */
#contact.contact-form{
  --bg:#f7f8ff;
  --panel:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e3e6f5;
  --accent:#010080;   /* primary */
  --accent-2:#4C6BFF; /* gradient partner */
  --ring:rgba(1,0,128,.18);

  color: var(--ink);
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(1,0,128,.08), transparent 60%),
    radial-gradient(800px 460px at 100% 100%, rgba(76,107,255,.08), transparent 60%),
    linear-gradient(180deg, #f8f9ff 0%, #eef1ff 100%);
  padding: 70px 0; /* fallback if .section-space missing */
  position: relative; isolation:isolate;
}

#contact.contact-form .contact-content{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  padding: 28px;
}

#contact.contact-form h2{
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.2;
  margin: 0 0 12px;
}
#contact.contact-form h2::after{
  content:"";
  display:block; width:200px; height:3px; margin-top:10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:3px;
}

#contact.contact-form p{ color: var(--muted); line-height: 1.7; }

/* --- Top CTA button (Call Now) --- */
#contact.contact-form .cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; min-height:48px; padding: 12px 18px;
  border-radius: 999px; text-decoration:none; font-weight:800; letter-spacing:.2px;
  border:1px solid transparent; box-shadow: 0 10px 22px var(--ring);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#contact.contact-form .cta-btn-primary-g-bg{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff;
}
#contact.contact-form .cta-btn-primary-g-bg::before{
  content:"📞"; font-size:18px;
}
#contact.contact-form .cta-btn-primary-g-bg:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px var(--ring);
  opacity:.95;
}

/* --- Form card --- */
#contact.contact-form .contact-form{
  background: linear-gradient(180deg, rgba(1,0,128,.05), rgba(76,107,255,.04)), var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
  margin-top: 10px;
}
#contact.contact-form .contact-form h3{
  margin:0 0 10px; font-size: 20px; font-weight:800; color: var(--ink);
}
#contact.contact-form .form-tag{ font-weight: 600; margin: 8px 0 14px; }

/* Inputs/select/textarea */
#contact.contact-form .form-control,
#contact.contact-form .form-select{
  border: 1px solid var(--line);
  border-radius: 12px;
  background:#fff;
  color: var(--ink);
  padding: 10px 12px;
  box-shadow: 0 3px 10px rgba(15,23,42,.04);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#contact.contact-form .form-control::placeholder{ color:#8b97b2; opacity:.9; }

#contact.contact-form .form-control:focus,
#contact.contact-form .form-select:focus{
  border-color: color-mix(in oklab, var(--line), var(--accent) 40%);
  box-shadow: 0 0 0 4px var(--ring);
  outline: none;
}

/* Textarea height */
#contact.contact-form textarea.form-control{ min-height: 120px; resize: vertical; }

/* Checkbox */
#contact.contact-form .form-check-input{
  width: 18px; height: 18px; margin-top: .25rem;
  border:1px solid var(--line); border-radius: 4px; cursor: pointer;
}
#contact.contact-form .form-check-input:checked{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-color: transparent;
}
#contact.contact-form .form-check-label a{ color: var(--accent); text-decoration: none; }
#contact.contact-form .form-check-label a:hover{ text-decoration: underline; }

/* Submit button */
#contact.contact-form .button-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width: 100%; min-height:48px;
  border-radius: 12px; border: 1px solid transparent;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff; font-weight:800; letter-spacing:.2px;
  box-shadow: 0 12px 26px var(--ring);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#contact.contact-form .button-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px var(--ring);
  opacity:.95;
}

/* Alerts (form status) */
#contact.contact-form #form-status .alert{
  border-radius: 12px; padding: 12px 14px; border:1px solid transparent;
}
#contact.contact-form #form-status .alert-success{
  background: #ecfdf5; border-color:#86efac; color:#065f46;
}
#contact.contact-form #form-status .alert-danger{
  background: #fef2f2; border-color:#fecaca; color:#7f1d1d;
}

/* Accessibility focus */
#contact.contact-form :where(a, button, input, select, textarea):focus-visible{
  outline: none; box-shadow: 0 0 0 4px var(--ring);
}

/* Responsive */
@media (max-width: 991.98px){
  #contact.contact-form{ padding: 56px 0; }
  #contact.contact-form .contact-content{ padding: 22px; }
}
@media (max-width: 575.98px){
  #contact.contact-form h2{ font-size: 24px; }
  #contact.contact-form .button-btn{ width: 100%; }
}

/* =========================================
   Location Section – Light + Navy Accent
   Scope: .location-section
========================================= */
.location-section{
  --bg:#f7f8ff;
  --panel:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e3e6f5;
  --accent:#010080;
  --accent-2:#4C6BFF;
  --ring:rgba(1,0,128,.18);

  color: var(--ink);
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(1,0,128,.08), transparent 60%),
    radial-gradient(800px 460px at 100% 100%, rgba(76,107,255,.08), transparent 60%),
    linear-gradient(180deg, #f8f9ff 0%, #eef1ff 100%);
  padding: 70px 0; /* fallback if .section-space missing */
  position: relative; isolation:isolate;
}

/* Title block */
.location-section .title-block.location-content{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  margin-bottom: 14px;
}
.location-section .title-block h2{
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.2; margin:0;
}
.location-section .title-block h2::after{
  content:"";
  display:block; width: 180px; height:3px; margin-top:10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:3px;
}

/* Intro copy card */
.location-section .location-content.text-center{
  background: linear-gradient(180deg, rgba(1,0,128,.05), rgba(76,107,255,.04)), var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
  color: var(--muted);
  margin-bottom: 16px;
}
.location-section .location-content.text-center p{
  margin: 0 0 6px; line-height: 1.7;
}
.location-section .location-content.text-center p strong{ color: var(--ink); }

/* Map wrapper (glass card) */
.location-section .gmap{
  display:block;
  width: 100% !important;
  height: 360px !important; /* override inline 350 for cleaner look */
  border: 0 !important;
  border-radius: 18px;
  background:#eef2ff; /* graceful bg while map loads */
  box-shadow: 0 12px 30px rgba(15,23,42,.10);
  outline: 1px solid var(--line);
}

/* Optional decorative glow ring behind map */
.location-section .gmap::before{ content:none; } /* just to keep scope clean */

/* Focus states for a11y if map gets focus */
.location-section .gmap:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring), 0 12px 30px rgba(15,23,42,.12);
  border-radius: 18px;
}

/* Responsive tweaks */
@media (max-width: 991.98px){
  .location-section{ padding: 56px 0; }
}
@media (max-width: 575.98px){
  .location-section .title-block h2{ font-size: 24px; }
  .location-section .gmap{ height: 300px !important; }
}

/* Scoped CTA styles */
.location-section .cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding: 8px 14px; border-radius: 999px;
  font-weight:800; text-decoration:none; border:1px solid transparent;
  box-shadow: 0 8px 18px var(--ring);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  margin: 4px;
}
.location-section .cta-btn-primary-g-bg{
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:#fff;
}
.location-section .cta-btn-ghost{
  background:#fff; color: var(--ink); border-color: var(--line);
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.location-section .cta-btn:hover{ transform: translateY(-2px); opacity:.95; }