/* General Body & Typography */
body {
    font-family: 'Inter', sans-serif; /* Modern sans-serif font */
    color: #333;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: 'Poppins', sans-serif; /* A more distinct font for headings */
}

/* Fade-in Animation for Sections */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Equipment Carousel Styles */
.carousel-img {
    height: 256px; /* A fixed height for consistency */
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); /* Softer shadow */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

    .carousel-img:hover {
        transform: translateY(-5px); /* Slight lift on hover */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* More pronounced shadow on hover */
    }

/* Infinite Scroll Animation */
@keyframes scroll-x {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%); /* Scrolls half the width to repeat seamlessly */
    }
}

.animate-scroll {
    display: flex;
    width: max-content; /* Allows content to extend beyond container */
    animation: scroll-x 15s linear infinite; /* Adjust speed (60s) as needed */
}

    /* Pause animation on hover for the carousel track */
    .animate-scroll:hover {
        animation-play-state: paused;
    }

/* Modal for Image View */
#imageModal {
    transition: opacity 0.3s ease-in-out;
}

    #imageModal.hidden {
        opacity: 0;
        pointer-events: none; /* Prevents interaction when hidden */
    }

    #imageModal img {
        max-width: 90%;
        max-height: 90vh;
    }