/* =========================================================================
   MODERN PEST CONTROL — RESPONSIVE MASTER OVERRIDE
   -------------------------------------------------------------------------
   Purpose : Make the existing site fully responsive on ALL screen sizes
             (320 / 375 / 425 / 768 / 1024 / 1440 / 1920+ / 2K) and remain
             stable across browser zoom levels (75% / 100% / 125% / 150% / 200%).

   How to use:
   - Paste this ENTIRE block just before the closing </style> tag in
     Index.aspx (after all existing CSS), OR
   - Append this entire file to the bottom of Styles/MPC.css.

   IMPORTANT: This file does NOT delete or rewrite any of your existing
   CSS/content. It only ADDS rules that come later in the cascade, so they
   safely override the fixed-pixel / non-responsive values already in your
   stylesheet (grid-template-columns, fixed heights, oversized margins,
   etc.) without touching your markup, text, images, or components.
   ========================================================================= */

/* -------------------------------------------------------------------
   1. GLOBAL FLUID FOUNDATIONS
   ------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

*, *::before, *::after { box-sizing: border-box; }

img, video, iframe, svg { max-width: 100%; height: auto; }

.container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(14px, 4vw, 16px);
}

/* Fluid section padding so content never feels cramped or overly spaced */
section{
  padding: clamp(28px, 6vw, 48px) 0;
}

/* Fluid heading type-scale (also smooths out browser zoom 75%–200%) */
.section-heading h2{
  font-size: clamp(20px, 4.5vw, 24px);
}
.section-heading p{
  font-size: clamp(13px, 3.2vw, 14px);
  padding: 0 6px;
}
.hero-question{
  font-size: clamp(24px, 6vw, 42px) !important;
}
.hero-answer{
  font-size: clamp(16px, 4vw, 26px) !important;
}
.hero-grid h1,
.banner-section h1{
  font-size: clamp(24px, 5vw, 40px) !important;
}
.hero-sub{
  font-size: clamp(13px, 3vw, 16px) !important;
  max-width: 100% !important;
}

/* -------------------------------------------------------------------
   2. HEADER / NAV
   ------------------------------------------------------------------- */
.nav-inner{
  flex-wrap: wrap;
  gap: 8px;
}
.brand-logo{
  width: clamp(56px, 12vw, 80px);
  height: clamp(42px, 9vw, 60px);
}

@media (max-width: 1024px){
  nav ul{ gap: 12px; }
  nav ul li a{ font-size: 13px; }
}

@media (max-width: 860px){
  nav ul{
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 16px 14px;
    border-bottom: 1px solid #e5e7eb;
    display: none;
    max-height: 75vh;
    overflow-y: auto;
  }
  nav ul.open,
  #mainNav.active{ display: flex; }
  .nav-actions{ display: none; }
  .mobile-toggle{ display: flex; }
}

@media (min-width: 861px){
  .mobile-toggle{ display: none; }
  #mainNav{ display: flex !important; }
}

.dropdown-menu{
  min-width: min(320px, 90vw);
}

/* -------------------------------------------------------------------
   3. HERO / BANNER SECTION
   ------------------------------------------------------------------- */
.banner-section{
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: clamp(420px, 70vh, 620px) !important;
  padding-top: 0;
  display: flex;
  align-items: center;
}

.banner-overlay{padding-right: 10%;
    padding-left: 10%;
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: clamp(70px, 14vh, 110px) 0 clamp(24px, 5vh, 40px);
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
  padding: 0 clamp(14px, 4vw, 16px);
}

@media (max-width: 992px){
  .hero-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-contacts,
  .hero-ctas,
  .hero-badges{ justify-content: center; }
  .hero-card{ margin: 0 auto; }
}

.hero-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-ctas .btn{ white-space: normal; }

.hero-contacts{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-card{
  width: 100%;
  max-width: 380px;
}

/* -------------------------------------------------------------------
   4. RESPONSIVE GRID SYSTEMS (cards / steps / industries / why / blog /
      locations) — fluid auto-fit so nothing overflows and columns adapt
      smoothly at every width instead of jumping abruptly.
   ------------------------------------------------------------------- */
.cards-grid,
.steps-grid,
.why-grid,
.blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.5vw, 18px);
}

