/* -----------------------------------------------------------------
   1. Global & Utilities Overrides
----------------------------------------------------------------- */

/* Custom Background Color */
.bgcustom {
    background-color: #f1f1f1; /* Light premium gray/off-white */
}

/* Transition for body background (used in career section js) */
body {
    transition: background-color 0.5s ease;
} 

.animate-move {
    animation: moveLeftRight 5s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes moveLeftRight {
    from {
        transform: translateX(-55px);
    }
    to {
        transform: translateX(35px);
    }
}
/* Certifications Section */
.cert-container-img {
            position: fixed;
            right: 4rem;
            top: 70%;
            transform: translateY(-50%);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease 0.1s;
            z-index: 10;
            height: 30rem;
}

.cert-container:hover .cert-container-img {
    opacity: 1;
}
@media (max-width: 1023px) {
.cert-container-img {
            right: 1rem;
            height: 25rem;
}    
}
@media (max-width: 767px) {
.cert-container-img {
            right: 2rem;
            height: 20rem;
}
}

/* Mobile/Tablet: Show image on scroll focus */
@media (max-width: 1024px) {
    .cert-container.active .cert-container-img {
        opacity: 0.55;
    }

    /* Focus Effect: Dim inactive items */
    .cert-container {
        transition: opacity 0.3s ease;
        opacity: 0.25; /* Inactive items are dimmed */
    }

    .cert-container.active {
        opacity: 1; /* Active item is fully visible */
    }

    /* Ensure text sits above the fixed image */
    .cert-container h3, 
    .cert-container p {
        z-index: 20; /* Requires position: relative (already in your HTML) */
    }
}

/* -----------------------------------------------------------------
   2. Typography & Header Overrides
----------------------------------------------------------------- */


/* -----------------------------------------------------------------
   3. Draggable Infinite Carousel
----------------------------------------------------------------- */

/* Carousel Container */
#draggable-carousel {
    position: relative;
    width: 100%;
    height: 90vh; /* Occupy 80% viewport height as per requirements */
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y; /* Allow vertical scrolling, handle horizontal in JS */
    user-select: none;
    -webkit-user-select: none;
}



#draggable-carousel.is-dragging {
    cursor: grabbing;
}

/* Carousel Track */
#carousel-inner {
    display: flex;
    height: 100%;
    width: 100%; /* Fix: Allow children percentages to resolve against viewport size, not infinite content */
    will-change: transform; /* Performance optimization for dragging */
    /* Transition is managed via JS for drag vs snap */
}

/* Carousel Items */
.carousel-item {
    position: relative;
    flex: 0 0 40%; /* Default to Mobile Width (100%) - using flex-basis */
    max-width: 40%; /* Prevent overflow */
    height: 100%;
    padding: 0.5rem; /* Controls the gap. 1rem padding = 2rem visual gap between items */
    transition: opacity 0.3s ease;
}

/* Video fit within carousel */
.carousel-item video,
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure videos cover the area nicely */
    border-radius: 4px; /* Optional polish */
}

/* Opacity States (Managed by JS) */
.fade-edge {
    opacity: 0.3; /* Half visibility for edge items */
}

/* -----------------------------------------------------------------
   4. Breakpoints & Responsive Logic
----------------------------------------------------------------- */

/* Mobile */
@media (max-width: 767px) {
    .carousel-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Tablet */
@media (max-width: 1023px) {

}

/* Ultrawide / Large Screens */
@media (min-width: 2000px) {
    #draggable-carousel {
        height: auto;
        min-height: 85vh;
    }

    .carousel-item {
        height: auto;
    }

    .carousel-item video,
    .carousel-item img {
        height: auto;
        min-height: 100%;
    }
}

/* -----------------------------------------------------------------
   5. Missing Utilities (Inferred from home.html)
----------------------------------------------------------------- */
.objectfill { object-fit: fill; }
.objectcover { object-fit: cover; }
.objectcontain { object-fit: contain; }

/* Force carousel videos to cover for better aesthetics, overriding objectfill if necessary */
.carousel-item video,
.carousel-item img {
    object-fit: cover;
}

/* -----------------------------------------------------------------
   6. Parallax (simple-parallax-js)
----------------------------------------------------------------- */
.parallax-container {
    overflow: hidden;
    position: relative;
}