/* =========================================
   ULTIMATE GLASS ENGINE - "From Scratch" Redesign
   ========================================= */

:root {
    /* --- The Glass DNA --- */
    --ug-blur: blur(20px);

    /* Real Reflection Simulation */
    /* A complex gradient mimicking sky reflection on a glossy surface */
    --ug-surface: linear-gradient(135deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.1) 20%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0.15) 100%);

    /* The "Thick Glass" Edge */
    --ug-border: 1px solid rgba(255, 255, 255, 0.4);
    --ug-border-top: 1px solid rgba(255, 255, 255, 0.6);
    /* Highlights top edge light source */
    --ug-border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    /* Deep Depth Shadow */
    --ug-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    /* Inner rim light */

    /* Text Handling - UPGRADED */
    --ug-text-primary: #ffffff;
    --ug-text-secondary: #f0f0f0;
    /* Lighter for better contrast */
    --ug-text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    /* Stronger shadow */
}

/* =========================================
   1. RESET & LAYOUT OVERHAUL
   ========================================= */

/* Make the body completely transparent to show the video */
body {
    background: transparent !important;
    font-size: 1.1rem !important;
    /* Larger base text */
    line-height: 1.8 !important;
    /* Better readability */
}

/* 
   THE FLOATING CARD SYSTEM
   Convert standard full-width Bootstrap sections into floating glass islands 
*/

/* Target all major sections */
.container-fluid,
.hero-header,
.footer,
.navbar,
.feature,
.bg-light,
.bg-primary,
.bg-white,
.newsletter,
.responsive-container-block,
.outer-container {
    background: var(--ug-surface) !important;
    backdrop-filter: var(--ug-blur) !important;
    -webkit-backdrop-filter: var(--ug-blur) !important;

    /* Floating Geometry */
    margin: 3rem auto !important;
    /* More spacing between sections */
    padding: 3rem !important;
    /* increased internal breathing room */

    /* Float with gaps */
    width: 90% !important;
    /* Pull away from edges */
    max-width: 1400px !important;
    border-radius: 20px !important;

    /* Glass Specularity */
    border: var(--ug-border) !important;
    border-top: var(--ug-border-top) !important;
    border-bottom: var(--ug-border-bottom) !important;
    box-shadow: var(--ug-shadow) !important;
}

/* Specific Fix for Navbar to stay top but floating */
.navbar {
    margin-top: 1.5rem !important;
    padding: 1rem 2rem !important;
    /* Slightly less padding for navbar */
    position: sticky !important;
    top: 1rem;
    z-index: 1030;
}

/* Navbar Brand Fix */
.navbar h1 {
    font-size: 1.8rem !important;
    /* Smaller brand font as requested */
    margin: 0 !important;
}

/* Fix Hero spacing */
.hero-header {
    margin-top: 2rem !important;
    padding: 4rem 3rem !important;
    /* Extra padding for hero */
}


/* =========================================
   2. CONTENT & TYPOGRAPHY REFACTOR
   ========================================= */

/* Force high contrast text everywhere */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ug-text-primary) !important;
    text-shadow: var(--ug-text-shadow) !important;
    font-weight: 700 !important;
    /* Bold headers */
    letter-spacing: 0.5px;
}

h1 {
    font-size: 3.5rem !important;
}

h2 {
    font-size: 2.5rem !important;
}

h3 {
    font-size: 2rem !important;
}

p,
span,
div,
a,
.btn {
    color: var(--ug-text-primary) !important;
    text-shadow: var(--ug-text-shadow) !important;
}

p {
    text-align: justify !important;
}

.text-dark,
.text-black,
.text-muted,
.text-body {
    color: var(--ug-text-secondary) !important;
}

/* Buttons: "Glass Buttons" */
.btn-primary,
.btn-light,
.btn-outline-primary,
.btn-outline-light {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1)) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2)) !important;
}

/* Icons styling */
.fa,
.fab,
.bi {
    color: white !important;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

/* Feature Tick Marks - Sizing Fix */
.feature .btn-sm-square {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
    /* Smaller icon */
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}


/* =========================================
   3. INNER COMPONENT GLASS (Recursion)
   ========================================= */

/* Service Cards, Team items, Testimonials - Inner Glass */
.service-item,
.team-item,
.testimonial-item,
.case-item,
.card {
    background: rgba(0, 0, 0, 0.2) !important;
    /* Darker inner glass for contrast */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    padding: 2rem !important;
    margin-bottom: 1rem;
}

/* Sponsors Area specifically */
.outer-container {
    width: 90% !important;
    margin: 2rem auto !important;
    border-radius: 20px !important;
}

/* =========================================
   4. CLEANUP & OVERRIDES
   ========================================= */

/* Remove any conflicting backgrounds */
img.bg-img,
.overlay {
    display: none !important;
}

/* =========================================
   5. EXPERT ADVISORS - GLASS PARTITION STYLE
   ========================================= */

.team-card {
    /* The "Partition" Look: Strong white border */
    border: 3px solid rgba(255, 255, 255, 0.95) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    /* Very subtle glass */
    backdrop-filter: blur(4px) !important;

    /* Layout */
    border-radius: 0 !important;
    /* user picture shows sharp or slightly rounded corners, but "partition" often implies sharp. Let's stick to slight rounded or just square if requested. Image looks rectangular. */
    margin: 10px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.3s ease, background 0.3s;
}

.team-card:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-5px);
}

