/* style.css */

/*
.hero-bg {
    background-image: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.8)), url('images/banner/01.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
*/

/* ==========================================================================
   Innovalues Holding Pte. Ltd. - Global Stylesheet
   ========================================================================== */

/* 1. Hide Scrollbar Utility */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

/* Smooth Crossfade & Zoom Slideshow Animation */
        @keyframes slideFade {
            0% { opacity: 0; transform: scale(1); }
            10% { opacity: 1; }
            25% { opacity: 1; }
            35% { opacity: 0; transform: scale(1.05); }
            100% { opacity: 0; transform: scale(1); }
        }
        .slide-bg {
            position: fixed;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            animation: slideFade 24s infinite;
        }
        /* Delay each slide by 6 seconds */
        .slide-1 { background-image: url('images/slides/01.jpg'); animation-delay: 0s; }
        .slide-2 { background-image: url('images/slides/02.jpg'); animation-delay: 6s; }
        .slide-3 { background-image: url('images/slides/03.jpg'); animation-delay: 12s; }
        .slide-4 { background-image: url('images/slides/04.jpg'); animation-delay: 18s; }
        
        
/* ==========================================================================
   3. Global Fade-In Animations (Used in Navbar and Hero)
   ========================================================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   4. Responsive Video Embed Utility (News Page)
   ========================================================================== */
.video-wrapper-16-9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Perfect 16:9 Aspect Ratio */
}

.video-wrapper-16-9 iframe,
.video-wrapper-16-9 img,
.video-wrapper-16-9 .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Culture Section Continuous Infinite Slider
   ========================================================================== */
.culture-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    /* Optional: creates a fading effect on the left and right edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.culture-slider-track {
    display: flex;
    /* Width = (slide width 320px * 11 images) * 2 to accommodate the duplicated set */
    width: calc(320px * 22); 
    animation: scroll-culture 40s linear infinite;
}

/* Pause the scrolling when a user hovers over the images */
.culture-slider-track:hover {
    animation-play-state: paused;
}

.culture-slide {
    width: 320px;
    height: 240px;
    flex-shrink: 0;
    padding: 0 12px; /* Acts as the gap between images */
}

.culture-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.culture-slide img:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@keyframes scroll-culture {
    0% { transform: translateX(0); }
    /* Translates exactly half the track (11 images * 320px) to loop perfectly */
    100% { transform: translateX(calc(-320px * 11)); }
}