:root {
           --bg-dark: #0f172a;
           --bg-dark: #20315b;
           --accent: #fbbf24;
           /* Vivid Amber */
           --accent-hover: #f59e0b;
           --text-main: #1e293b;
           --text-muted: #64748b;
           --white: #ffffff;
       }

       body {
           font-family: 'Montserrat', sans-serif;
           background-color: #fcfcfc;
           color: var(--text-main);
           overflow-x: hidden;
       }

       .logo {
           max-height: 70px;
           width: auto;
       }

       h1,
       h2,
       h3,
       .navbar-brand {
           font-family: 'Syne', sans-serif;
       }

       /* --- Topbar --- */
       .topbar {
           background: var(--bg-dark);
           color: var(--white);
           padding: 10px 0;
           font-size: 0.85rem;
           border-bottom: 2px solid var(--accent);
       }

       .topbar a {
           color: var(--accent);
           text-decoration: none;
           font-weight: 600;
       }

       /* --- Sticky Navbar --- */
       .navbar {
           background: rgba(255, 255, 255, 0.95);
           backdrop-filter: blur(10px);
           padding: 15px 0;
           transition: 0.4s;
           border-bottom: 1px solid #eee;
       }

       .navbar-brand {
           font-weight: 800;
           font-size: 1.6rem;
           letter-spacing: -1px;
       }

       .navbar-brand span {
           color: var(--accent);
       }

       .nav-link {
           font-weight: 600;
           color: var(--bg-dark) !important;
           margin: 0 10px;
           text-transform: uppercase;
           font-size: 0.8rem;
           letter-spacing: 1px;
       }

       .nav-link:hover {
           color: var(--accent) !important;
       }

       /* --- Hero Carousel --- */
       .hero-carousel .carousel-item {
           height: 90vh;
           background-size: cover;
           background-position: top;
           position: relative;
       }

       .hero-overlay {
           position: absolute;
           inset: 0;
           background: linear-gradient(15deg, rgba(15, 23, 42, 0.65) 30%, rgba(15, 23, 42, 0.2) 100%);
       }

       .hero-overlay h1,
       .hero-overlay p {
            padding: 8px;
           background: linear-gradient(15deg, rgba(15, 23, 42, 0.95) 30%, rgba(15, 23, 42, 0.2) 100%);
       }

       .carousel-caption {
           text-align: left;
           bottom: 20%;
           left: 10%;
           max-width: 800px;
           z-index: 2;
       }

       .carousel-caption h1 {
           font-size: clamp(3rem, 6vw, 5rem);
           line-height: 0.9;
           margin-bottom: 20px;
           text-transform: uppercase;
           /* padding: 8px; */
           /* background: linear-gradient(15deg, rgba(15, 23, 42, 0.95) 30%, rgba(15, 23, 42, 0.2) 100%); */
       }

       .highlight {
           color: var(--accent);
       }

       /* --- Buttons --- */
       .btn-accent {
           background: var(--accent);
           color: var(--bg-dark);
           font-weight: 700;
           padding: 15px 35px;
           border-radius: 0;
           border: none;
           text-transform: uppercase;
           transition: 0.3s;
       }

       .btn-accent:hover {
           background: var(--white);
           color: var(--bg-dark);
           transform: translateY(-5px);
           box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
       }

       /* --- Sections general --- */
       section {
           padding: 100px 0;
       }

       .section-header {
           margin-bottom: 60px;
       }

       .title-under {
           width: 60px;
           height: 5px;
           background: var(--accent);
           margin-top: 15px;
       }

       /* --- Why Us Bento Cards --- */
       .bento-card {
           background: var(--white);
           border: 1px solid #e2e8f0;
           padding: 40px;
           height: 100%;
           transition: 0.3s;
       }

       .bento-card:hover {
           border-color: var(--accent);
           background: var(--bg-dark);
           color: var(--white);
       }

       .bento-card i {
           font-size: 3rem;
           color: var(--accent);
           margin-bottom: 20px;
           display: block;
       }

       /* --- Features Cards --- */
       .feature-card {
           border: none;
           background: #f8fafc;
           padding: 30px;
           border-left: 5px solid var(--bg-dark);
           transition: 0.3s;
       }

       .feature-card:hover {
           border-left-color: var(--accent);
           transform: scale(1.02);
           background: white;
           box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
       }

       /* --- Testimonials --- */
       .testi-box {
           background: var(--white);
           padding: 40px;
           border-radius: 20px;
           box-shadow: 10px 10px 0px var(--accent);
           border: 2px solid var(--bg-dark);
       }

       .testi-img {
           width: 60px;
           height: 60px;
           border-radius: 50%;
           border: 2px solid var(--bg-dark);
       }

       /* --- Contact & Map --- */
       .contact-wrap {
           background: var(--bg-dark);
           color: var(--white);
           padding: 60px;
           position: relative;
           overflow: hidden;
       }

       .contact-wrap::after {
           content: '';
           position: absolute;
           top: -50px;
           right: -50px;
           width: 200px;
           height: 200px;
           background: var(--accent);
           border-radius: 50%;
           opacity: 0.1;
       }

       /* --- Footer --- */
       footer {
           background: #000;
           color: #888;
           padding: 80px 0 20px;
       }

       footer h5 {
           color: var(--white);
           font-weight: 700;
           margin-bottom: 25px;
       }

       footer a {
           color: #888;
           text-decoration: none;
           transition: 0.3s;
       }

       footer a:hover {
           color: var(--accent);
       }

       /* --- Floating Buttons --- */
       .float-box {
           position: fixed;
           bottom: 30px;
           right: 30px;
           z-index: 1000;
           display: flex;
           flex-direction: column;
           gap: 12px;
       }

       .f-btn {
           width: 55px;
           height: 55px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.8rem;
           color: white;
           transition: 0.3s;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
       }

       .f-wa {
           background: #25D366;
       }

       .f-tel {
           background: var(--accent);
           color: var(--bg-dark);
       }

       .f-btn:hover {
           transform: scale(1.1);
           color: white;
       }

       @media (max-width: 768px) {
           .carousel-caption h1 {
               font-size: 2.8rem;
           }

           .contact-wrap {
               padding: 30px;
           }
       }






       .page-header {
           background: var(--bg-dark);
           color: white;
           padding: 80px 0;
           text-align: center;
       }

       .page-header h1 {
           font-size: 4rem;
           font-weight: 800;
           text-transform: uppercase;
       }

       .page-header .highlight {
           color: var(--accent);
       }

       .title-under {
           width: 80px;
           height: 5px;
           background: var(--accent);
           margin: 20px auto 0;
       }



       .navbar {
           padding: 0;
           background: rgba(255, 255, 255, 0.98);
           backdrop-filter: blur(10px);
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
       }

       .navbar-brand-container {
           background: var(--bg-dark);
           padding: 15px 60px 15px 30px;
           clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
           margin-left: -15px;
           transition: var(--transition);
       }

       .navbar-brand {
           color: var(--white) !important;
           font-weight: 800;
           font-size: 1.5rem;
           letter-spacing: -1px;
           margin: 0;
           text-decoration: none;
       }

       .navbar-brand span {
           color: var(--accent);
       }




       /* --- Updated Navbar Fix --- */
       .navbar {
           padding: 0;
           /* This gradient makes the left side dark and the right side white/blur */
           background: linear-gradient(to right, var(--bg-dark) 20%, rgba(255, 255, 255, 0.98) 20%);
           backdrop-filter: blur(10px);
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
       }

       .navbar-brand-container {
           background: var(--bg-dark);
           /* padding: 15px 80px 15px 40px; */
           padding: 0px 80px 0px 40px;
           /* Increased padding for a cleaner look */
           clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
           /* Removed negative margin to let the gradient handle the edge */
           margin-left: 0;
           transition: var(--transition);
           display: flex;
           align-items: center;
       }


       .nav-link {
           font-weight: 700;
           font-size: 0.8rem;
           letter-spacing: 1px;
           color: var(--bg-dark) !important;
           padding: 25px 15px !important;
           text-transform: uppercase;
       }

       .nav-link:hover,
       .nav-link.active {
           color: var(--accent) !important;
       }


       .page-header {
           background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)),
               url('../img/super-aircondition-about-us.jpg');
           background-size: cover;
           background-position: center;
           padding: 120px 0 80px;
           color: white;
           text-align: center;
       }

       .page-header h1 {
           font-size: 1.3rem;
           margin-bottom: 10px;
       }

       .title-under {
           width: 60px;
           height: 4px;
           background: var(--accent);
           margin: 0 auto;
       }





       /* --- Premium Image Cards --- */
       .service-card {
           position: relative;
           overflow: hidden;
           border-radius: 0;
           border: none;
           height: 420px;
           display: flex;
           align-items: flex-end;
           padding: 30px;
           transition: var(--transition);
       }

       .card-img-bg {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           object-fit: cover;
           z-index: 1;
           transition: transform 0.8s ease;
       }

       .service-card::after {
           content: '';
           position: absolute;
           inset: 0;
           background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 10%, rgba(15, 23, 42, 0.4) 50%, transparent 100%);
           z-index: 2;
       }

       .card-content {
           position: relative;
           z-index: 3;
           color: white;
           width: 100%;
       }

       .service-icon-box {
           width: 50px;
           height: 50px;
           background: var(--accent);
           color: var(--bg-dark);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.4rem;
           margin-bottom: 20px;
       }

       .service-card:hover .card-img-bg {
           transform: scale(1.1);
       }

       .service-card:hover {
           box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
       }

       /* --- Process Steps --- */
       .step-num {
           width: 60px;
           height: 60px;
           border: 2px solid var(--accent);
           color: var(--accent);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.5rem;
           font-weight: 800;
           margin: 0 auto 20px;
       }

       /* --- Balanced CTA Banner --- */
       .cta-inline {
           background: var(--bg-dark);
           color: white;
           padding: 40px;
           margin: 80px 0;
           display: flex;
           align-items: center;
           justify-content: space-between;
           border-right: 10px solid var(--accent);
       }


       .btn-accent {
           background: var(--accent);
           color: var(--bg-dark);
           font-weight: 700;
           border-radius: 0;
           padding: 12px 30px;
           border: none;
           text-decoration: none;
           display: inline-block;
           transition: var(--transition);
       }

       .btn-accent:hover {
           background: white;
           color: var(--bg-dark);
           transform: translateY(-3px);
       }

       /* --- Brands Strip --- */
       .brand-item {
           font-weight: 800;
           font-size: 1.5rem;
           color: #cbd5e1;
           filter: grayscale(1);
           opacity: 0.5;
           transition: 0.3s;
       }

       .brand-item:hover {
           opacity: 1;
           filter: grayscale(0);
           color: var(--bg-dark);
       }


       /* Custom Outline Warning Button */
       .btn-outline-warning {
           background: transparent;
           color: var(--brand-accent) !important;
           border: 2px solid var(--brand-accent) !important;
           font-family: 'Montserrat', sans-serif;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 1px;
           padding: 12px 28px;
           border-radius: 0;
           /* Keep it sharp and modern */
           transition: var(--transition);
           /* Using the transition variable from your master CSS */
           position: relative;
           overflow: hidden;
           z-index: 1;
       }

       .btn-outline-warning:hover {
           background: var(--brand-accent) !important;
           color: var(--brand-dark) !important;
           border-color: var(--brand-accent) !important;
           transform: translateY(-3px);
           box-shadow: 0 10px 20px rgba(251, 191, 36, 0.2);
           /* Soft amber glow */
       }

       /* Optional: Active/Focus State */
       .btn-outline-warning:active,
       .btn-outline-warning:focus {
           background: var(--brand-hover) !important;
           box-shadow: none !important;
           transform: translateY(-1px);
       }

       /* Responsive adjustment for mobile */
       @media (max-width: 768px) {
           .btn-outline-warning {
               padding: 10px 20px;
               font-size: 0.8rem;
           }
       }


       /* Custom Outline Light Button */
       .btn-outline-light {
           background: rgba(255, 255, 255, 0.05);
           /* Very subtle glass fill */
           color: #0f1629 !important;
           border: 2px solid rgb(15 23 42) !important;
           font-family: 'Montserrat', sans-serif;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 1px;
           padding: 12px 28px;
           border-radius: 0;
           backdrop-filter: blur(4px);
           /* Glassmorphism effect */
           transition: var(--transition);
       }

       .btn-outline-light:hover {
           background: var(--bg-dark) !important;
           color: var(--white) !important;
           border-color: var(--white) !important;
           transform: translateY(-3px);
           box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);
       }

       /* For buttons used in the Topbar or Nav where they need to be smaller */
       .nav-item .btn-outline-light {
        background: aliceblue !important;
           padding: 8px 18px;
           font-size: 0.75rem;
       }

       /* Subtle pulse animation for high-priority light buttons (Optional) */
       .btn-outline-light.pulse {
           animation: lightPulse 2s infinite;
       }

       @keyframes lightPulse {
           0% {
               box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
           }

           70% {
               box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
           }

           100% {
               box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
           }
       }






       /* --- Contact info cards (new) --- */
       .contact-info-card {
           background: white;
           border: 1px solid #eef2f6;
           padding: 30px 25px;
           text-align: center;
           height: 100%;
           transition: 0.2s;
       }

       .contact-info-card:hover {
           border-color: var(--accent);
           transform: translateY(-5px);
           box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
       }

       .contact-info-card i {
           font-size: 2.8rem;
           color: var(--accent);
           margin-bottom: 20px;
       }

       .contact-info-card h4 {
           font-size: 1.4rem;
           font-weight: 700;
           margin-bottom: 15px;
       }

       .contact-info-card p,
       .contact-info-card a {
           color: var(--text-muted);
           text-decoration: none;
           font-size: 1.1rem;
       }

       .contact-info-card a:hover {
           color: var(--accent);
       }

       /* --- Contact form & map area --- */
       .contact-form-wrap {
           background: white;
           padding: 50px;
           border: 1px solid #edf2f9;
           box-shadow: 0 15px 35px rgba(0, 20, 40, 0.05);
       }

       .form-control,
       .form-select {
           border: 1px solid #dde2ea;
           border-radius: 0;
           padding: 14px 18px;
           font-size: 1rem;
       }

       .form-control:focus {
           border-color: var(--accent);
           box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.15);
       }

       .map-container {
           height: 100%;
           min-height: 400px;
           border: 1px solid #edf2f9;
       }

       .map-container iframe {
           width: 100%;
           height: 100%;
           filter: grayscale(0.2) invert(0.02);
       }

       /* --- CTA banner (optional) --- */
       .cta-banner {
           background: var(--bg-dark);
           color: white;
           padding: 50px;
           border-radius: 20px;
       }


       @media (max-width: 768px) {
           .page-header h1 {
               font-size: 2.8rem;
           }

           .contact-form-wrap {
               padding: 25px;
           }
       }



       .navbar-nav {
        background-color: white !important;
       }
       .nav-item .btn-outline-light {
        background: aliceblue !important;
           padding: 8px 18px;
           font-size: 0.75rem;
       }


       /* Fix for Bootstrap gutter overflow on mobile */
@media (max-width: 767px) {
    /* Reset the g-5 gutters on mobile */
    .row.g-5 {
        --bs-gutter-x: 0;
        margin-right: 0;
        margin-left: 0;
    }
    
    .row.g-5 > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }
    
    /* Fix for the align-items-center row */
    .row.align-items-center {
        --bs-gutter-x: 0;
        margin-right: 0;
        margin-left: 0;
    }
    
    .row.align-items-center > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }
    
    /* General mobile fix for all rows */
    .row {
        --bs-gutter-x: 0;
        margin-right: 0;
        margin-left: 0;
    }
    
    .row > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }
    
    /* Add padding back to containers for breathing room */
    .container {
        padding-right: 15px;
        padding-left: 15px;
    }
    
    /* Fix any potential margin issues with the footer rows */
    footer .row.g-5 {
        margin-right: 0;
        margin-left: 0;
    }
}