.wrapper {
    background-color: #dfaa63;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically */
    height: 100vh; /* Ensure the wrapper covers the entire viewport height */
}

h1, h2 {
    text-align: center; /* Center titles */
}

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: #dfd663; /* Background color for the card */
    border-radius: 5px; /* 5px rounded corners */
    padding: 5px;
    margin: 5px;
    display: flex; /* New: Use flexbox */
    align-items: center; /* New: Align items vertically */
}

* {
    color: #6398df;
    font-family: "Lucida Console", sans-serif;
}

.column {
    float: left;
    width: 30%;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
    padding: 2px 16px;
    background-color: inherit; /* Background color from the parent (card) */
    flex-grow: 1; /* New: Container takes remaining space */
}

/* Add rounded corners to the top left and the top right corner of the image */
.card img {
    border-radius: 5px 5px 0 0;
    width: 33%; /* Image takes up 25% of the card width */
    height: auto; /* Maintain aspect ratio */
    margin-right: 20px; /* Spacing between image and container */
}

.carousel-card {
    width: 25%;
    max-width: 600px;
    border: 2px solid #6398df; /* Border color */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #6398df;
}

.carousel-container {
    position: relative;
}

.carousel-slide {
    display: none;
}

.carousel-slide.active {
    display: block;
}

.carousel-slide img {
    width: 100%;
    height: auto;
}

button {
    border: none;
    border-radius: 5px; /* Rounded corners */
    padding: 5px 10px;
    margin: 5px;
}

button:hover {
    background-color: #6398df;
    color: #fff;
}



.carousel-slide {
    display: none;
}

.carousel-slide img {
    width: 100%;
    height: auto;
}

.active {
    display: block;
}

@media screen and (max-width: 900px) {
    .card,
    .carousel-card {
        width: 90%; /* Adjust width for smaller screens */
    }

    .carousel-container,
    button {
        display: none; /* Hide carousel and buttons on small screens */
    }

    .column {
        width: 100%; /* Make columns take full width on smaller screens */
        float: none; /* Remove float */
    }
}