:root{
      --primary:#0b8c4c;
      --primary-dark:#d93025;
      --accent:#ffb100;
      --bg:#ffffff;
      --text:#1f2933;
      --muted:#6b7280;
      --danger:#c53030;
      --radius:10px;
      --shadow:0 18px 40px rgba(15,23,42,0.14);
    }
    .btn-danger-solid{
  background:#c53030 !important;   /* red */
  color:#ffffff !important;
  border:1px solid #c53030 !important;
}

.btn-danger-solid:hover{
  background:#a61b1b !important;
  border-color:#a61b1b !important;
}
    *{box-sizing:border-box;margin:0;padding:0;}
    body{
      font-family:'Poppins',sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
    }
    a{text-decoration:none;color:inherit;}
    img{max-width:100%;display:block;}
    .container{
      width:100%;
      max-width:1200px;
      margin:0 auto;
      padding:0 16px;
    }

    /* HEADER / NAV */
    header{
      position:sticky;
      top:0;
      z-index:100;
      background:rgba(255,255,255,0.96);
      backdrop-filter:blur(12px);
      box-shadow:0 4px 18px rgba(15,23,42,0.08);
    }
    .nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 16px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
    }
   .brand-logo {
    width: 80px;          /* size as you like */
    height: 60px;
    border-radius: 0;     /* make sure NO rounding */
    background: transparent;  /* let the image show its own colors */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;           /* no extra padding */
    border: none;         /* no border line */
}

/* remove any rounding from the image itself */
.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* or 'cover' if you want it to fill */
    border-radius: 0 !important;
}

    .brand-text-small{
      font-size:12px;
      color:var(--muted);
    }
    nav ul{
      list-style:none;
      display:flex;
      gap:20px;
      align-items:center;
    }
    nav ul li a{
      font-size:14px;
      font-weight:500;
      color:var(--muted);
    }
    nav ul li a:hover{
      color:var(--primary);
    }
    .nav-actions{
      display:flex;
      gap:10px;
      align-items:center;
    }
    
    .btn{
      border:none;
      outline:none;
      cursor:pointer;
      padding:10px 18px;
      border-radius:999px;
      font-size:14px;
      font-weight:500;
      display:inline-flex;
      align-items:center;
      gap:8px;
      transition:all .2s ease;
      white-space:nowrap;
    }
    .btn-primary{
      background:var(--primary);
      color:#fff;
    }
    .btn-primary:hover{
      background:var(--primary-dark);
      box-shadow:var(--shadow);
      transform:translateY(-1px);
    }
    .btn-outline{
      border:1px solid var(--primary);
      color:var(--primary);
      background:transparent;
    }
    .btn-outline1 {
    border: 1px solid #ffffff;
    color: #ffffff;
    background: transparent;
}
    .btn-outline:hover{
      background:var(--primary);
      color:#fff;
    }
    .mobile-toggle{
      display:none;
      width:32px;
      height:32px;
      border-radius:999px;
      border:1px solid #e5e7eb;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    .mobile-toggle span{
      width:18px;
      height:2px;
      background:#111827;
      display:block;
      position:relative;
    }
    .mobile-toggle span::before,
    .mobile-toggle span::after{
      content:"";
      position:absolute;
      width:18px;
      height:2px;
      background:#111827;
      left:0;
    }
    .mobile-toggle span::before{top:-5px;}
    .mobile-toggle span::after{top:5px;}

    /* HERO */
   /* .hero{
      padding:40px 0 40px;
      background:radial-gradient(circle at top left,#e0f8ed,transparent 55%),#f5f7fb;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.1fr 0.9fr;
      gap:30px;
      align-items:center;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 12px;
      border-radius:999px;
      background:#e5f7ed;
      color:#166534;
      font-size:12px;
      margin-bottom:10px;
    }
    .pill-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#22c55e;
      box-shadow:0 0 0 6px rgba(34,197,94,0.35);
    }
    .hero h1{
      font-size:32px;
      line-height:1.2;
      margin-bottom:12px;
    }
    .hero h1 span{
      color:var(--primary);
    }
    .hero-sub{
      font-size:14px;
      color:var(--muted);
      margin-bottom:18px;
    }
   
    .hero-ctas{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:16px;
      margin-top: 1rem;
    }
    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      font-size:12px;
      color:var(--muted);
    }
    .hero-badges i{
      color:var(--primary);
    }
    .hero-card{
      background:#fff;
      border-radius:20px;
      padding:18px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .hero-card-tag{
      position:absolute;
      right:15px;
      top:15px;
      padding:4px 10px;
      border-radius:999px;
      font-size:11px;
      background:#fef3c7;
      color:#92400e;
    }
    .hero-card h3{
      font-size:16px;
      margin-bottom:8px;
    }
    .hero-list{
      list-style:none;
      font-size:13px;
      color:var(--muted);
    }
    .hero-list li{
      display:flex;
      align-items:flex-start;
      gap:6px;
      margin-bottom:6px;
    }
    .hero-list li i{
      color:var(--primary);
      margin-top:2px;
      font-size:11px;
    } */ 

    /* SECTIONS GENERIC */
    section{
      padding:48px 0;
    }
    .section-heading{
      text-align:center;
      margin-bottom:28px;
    }
    .section-heading span{
      display:inline-block;
      font-size:12px;
      padding:4px 10px;
      border-radius:999px;
      background:#e5e7eb;
      color:#4b5563;
      margin-bottom:6px;
    }
    .section-heading h2{
      font-size:24px;
      margin-bottom:6px;
    }
    .section-heading p{
      font-size:14px;
      color:var(--muted);
      max-width:620px;
      margin:0 auto;
    }

    /* SERVICE OVERVIEW */
    .cards-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .card{
      background:#fff;
      border-radius:var(--radius);
      padding:16px;
      box-shadow:0 10px 30px rgba(15,23,42,0.08);
    }
    .card-icon{
      width:36px;
      height:36px;
      border-radius:12px;
      background:#ecfdf3;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--primary);
      margin-bottom:8px;
      font-size:16px;
    }
    .card h3{
      font-size:15px;
      margin-bottom:4px;
    }
    .card p{
      font-size:13px;
      color:var(--muted);
      margin-bottom:8px;
    }
    .card-footer-link{
      font-size:13px;
      color:var(--primary);
      display:flex;
      align-items:center;
      gap:4px;
    }
    .card-footer-link i{
      font-size:11px;
    }

    /* EXPERIENCE / STATS */
    .stats-wrap{
      display:grid;
      grid-template-columns:1.2fr 0.8fr;
      gap:18px;
      align-items:center;
    }
    .exp-block h3{
      font-size:18px;
      margin-bottom:8px;
    }
    .exp-block p{
      font-size:14px;
      color:var(--muted);
      margin-bottom:12px;
    }
    .stats-row{
      display:flex;
      flex-wrap:wrap;
      gap:18px;
    }
    .stat-item{
      background:#fff;
      border-radius:var(--radius);
      padding:12px 14px;
      box-shadow:0 12px 30px rgba(15,23,42,0.08);
      min-width:120px;
    }
    .stat-number{
      font-size:18px;
      font-weight:700;
      color:var(--primary);
    }
    .stat-label{
      font-size:12px;
      color:var(--muted);
    }

    /* HOW IT WORKS */
    .steps-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .step{
      background:#fff;
      border-radius:var(--radius);
      padding:14px;
      box-shadow:0 12px 30px rgba(15,23,42,0.08);
      position:relative;
    }
    .step-number{
      width:24px;
      height:24px;
      border-radius:999px;
      background:#eef2ff;
      color:#4338ca;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      position:absolute;
      top:12px;
      right:12px;
    }
    .step h3{
      font-size:15px;
      margin-bottom:6px;
    }
    .step p{
      font-size:13px;
      color:var(--muted);
    }

    /* INDUSTRIES */
    .industries-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
    }
    .industry-pill{
      background:#fff;
      border-radius:999px;
      padding:10px 12px;
      display:flex;
      gap:8px;
      align-items:center;
      font-size:13px;
      box-shadow:0 10px 26px rgba(15,23,42,0.08);
    }
    .industry-pill i{
      color:var(--primary);
    }

    /* WHY CHOOSE US */
    .why-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .why-card{
      background:#fff;
      border-radius:var(--radius);
      padding:16px;
      box-shadow:0 12px 32px rgba(15,23,42,0.08);
    }

    /* TESTIMONIAL */
    .testi-wrap{
      display:grid;
      grid-template-columns:0.9fr 1.1fr;
      gap:18px;
      align-items:center;
    }
    .testi-card{
      background:#fff;
      border-radius:var(--radius);
      padding:16px;
      box-shadow:0 12px 28px rgba(15,23,42,0.08);
      font-size:13px;
      color:var(--muted);
    }
    .testi-card strong{
      color:var(--text);
      display:block;
      margin-top:8px;
    }
    .google-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      background:#fef3c7;
      color:#92400e;
      font-size:11px;
      margin-top:10px;
    }

    /* LOCATIONS */
    .locations-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .location-card{
      background:#fff;
      border-radius:var(--radius);
      padding:14px;
      box-shadow:0 12px 28px rgba(15,23,42,0.08);
    }
    .location-card h3{
      font-size:14px;
      margin-bottom:4px;
    }
    .location-card p{
      font-size:12px;
      color:var(--muted);
      margin-bottom:6px;
    }

    /* BLOG */
    .blog-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .blog-card{
      background:#fff;
      border-radius:var(--radius);
      padding:14px;
      box-shadow:0 12px 30px rgba(15,23,42,0.08);
      font-size:13px;
    }
    .blog-card span{
      font-size:11px;
      color:var(--muted);
      display:block;
      margin-bottom:4px;
    }

    /* CONTACT */
    .contact-grid{
      display:grid;
      grid-template-columns:1.1fr 0.9fr;
      gap:18px;
      margin:3rem;
    }
    .contact-form{
      background:#fff;
      border-radius:var(--radius);
      padding:18px;
      box-shadow:0 14px 32px rgba(15,23,42,0.08);
    }
    .form-row{
      margin-bottom:10px;
    }
    .form-row label{
      display:block;
      font-size:12px;
      margin-bottom:4px;
    }
    .form-row input,
