/* 🌙 GLOBAL BASE STYLE */
body {
    background-color: #0a0a0a;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    padding-top: 70px;
    /* CHANGE: Removed initial overflow-x: hidden; and will manage overflow via JS */
    overflow: auto;
}

a {
    text-decoration: none;
}

/* 🌟 Sticky header with scroll animation */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    transition: all 0.3s ease;
}

    header.scrolled {
        background-color: #000f25 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

.navbar {
    transition: all 0.3s ease;
    height: 70px;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #001F3F;
}

.navbar-brand img {
    height: 40px;
    transition: height 0.3s ease;
}

header.scrolled .navbar-brand img {
    height: 32px;
}

.navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

    .navbar-nav .nav-link:hover {
        color: #00d4ff !important;
        text-decoration: underline;
        background-color: rgba(0, 122, 255, 0.1);
    }

/* 📱 Mobile menu */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #001F3F;
        padding: 1rem;
        border-radius: 0 0 10px 10px;
    }

        .navbar-collapse .nav-link:hover {
            background-color: #003366;
            color: #00bfff !important;
        }
}

/* 📱 Mobile menu Button Fix - ADDED THIS SECTION */
.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.navbar-toggler-icon {
    /* Ensures the icon is visible (white lines) against the dark background */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


/* 🌈 Gradient border reusable card */
.gradient-border-card {
    position: relative;
    background: #0a0a0a;
    border-radius: 16px;
    padding: 2rem;
    color: #fff;
    text-align: center;
    font-weight: 600;
    transition: all 0.4s ease;
    overflow: hidden;
    z-index: 1;
}

    .gradient-border-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        background: linear-gradient(90deg, #b06ab3, #4568dc, #00d4ff, #ff6ec7);
        background-size: 300% 300%;
        animation: gradientBorder 5s ease infinite;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1;
    }

@keyframes gradientBorder {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.gradient-border-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
}

/* 🌟 Footer */
footer {
    background-color: #0f0f0f;
    color: #aaa;
    padding: 2rem 0;
    text-align: center;
    border-top: 2px solid #00d4ff;
}

    footer a {
        color: #00d4ff;
        text-decoration: none;
    }

        footer a:hover {
            text-decoration: underline;
        }

/* 🚀 SPLASH SCREEN/PRELOADER STYLES */

/* 1. KEYFRAMES FOR ANIMATED BACKGROUND */
@keyframes splashBackground {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Container for the splash screen */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 2. ADD ANIMATED GRADIENT BACKGROUND */
    background: linear-gradient(90deg, #0a0a0a, #1a0f2b, #001F3F, #1a0f2b); /* Dark to purple/blue tones */
    background-size: 400% 400%; /* Important for the movement effect */
    animation: splashBackground 10s ease infinite; /* Apply the animation */

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease-out, visibility 1s;
}

/* Logo initial size and transition */
#splash-logo {
    /* Use the logo image in the HTML (as you had it) */
    width: 250px;
    transform: scale(1);
    transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
    /* Ensure the logo is above the moving background */
    z-index: 10000;
}


/* Class to trigger the zoom-in effect (loader) */
#splash-screen.zoom-in-start #splash-logo {
    transform: scale(2.5); /* Increased zoom for more dramatic effect */
}

/* Class to trigger the fade-out effect */
#splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Main content management */
.website-content-hidden {
    display: none;
    opacity: 0;
    transition: opacity 1s ease-in;
}

.website-content-visible {
    display: block;
    opacity: 1;
}
/* 🌟 Sticky header with scroll animation */
/* ... existing styles ... */

/* --- UPDATED LARGER LOGO STYLES --- */

.navbar-brand {
    /* Adjust padding/spacing for a larger logo */
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1.5rem; /* Make "Blue Guys" text bigger */
}

#navbarLogo {
    height: 90px; /* INCREASED INITIAL SIZE */
    width: 280px;
    /*  border-radius: 50%; */
    object-fit: cover;
    margin-right: 12px; /* A little more space */
    transition: all 0.3s ease;
    margin-left: -20px;
}

header.scrolled #navbarLogo {
    height: 60px; /* INCREASED SCROLLED SIZE */
    width: 260px;
}

/* --- END UPDATED LARGER LOGO STYLES --- */

.navbar {
    transition: all 0.3s ease;
    height: 70px;
    /* ... rest of navbar styles ... */
}
/* ... rest of your styles ... */