/* Reset margins and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure body takes full width and height */
body {
    margin: 0; /* Remove default margin */
    height: 100%; /* Ensure full height */
}

/* Parent wrapper to center the carousel */
.wrapper {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Carousel container styling remains unchanged */
.carousel {
    position: relative;
    width: 80%;
    max-width: 700px;
    height: 350px; /* Fixed height for consistent slides */
    overflow: hidden;
    border: 2px solid #ccc;
    border-radius: 10px;
}

/* Inner container for images */
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Images styling */
.carousel-inner img {
    width: 100%; /* Each image fills the carousel container */
    height: 100%; /* Fit the carousel's height */
    object-fit: cover; /* Maintain aspect ratio and crop excess */
    flex-shrink: 0; /* Prevent shrinking in flex layout */
}

/* Navigation buttons */
button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Position navigation buttons */
.prev {
    left: 10px;
}

.next {
    right: 10px;
}