.form-row textarea,
.form-row select,
.input-field {
  width:100%;
  border-radius:8px;
  border:1px solid #e5e7eb;
  padding:8px 10px;
  font-size:13px;
  outline:none;
  background:#fff;
}

    .form-row textarea{
      resize:vertical;
      min-height:80px;
    }
    .form-hint{
      font-size:11px;
      color:var(--muted);
      margin-bottom:6px;
    }
    .map-box{
      background:#e5e7eb;
      border-radius:var(--radius);
      padding:10px;
      font-size:13px;
      color:var(--muted);
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .map-placeholder{
  height:420px; /* or 280 / 300 as you like */
  border-radius:12px;
  overflow:hidden; /* ensure iframe corners follow the radius */
  background:linear-gradient(135deg,#cbd5f5,#e5e7eb);
  display:flex;
}
.map-placeholder iframe{
  width:100%;
  height:100%;
  border:0;
}


    /* EXTRA FEATURE STRIP */
    .feature-strip{
      background:#0f172a;
      color:#e5e7eb;
      padding:18px 0;
    }
    .feature-strip-inner{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      justify-content:space-between;
    }
    .feature-tag{
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.04em;
      color:#a5b4fc;
    }
    .feature-pill{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .feature-pill span{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      background:#111827;
      border:1px solid #1f2937;
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .feature-pill span i{
      color:#22c55e;
    }

    /* FOOTER */
    footer{
      background:#020617;
      color:#9ca3af;
      padding:18px 0 14px;
      font-size:12px;
    }
    .footer-top{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:18px;
      margin-bottom:10px;
    }
    .footer-brand{
      font-weight:600;
      color:#e5e7eb;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }
    .social-links{
      display:flex;
      gap:10px;
    }
    .social-links a{
      width:26px;
      height:26px;
      border-radius:999px;
      border:1px solid #1f2937;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#e5e7eb;
      font-size:12px;
    }

    /* RESPONSIVE */
    @media(max-width:900px){
      .hero-grid,
      .stats-wrap,
      .testi-wrap,
      .contact-grid{
        grid-template-columns:1fr;
      }
    }
    @media(max-width:800px){
      nav ul{
        position:absolute;
        top:60px;
        left:0;
        right:0;
        background:#fff;
        flex-direction:column;
        padding:10px 16px 14px;
        border-bottom:1px solid #e5e7eb;
        display:none;
      }
      nav ul.open{
        display:flex;
      }
      .nav-actions{
        display:none;
      }
      .mobile-toggle{
        display:flex;
      }
      .hero-grid{
        grid-template-columns:1fr;
      }
      .cards-grid,
      .steps-grid,
      .industries-grid,
      .why-grid,
      .blog-grid,
      .locations-grid{
        grid-template-columns:1fr 1fr;
      }
    }
    @media(max-width:600px){
      .cards-grid,
      .steps-grid,
      .industries-grid,
      .why-grid,
      .blog-grid,
      .locations-grid{
        grid-template-columns:1fr;
      }
    }
    /* TABS + PANELS */
.service-tabs{
  display:inline-flex;
  border-radius:999px;
  padding:4px;
  background:#e5e7eb;
  margin:0 auto 18px;
  gap:4px;
}
.service-tab{
  border:none;
  outline:none;
  cursor:pointer;
  padding:8px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  background:transparent;
  color:var(--muted);
  transition:all .25s ease;
}
.service-tab.active{
  background:#fff;
  color:var(--primary);
  box-shadow:0 8px 24px rgba(15,23,42,0.14);
  transform:translateY(-1px);
}

.service-panel{
  display:none;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}

.service-panel.active{
  display:grid;
  opacity:1;
  transform:translateY(0);
}


/* CARD ANIMATIONS */
.pest-card{
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.pest-card{
  position:relative;
  background:#ffffff;
  border-radius:20px;
  padding:14px 14px 18px;
  box-shadow:0 18px 40px rgba(15,23,42,0.16);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

/* BOUNCE EFFECT */
.pest-card:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 25px 60px rgba(15,23,42,0.25);
}

/* enquiry button micro animation */
.card-enquiry-btn{
  margin-top:8px;
  font-size:12px;
  padding:8px 16px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card-enquiry-btn:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 10px 24px rgba(15,23,42,0.18);
}

/* wider intro card spanning 2 cols on desktop */
.card-wide{
  grid-column:1 / -1;
}
@media(max-width:800px){
  .card-wide{
    grid-column:auto;
  }
}
/* BANNER SLIDER */

.banner-slider{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:420px;
  overflow:hidden;
  z-index:0;
}

.banner-slide{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1s ease;
}

.banner-slide.active{
  opacity:1;
}

.hero{
  position:relative;
  padding:80px 0;
  color:white;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
}
/* ===== FULL WIDTH BANNER ===== */

.banner-section{
  position:relative;
  width:100%;
  height:520px;
  overflow:hidden;
}

.banner-slider{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

.banner-slide{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.2s ease;
}

.banner-slide.active{
  opacity:1;
}

/* dark overlay */
.banner-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
        to right,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.45),
        rgba(0,0,0,0.2)
  );
  z-index:1;
}

/* hero content above banner */
.banner-overlay{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
}

/* hero text styling */
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
  color:white;
}

.hero h1,
.banner-section h1{
  font-size:40px;
  font-weight:700;
  line-height:1.2;
}

.banner-section h1 span{
  color:#22c55e;
}

.hero-sub{
  font-size:15px;
  color:#e5e7eb;
  margin-bottom:20px;
}

.hero-badges span{
  font-size:13px;
  margin-right:15px;
  color:#e5e7eb;
}

.hero-badges i{
  color:#22c55e;
}

/* hero card */
.hero-card{
  background:white;
  color:#1f2933;
  padding:20px;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
}
/* Bigger icons for pest cards only */
.pest-card .card-icon{
  width:120px;
  height:12px;
  border-radius:20px;
  background:rgba(248, 113, 113, 0.12); /* soft red tint, optional */
}

.pest-card .card-icon i{
  font-size:102px;   /* increase size */
  line-height:1;
}
/* Bigger circular image icons for pest cards */
.pest-card .card-icon{
  width:164px;
  height:164px;
  border-radius:50%;
  background:rgba(248, 113, 113, 0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  overflow:hidden;
}

.pest-card .card-icon img{
  max-width:80%;
  max-height:80%;
  object-fit:contain;
}
/* reset old circle styles */
.pest-card .card-icon{
  width: 100%;
  height: 180px;           /* adjust height as you like */
  border-radius: 16px;     /* small rounding for the image corners */
  overflow: hidden;
  margin: 0 0 12px 0;
  background:#fff;         /* fallback while image loads */
}

/* image fills the top area nicely */
.pest-card .card-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* crop nicely, no stretching */
  display:block;
}

/* card layout + wow effect */
.pest-card{
  position:relative;
  background:#ffffff;
  border-radius:20px;
  padding:14px 14px 18px;
  box-shadow:0 18px 40px rgba(15,23,42,0.16);
  transition:transform 0.35s ease, box-shadow 0.35s ease;
  animation:pestFloat 5s ease-in-out infinite;
}



/* subtle continuous float */
@keyframes pestFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* center text and button under image (optional) */
/* CENTER ALIGN ALL CONTENT IN PEST CARD */
.pest-card{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* center text */
.pest-card h3,
.pest-card p{
  text-align:center;
}

/* center button */
.pest-card .card-enquiry-btn{
  margin-top:10px;
  text-align:center;
}

/* center image container */
.pest-card .card-icon{
  margin:0 auto 12px auto;
}
/* ===== POPUP OVERLAY ===== */
#enquiryPopup{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.65);
  backdrop-filter:blur(6px);
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;
  transition:all .35s ease;
}

/* ACTIVE STATE */
#enquiryPopup.active{
  opacity:1;
  visibility:visible;
}

/* ===== POPUP BOX ===== */
.popup-box{
  position:relative;
  width:90%;
  max-width:400px;
  background:#ffffff;
  border-radius:18px;
  padding:26px 22px;
  box-shadow:0 30px 80px rgba(0,0,0,0.35);

  transform:translateY(40px) scale(.95);
  opacity:0;
  transition:all .35s ease;
}

/* SHOW ANIMATION */
#enquiryPopup.active .popup-box{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* ===== HEADER ===== */
.popup-title{
  font-size:18px;
  font-weight:600;
  margin-bottom:6px;
}

.popup-sub{
  font-size:13px;
  color:var(--muted);
  margin-bottom:14px;
}

/* ===== CLOSE BUTTON ===== */
.popup-close{
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s;
}

.popup-close:hover{
  background:#e2e8f0;
  transform:rotate(90deg);
}

/* ===== INPUTS ===== */
.popup-box input,
.popup-box textarea{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:10px;
  font-size:13px;
  margin-bottom:10px;
  outline:none;
  transition:.2s;
}

.popup-box input:focus,
.popup-box textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(11,140,76,0.15);
}

/* ===== BUTTON ===== */
.popup-btn{
  width:100%;
  margin-top:6px;
}
.video-thumb-wrapper {
  max-width: 640px;
  margin: 0 auto;
  cursor: pointer;
}

.ytp-cued-thumbnail-overlay-image {
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}
.review-slider{
  position:relative;
  margin-top:10px;
}

.review-slide{
  display:none;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.review-slide.active{
  display:grid;
}

.review-card{
  background:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 24px rgba(15,23,42,0.08);
  font-size:13px;
  color:var(--muted);
  position:relative;
  overflow:hidden;
  transform:translateY(0) scale(1);
  transition:
    box-shadow .3s ease,
    transform .3s ease,
    border-color .3s ease,
    background .3s ease;
  border:1px solid rgba(148,163,184,0.25);
}

/* subtle animated shimmer */
.review-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top,
    rgba(56,189,248,0.07),
    transparent 55%);
  opacity:0;
  transition:opacity .3s ease;
}

