/* 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, can change:position: absolute */
        @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 120s 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);
}

/* Slider Control Panel Helper */
.culture-slider-track.is-paused {
    animation-play-state: paused !important;
}


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

/* Solutions Page Slideshow */


.slide-bg2 {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: slideFade 18s infinite;
}

.slide2-1 { background-image: url('images/slides2/01.webp'); animation-delay: 0s; }
.slide2-2 { background-image: url('images/slides2/02.webp'); animation-delay: 6s; }
.slide2-3 { background-image: url('images/slides2/03.webp'); animation-delay: 12s; }


/* Smooth Page Transition - Fail-Safe Method */
body {
    /* Automatically fades in on load without needing JavaScript */
    animation: fadePageIn 0.4s ease-in-out forwards;
}

@keyframes fadePageIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Used by JavaScript to fade out before leaving the page */
body.page-exiting {
    opacity: 0 !important;
    transition: opacity 0.4s ease-in-out;
}