.team-card .name {
    font-weight: 700 !important;
    text-transform: uppercase;
    margin-top: 15px !important;
    font-size: 1.2rem !important;
}

.team-card .social-media-links img {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
    width: 30px;
    margin: 5px;
}


/* =========================================
   NIGHT MODE (Moonlight Glass)
   ========================================= */

body.night-mode {
    /* Darker, cooler background feeling */
    background-color: #050510 !important;
}

/* Override Glass Variables for Night */
body.night-mode {
    /* 
       Reflective Surface: Darker, Blue-tinted, "Moonlit"
       Instead of white reflections, we use cool blues and deep transparency 
    */
    --ug-surface: linear-gradient(135deg,
            rgba(20, 30, 50, 0.7) 0%,
            rgba(20, 30, 50, 0.4) 20%,
            rgba(0, 5, 15, 0.5) 50%,
            rgba(30, 40, 60, 0.3) 100%) !important;

    /* Borders: Cool Cyan/Silver Hint */
    --ug-border: 1px solid rgba(100, 200, 255, 0.2);
    --ug-border-top: 1px solid rgba(150, 220, 255, 0.3);
    --ug-border-bottom: 1px solid rgba(100, 200, 255, 0.05);

    /* Shadows: Deep Blue Glow */
    --ug-shadow:
        0 8px 32px 0 rgba(0, 0, 10, 0.6),
        inset 0 1px 0 0 rgba(100, 200, 255, 0.1);

    /* Text: Ultra White with Blue Glow */
    --ug-text-primary: #e0f0ff;
    --ug-text-secondary: #b0c0d0;
    --ug-text-shadow: 0 0 10px rgba(100, 200, 255, 0.3);
}

/* Ensure inner cards are darker in night mode */
body.night-mode .feature,
body.night-mode .service-item,
body.night-mode .team-item,
body.night-mode .testimonial-item,
body.night-mode .card,
body.night-mode .bg-light,
body.night-mode .bg-white {
    background: rgba(0, 0, 0, 0.4) !important;
    /* Smoother blend */
}

/* Night Mode Buttons */
body.night-mode .btn-primary,
body.night-mode .btn-light {
    background: linear-gradient(135deg, rgba(50, 100, 255, 0.4), rgba(10, 20, 50, 0.6)) !important;
    border: 1px solid rgba(100, 200, 255, 0.4) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(50, 100, 255, 0.3);
}

body.night-mode .text-primary {
    color: #4facfe !important;
    /* Brighter Cyan for text */
}

text-shadow: 0 0 20px rgba(0, 0, 0, 0.9),
0 0 5px rgba(100, 200, 255, 0.5) !important;
}

/* =========================================
   RESPONSIVE OVERRIDES
   ========================================= */

@media (max-width: 991.98px) {
    /* Tablet & Smaller Desktop */

    .container-fluid,
    .hero-header,
    .footer,
    .navbar,
    .feature,
    .bg-light,
    .bg-primary,
    .bg-white,
    .newsletter,
    .responsive-container-block,
    .outer-container {
        width: 95% !important;
        padding: 2rem !important;
        margin: 2rem auto !important;
    }

    h1 {
        font-size: 2.8rem !important;
    }

    h2 {
        font-size: 2.2rem !important;
    }

    .navbar {
        top: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 0 20px 20px !important;
        width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    /* Mobile Devices */

    body {
        font-size: 1rem !important;
    }

    .container-fluid,
    .hero-header,
    .footer,
    .navbar,
    .feature,
    .bg-light,
    .bg-primary,
    .bg-white,
    .newsletter,
    .responsive-container-block,
    .outer-container {
        width: 100% !important;
        padding: 1.5rem 1rem !important;
        /* Drastically reduce padding */
        margin: 1rem 0 !important;
        /* Remove side margins */
        border-radius: 0 !important;
        /* Full width look usually is better on mobile, or small radius */
        border-left: none !important;
        border-right: none !important;
    }

    /* Navbar Fixes */
    .navbar {
        padding: 0.5rem 1rem !important;
        border-radius: 0 !important;
    }

    .navbar h1 {
        font-size: 1.4rem !important;
    }

    /* Hero Text */
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.6rem !important;
    }

    h3 {
        font-size: 1.4rem !important;
    }

    .display-4 {
        font-size: 2.2rem !important;
    }

    /* Stack buttons */
    .hero-header .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    /* Adjust Card paddings */
    .service-item,
    .team-item,
    .testimonial-item,
    .card {
        padding: 1.5rem !important;
    }

    /* Fix Footer Links spacing */
    .footer .row>div {
        margin-bottom: 2rem;
    }
}