/* highlight the center card in each slide */
.review-slide .review-card:nth-child(2){
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 20px 45px rgba(15,23,42,0.22);
  border-color:rgba(56,189,248,0.55); /* cyan tint */
  background:linear-gradient(135deg,#ffffff,#f1f5f9);
}

.review-slide .review-card:nth-child(2)::before{
  opacity:1;
}

/* hover lifts all, but middle still strongest */
.review-card:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 18px 40px rgba(15,23,42,0.22);
}

/* name styling */
.review-name{
  display:block;
  margin-top:10px;
  font-weight:600;
  color:var(--text);
}

/* controls */
.review-prev,
.review-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:#0f172a;
  color:#fff;
  width:32px;
  height:32px;
  border-radius:50%;
  cursor:pointer;
  opacity:0.85;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.review-prev{left:-8px;}
.review-next{right:-8px;}

.review-prev:hover,
.review-next:hover{
  opacity:1;
  box-shadow:0 10px 30px rgba(15,23,42,0.45);
}

/* responsive */
@media(max-width:800px){
  .review-slide{
    grid-template-columns:1fr;
  }
  .review-slide .review-card:nth-child(2){
    transform:translateY(-4px) scale(1.01);
  }
}
.review-stars{
  margin-bottom:8px;
  color:#facc15; /* gold */
  display:inline-flex;
  gap:3px;
  font-size:14px;
}

