:root {
   --bg: #f7f7f2;
   --primary: #0f2a44;        /* dark blue */
   --primary-light: #1f4f7a;  /* hover blue */
   --text-dark: #1a1a1a;
   --shadow: rgba(0, 0, 0, 0.3);
   --overlay-color: rgba(15, 42, 68, 0.75);
 }

    *, *::before, *::after {
      box-sizing: border-box;
    }
    html {
    scroll-behavior: smooth;
    }
    
    header {
     margin-top: 40px;
     position: relative;
     z-index: 2;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text-dark);
      position: relative;
      background: transparent;
      overflow-x: hidden;
    }

     img, svg {
       max-width: 100%;
       height: auto;
       display: block;
     }

    /* =======================
       FULL PAGE LOADER
    ======================== */
    #loader {
      position: fixed;
      inset: 0;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity 0.6s ease, visibility 0.6s ease;
      opacity: 1;
      visibility: visible;
    }

    #loader img {
      width: 140px;
      animation: pulse 1.5s ease-in-out infinite;
    }

    #loader.hide {
      opacity: 0;
      visibility: hidden;
    }

    @keyframes pulse {
      0% { transform: scale(1); opacity: 0.7; }
      50% { transform: scale(1.05); opacity: 1; }
      100% { transform: scale(1); opacity: 0.7; }
    }

    /* GLOBAL FLUID BACKGROUND */
    .global-fluid-bg {
       position: fixed;
       top:0;
       left:0;
       width:100%;
       height:100%;
       z-index: -1;
       background: url("assets/master-bg.svg") center / cover no-repeat;
       pointer-events: none;
     }


    /* =======================
       HEADER
    ======================== */
    .site-logo {
      width: 200px;
      margin-bottom: 10px;
    }

    .header-hero {
      text-align: center;
      padding: 90px 20px 50px;
    }
    
    .header-hero h1 {
      font-size: 42px;
      font-weight: 800;
      margin-bottom: 10px;
    }
    
    .header-subtitle {
      font-size: 25px;
     font-weight: 200;
      color: #333;
    }

    header {
      width: 100%;
      height: 45vh;
      min-height: 270px;
      max-height: 430px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

      /* =======================
           Navigation
        ======================== */
      .navbar{
       position:fixed;
       top:0;
       left:0;
       width:100%;
       box-shadow:0 2px 10px rgba(0,0,0,0.08);
       background:rgba(255,255,255,0.95);
       backdrop-filter: blur(8px);
       transform:translateY(-100%);
       transition:transform 0.3s ease;
       z-index:1000;
      }
      
      .navbar.show{
       transform:translateY(0);
      }
      
      .nav-container{
       max-width:1200px;
       margin:auto;
       padding:10px 20px;
       display:flex;
       align-items:center;
       justify-content:space-between;
      }
      
      .nav-logo img{
       height:45px;
      }
      
      .nav-links{
       display:flex;
       gap:30px;
       list-style:none;
       margin:0;
       padding:0;
      }
      
      .nav-links a{
       text-decoration:none;
       font-weight:600;
       color:#333;
      }
      
      .nav-links .cta-btn{
      color: #fff;
      }
      
      /* Dropdown */
      
      .dropdown{
       position:relative;
      }
      
      .dropdown-menu{
       display:none;
       position:absolute;
       top:100%;
       left:0;
       background:white;
       list-style:none;
       padding:10px 0;
       box-shadow:0 5px 15px rgba(0,0,0,0.1);
      }
      
      .dropdown-menu li{
       padding:8px 20px;
      }
      
      .dropdown-menu li a{
       color:#333;
      }
      
      .dropdown:hover .dropdown-menu{
       display:block;
      }

     /* Mobile menu button */

     .menu-toggle{
     display:none;
     font-size:28px;
     cursor:pointer;
     }

    /* =======================
           Button
        ======================== */
     .quote-bar{
       position:sticky;
       bottom:0;
       width:100%;
       display:flex;
       justify-content:center;
       padding:10px;
       background:white;
       box-shadow:0 -2px 10px rgba(0,0,0,0.1);
       z-index:1000;
     }
     
     .quote-btn{
       background:var(--primary);
       color:white;
       padding:14px 28px;
       font-size:18px;
       font-weight:bold;
       text-decoration:none;
       border-radius:6px;
     }

     .quote-btn:hover {
      background: var(--primary-light);
      transform: translateY(-2px);
     }

    .cta-btn {
      margin-top: 20px;
      margin-bottom: 40px;
      padding: 14px 34px;
      background: var(--primary);
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      border-radius: 10px;
      text-decoration: none;
      box-shadow: 0 6px 20px rgba(0,0,0,0.15);
      transition: background 0.3s ease, transform 0.2s ease;
    }

    .service-content .cta-btn {
      display: inline-block;
      margin-top: 40px;
    }

    .cta-btn:hover {
      background: var(--primary-light);
      transform: translateY(-2px);
    }

    /* =======================
       MOBILE
    ======================== */
    @media (max-width: 600px) {
        .header-hero h1 {
          font-size: 32px;
        }

        .service-card {
          height: 100px;
        }
      
         .service-hero{
        padding:70px 20px 60px;
        } 
     
        .service-hero h1 {
          font-size: 32px;
        }
      
        .service-content {
          padding: 28px 22px;
        }

        .ipm-img {
          max-width: 320px;
          margin: 24px auto;
        }
      
        .service-content .cta-btn {
          margin-top: 32px;
        }
     
        .clients-track img {
          height: 55px;
          margin: 0 20px;
        }
        .fluid-bg::before {
          opacity: 0.18;
        }
      
        header::before {
          opacity: 0.25;
        }
  
       .contact-wrapper {
         grid-template-columns: 1fr;
       }

      .clients-carousel {
          overflow-x:auto;
          -webkit-overflow-scrolling:touch;
          scroll-snap-type:x mandatory;
          scroll-behavior:smooth;
          touch-action:pan-x;
        }
        
        .clients-carousel::-webkit-scrollbar {
          display: none;
        }
      
       .clients-track {
         animation: none;
       }

       .service-section{
         flex-direction:column;
         gap:20px;
        }
        
        .service-text{
         text-align:left;
        }

        .nav-container{
         flex-wrap:wrap;
        }
        
        .menu-toggle{
         display:block;
        }
        
        .nav-links{
         display:none;
         flex-direction:column;
         width:100%;
         background:white;
         margin-top:10px;
         padding:10px 0;
        }
        
        .nav-links.show-menu{
         display:flex;
        }
        
        .nav-links li{
         text-align:center;
         padding:10px 0;
        }
        
        .dropdown-menu{
         position:static;
         box-shadow:none;
        }
     
     	  .accreditation-logos {
          flex-direction: column;
          gap: 15px;
        }

        .about-hero{
          padding:90px 20px 60px;
        }
        
        .about-hero h1{
          font-size:32px;
        }
        
        .about-section{
          margin:60px auto;
        }
     
    }

      /* =======================
             ABOUT
          ======================== */
      
      .about-hero{
      text-align:center;
      padding:120px 20px 80px;
      max-width:900px;
      margin:auto;
      }
      
      .about-hero h1{
      font-size:40px;
      margin-bottom:10px;
      }
      
      .about-hero p{
      font-size:18px;
      opacity:0.8;
      }
      
      
      /* SECTION */
      
      .about-section{
      max-width:1100px;
      margin:80px auto;
      padding:0 20px;
      }
      
      .about-section h2{
      font-size:30px;
      margin-bottom:20px;
      }
      
      .about-section p{
      margin-bottom:15px;
      }
      
      
      /* PEST LIST */
      
      .pest-list{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
      gap:12px;
      list-style:none;
      padding:0;
      margin-top:20px;
      }
      
      .pest-list li{
      background:#f4f4f4;
      padding:12px;
      border-radius:6px;
      text-align:center;
      font-weight:500;
      }
      
      
      /* SERVICES */
      
      .addservices-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:25px;
      margin-top:25px;
      }
      
      .addservice-card{
      background:#f9f9f9;
      padding:25px;
      border-radius:10px;
      box-shadow:0 4px 15px rgba(0,0,0,0.05);
      }
      
      .addservice-card h3{
      margin-bottom:10px;
      }
      
      
      /* CERTIFICATIONS */
      
      .cert-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:25px;
      margin-top:30px;
      }
      
      .cert-grid img{
      width:100%;
      border-radius:8px;
      box-shadow:0 5px 18px rgba(0,0,0,0.1);
      }
      
      
      /* CTA */
      
      .about-cta{
      text-align:center;
      padding:80px 20px;
      background:#f4f4f4;
      margin-top:80px;
      }
      
      .about-cta h2{
      font-size:32px;
      }

    /* =======================
       SERVICES CARDS
    ======================== */

    .highlight{
      background: rgba(15, 42, 68, 0.12); /* light blue highlight */
      padding: 2px 6px;
      border-radius: 4px;
    }

    .ipm-img {
       width: 100%;
       max-width: 420px;
       margin: 30px auto;     
       display: block;
       border-radius: 12px;
     }

    .services-section {
      padding: 20px;
      max-width: 1200px;
      margin: auto;
      box-sizing: border-box;
    }

    .services-title {
      text-align: center;
      font-size: 26px;
      margin-bottom: 25px;
      font-weight: 700;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

	.services-grid a:last-child {
      grid-column: span 2;
    }

    .service-link {
      text-decoration: none;
      color: inherit;
    }

    .service-card {
      position: relative;
      height: 90px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 18px var(--shadow);
      background-size: cover;
      background-position: center;
      transition: transform 0.3s ease;
    }

    .service-card:hover {
      transform: translateY(-6px);
    }
    
    .service-title {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      color: white;
      font-size: 22px;
      font-weight: bold;
      text-align: center;

      text-shadow: 0 3px 10px rgba(0,0,0,0.6);
      z-index: 2;
    }

    /* Overlay */
    .service-overlay {
      position: absolute;
      inset: 0;
      background: rgba(15, 42, 68, 0.75);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }

    .service-card:hover .service-overlay {
      opacity: 1;
    }

    .service-overlay h3 {
      /*color: white;*/
      font-size: 22px;
      font-weight: 700;
      text-shadow: 0 3px 10px rgba(0,0,0,0.6);
    }

    /* =======================
       SERVICE PAGES
    ======================= */
    .service-hero {
      text-align: center;
      padding: 90px 20px 80px;
    }
    
    .service-hero h1 {
      font-size: 42px;
      font-weight: 800;
      margin-bottom: 10px;
    }
    
    .service-subtitle {
      font-size: 18px;
      color: #555;
    }
    
    /* =======================
       SERVICE PAGES- CONTENT
    ======================= */
    .service-content {
      width: calc(100% - 40px);
      max-width: 1100px;
      margin: 40px auto 90px;
      padding: 40px;

      box-sizing: border-box;
     
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(6px);
      border-radius: 18px;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
      text-align: center;
      z-index: 1;
    }
    
    .service-description {
      font-size: 17px;
      line-height: 1.7;
      margin-bottom: 30px;
    }

    .service-section{
      display:flex;
      align-items:center;
      gap:40px;
      margin:60px auto;
      flex-wrap:wrap;
      max-width:1100px;
  	   padding:0 20px;
    }

    .service-text{
      flex:1;
      min-width:280px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(6px);
      border-radius: 18px;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    } 
    /* Image */
    .service-image img{
      width: 100%;
      max-width: 280px;
      margin: 0 auto 30px;
      display: block;
      border-radius: 12px;
      flex: 1;
    }

    .service-section:nth-child(even){
    flex-direction:row-reverse;
    }
    
    /* benefits */
    .benefits{
       display:grid;
       grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
       gap:25px;
       margin:40px 0;
       text-align:center;
     }

    .benefit-item{
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      padding:15px;
      background: rgba(255,255,255,0.6);
      padding:20px;
      border-radius:12px;
      box-shadow:0 6px 18px rgba(0,0,0,0.05);
    }

    .benefit-item img{
      width:60px;
      margin:0 auto 10px auto;
    }
    
    .benefit-item h4{
      margin-bottom:6px;
    }
    
   
    

    /* =======================
   CLIENTS CAROUSEL
    ======================= */
    
    .clients-section {
      margin: 80px auto 40px;
      padding: 20px 0;
      background: none;
      text-align: center;
    }

    .clients-section .cta-btn {
      display: inline-block;
      margin-top: 40px;
    }
    
    .clients-title {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 30px;
    }
    
    .clients-carousel {
      width: 100%;
      overflow-x: hidden;
      position: relative;
    }
     
     .clients-track {
       display: flex;
       width: max-content;
       will-change: transform;
       animation: scrollClients 30s linear infinite;
     }
    
    .clients-track img {
      height: 230px;
      margin: 0 40px;
      flex-shrink: 0; /* VERY IMPORTANT */
      object-fit: contain;
      filter: grayscale(25%);
      transition: filter 0.3s ease, opacity 0.3s ease;
      scroll-snap-align: center;
    }
    
    .clients-track img:hover {
      filter: grayscale(0%);
      opacity: 1;
    }
    
    /* Pause animation on hover */
    .clients-carousel:hover .clients-track {
      animation-play-state: paused;
    }
    
    @keyframes scrollClients {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }

    .service-card:focus-within .service-overlay,
    .service-card:hover .service-overlay {
      opacity: 1;
    }

    /* Background Images */
    .front-residential { 
   	  background-image: url('assets/resi-ban.png'); 
      background-size: cover;
      background-position: center;
    }
    .front-commercial {
      background-image: url("../assets/comm-ban.png");
      background-size: cover;
      background-position: center;
    }
    .front-rodent { 
      background-image: url('assets/rod-ban.png');
      background-size: cover;
      background-position: center;
    }
    .front-termite { 
      background-image: url('assets/term-ban.png'); 
      background-size: cover;
      background-position: center;
    }
    .front-general { 
      background-image: url('assets/gen-ban.png'); 
      background-size: cover;
      background-position: center;
    }

    /* =======================
       BUTTON
    ======================== */
    .learn-more-container {
      text-align: center;
      padding: 30px 30px 30px;
    }

    .learn-more {
      padding: 12px 28px;
      background: var(--primary);
      color: white;
      border-radius: 8px;
      text-decoration: none;
      font-size: 18px;
      font-weight: bold;
    }

    .learn-more:hover {
      background: var(--primary-light);
    }

    /* =======================
       CONTACT
    ======================== */
    .contact-section {
      background: rgba(255, 255, 255, 0.88);
      margin: 60px auto 0;
      padding: 30px;
      max-width: 700px;
      border-radius: 12px;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    }

    .contact-section h2 {
      text-align: center;
      margin-bottom: 20px;
    }

    .contact-grid {
      display: grid;
      gap: 15px;
    }

    input, textarea {
      width: 100%;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 16px;
    }

    button.send-btn {
      padding: 12px;
      border: none;
      background: var(--primary);
      color: white;
      border-radius: 8px;
      font-size: 18px;
      cursor: pointer;
    }

    button.send-btn:hover {
      background: var(--primary-light);
    }

    .contact-info {
      margin-top: 20px;
      text-align: center;
      font-size: 16px;
    }

    .contact-wrapper {
       display: grid;
       grid-template-columns: 1fr;
       gap: 30px;
       margin-top: 30px;
     }
     
     .contact-info-box {
       font-size: 16px;
       line-height: 1.7;
     }
     
     .contact-info-box p {
       margin-bottom: 16px;
     }
     
     /* Form */
     .contact-form {
       display: grid;
       gap: 14px;
     }

    .back-btn {
      display: inline-block;
      margin-top: 30px;
      padding: 12px 24px;
      background: var(--primary);
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
    }

    .back-btn:hover {
      background: var(--primary-light);
    }
    
    .main-footer{
      background:var(--primary);
      color:white;
      padding:40px 10%;
      font-family:Arial;
    }

    .footer-accreditations{
      text-align:center;
      margin-bottom:50px;
    }
    
    .footer-accreditations p{
      font-size:16px;
      font-weight:600;
      letter-spacing:0.5px;
    }
    
    .accreditation-logos{
      display:flex;
      justify-content:space-evenly;
      align-items:center;
      flex-wrap:wrap;
      gap:40px;
      max-width:1000px;
      margin:20px auto 0 auto;
    }
    
    .accreditation-logos img{
      height:75px;
      width:auto;
      object-fit:contain;
      opacity:0.95;
      transition:transform .2s ease;
    }
    
    .accreditation-logos img:hover{
      transform:scale(1.08);
    }

    .footer-container{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:40px;
      flex-wrap:wrap;
    }

    .footer-column{
      flex:1;
      min-width:220px;
    }

    .footer-logo{
      width:130px;
      margin-bottom:10px;
    }

    .footer-desc{
      font-size:15px;
      margin-bottom:20px;
    }

    .footer-column h3{
      margin-bottom:15px;
    }

    .footer-column ul{
      list-style:none;
      padding:0;
    }

    .footer-column ul li{
      margin-bottom:8px;
    }

    .footer-column ul li a{
      color:white;
      text-decoration:none;
      font-size:15px;
    }

    .footer-column ul li a:hover{
      text-decoration:underline;
    }

    .footer-socials{
      display:flex;
      gap:12px;
      margin-top:10px;
    }
    
    .footer-socials img{
      width:28px;
      height:28px;
      object-fit:contain;
      transition:transform .2s;
    }
    
    .footer-socials img:hover{
      transform:scale(1.1);
    }