.industries-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 12px);
}

.locations-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2vw, 12px);
}

@media (max-width: 1024px){
  .cards-grid,
  .steps-grid,
  .why-grid,
  .blog-grid,
  .locations-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .industries-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px){
  .cards-grid,
  .steps-grid,
  .why-grid,
  .blog-grid,
  .locations-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .industries-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .cards-grid,
  .steps-grid,
  .why-grid,
  .blog-grid,
  .locations-grid,
  .industries-grid{
    grid-template-columns: 1fr;
  }
}

.card-wide{ grid-column: 1 / -1; }
@media (max-width: 600px){
  .card-wide{ grid-column: auto; }
}

/* Pest cards keep readable image height on small screens */
.pest-card .card-icon{
  height: clamp(140px, 30vw, 180px);
}

/* -------------------------------------------------------------------
   5. STATS / ABOUT / TESTIMONIAL BLOCKS
   ------------------------------------------------------------------- */
.stats-wrap,
.testi-wrap{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(14px, 3vw, 18px);
  align-items: center;
}
.testi-wrap{ grid-template-columns: 0.9fr 1.1fr; }

@media (max-width: 900px){
  .stats-wrap,
  .testi-wrap{ grid-template-columns: 1fr; }
}

.stats-row{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2vw, 18px);
}
.stat-item{ flex: 1 1 140px; min-width: 120px; }

/* -------------------------------------------------------------------
   6. SERVICE TABS
   ------------------------------------------------------------------- */
.service-tabs{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: center;
}
@media (max-width: 420px){
  .service-tabs{ justify-content: flex-start; }
  .service-tab{ padding: 8px 14px; font-size: 12px; white-space: nowrap; }
}

/* -------------------------------------------------------------------
   7. CLIENTS MARQUEE
   ------------------------------------------------------------------- */
.clients-title{ font-size: clamp(20px, 4.5vw, 28px); }

/* -------------------------------------------------------------------
   8. GOOGLE REVIEWS
   ------------------------------------------------------------------- */
.google-reviews-header{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.review-slide{
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 24px);
}
.review-slide.active{ display: grid; }