.review-stars i{
  text-shadow:0 1px 3px rgba(180,83,9,0.6);
  transform:scale(1);
  transition:transform .25s ease, text-shadow .25s ease;
}

/* slight pop on hover of card */
.review-card:hover .review-stars i{
  transform:scale(1.05);
  text-shadow:0 2px 6px rgba(180,83,9,0.75);
}
/* Floating chatbot */
.mpc-chatbot{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9999;
  font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* FAB button */
.mpc-chatbot-fab{
  width:52px;
  height:52px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,#0f172a,#1d4ed8);
  color:#fff;
  box-shadow:0 16px 35px rgba(15,23,42,0.45);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.mpc-chatbot-fab:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 18px 40px rgba(15,23,42,0.55);
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
}

/* Panel */
.mpc-chatbot-panel{
  position:absolute;
  right:0;
  bottom:70px;
  width:320px;
  max-height:440px;
  background:#0b1120;
  color:#e5e7eb;
  border-radius:18px;
  box-shadow:0 22px 60px rgba(15,23,42,0.85);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  opacity:0;
  transform:translateY(10px) scale(0.97);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}

/* open state */
.mpc-chatbot-panel.mpc-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* Header */
.mpc-chatbot-header{
  padding:10px 12px;
  background:radial-gradient(circle at top left,#22d3ee 0,#0b1120 45%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.mpc-chatbot-title{
  font-size:13px;
  font-weight:600;
}

.mpc-chatbot-sub{
  font-size:11px;
  opacity:0.85;
}

.mpc-chatbot-close{
  border:none;
  background:rgba(15,23,42,0.45);
  color:#e5e7eb;
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:12px;
}

/* Messages */
.mpc-chatbot-messages{
  padding:10px;
  flex:1;
  overflow-y:auto;
  background:radial-gradient(circle at top,#020617 0,#020617 45%,#020617 100%);
}

.mpc-msg{
  display:flex;
  gap:6px;
  margin-bottom:8px;
  font-size:11px;
}

.mpc-msg.bot{
  align-items:flex-start;
}

.mpc-msg.user{
  justify-content:flex-end;
}

.mpc-avatar{
  width:22px;
  height:22px;
  border-radius:999px;
  background:#22d3ee;
  color:#020617;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
}

.mpc-bubble{
  max-width:220px;
  padding:7px 9px;
  border-radius:12px;
  line-height:1.35;
}

.mpc-msg.bot .mpc-bubble{
  background:rgba(15,23,42,0.9);
  border:1px solid rgba(148,163,184,0.4);
}

.mpc-msg.user .mpc-bubble{
  background:#22c55e;
  color:#022c22;
  border-radius:12px 12px 2px 12px;
}

/* Footer */
.mpc-chatbot-footer{
  padding:10px;
  border-top:1px solid #e5e7eb;
 background: radial-gradient(circle at top left, #22d3ee 0, #0b1120 45%);
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ROW 1 - buttons */
.mpc-chatbot-cta-row{
  display:flex;
  gap:8px;
}

.mpc-cta-square{
  flex:1; /* equal width */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  padding:10px 6px;
  border-radius:10px;
  border:none;
  cursor:pointer;

  font-size:11px;
  font-weight:600;
  text-align:center;

  background:#ffffff;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

/* ROW 2 - input + send */
.mpc-chatbot-input-wrap{
  display:flex;
  gap:6px;
  align-items:center;
}

.mpc-chatbot-input-wrap input{
  flex:1;
  height:40px;
  border-radius:999px;
  padding:0 12px;
}

.mpc-chatbot-input-wrap button{
  width:40px;
  height:40px;
  border-radius:999px;
}
/* Mobile adjustments */
@media(max-width:600px){
  .mpc-chatbot-panel{
    right:10px;
    width:92vw;
  }
  .mpc-chatbot{
    right:12px;
    bottom:12px;
  }
}

#serviceStatusPopup{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.65);
  backdrop-filter:blur(6px);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all .35s ease;
}

#serviceStatusPopup.active{
  opacity:1;
  visibility:visible;
}
/* FIX: show popup content */
#serviceStatusPopup.active .popup-box{
  transform:translateY(0) scale(1);
  opacity:1;
}











/* DROPDOWN */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  width: 220px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
 
  padding: 10px 0;
  z-index: 999;
}

.dropdown-menu li {
  list-style: none;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.dropdown-menu li a:hover {
  background: #f3f4f6;
  color: #0b8c4c;
}

/* SHOW ON HOVER (DESKTOP) */
.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-menu.active {
  display: block;
}



/* Dropdown 2-column layout */
.dropdown-menu {
  display: none;
  position: absolute;
  background: #fff;
  padding: 10px;
  min-width: 320px;

  /* KEY PART */
  
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 6px 12px;

  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  z-index: 999;
}

/* Show dropdown on hover (desktop) */
.dropdown:hover .dropdown-menu {
  display: grid;
}

/* Each item */
.dropdown-menu li {
  list-style: none;
}

/* Links styling */
.dropdown-menu li a {
  display: block;
  padding: 6px 10px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
}

.dropdown-menu li a:hover {
  background: #f3f4f6;
}
/* Base dropdown (hidden by default) */
.dropdown-menu {
  display: none;   /* ✅ keep ONLY this */

  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 10px;
  min-width: 320px;

  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 6px 12px;

  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  z-index: 999;
}

/* Show on hover (desktop) */
.dropdown:hover .dropdown-menu {
  display: grid;   /* ✅ only here */
}

/* Show on click (mobile) */
.dropdown-menu.active {
  display: grid;
}/* desktop */
#mainNav {
  display: flex;
}

/* mobile: hide by default, show when .active */
@media (max-width: 768px) {
  #mainNav {
    display: none;
    flex-direction: column;
  }

  #mainNav.active {
    display: flex;
  }
}



