/* --- FULLY RESPONSIVE HERO CONFIG --- */
.ngg-video-hero {
    position: relative;
    width: 100%;
    height: 320px; 
    background-color: #000;
    overflow: hidden;
}

/* Centering Wrapper */
.ngg-hero-container {
    position: relative;
    width: 70%; /* Desktop Width */
    height: 100%;
    margin: 0 auto; /* Centers the 70% block */
    overflow: hidden;
    /* Added Flexbox to center the logo */
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Computex Logo Styling */
.ngg-hero-computex {
    position: absolute;
    top:4%;
    z-index: 10;
    max-width: 90%;
    pointer-events: none;
    display: block; /* Shown by default when 'hidden' is removed */
}

/* Start the video hidden to prevent the flicker */
#heroVideo {
    opacity: 0;
}

/* Transitions for the JS to toggle */
.poster-wait {
    opacity: 0 !important;
    transition: none !important;
}

.poster-fade-in {
    opacity: 1 !important;
    transition: opacity 1s ease-in-out !important;
}

/* Instant Toggle */
.ngg-hero-computex.hidden {
    display: none;
}

.ngg-hero-computex img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Seamless Fade Overlay */
.hero-overlay-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; 
    background: linear-gradient(to bottom, rgba(13, 17, 23, 0) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: 2;
    pointer-events: none;
}

/* --- ADAPTIVE BREAKPOINTS --- */

@media (min-width:1501px) {
    .ngg-hero-container {
        width: 85%;
    }
}

@media (max-width:1500px) {
    .ngg-hero-container {
        width: 100%;
    }
}

@media (max-width:1366px) {
   .ngg-video-hero { height:260px; }
   .ngg-hero-computex { max-width:95%; }
}

/* Tablet Scaling */
@media (max-width: 1024px) {
    .ngg-video-hero {
        height: 200px;
    }
    
    .hero-overlay-fade {
        height: 30px;
    }
}

/* Mobile Scaling & Vertical Alignment */
@media (max-width: 767px) {
    .ngg-video-hero {
        height: 250px;
    }
    .ngg-hero-container {
        width: 100%; 
    }
    
    .ngg-subhero {
        margin-top: -90px !important; 
        padding-top: 10px !important;
    }
    .hero-overlay-fade {
        height: 70px;
    }
    .ngg-hero-computex { left:-4px; }
}

/* Small Mobile Scaling */
@media (max-width: 550px) {
    .ngg-video-hero {
        height: 170px;
    }
    .ngg-hero-computex { left:0; }
    
}


/* Ultra-Wide Screen Handling */
@media (min-width: 1921px) {
    .ngg-hero-container {
        width: 1344px; 
    }
}