/* --- CONTAINER --- */
.sliderMain {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
    margin-top: 20px;
}

.slider {
    width: 800px;
    max-width: 95%;
    height: 500px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    background: white;
}

/* Mobile Adjustment */
@media (max-width: 600px) {
    .slider {
        height: 300px;
    }

    .slides {
        height: 300px;
    }

    .slide img {
        height: 300px;
    }

    .navigation-auto {
        margin-top: 260px !important;
    }
}

/* --- SLIDES --- */
.slides {
    width: 500%;
    height: 500px;
    display: flex;
}

.slides input {
    display: none;
}

.slide {
    width: 20%;
    transition: 0.6s;
    /* Smooth transition when clicking dots */
}

.slide img {
    width: 100%;
    height: 500px;
    object-fit: contain;
    padding: 20px;
}

/* --- MANUAL NAVIGATION (The Dots) --- */
.navigation-manual {
    position: absolute;
    width: 100%;
    margin-top: -40px;
    /* Pulls dots up onto the slider */
    display: flex;
    justify-content: center;
    z-index: 100;
    /* CRITICAL: Makes sure dots are clickable */
}

.manual-btn {
    border: 2px solid #00a8cc;
    /* Teal */
    padding: 5px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    background: rgba(255, 255, 255, 0.8);
}

.manual-btn:not(:last-child) {
    margin-right: 20px;
}

.manual-btn:hover {
    background: #003366;
}

/* Navy Hover */

/* --- MANUAL CLICK LOGIC --- */
/* The '!important' ensures that if you click a dot, it overrides the auto-animation */
#radio1:checked~.first {
    margin-left: 0 !important;
}

#radio2:checked~.first {
    margin-left: -20% !important;
}

#radio3:checked~.first {
    margin-left: -40% !important;
}

#radio4:checked~.first {
    margin-left: -60% !important;
}

/* --- AUTO NAVIGATION DOTS (Visual only) --- */
.navigation-auto {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 460px;
    z-index: 10;
}

.navigation-auto div {
    border: 2px solid #00a8cc;
    padding: 5px;
    border-radius: 50%;
    transition: 0.5s;
    background: transparent;
}

.navigation-auto div:not(:last-child) {
    margin-right: 20px;
}

/* Highlight the dot corresponding to the slide */
#radio1:checked~.navigation-auto .auto-btn1,
#radio2:checked~.navigation-auto .auto-btn2,
#radio3:checked~.navigation-auto .auto-btn3,
#radio4:checked~.navigation-auto .auto-btn4 {
    background: #00a8cc;
}

/* --- AUTOMATIC ANIMATION --- */
/* This moves the slides automatically */
.slides .first {
    animation: autoSlide 20s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pause animation when user hovers over the slider */
.slider:hover .slides .first {
    animation-play-state: paused;
}

@keyframes autoSlide {
    0% {
        margin-left: 0;
    }

    20% {
        margin-left: 0;
    }

    25% {
        margin-left: -20%;
    }

    45% {
        margin-left: -20%;
    }

    50% {
        margin-left: -40%;
    }

    70% {
        margin-left: -40%;
    }

    75% {
        margin-left: -60%;
    }

    95% {
        margin-left: -60%;
    }

    100% {
        margin-left: 0;
    }
}