/* ========================================= BASE helpline part here ok  =============================  ===== */
/* ================= HELPLINE STRIP ================= */

.helpline-strip {
  width: 100%;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 0;
}

/* INNER */
.helpline-inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 0 20px;
}

/* TITLE */
.helpline-title {
  font-size: 12px;
  font-weight: 700;
  color: #dc2626;
  white-space: nowrap;
}

/* ITEMS CONTAINER */
.helpline-items {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

/* SINGLE ITEM */
.item {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* CITY */
.item span {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
}

/* NUMBER */
.item a {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: 0.2s;
}

/* ICON */
.item i {
  color: #dc2626;
  font-size: 12px;
}

/* HOVER */
.item a:hover {
  color: #dc2626;
}

/* ================= RESPONSIVE ================= */

/* TABLET */
@media (max-width: 768px) {

  .helpline-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .helpline-items {
    gap: 16px;
  }
}

/* MOBILE */

/* ================= FIXED MOBILE ACCORDION ================= */
@media (max-width: 780px){

  /* FORCE HIDE FIRST */
  .helpline-strip .helpline-items{
    display: none !important;
    flex-direction: column !important;
  }

  /* SHOW ONLY WHEN ACTIVE */
  .helpline-strip.active .helpline-items{
    display: flex !important;
  }

  /* CLICKABLE HEADER */
  .helpline-strip .helpline-title{
    display:flex !important;
    justify-content: space-between;
    align-items:center;
    cursor:pointer;
    padding:12px 14px;
    background:#fff;
  }

  /* ARROW */
  .helpline-strip .helpline-title::after{
    content:"▼";
    transition:0.3s;
  }

  .helpline-strip.active .helpline-title::after{
    transform: rotate(180deg);
  }
}

}
/*= ===== helpline end here ok ====================================== ========== */

.mpc-chatbot-footer{
  padding:10px;
  border-top:1px solid #e5e7eb;
  background:#f9fafb;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mpc-chatbot-cta-row{
  display:flex;
  gap:6px;
}

.mpc-cta-square{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 4px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-size:11px;
  font-weight:600;
  text-align:center;
  background:#ffffff;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
  transition:transform .15s ease, box-shadow .15s ease;
}

.mpc-cta-square i{
  font-size:16px;
}

.mpc-cta-square span{
  line-height:1.2;
}

.mpc-cta-square:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,0.14);
}

.mpc-cta-callback{
  color:#0f766e;
}

