.slider {
    position: relative;
    width: 100%; /* Full width of the viewport */
    max-width: 900px; /* Maximum width */
    height: 150px; /* Let height adjust based on content */
    overflow: hidden;
    margin: 20px auto;
    border: 2px solid #915a00; /* Border around the slider */
    border-radius: 10px; /* Rounded corners */
    background-color: #c4abff; /* Background color for the slider */
    box-shadow: 0 4px 11px rgba(0, 0, 0, 0.1); /* Shadow effect */
}

.event-box {
    position: absolute;
    width: 100%; /* Full width of the slider */
    height: 100%; /* Full height of the slider */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 1s ease;
    border: 1px solid #915a00; /* Border around the event box */
    border-radius: 10px; /* Rounded corners for event box */
    background-color: #610909; /* Background color for event box */
    padding: 20px; /* Padding around the content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Shadow effect for the event box */
}

.event-box img {
    max-width: 100%; /* Allow images to be responsive */
    height: auto; /* Automatic height to maintain proportion */
    margin-right: 20px; /* Space between image and text */
}

.event-details {
    display: flex;
    flex-direction: column;
}

.event-box:hover {
    animation-play-state: paused; /* Pause animation on hover */
}

.hidden {
    display: none; /* Hides unused elements */
}

/* Media Queries for More Responsive Behavior */

@media (max-width: 768px) {
    .event-box img {
        max-width: 80%; /* Adjust images for medium screens */
    }

    .event-box {
        padding: 10px; /* Reduce padding for smaller screens */
    }
}

@media (max-width: 480px) {
    .event-box img {
        max-width: 100%; /* Full width for mobile images */
        height: auto; /* Maintain aspect ratio */
        margin: 0 auto 10px auto; /* Center image and add margin */
    }

    .event-box {
        flex-direction: column; /* Stack image and text on top of each other */
        padding: 5px; /* Less padding */
    }

    .event-details {
        text-align: center; /* Center align text for mobile */
    }
}