:root{
      --primary:#0b8c4c;
      --primary-dark:#066237;
      --accent:#ffb100;
      --bg:#f7f8fb;
      --text:#1f2933;
      --muted:#6b7280;
      --danger:#c53030;
      --radius:10px;
      --shadow:0 18px 40px rgba(15,23,42,0.14);
    }
    *{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;
    }
    .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;
    }
    .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:8px;
  display:flex;
  gap:6px;
  border-top:1px solid rgba(30,64,175,0.6);
  background:#020617;
}

.mpc-chatbot-footer input{
  flex:1;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.6);
  font-size:11px;
  padding:6px 10px;
  background:#020617;
  color:#e5e7eb;
}

.mpc-chatbot-footer input::placeholder{
  color:#64748b;
}

.mpc-chatbot-footer button{
  width:30px;
  height:30px;
  border-radius:999px;
  border:none;
  background:#22c55e;
  color:#022c22;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}

/* 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;
  }
}