#navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
}


body {
    overflow-x: hidden;
    background-color: #000; /* Ensure body background is black/dark under the content */
    scroll-behavior: smooth;
    padding-bottom: 96px;
}


/* Main container that acts as the fixed background image layer */
#fixed-background-container {
    font-family: 'League Spartan', sans-serif;
    background-image: url('https://itrodotsite.wordpress.com/wp-content/uploads/2025/12/7e42c-take-control-background-website.png');
    background-size: cover; /* Ensures full width/height coverage */
    background-repeat: no-repeat;
    background-position: center;
    cursor: auto;
    /* Pin container to the viewport */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1; /* Place behind all content */
    transition: opacity 0.3s ease-in-out; /* Added smooth fade for background visibility */
}

/* Styling for the magnifier/zoom lens */
#magnifier {
    /* This div shows the zoomed, filtered background */
    background-image: url('https://itrodotsite.wordpress.com/wp-content/uploads/2025/12/7e42c-take-control-background-website.png');
    background-repeat: no-repeat;
    position: absolute;
    width: 400px; /* Zoom area size */
    height: 400px; /* Zoom area size */
    border-radius: 50%;
    transition: opacity 0.1s ease-in-out;
    opacity: 0; /* Start hidden */
    transform: translate(-50%, -50%); /* Center the magnifier exactly under the cursor */
    /* Teal Filter for Zoomed Image */
    filter: hue-rotate(150deg) saturate(8) brightness(1.5);
    pointer-events: none; /* Prevents the magnifier from blocking mouse events */
}

.show {
    opacity: 1 !important;
}


/* The content that is revealed by the moving clip-path */
#center-hero-block {
    z-index: 10;
    transition: clip-path 0.1s ease-out;
    pointer-events: none;
    clip-path: circle(0px at 50% 50%); /* Initial state: hidden */
    position: absolute; /* Allows for accurate clip-path calculation */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ADJUSTMENT FOR VERTICAL CENTERING: 
               The nav bar is 64px (h-16). We shift the content up by half that amount (32px) 
               to visually center it beneath the fixed nav bar. */
    transform: translateY(-32px);
}

/* Override for mobile: content is always visible */
@media (max-width: 640px) {
    #center-hero-block {
        clip-path: circle(100% at 50% 50%) !important;
        pointer-events: auto !important;
        /* Remove transform on mobile where the effect isn't active/necessary */
        transform: none;
    }
}

/* --- LOGO GLOW EFFECT --- */
#itro-logo {
    /* Default state: subtle white shadow */
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
    /* Made transition snappier for an "electric" feel */
    transition: filter 0.2s ease-out, transform 0.15s ease-out;
    cursor: pointer;
}

    /* Hover state: brighter, more dramatic electric glow */
    #itro-logo:hover {
        filter: drop-shadow(0 0 8px #FFA040) /* Brightest core (lighter orange) */
        drop-shadow(0 0 20px #FF6B00) /* Stronger main glow (brand-orange) */
        drop-shadow(0 0 35px rgba(255, 107, 0, 0.5)); /* Wide, faint aura */
        transform: scale(1.08); /* More noticeable scale */
    }

.bg-itro-dark-light{
    background-color: white;
}

.modal-backdrop {
    transition: opacity 0.3s ease-in-out;
}

.modal-content {
    transition: transform 0.3s ease-in-out;
}

.hidden {
  display: none;
}