html, body {
    height: 100%;
    margin: 0;
}

.slides {
    position: relative;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide overflow for sliding effect */
}

.slides ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Use flexbox for horizontal alignment */
    width: 100%; /* Adjusted width for all slides */
    transition: transform 0.6s ease; /* Smooth sliding effect */
}

.slides li {
    flex: 0 0 100%; /* Each slide takes 100% of the container */
}

.slides img {
    width: 100%; /* Ensure images fill the slide */
    height: auto; /* Maintain aspect ratio */
}