/* -----------------------------------------
           GLOBAL STYLES
        ----------------------------------------- */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.7;
        }
        p{
            text-align: justify;
        }

        a {
            text-decoration: none;
        }

        .text-blue {
            color: #0d6efd;
        }

        .btn-whatsapp {
            background: #25D366;
            color: #fff;
        }

        .btn-whatsapp:hover {
            background: #1ebe5b;
            color: #fff;
        }

        /* -----------------------------------------
           TOP BAR
        ----------------------------------------- */
        .top-bar {
            background: #0d6efd;
            color: #fff;
            font-size: 14px;
        }

        /* -----------------------------------------
           HERO SECTION
        ----------------------------------------- */
        .hero {
            background: linear-gradient(rgba(0, 0, 0, 0.65),
                    rgba(0, 0, 0, 0.65)),
                url('images/hero-water-tank.jpg') center/cover no-repeat;
            min-height: 90vh;
            display: flex;
            align-items: center;
            color: #fff;
        }

        .hero h1 {
            font-size: 48px;
            font-weight: 700;
        }

        .hero p {
            font-size: 18px;
            max-width: 750px;
            margin: auto;
        }

        /* -----------------------------------------
           SERVICE CARDS
        ----------------------------------------- */
        .service-card {
            border: none;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
            transition: all 0.4s ease;
        }

        .service-card:hover {
            transform: translateY(-10px);
        }

        /* -----------------------------------------
           GALLERY EFFECTS
        ----------------------------------------- */
        .gallery-section .row.g-3 img {
            display: block;
            transition: transform 0.35s ease, box-shadow 0.35s ease;
        }

        .gallery-section .row.g-3 img:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
        }

        .gallery-section .border.p-3 {
            background: #fff;
            transition: transform 0.35s ease, box-shadow 0.35s ease;
        }

        .gallery-section .border.p-3:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
        }

        .gallery-section .border.p-3 img,
        .gallery-section .border.p-3 video {
            transition: transform 0.45s ease;
        }

        .gallery-section .border.p-3:hover img,
        .gallery-section .border.p-3:hover video {
            transform: scale(1.03);
        }

        /* -----------------------------------------
           WHY CHOOSE US
        ----------------------------------------- */
        .why-box {
            background: #f8f9fa;
            padding: 30px;
            border-radius: 8px;
            height: 100%;
        }

        /* -----------------------------------------
           PROCESS STEPS
        ----------------------------------------- */
        .process-step {
            position: relative;
            padding: 25px;
            background: #ffffff;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }

        /* -----------------------------------------
           CALL TO ACTION
        ----------------------------------------- */
        .cta {
            background: linear-gradient(90deg, #0d6efd, #0b5ed7);
            color: #fff;
        }

        /* -----------------------------------------
           FOOTER
        ----------------------------------------- */
        footer {
            background: #111;
            color: #ccc;
        }

        footer a {
            color: #ccc;
        }

        footer a:hover {
            color: #fff;
        }

          /* -----------------------------------------
              NAVBAR LOGO
          ----------------------------------------- */
          .navbar-brand{display:flex;align-items:center;gap:.5rem}
          .navbar-logo{height:180px;max-height:none;object-fit:contain}

          /* -----------------------------------------
              HEADER / NAV STYLES (custom)
          ----------------------------------------- */
          .site-header{
              background:#fff;
              position: sticky;
              top: 0;
              z-index: 1030;
          }

          /* Make the top header container split into two equal halves
             so logo takes 50% and contact details take 50% even on mobile */
          .site-header > .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
          .site-header > .container .navbar-brand{flex:0 0 50%;max-width:50%}
          .site-header > .container .header-contacts{flex:0 0 50%;max-width:50%;text-align:right;font-size:22px;color:#222}
          .site-header .header-contacts .contact-line{line-height:1.1;margin-bottom:6px;font-weight:600; font-size: xx-large;}

          /* Rounded pill navigation centered */
          .main-nav{background:linear-gradient(180deg,#2f3e5a,#27344f);padding:12px;border-radius:40px;margin:12px auto 24px;max-width:1100px;box-shadow:0 8px 25px rgba(0,0,0,0.18)}
          .main-nav .navbar-nav{display:flex;gap:2rem;align-items:center}
          .main-nav .nav-link{color:#fff;padding:8px 12px;font-weight:600}
          .main-nav .nav-link:hover,.main-nav .nav-link.active{color:#ffd700}

          /* Keep both halves large on smaller screens too — each takes 50% */
          @media (max-width:991px){
              .site-header > .container .navbar-brand, .site-header > .container .header-contacts{flex:0 0 50%;max-width:50%}
              .site-header > .container .header-contacts{font-size:20px;text-align:left;padding-left:8px}
              .navbar-logo{height:140px}
              .main-nav{border-radius:14px;padding:10px;}
              .main-nav .navbar-nav{flex-direction:column;gap:.5rem}
          }

          @media (max-width:480px){
              .navbar-logo{height:120px}
              .site-header > .container .header-contacts{font-size:18px}
          }

          /* Mobile-specific header layout to match provided design */
          @media (max-width:768px){
              /* Top row: logo left, compact menu button right */
              .site-header > .container{justify-content:space-between;gap:8px}
              .site-header > .container .navbar-brand{flex:0 0 auto;max-width:65%}

              /* Contacts move below and center-aligned like the example */
              .site-header > .container .header-contacts{flex:0 0 100%;max-width:100%;text-align:center;margin-top:10px;padding:10px 12px;border-top:1px solid rgba(0,0,0,0.06);background:rgba(255,255,255,0.95);border-radius:6px}
              .site-header .header-contacts .contact-line{display:flex;align-items:center;justify-content:center;gap:12px;font-size:16px;margin:8px 0}
              .site-header .header-contacts .contact-icon{font-size:30px;color:#0b63b7;display:inline-block;width:40px}
              .site-header .header-contacts .contact-label{color:#0b63b7;font-weight:700;font-size:16px}
              .site-header .header-contacts .phone-number,.site-header .header-contacts .email{color:#d42b2b;font-weight:700}
              /* social icons row */
              .site-header .widget-social-icons{display:flex;justify-content:center;gap:18px;margin-top:12px}
              .site-header .widget-social-icons .social-icons__link{color:#6aa2ff;font-size:20px}

              /* Compact MENU button at top-right matching reference */
              .navbar-toggler{display:inline-flex;align-items:center;gap:10px;padding:6px 10px;background:#23364a;color:#fff;border-radius:6px;border:none;width:auto; margin-left:auto}
              .navbar-toggle__text{display:inline-block;padding:6px 8px;font-weight:700;color:#fff;font-size:14px}
              .navbar-toggle__icon-bar{display:inline-flex;flex-direction:column;gap:4px;padding-left:6px}
              .navbar-toggle__icon-bar .icon-bar{display:block;width:20px;height:3.5px;background:#fff;border-radius:2px}
              /* small touch target */
              .navbar-toggler{min-height:40px}
          }

          /* -----------------------------------------
              FLOATING WHATSAPP
          ----------------------------------------- */

          /* Map embed responsiveness */
          .map-embed{width:100%;height:320px;border:0;border-radius:6px}
        .whatsapp-float {
            position: fixed;
            bottom: 25px;
            right: 25px;
            background: #25D366;
            color: #fff;
            padding: 14px 18px;
            border-radius: 50px;
            font-size: 18px;
            z-index: 999;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.08);
            }

            100% {
                transform: scale(1);
            }
        }