.mpc-cta-whatsapp{
  color:#16a34a;
}

.mpc-cta-mail{
  color:#2563eb;
}

.mpc-chatbot-input-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}

.mpc-chatbot-input-wrap input{
  flex:1;
}
.mpc-chatbot-footer button {
    width: 50px;
    height: 52px;
    color: rgb(2, 44, 34);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 999px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    background: rgb(34, 197, 94);
}



/* ================= HERO / BANNER START ================= */

/* SECTION */
.banner-section {
  position: relative;
  min-height: 90vh; /* not too big */
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* BACKGROUND */
.banner-slider,
.banner-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.banner-slide {
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.banner-slide.active {
  opacity: 1;
}

/* ✅ LIGHT OVERLAY (not dark) */
.banner-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.1)
  );
  z-index: 1;
}

/* CONTENT */
.banner-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 60px 0;
}

/* GRID */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px; /* balanced spacing */
  align-items: center;
}

/* ================= LEFT ================= */

.hero-grid h1 {
  font-size: 40px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 16px;
  font-weight: 800;
}

.hero-grid h1 span {
  color: #22c55e;
}

.hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.9);
  margin-bottom: 22px;
  max-width: 520px;
}

/* CONTACT */
.hero-contacts {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.contact-main,
.contact-email {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 14px;
}

.contact-main a,
.contact-email a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* BUTTONS */
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* BADGES */
.hero-badges {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}

/* ================= RIGHT FORM ================= */

.hero-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 380px;
  margin-left: auto;
}

.hero-card h3 {
  font-size: 18px;
  margin-bottom: 12px;
}

.hero-card-tag {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 11px;
}

/* FORM */
.form-row {
  margin-bottom: 12px;
}

.form-row input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

/* ================= RESPONSIVE ================= */

/* TABLET */
@media (max-width: 992px) {

  .banner-section {
    padding-top: 110px;
    min-height: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 35px;
    text-align: center;
  }

  .hero-grid h1 {
    font-size: 32px;
  }

  .hero-sub {
    margin: 0 auto 20px;
  }

  .hero-contacts {
    justify-content: center;
  }

  .hero-ctas {
    justify-content: center;
  }

  .hero-badges {
    justify-content: center;
  }

  .hero-card {
    margin: 0 auto;
  }
}

/* MOBILE */
@media (max-width: 768px){

  .banner-section 
  {
      height: 100vh;
    padding-top: 130px; /* clean fixed spacing */
  }

  .banner-overlay {
    align-items: flex-start;
    padding-top: 20px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 25px;
    text-align: center;
  }

  .hero-grid h1 {
    font-size: 24px;
  }

  .hero-contacts {
    flex-direction: column;
    align-items: center;
  }

  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }

  .hero-ctas button {
    width: 100%;
  }

  .hero-card {
    margin-top: 10px;
  }
}

/* SMALL MOBILE */
@media (max-width: 400px) {

  .banner-section {
    padding-top: 10px;
  }
  .hero-card
  {
      display : none;
      }

  .hero-grid h1 {
    font-size: 22px;
  }
}

/* ================= HERO / BANNER END ================= */




/* ================= CLIENTS SECTION START ================= */

.clients-section {
  padding: 60px 0;
  background: #f8fafc;
  text-align: center;
}

.clients-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #1f2937;
}

/* SLIDER WRAPPER */
.clients-slider {
  overflow: hidden;
  position: relative;
}

/* TRACK */
.clients-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: scrollClients 35s linear infinite;
}

/* ITEM */
.client-item {
  min-width: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.7;
  transition: all 0.3s ease;
}
.mt-30 { margin-top: 30px; }
.text-left { text-align: left; }
.client-item img {
  max-width: 140px;
  height: auto;
  object-fit: contain;
  
  transition: all 0.3s ease;
}

/* HOVER EFFECT */
.client-item:hover img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

.client-item:hover {
  opacity: 1;
}

/* ANIMATION */
@keyframes scrollClients {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* PAUSE ON HOVER */
.clients-slider:hover .clients-track {
  animation-play-state: paused;
}

/* ================= RESPONSIVE ================= */

/* Tablet */
@media (max-width: 768px) {

  .clients-section {
    padding: 40px 0;
  }

  .clients-title {
    font-size: 24px;
  }

  .client-item {
    min-width: 140px;
  }

  .client-item img {
    max-width: 110px;
  }
}

/* Mobile */
@media (max-width: 480px) {

  .clients-track {
    gap: 25px;
    animation-duration: 18s;
  }

  .client-item {
    min-width: 120px;
  }

  .client-item img {
    max-width: 90px;
  }
}

/* ================= CLIENTS SECTION END ================= */




/* ================= CONTACT SECTION START ================= */

/* --- Variables --- */
:root {
  --primary: #d32f2f;
  --primary-hover: #b71c1c;
  --bg-light: #f8fafc;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --white: #ffffff;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 10px 25px -5px rgba(0,0,0,0.05);
  --radius: 12px;
}

#contact {
  padding: 80px 0;
  background-color: var(--bg-light);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Section Heading --- */


/* --- Grid Layout --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* --- Form Styling --- */
.contact-form {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0,0,0,0.03);
}

.form-row {
  margin-bottom: 20px;
}

.form-row label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

/* Target ASP.NET TextBox & DropDown */
.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 15px;
  color: var(--text-main);
  transition: all 0.3s ease;
  background-color: #fcfcfc;
}

.input-field:focus {
  outline: none;
  border-color: var(--primary);
  background-color: var(--white);
  box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.1);
}

/* Textarea height */
textarea.input-field {
  min-height: 120px;
  resize: vertical;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--white);
  padding: 15px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(211, 47, 47, 0.2);
}

.form-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 15px;
  line-height: 1.5;
  text-align: center;
}

