:root {
            --bs-body-bg: #000000;          /* Deep Black Background */
            --bs-body-color: #ffffff;       /* White Text */
            --bs-warning: #FFC45C;          /* YOUR GOLD COLOR */
            --bs-warning-rgb: 255, 196, 92;
        }

        /* 1. Global Styles */
        body { font-family: 'Segoe UI', sans-serif; overflow-x: hidden; }
        a { text-decoration: none; }
        
        /* 2. Navbar Customization */
        .navbar { background: rgba(0, 0, 0, 0.95) !important; backdrop-filter: blur(10px); }
        .nav-link.active { color: var(--bs-warning) !important; font-weight: bold; }
        .nav-link:hover { color: var(--bs-warning) !important; }

        /* 3. Hero Background Animation (Bootstrap can't do this) */
        .hero-bg {
            background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
            position: relative;
        }
        .hero-bg::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23FFC45C' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
        }

        /* 4. Custom Button (Gold) */
        .btn-gold {
            background-color: var(--bs-warning);
            color: #000;
            font-weight: 600;
            border: none;
        }
        .btn-gold:hover { background-color: #ffb326; color: #000; transform: translateY(-2px); }

        /* 5. Card Hovers */
        .hover-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .hover-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(255, 196, 92, 0.15); border-color: var(--bs-warning) !important; }

        /* 6. Footer Top Border */
        footer { border-top: 2px solid var(--bs-warning); }



        
 
   
    /* 2. Style the Placeholder Text to be GOLD */
    .form-control::placeholder {
        color: var(--bs-warning) !important;          /* Your Gold Variable */
        opacity: 0.7;                                 /* 70% opacity so it looks like a hint */
    }

    /* 3. Handle the "Focus" state (when user clicks inside) */
    .form-control:focus {
        background-color: rgba(0, 0, 0, 0.5);         /* Darker background for readability */
        border-color: var(--bs-warning);              /* Solid Gold border */
        box-shadow: 0 0 0 0.25rem rgba(255, 196, 92, 0.25); /* Gold Glow */
        color: white;
    }

    

    /* Custom Hero Banner Style */
/* DEFAULT (Desktop) */
.hero-banner {
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
                url("../images/home.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 80vh;
    position: relative;
    display: flex;             /* Ensures vertical centering */
    align-items: center;       /* Centers content vertically */
}

/* MOBILE FIXES (Phone screens only) */
@media (max-width: 991px) {
    .hero-banner {
        /* 1. Make overlay DARKER (90%) on mobile so text is readable */
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
                    url("../images/home.webp");
        
        /* 2. Fix the "Cut Off" text issue */
        padding-top: 120px !important; /* Pushes text down below the navbar */
        padding-bottom: 60px;
        
        /* 3. Adjust height */
        min-height: 100vh; /* Fill the whole phone screen */
        align-items: flex-start; /* Start text from top (after padding) instead of center */
    }
    
    /* 4. Resize text slightly so it fits better */
    .hero-banner h1 {
        font-size: 2.5rem; /* Smaller than desktop's 3rem+ */
    }
}

/* CLIENT LOGO STYLES */
.client-logo {
    /* 1. Make them BIGGER (increased from 80px to 110px) */
    max-height: 110px;            
    width: auto;
    max-width: 100%;
    
    /* 2. Full Color & Visibility by Default */
    filter: grayscale(0%);
    opacity: 1;
    
    /* 3. Smooth Movement setup */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* HOVER STATE (The "Pop" Effect) */
.client-link:hover .client-logo {
    /* Scale up nicely */
    transform: scale(1.15); 
    
    /* Add a subtle shadow so it looks like it's lifting off the page */
    filter: drop-shadow(0 10px 15px rgba(255, 196, 92, 0.3));
}


/* KILL THE WIGGLE */
html, body {
    width: 100%;
    overflow-x: hidden !important; /* Cuts off anything that tries to stick out sideways */
    position: relative;            /* Stabilizes the container */
    margin: 0;
    padding: 0;
}