/* Base styles and variables */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Background Patterns */
.topographic-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 380c50-10 100-30 150-30s100 20 150 20 100-10 100-10M0 340c50-10 100-30 150-30s100 20 150 20 100-10 100-10M0 300c50-10 100-30 150-30s100 20 150 20 100-10 100-10M0 260c50-10 100-30 150-30s100 20 150 20 100-10 100-10M0 220c50-10 100-30 150-30s100 20 150 20 100-10 100-10M0 180c50-10 100-30 150-30s100 20 150 20 100-10 100-10' fill='none' stroke='%2300dbe7' stroke-opacity='0.05'/%3E%3C/svg%3E");
}

/* Carousel Animations */
@keyframes crossfade {
    0% {
        opacity: 0;
    }

    2.7% {
        opacity: 1;
    }

    /* Fade in during first 1.5s (2.7% of 55s) */
    11.8% {
        opacity: 1;
    }

    /* Stay visible until next image starts fading in */
    14.5% {
        opacity: 0;
    }

    /* Fade out during 1.5s */
    100% {
        opacity: 0;
    }
}

.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: crossfade 55s infinite;
    will-change: opacity;
}

/* Ensure slide 1 is visible immediately on load */
.slide-1 {
    animation-delay: 0s;
    opacity: 1;
}

.slide-2 {
    animation-delay: 5s;
}

.slide-3 {
    animation-delay: 10s;
}

.slide-4 {
    animation-delay: 15s;
}

.slide-5 {
    animation-delay: 20s;
}

.slide-6 {
    animation-delay: 25s;
}

.slide-7 {
    animation-delay: 30s;
}

.slide-8 {
    animation-delay: 35s;
}

.slide-9 {
    animation-delay: 40s;
}

.slide-10 {
    animation-delay: 45s;
}

.slide-11 {
    animation-delay: 50s;
}

/* Logo Slider Animation */
@keyframes logo-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.logo-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.logo-track {
    display: flex;
    width: max-content;
}

.logo-set {
    display: flex;
    gap: 40px;
    padding-right: 40px;
    /* Spacer to match the gap between sets */
}

/* On Desktop (large screens), we want them centered and static */
@media (min-width: 1200px) {
    .logo-slider-container {
        overflow: visible;
    }

    .logo-track {
        width: 100%;
        justify-content: center;
        animation: none !important;
    }

    .logo-set {
        padding-right: 0;
        gap: 60px;
        /* Adjusted gap for better fit */
    }

    /* Hide the second set on desktop */
    .logo-set:nth-child(2) {
        display: none;
    }
}

/* On Tablet/Mobile/Narrow Desktop (below 1200px), enable the slider */
@media (max-width: 1199px) {
    .logo-track {
        animation: logo-scroll 25s linear infinite;
    }
}

/* Scrollbar Modifiers */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Fix sticky grey bullets in Gallery */
#galleryDots button {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

#galleryDots button:focus {
    outline: none !important;
    background-color: transparent;
}