body {
            background-color: #f8f9fa;
            padding: 40px 0;
        }
        .feature-card {
            background: white;
            border-radius: 12px;
            padding: 40px 20px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            border: 1px solid #e9ecef;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e7f3ff;
            border-radius: 50%;
        }
        .feature-icon i {
            font-size: 40px;
            color: #0d6efd;
        }
        .feature-title {
            font-size: 16px;
            font-weight: 600;
            color: #212529;
            margin: 0;
        }
   


     /* Global adjustments and hero/card layout (keeps Material Kit intact) */
    :root{
      --bg:#F28B05;
      --card:#ffffff;
      --accent-a: #F28B05;
      --accent-b: #FA950C;
      --accent-c: #FBA42F;
      --muted:#F28B05;
      --radius:18px;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    body { background: linear-gradient(180deg,#eef3fb 0%, #f8fafc 100%); color: #0b1220; }

    /* wrapper */
    .wrap{ max-width:1280px; margin:28px auto; padding:20px; }

    
    .hero-overlay{
      position:absolute; inset:0;
      background: linear-gradient(120deg, rgba(3,10,25,0.42) 0%, rgba(16,26,45,0.18) 45%, rgba(0,0,0,0.14) 100%);
      clip-path: polygon(0 0, 78% 0, 100% 100%, 0% 100%);
      display:flex;
      align-items:center;
      padding:44px 60px;
    }


    .hero h1{
      margin:0 0 10px 0;
      font-size:48px; line-height:1.02; font-weight:800;
      text-shadow: 0 10px 30px rgba(2,8,20,0.45);
    }

    .hero h1 .accent{
      background:linear-gradient(90deg,var(--accent-a),var(--accent-b));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    }

    .sub{
      margin-top:6px;color:rgba(255,255,255,0.92);font-weight:600;font-size:18px;
    }

    .hero-actions{ margin-top:20px; display:flex; gap:12px; align-items:center }
    .btn-inline {
      border:0;padding:12px 18px;border-radius:12px;font-weight:800;cursor:pointer;
      box-shadow: 0 12px 30px rgba(10,20,40,0.12);
    }
    .btn-primary-hero{ background:linear-gradient(90deg,var(--accent-a),var(--accent-b)); color:#fff; }
    .btn-secondary-hero{ background:rgba(255,255,255,0.95); color:#0b1220; font-weight:700; }

    .badges{ display:flex; gap:10px;margin-top:20px; flex-wrap:wrap}
    .badge{ background:rgba(255,255,255,0.06); color:#fff; padding:10px 12px; border-radius:999px; font-weight:700; font-size:13px; box-shadow:0 8px 20px rgba(0,0,0,0.12) }

    /* responsive tweaks */
    @media (max-width:1024px){ .hero{ grid-template-columns: 1fr 420px } .hero h1{ font-size:44px } }
    @media (max-width:840px){
      .hero{ grid-template-columns: 1fr; gap:14px }
      .hero-overlay{ clip-path:none; padding:28px; align-items:flex-end; }
      .card-improved{ order:2; margin-top:-60px; margin-left:auto; margin-right:auto; width:94%; min-height:auto; transform:translateY(-40px) }
      .hero h1{ font-size:34px }
    }
    @media (max-width:480px){
      .hero h1{ font-size:26px }
      .ribbon-improved{ transform:none; font-size:13px; padding:10px 12px }
      .hero-overlay{ padding:18px }
      .card-improved{ padding:12px; border-radius:14px }
      .badge{ padding:8px 10px; font-size:12px }
      .btn-inline{ padding:10px 12px }
    }
        .feature-card {
            background: white;
            border-radius: 12px;
            padding: 40px 20px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            border: 1px solid #e9ecef;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e7f3ff;
            border-radius: 50%;
        }
        .feature-icon i {
            font-size: 40px;
            color: #0d6efd;
        }
        .feature-title {
            font-size: 16px;
            font-weight: 600;
            color: #212529;
            margin: 0;
        }
    

   
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:linear-gradient(180deg,#eef3fb 0%, #f8fafc 100%);color:#0b1220}
    .wrap{max-width:1280px;margin:28px auto;padding:20px}

    /* grid layout */
    .hero{
      display:grid;
      grid-template-columns: 1fr 460px;
      gap:28px;
      align-items:stretch;
    }

    /* left hero */
    .hero-left{
      position:relative;
      min-height:560px;
      border-radius:calc(var(--radius) + 4px);
      overflow:hidden;
      box-shadow: 0 30px 60px rgba(10,20,40,0.08);
    }

    /* diagonal clipped image overlay */
    .hero-bg{
      position:absolute; inset:0;
      background-image: url('../../assets/img/bg-3.jpg');
      background-size:cover;
      background-position:center;
      transform-origin:center;
      filter:contrast(0.9) saturate(0.95) brightness(0.85);
    }
    /* soft gradient overlay with diagonal cut */
    .hero-overlay{
      position:absolute; inset:0;
      background: linear-gradient(120deg, rgba(3,10,25,0.42) 0%, rgba(16,26,45,0.18) 45%, rgba(0,0,0,0.14) 100%);
      clip-path: polygon(0 0, 78% 0, 100% 100%, 0% 100%);
      display:flex;
      align-items:center;
      padding:44px 60px;
    }

    .hero-content{
      color:#fff;
      max-width:760px;
      transform:translateY(-10px);
    }
    .eyebrow{
      display:inline-block;
      background:rgba(255,255,255,0.12);
      color:#fff; padding:8px 14px;border-radius:999px;font-weight:700;font-size:13px;
      margin-bottom:18px;letter-spacing:0.3px;
      backdrop-filter: blur(4px);
    }

    h1{
      margin:0 0 10px 0;
      font-size:56px; line-height:1.02; font-weight:800;
      text-shadow: 0 10px 30px rgba(2,8,20,0.45);
    }
    h1 .accent{background:linear-gradient(90deg,var(--accent-a),var(--accent-b)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}

    .sub{
      margin-top:6px;color:rgba(255,255,255,0.9);font-weight:600;font-size:18px;
    }

    .hero-actions{ margin-top:20px; display:flex; gap:12px; align-items:center }
    .btn{
      border:0;padding:12px 18px;border-radius:12px;font-weight:800;cursor:pointer;
      box-shadow: 0 12px 30px rgba(10,20,40,0.12);
    }
    .btn-primary{ background:linear-gradient(90deg,var(--accent-a),var(--accent-b)); color:#fff; }
    .btn-secondary{ background:rgba(255,255,255,0.95); color:#0b1220; font-weight:700; }

    /* floating trust badges */
    .badges{ display:flex; gap:10px;margin-top:20px; flex-wrap:wrap}
    .badge{ background:rgba(255,255,255,0.06); color:#fff; padding:10px 12px; border-radius:999px; font-weight:700; font-size:13px; box-shadow:0 8px 20px rgba(0,0,0,0.12) }

    /* RIGHT: form card */
    .card{
      background: linear-gradient(180deg,var(--card), #fbfdff);
      border-radius:var(--radius);
      padding:18px;
      box-shadow: 0 22px 50px rgba(6,18,40,0.08);
      position:relative;
      overflow:visible;
      /*min-height:560px;*/
      display:flex;flex-direction:column;
    }

    /* ribbon / header */
    .card-header{ display:flex; align-items:center; gap:12px; justify-content:space-between; margin-bottom:6px }
    .title{ font-weight:800; font-size:18px; color:#0b1220 }
    .subtitle{ color:var(--muted); font-size:13px }

    .ribbon{
      background: linear-gradient(90deg,var(--accent-a),var(--accent-b));
      color:white; padding:14px 18px; border-radius:12px; font-weight:900; font-size:15px;
      transform: translateY(-20px);
      box-shadow: 0 20px 40px rgba(255,63,122,0.12);
    }

    form{ display:flex; flex-direction:column; gap:12px; margin-top:10px; flex:1 }
    label{font-size:13px;color:var(--muted);margin-bottom:6px}
    .field{ padding:12px 14px; border-radius:12px; border:1px solid #e9eef6; font-size:15px; background:transparent; outline:none }
    .field:focus{ box-shadow: 0 10px 30px rgba(31,182,255,0.08); border-color:rgba(31,182,255,0.35) }

    .row-2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px }

    /* estimate preview */
    .estimate-preview{
      margin-top:6px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:12px; border-radius:12px; background:linear-gradient(180deg, rgba(31,182,255,0.06), rgba(31,182,255,0.03));
      border:1px solid rgba(31,182,255,0.06);
    }
    .estimate-amount{ font-weight:900; font-size:22px; color:var(--accent-a) }
    .estimate-detail{ color:var(--muted); font-size:13px }

    .submit{ margin-top:8px; display:flex; gap:10px; align-items:center }
    .btn-submit{ flex:1; background: linear-gradient(90deg,var(--accent-c),#3ecbff); color:#fff; border-radius:12px; padding:12px 14px; border:0; font-weight:800; box-shadow:0 12px 30px rgba(31,182,255,0.12); cursor:pointer }
    .call-pill{ background:#0b1220; color:#fff; padding:10px 12px; border-radius:999px; font-weight:800; font-size:14px }

    .note{ color:var(--muted); font-size:13px; margin-top:8px }

    /* tiny animation */
    .pulse{
      animation: pulse 2.6s infinite;
    }
    @keyframes pulse {
      0%{ transform:scale(1); opacity:1}
      50%{ transform:scale(1.03); opacity:0.95}
      100%{ transform:scale(1); opacity:1}
    }

    /* responsive */
    @media (max-width:1024px){
      .hero{ grid-template-columns: 1fr 420px }
      h1{ font-size:48px }
    }
    @media (max-width:840px){
      .hero{ grid-template-columns: 1fr; gap:14px }
      .hero-overlay{ clip-path:none; padding:28px; align-items:flex-end; }
      /*.card{ order:2; margin-top:-60px; margin-left:auto; margin-right:auto; width:100%; min-height:auto; transform:translateY(-40px) }*/
      h1{ font-size:34px }
    }
    @media (max-width:480px){
      h1{ font-size:26px }
      .ribbon{ transform:none; font-size:13px; padding:10px 12px }
      .hero-overlay{ padding:18px }
      /*.card{ padding:12px; border-radius:14px }*/
      .badge{ padding:8px 10px; font-size:12px }
      .btn{ padding:10px 12px }
      .btn-primary{ font-size:14px }
      .estimate-amount{ font-size:18px }
      .row-2{ grid-template-columns:1fr }
    }

    /* small error */
    .error{ color:#b32f2f; font-size:13px; display:none }

    /* subtle icon in inputs */
    .input-icon{ position:relative }
    .input-icon svg{ position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:0.6 }


          /* Scoped styles for the advanced estimate card */
          .estimate-card-advanced{
            --card-bg: #fff;
            --accent1: #ff3f7a;
            --accent2: #1fb6ff;
            --muted: #6b7280;
            width:100%;
            max-width:460px;
            border-radius:20px;
            background:linear-gradient(180deg,var(--card-bg), #fbfdff);
            padding:16px;
            box-shadow:0 30px 60px rgba(10,20,40,0.08);
            display:flex;
            flex-direction:column;
            gap:12px;
            font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
          }
          .est-head{ display:flex; align-items:center; gap:12px; justify-content:space-between; }
          .est-brand{ display:flex; align-items:center; gap:12px; }
          .est-logo{ width:70px;height:44px;border-radius:10px; display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:18px; box-shadow:0 8px 20px rgba(255,63,122,0.12); }
          .est-title{font-weight:800;font-size:16px;color:#0b1220}
          .est-sub{font-size:12px;color:var(--muted)}
          .ribbon-advanced{  color:#fff;padding:8px 12px;border-radius:12px;font-weight:800;font-size:13px; box-shadow:0 10px 28px rgba(255,63,122,0.12); }
          form#estForm{display:flex;flex-direction:column;gap:10px;padding-top:2px}
          label.small{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
          .input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #e6e9ef;font-size:14px;outline:none;background:#fff}
          .input:focus{box-shadow:0 10px 30px rgba(31,182,255,0.06);border-color:rgba(31,182,255,0.25)}
          .select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
          .preset{padding:8px 10px;border-radius:10px;border:1px dashed #e6e9ef;font-size:13px;color:var(--muted);text-align:center;cursor:pointer}
          .preset.active{border-style:solid;background:linear-gradient(180deg, rgba(255,63,122,0.06), rgba(255,63,122,0.02));color:var(--accent1);font-weight:700;box-shadow:0 10px 30px rgba(255,63,122,0.06)}
          
          .slider-wrap{display:flex;align-items:center;gap:12px}
          .items-value{min-width:56px;text-align:center;font-weight:700;color:#0b1220;background:#f3f7ff;padding:8px;border-radius:8px}
          .toggles{display:flex;gap:8px;flex-wrap:wrap}
          .chip{padding:8px 10px;border-radius:999px;border:1px solid #e7ebf3;font-size:13px;color:var(--muted);background:#fff;cursor:pointer}
          .chip.active{background:linear-gradient(90deg,var(--accent1),#ff9bb3);color:#fff;border-color:transparent;font-weight:700;box-shadow:0 10px 28px rgba(255,63,122,0.08)}
          .upload-box{border:1px dashed #e9eef6;padding:10px;border-radius:10px;text-align:center;font-size:13px;color:var(--muted);background:#fff}
          .thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
          .thumbs img{height:56px;border-radius:8px;object-fit:cover;border:1px solid #eef2f7}
          .estimate-breakdown{border-radius:12px;padding:12px;background:linear-gradient(180deg,rgba(31,182,255,0.04),rgba(31,182,255,0.02));border:1px solid rgba(31,182,255,0.05);display:flex;flex-direction:column;gap:8px}
          .line{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}
          .line.total{font-weight:900;color:var(--accent1);font-size:18px}
          .err{color:#b32f2f;font-size:13px;display:none}
          .btns{display:flex;gap:8px;margin-top:6px}
          .btn-prim{flex:1;padding:10px 12px;border-radius:12px;border:0;background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#fff;font-weight:800;cursor:pointer;box-shadow:0 12px 30px rgba(31,182,255,0.08)}
          .btn-secondary{padding:10px 12px;border-radius:12px;border:1px solid #e6e9ef;background:#fff;color:#0b1220;cursor:pointer}
          .est-toast{ position:fixed;right:22px;bottom:22px;background:linear-gradient(90deg,var(--accent1),#ff9bb3);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 18px 36px rgba(10,20,40,0.16);display:none;z-index:9999;font-weight:700; }
          @media (max-width:480px){ .select-grid{grid-template-columns:repeat(2,1fr)} .estimate-card-advanced{max-width:100%} }
   

  /* Services section (Scoped styles) */
  #our_services .service-item { transition: transform .22s ease, box-shadow .22s ease; border:1px solid #eef2f7; background:#fff; }
  #our_services .service-item:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(8,20,40,0.06); }
  #our_services .service-bubble { width:64px; height:64px; border-radius:12px; background:#f3f8ff; display:grid; place-items:center; font-size:26px; box-shadow:0 6px 18px rgba(31,182,255,0.04); }
  #our_services .service-icon-emoji { font-size:26px; }
  #our_services h5 { margin-bottom:6px; font-weight:800; font-size:16px; color:#D77E0A; }
  #our_services p { margin-bottom:0;  font-size:14px; }
  /* small responsive tweak */
  @media (max-width:576px) {
    #our_services .service-bubble { width:56px; height:56px; font-size:22px; }
    #our_services h5 { font-size:15px; }
  }



/* FAQ section (scoped) */
#faq-section { padding: 48px 0; }
#faq-section .panel-left { padding-right: 28px; }
#faq-section h3.section-title { font-size: 28px; margin-bottom: 10px; font-weight: 800; }
#faq-section p.section-sub { color: var(--muted, #6b7280); margin-bottom: 20px; }

/* Accordion card styling */
#faq-section .accordion .accordion-item {
  border: 1px solid rgba(14, 30, 58, 0.06);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}
#faq-section .accordion-button {
  font-weight: 700;
  color: #0b1220;
  padding: 16px 18px;
  background: transparent;
  border: 0;
}
#faq-section .accordion-button::after {
  /* larger icon */
  font-size: 18px;
}
#faq-section .accordion-body {
  padding: 14px 18px 18px 18px;
  color: #444b58;
  background: linear-gradient(180deg, rgba(250,250,255,1), rgba(245,249,255,1));
  font-size: 15px;
}

/* Right CTA card */
#faq-section .cta-card {
  background: linear-gradient(90deg, rgba(255,63,122,0.08), rgba(31,182,255,0.06));
  border-radius: 14px;
  padding: 26px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(10,20,40,0.06);
  height: 100%;
}
#faq-section .cta-card h4 { font-size: 20px; margin-bottom: 8px; font-weight:800; color:#0b1220; }
#faq-section .cta-card p { color: var(--muted,#6b7280); margin-bottom: 16px; }
#faq-section .cta-card .cta-btn {
  display:inline-block;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight:800;
  text-decoration:none;
  border: 0;
  background: linear-gradient(90deg,#ff3f7a,#ff9bb3);
  color:#fff;
  box-shadow: 0 12px 30px rgba(255,63,122,0.12);
}

/* small screens */
@media (max-width: 767.98px) {
  #faq-section { padding: 28px 0; }
  #faq-section .panel-left { padding-right: 0; }
  #faq-section .cta-card { margin-top: 18px; }
}

/* ---------- Mobile-focused visual update (priority: overrides) ---------- */

/* card base (keeps desktop but gives mobile orange look) */
.card-improved {
  max-width: 460px;
  width: 94%;
  margin: 0 auto;
  background: linear-gradient(180deg, #ff5a2d 0%, #ff7f4a 100%);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 22px 50px rgba(6,18,40,0.12);
  color: #fff;
  position: relative;
  transform: translateY(-40px);
  border: 1px solid rgba(0,0,0,0.06);
}

/* top row with small logo and phone CTA */
.card-improved .card-top-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.card-improved .mini-logo{ height:36px; object-fit:contain; filter:brightness(1.15); }
.card-improved .phone-pill{
  background: rgba(255,255,255,0.12);
  color: #fff;
  padding:10px 12px;
  border-radius: 10px;
  font-weight:800;
  text-decoration:none;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

/* brand row */
.card-improved .est-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:10px; }
.card-improved .est-logo{ width:56px;height:36px;border-radius:10px;background:rgba(0,0,0,0.12); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:16px; }
.card-improved .est-title{ font-weight:800; font-size:18px; margin:0; line-height:1.05 }
.card-improved .small-sub{ font-size:13px; opacity:0.95; margin-top:2px }

/* small ribbon */
.card-improved .ribbon-advanced { background: rgba(0,0,0,0.12); color:#fff; padding:6px 10px; border-radius:10px; font-weight:800; font-size:13px; }

/* form inputs (mobile friendly) */
.card-improved form{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.card-improved .mobile-input{
  padding:14px 14px;
  border-radius:12px;
  border:0;
  font-size:15px;
  outline:none;
  background: #fff;
  color:#0b1220;
  box-shadow: 0 8px 20px rgba(11,18,32,0.06);
}
.card-improved .mobile-input::placeholder{ color:#9aa3ad; }

/* submit button like screenshot */
.card-improved .mobile-submit{
  background: #ff3f1f;
  border-radius:12px;
  padding:14px 18px;
  font-weight:900;
  font-size:16px;
  color:#fff;
  border:0;
  cursor:pointer;
  box-shadow: 0 16px 40px rgba(255,63,122,0.12);
}

/* error + note */
.card-improved .err{ color:#ffd2d2; font-size:13px; display:none; margin-top:4px }
.card-improved .note{ font-size:12px; opacity:0.95; margin-top:6px }

/* toast */
.est-toast { position:fixed; right:18px; bottom:92px; background:#0b1220; color:#fff; padding:10px 14px; border-radius:12px; display:none; z-index:9999; box-shadow:0 18px 36px rgba(0,0,0,0.18); }

/* Sticky bottom call / whatsapp pill (like screenshot) */
.contact-sticky {
  position:fixed;
  left:16px;
  right:16px;
  bottom:18px;
  z-index:9998;
  display:flex;
  justify-content:center;
  gap:12px;
  pointer-events: auto;
}
.contact-sticky .contact-pill {
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-height:56px;
  border-radius:12px;
  box-shadow: 0 20px 40px rgba(6,18,40,0.12);
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  font-weight:800;
}
.contact-sticky .call { background: linear-gradient(90deg,#ff5722,#ff7043); padding:12px 18px; justify-content:center; }
.contact-sticky .wa { background:#17b35f; padding:12px 18px; justify-content:center; }

/* pill inner styling */
.contact-sticky .contact-pill i{ font-size:18px; margin-left:8px; }
.contact-sticky .contact-pill span{ flex:1; text-align:center; padding-right:8px; }

/* smaller screens adjustments */
@media (max-width:840px){
  .hero-left{ min-height:400px; }
  .card-improved{ width:82%; transform:translateY(-20px) }
  .hero h1{ font-size:22px; }
}

/* ensure desktop keeps original advanced card look by default (only change when narrow) */
@media (min-width:841px){
  .card-improved{ background: linear-gradient(180deg,var(--card), #fbfdff); color: #0b1220; transform:none; width:100%; max-width:460px; }
  .card-improved .mobile-input{ background:transparent; color: #0b1220; border:1px solid #e9eef6; box-shadow:none; }
  .card-improved .mini-logo{ display:none }
  .card-improved .phone-pill{ display:none }
  .contact-sticky{ display:none; }
}