@media (max-width: 992px){
  .review-slide.active{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .review-slide.active{ grid-template-columns: 1fr; }
  .google-reviews-header{ flex-direction: column; align-items: flex-start; }
  .review-prev, .review-next{
    top: auto;
    bottom: -14px;
    transform: none;
  }
  .review-prev{ left: 42%; }
  .review-next{ right: 42%; }
}
@media (max-width: 380px){
  .review-card{ max-height: none; }
}

/* -------------------------------------------------------------------
   9. CONTACT SECTION (fix the fixed 3rem margin that breaks mobile)
   ------------------------------------------------------------------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin: 0 auto !important;
  max-width: 1100px;
  padding: 0 clamp(14px, 4vw, 20px);
}
@media (max-width: 992px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
  .map-box{ order: 2; }
}
.contact-form{ padding: clamp(20px, 4vw, 40px); }
.map-placeholder{ height: clamp(220px, 40vw, 350px); }

/* -------------------------------------------------------------------
   10. FEATURE STRIP / FOOTER
   ------------------------------------------------------------------- */
.feature-strip-inner{
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 700px){
  .feature-strip-inner{ flex-direction: column; align-items: flex-start; }
  .feature-pill{ width: 100%; }
}

.footer-top{
  flex-direction: row;
  flex-wrap: wrap;
}
@media (max-width: 600px){
  .footer-top{ flex-direction: column; align-items: flex-start; }
  footer .container > div[style]{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
}

/* -------------------------------------------------------------------
   11. POPUPS (enquiry / service status)
   ------------------------------------------------------------------- */
.popup-box{
  width: min(92vw, 400px);
  max-height: 90vh;
  overflow-y: auto;
}

/* -------------------------------------------------------------------
   12. FLOATING WIDGETS (chatbot / whatsapp / call)
   ------------------------------------------------------------------- */
.mpc-chatbot-panel{
  width: min(320px, 90vw);
  max-height: min(440px, 70vh);
}

@media (max-width: 480px){
  .mpc-chatbot-fab{ width: 46px; height: 46px; font-size: 19px; }
  .call-float, .whatsapp-float{ width: 46px; height: 46px; font-size: 22px; }
  .whatsapp-float{ font-size: 26px; }
}

/* -------------------------------------------------------------------
   13. EXPLICIT DEVICE-WIDTH FINE-TUNING
   ------------------------------------------------------------------- */

/* ~320px (small phones: SE, older Android) */
@media (max-width: 340px){
  .hero-question{ font-size: 21px !important; }
  .hero-answer{ font-size: 14px !important; }
  .btn{ padding: 8px 12px; font-size: 12px; }
  .helpline-title{ font-size: 11px; }
  .card, .why-card, .pest-card{ padding: 12px; }
  .stat-item{ min-width: 100%; }
}

/* ~375px (iPhone SE/6/7/8/X width band) */
@media (min-width: 341px) and (max-width: 390px){
  .hero-question{ font-size: 23px !important; }
  .hero-answer{ font-size: 15px !important; }
}

/* ~425px (large phones) */
@media (min-width: 391px) and (max-width: 425px){
  .hero-question{ font-size: 25px !important; }
}

/* ~768px (tablets / iPad portrait) */
@media (min-width: 426px) and (max-width: 768px){
  .banner-section{ min-height: clamp(480px, 90vh, 700px) !important; }
  .hero-grid{ text-align: center; }
}

/* ~1024px (iPad landscape / small laptops) */
@media (min-width: 769px) and (max-width: 1024px){
  .cards-grid, .steps-grid, .why-grid, .blog-grid, .locations-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .container{ max-width: 960px; }
}

/* ~1440px (standard laptop/desktop) */
@media (min-width: 1025px) and (max-width: 1600px){
  .container{ max-width: 1200px; }
}

/* 1920px+ / 2K / 4K ultrawide — keep content centered, avoid over-stretch */
@media (min-width: 1601px){
  .container{ max-width: 1320px; }
  body{ font-size: 16px; }
  .banner-overlay .container,
  .hero-grid{ max-width: 1320px; margin: 0 auto;padding-right: 10%;
    padding-left: 10%;padding-right: 10%;
    padding-left: 10%; }padding-right: 10%;
    padding-left: 10%;
}

/* -------------------------------------------------------------------
   14. BROWSER-ZOOM ROBUSTNESS (75% / 100% / 125% / 150% / 200%)
   -------------------------------------------------------------------
   Zoom changes the *effective* viewport in CSS px, so the fluid clamp()
   values above already rescale correctly. These extra rules stop text
   or buttons from ever becoming unreadable/overflowing at high zoom.
   ------------------------------------------------------------------- */
button, .btn, input, textarea, select{
  min-height: 38px;
}
.btn{ line-height: 1.3; }

p, li, span, a, label{
  max-width: 100%;
}

table, .table-wrap{
  width: 100%;
  overflow-x: auto;
  display: block;
}

/* Prevent horizontal scroll caused by any fixed-width leftover elements */
html, body{
  overflow-x: hidden;
  width: 100%;
} 
/* Base: mobile-first (collapsed by default) */
.helpline-items-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.helpline-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.helpline-toggle {
  margin-left: 8px;
  transition: transform 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.helpline-toggle.open {
  transform: rotate(180deg);
}/* AI Chatbot - TOP */
.mpc-chatbot{
    position: fixed !important;
    right: 20px !important;
    bottom: 160px !important;    /* TOP - closer to WhatsApp */
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
    z-index: 9999;
    transition: all 0.3s ease;
}

.mpc-chatbot:hover{
    transform: scale(1.15);
    box-shadow: 0 12px 30px rgba(108, 92, 231, 0.6);
}

/* WhatsApp Button - MIDDLE */
.whatsapp-float{
    position: fixed;
    right: 20px;
    bottom: 90px;      /* MIDDLE - closer spacing */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    transition: all 0.3s ease;
    animation: whatsappPulse 2s infinite;
}

.whatsapp-float:hover{
    transform: scale(1.15) rotate(-10deg);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6);
}

@keyframes whatsappPulse{
    0%{ box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70%{ box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100%{ box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Call Button - BOTTOM */
.call-float{
    position: fixed;
    right: 20px;
    bottom: 20px;       /* BOTTOM */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4);
    z-index: 9999;
    transition: all 0.3s ease;
    animation: callPulse 2s infinite;
}

.call-float:hover{
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 12px 30px rgba(0, 123, 255, 0.6);
}

@keyframes callPulse{
    0%{ box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
    70%{ box-shadow: 0 0 0 15px rgba(0, 123, 255, 0); }
    100%{ box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

/* Mobile Responsive */
@media(max-width: 600px){
    .mpc-chatbot{
        right: 15px !important;
        bottom: 150px !important;
        width: 55px !important;
        height: 55px !important;
        font-size: 26px;
    }

    .whatsapp-float{
        right: 15px;
        bottom: 80px;
        width: 55px;
        height: 55px;
        font-size: 30px;
    }

    .call-float{
        right: 15px;
        bottom: 15px;
        width: 55px;
        height: 55px;
        font-size: 26px;
    }
}

/* Desktop: always open, no toggle */
@media (min-width: 1024px) {
  .helpline-items-wrapper {
    max-height: none !important; /* override JS height */
    overflow: visible;}
 You can do this by combining the JS toggle with CSS media queries: always open on desktop, collapsed by default (and toggleable) on mobile.[19][20][26]

## Idea

- Desktop (e.g. width ≥ 768px): helpline is always visible, no accordion behavior.  
- Mobile (e.g. width < 768px): helpline list is hidden by default, opens/closes when the arrow/title is tapped.[19][29]

Below is an updated version of the previous code to match that behavior.

## HTML (same as before)

No change needed in your HTML structure from the last answer, just make sure you have the wrapper and toggle:

```html
<div class="helpline-strip">
  <div class="helpline-inner">
    <div class="helpline-title">
      24/7 Helpline
      <span class="helpline-toggle" id="helplineToggle">
        <i class="fa-solid fa-chevron-down"></i>
      </span>
    </div>

    <div class="helpline-items-wrapper" id="helplineItems">
      <div class="abc">
        <div class="helpline-items">
          <!-- your items here -->
        </div>
      </div>
    </div>
  </div>
</div>
```

## CSS (desktop open, mobile collapsible)

```css
/* Default: desktop styles, always open */
.helpline-items-wrapper {
  max-height: none;           /* no height limit */
  overflow: visible;          /* show everything */
  transition: max-height 0.3s ease;
}

.helpline-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Arrow optional on desktop */
.helpline-toggle {
  margin-left: 8px;
  transition: transform 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile-specific: make it collapsible */
@media (max-width: 1024px) {
  /* Closed by default on mobile */
  .helpline-items-wrapper {
    max-height: 0;
    overflow: hidden;
  }

  /* Arrow rotation when open (mobile) */
  .helpline-toggle.open {
    transform: rotate(180deg);
  }

  /* Optional: show pointer cursor on mobile */
  .helpline-title {
    cursor: pointer;
  }
}
```

This uses a “desktop-first” approach: desktop is fully open; mobile overrides the wrapper to be hidden with `max-height: 0` and `overflow: hidden`.[19][29]

## JavaScript (toggle only relevant on mobile)

/* Base styles for both floating buttons */
.call-float,
.whatsapp-float {
  position: fixed;
  right: 16px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-size: 24px;
}

/* Specific colors */
.call-float {
  bottom: 80px;           /* above WhatsApp button */
  background-color: #007bff; /* call button blue */
  color: #ffffff;
}

.whatsapp-float {
  bottom: 16px;
  background-color: #25D366; /* WhatsApp green */
  color: #ffffff;
}

/* Hover / active effects */
.call-float:hover,
.whatsapp-float:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.call-float:active,
.whatsapp-float:active {
  transform: scale(0.95);
}

/* Ensure icons are centered */
.call-float i,
.whatsapp-float i {
  display: block;
  line-height: 1;
}

/* Optional: small screens tweaks */
@media (max-width: 480px) {
  .call-float,
  .whatsapp-float {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }

  .call-float {
    bottom: 70px;
  }

  .whatsapp-float {
    bottom: 12px;
  }
}