/* --- Map & Info Box --- */
.map-box {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.map-box strong {
  display: block;
  color: var(--text-main);
  font-size: 16px;
  margin-bottom: 5px;
}

.map-box span {
  color: var(--text-muted);
  line-height: 1.6;
}

.map-box a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.map-box a:hover {
  text-decoration: underline;
}

.map-placeholder {
  width: 100%;
  height: 350px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

/* --- Responsive Design --- */

@media (max-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  
  .map-box {
    order: 2; /* Form stays on top on mobile */
  }
}
/* --- High-End Mobile Refinements --- */

@media (max-width: 600px) {
    /* Reduce outer section padding so the form is the star */
    #contact {
        padding: 40px 0;
    }

    /* Expand the card to the edges slightly more to maximize input space */
    .contact-form {
        padding: 30px 20px; /* More vertical room, less horizontal squeeze */
        margin: 0 10px; /* Small margin so it doesn't touch screen edges */
        border-radius: 20px; /* Softer corners for a Figma look */
    }

    /* Make headings feel more balanced on small screens */
    .section-heading h2 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    /* PREMIUM INPUTS: Make them easier to tap */
    .input-field {
        padding: 14px 16px; /* Taller inputs for better mobile UX */
        font-size: 16px; /* Prevents iOS from auto-zooming on focus */
        background-color: #f9fafb;
    }

    /* Better spacing for labels */
    .form-row {
        margin-bottom: 18px;
    }

    .form-row label {
        font-size: 14px;
        margin-bottom: 6px;
        color: #334155; /* Slate-700 */
    }

    /* The Button needs to be bold and tall */
    .btn-primary {
        padding: 16px;
        font-size: 16px;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2);
    }

    /* Ensure the Map doesn't look like a tiny box */
    .map-placeholder {
        height: 280px;
        margin-top: 20px;
    }
    
    /* Center the Contact Info text on mobile */
    .map-box {
        text-align: center;
        padding: 0 20px;
    }
}

/* --- Added Extra: Modern Input Glow --- */
.input-field:focus {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.08);
}
/* ================= HELPLINE (FORCED OVERRIDE CSS) ================= */

.helpline-strip {
  width: 100% !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 10px 0 !important;
  position: relative;
  z-index: 999;
}

.helpline-strip .helpline-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 30px !important;
  padding: 0 20px !important;
}

.helpline-strip .helpline-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #dc2626 !important;
  white-space: nowrap !important;
}

.helpline-strip .helpline-items {
  display: flex !important;
  gap: 30px !important;
  flex-wrap: wrap !important;
}

.helpline-strip .helpline-items .item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* CITY */
.helpline-strip .item span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
}

/* NUMBER */
.helpline-strip .item a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ICON */
.helpline-strip .item i {
  color: #dc2626 !important;
  font-size: 12px !important;
}

/* HOVER */
.helpline-strip .item a:hover {
  color: #dc2626 !important;
}
/* ================= HELPLINE MOBILE ACCORDION ================= */

@media (max-width: 780px){

  .helpline-strip {
    background: #ffffff !important;
    border-radius: 12px;
    margin: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }

  .helpline-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* HEADER ROW (CLICKABLE) */
  .helpline-title {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    font-size: 13px !important;
    cursor: pointer;
    background: #fff;
  }

  /* ADD ARROW */
  .helpline-title::after {
    content: "▼";
    font-size: 12px;
    transition: transform 0.3s ease;
  }

  /* ROTATE WHEN OPEN */
  .helpline-strip.active .helpline-title::after {
    transform: rotate(180deg);
  }

  /* HIDE ITEMS BY DEFAULT */
  .helpline-items {
    display: none !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px;
    border-top: 1px solid #eee;
  }

  /* SHOW WHEN ACTIVE */
  @media (max-width:700px){

  /* Container */
  .helpline-strip{
    border-radius:12px;
    margin:8px;
    overflow:hidden;
  }

  .helpline-inner{
    flex-direction:column;
    padding:0;
    gap:0;
  }

  /* CLICKABLE HEADER */
  .helpline-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px;
    cursor:pointer;
    background:#fff;
  }

  /* Arrow */
  .helpline-title::after{
    content:"▼";
    font-size:12px;
    transition:0.3s;
  }

  /* Rotate arrow */
  .helpline-strip.active .helpline-title::after{
    transform:rotate(180deg);
  }

  /* 🔴 IMPORTANT: HIDE COMPLETELY */
  .helpline-items{
    display:none !important;
    flex-direction:column;
    padding:10px;
    gap:10px;
    border-top:1px solid #eee;
  }

  /* ✅ SHOW ONLY WHEN ACTIVE */
  .helpline-strip.active .helpline-items{
    display:flex !important;
  }

  /* Item style */
  .helpline-items .item{
    justify-content:space-between;
    background:#f9fafb;
    padding:10px 12px;
    border-radius:8px;
  }
}

  /* ITEM CARD */
  .helpline-items .item {
    justify-content: space-between;
    background: #f9fafb;
    padding: 10px 12px;
    border-radius: 8px;
  }
}
/* ===== MOBILE ACCORDION (BELOW 700px) ===== */
@media (max-width:700px){

  /* Make strip look like a card */
  .helpline-strip{
    margin:10px;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    background:#fff;
  }

  /* Stack layout */
  .helpline-inner{
    flex-direction:column;
    padding:0;
    gap:0;
  }

  /* CLICKABLE HEADER */
  .helpline-title{
    padding:14px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    background:#fff;
  }

  /* Arrow */
  .helpline-title::after{
    content:"▼";
    font-size:12px;
    transition:0.3s;
  }

  /* Rotate arrow */
  .helpline-strip.active .helpline-title::after{
    transform:rotate(180deg);
  }

  /* 🔴 HIDE ITEMS BY DEFAULT */
  .helpline-items{
    display:none;
    flex-direction:column;
    padding:10px;
    gap:10px;
    border-top:1px solid #eee;
  }

  /* 🟢 SHOW ONLY WHEN ACTIVE */
  .helpline-strip.active .helpline-items{
    display:flex;
  }

  /* Item styling */
  .helpline-items .item{
    background:#f9fafb;
    padding:10px 12px;
    border-radius:8px;
    justify-content:space-between;
  }
}
/* ================= MOBILE ================= */

.reviews-card{
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  padding:16px;

  height:640px;        /* fixed height */
  overflow:hidden;     /* hide extra content */
  position:relative;
}
@media (max-width: 992px){
  .reviews-card{
    max-height: calc(100% - 80px) !important;
    overflow: hidden !important;
  }
}

@media (max-width: 700px){
  .reviews-card{
    max-height: calc(100% - 80px) !important;
    overflow: hidden !important;
  }
}

@media (max-width: 480px){
  .reviews-card{
    max-height: calc(100% - 80px) !important;
    overflow: hidden !important;
  }
}

@media (max-width: 425px){
  .reviews-card{
    max-height: calc(100% - 80px) !important;
    overflow: hidden !important;
  }
}

@media (max-width: 375px){
  .reviews-card{
    max-height: calc(100% - 90px) !important;
    overflow: hidden !important;
  }
}

@media (max-width: 320px){
  .reviews-card{
    max-height: calc(100% - 80px) !important;
    overflow: hidden !important;
  }
}
/* Hide entire review block */
/* Hide the "Free Google Review Widget" badge */
a[aria-label="Free Google Review Widget"] {
    display: none !important;
}
a[href*="embedreviews"],
a[href*="elfsight"] {
    display: none !important;
}
@media (max-width: 768px){

  .dropdown-menu{
    position: fixed;          /* 🔥 key change */
    top: 80px;                /* adjust based on header height */
    left: 50%;                /* move to center */
    transform: translateX(-50%); /* perfectly center */

    width: 90%;               /* responsive width */
    max-width: 360px;

    display: none;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;

    border-radius: 12px;
    padding: 12px;

    z-index: 9999;
  }

  /* show when active */
  .dropdown-menu.active{
    display: grid;
  }
}
/* Section background */
.google-reviews-section {
  background: #ffffff;
  padding: 40px 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Header row with Google logo and buttons */
.google-reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

/* Left side: Google "G" + title + rating */
.google-logo-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Circular Google "G" badge */
.google-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 22px;
  background: #ffffff;
  border: 1px solid #dadce0;
  /* mimic Google colors using text gradient */
  background-image: radial-gradient(circle at 30% 30%, #4285F4 0, #4285F4 40%, transparent 41%),
                    radial-gradient(circle at 70% 30%, #EA4335 0, #EA4335 40%, transparent 41%),
                    radial-gradient(circle at 30% 70%, #FBBC05 0, #FBBC05 40%, transparent 41%),
                    radial-gradient(circle at 70% 70%, #34A853 0, #34A853 40%, transparent 41%);
  color: #ffffff;
}

/* Business title + rating line */
.google-title {
  font-weight: 600;
  font-size: 16px;
  color: #202124;
}

.google-rating-line {
  font-size: 14px;
  color: #5f6368;
}

.google-score {
  font-weight: 600;
  margin-right: 4px;
}

.google-stars {
  color: #fbbc05;
  margin-right: 4px;
}

.google-count {
  color: #80868b;
}

/* Action buttons (Write a review / View all) */
.google-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.google-btn {
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  border: 1px solid #dadce0;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.google-btn-primary {
  background: var(--primary);          /* ✅ use root color */
  border-color: var(--primary);
  color: #ffffff;
  font-weight: 500;
}

.google-btn-primary:hover {
   background: var(--primary-dark);     /* ✅ use root hover */
  border-color: var(--primary-dark);
}

.google-btn-ghost {
   background: #ffffff;          /* ✅ use root color */
  border-color: var(--primary);
  color: var(--primary);
}

/* Slider container */
.review-slider {
  position: relative;
  overflow: visible; /* ✅ allow lifted card to show */
}

/* One "page" of cards */
.review-slide {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.review-slide.active {
  display: grid;
}

/* Review card */
.review-card {
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;

  /* control height here */
  max-height: 220px;      /* change this value */
  overflow: hidden;       /* hide extra text if longer */
}

/* Top row inside a review: avatar + name + meta */
.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* User avatar initial in a colored circle */
.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8f0fe;            /* light blue background */
  color: #1a73e8;                  /* Google blue text */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
}

/* Name + meta */
.review-name {
  font-weight: 600;
  font-size: 14px;
  color: #202124;
}

.review-meta {
  font-size: 12px;
  color: #80868b;
}

/* Star row */
.review-stars {
  color: #fbbc05;
  font-size: 14px;
}

/* Review text */
.review-card p {
  font-size: 14px;
  color: #3c4043;
  line-height: 1.4;
}

/* Prev / Next buttons on slider */
.review-prev,
.review-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  color: #5f6368;
  font-size: 18px;
}

.review-prev { left: 0; }
.review-next { right: 0; }

/* Responsive tweaks */
@media (max-width: 992px) {
  .review-slide.active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .google-reviews-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .review-slide.active {
    grid-template-columns: 1fr;
  }

  .review-prev,
  .review-next {
    top: auto;
    bottom: -10px;
    transform: none;
  }

  .review-prev { left: 40%; }
  .review-next { right: 40%; }
}
.review-slide {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;

  /* set height for the slide */
  min-height: 260px;   /* or height: 260px; if you want strictly fixed */
}
.review-slide.active {
  display: grid;
  align-items: stretch;   /* ensure same height within grid row */
}

.review-card {
  height: 100%;          /* fill available height */
}
.google-reviews-section .container {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;

}
.hero-heading {
  font-family: 'Poppins', sans-serif;
  line-height: 1.3;
}

/* QUESTION (Primary focus) */
.hero-question {
  display: block;
  font-size: 42px;
  font-weight: 700;
  color: #0f172a; /* Dark strong color */
  margin-bottom: 8px;
}

/* ANSWER (Secondary highlight) */
.hero-answer {
  display: block;
  font-size: 26px;
  font-weight: 600;
  color: #ffffff; /* Green highlight */
}

/* Supporting paragraph */
.hero-sub {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: #ffffff;
  max-width: 520px;
}