/* Center the banner video */
.banner {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    width: 100%;
    height: 70vh; /* Full height of the viewport */
    overflow: hidden; /* Prevents overflow if video is larger than the container */
    position: relative; /* Ensures both videos can be positioned absolutely within the container */
}

/* Video styles for both desktop and mobile */
.banner video {
    width: 100%; /* Ensures the video fills the width of the container */
    height: 100%; /* Ensures the video fills the height of the container */
    object-fit: unset; /* Ensures the video fits without stretching */
    position: absolute; /* Keeps the video in place */
}

/* By default, hide the mobile video */
#mobile-video {
    display: none;
}

/* Show the mobile video when in portrait mode */
@media (max-width: 768px) and (orientation: portrait) {
    #desktop-video {
        display: none; /* Hide the desktop video in portrait mode */
    }

    #mobile-video {
        display: block; /* Show the mobile portrait video */
    }

    .banner video {
        width: 100%;
        height: 90%;
    }
}

/* General Mobile Styles */
@media (max-width: 768px) {
    body {
        padding: 10px;
        font-size: 16px;
    }

    /* Slick carousel adjustments */
    .news-article img {
        width: 100%;
        height: auto;
    }

    /* Center content */
    .centered-title, .custom-heading {
        text-align: center;
        font-size: 1.5rem;
    }

    .custom-button {
        padding: 10px;
        font-size: 1rem;
    }

    /* Navigation adjustments */
    .navigation {
        flex-direction: column;
        align-items: center;
    }
}

.news-slick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.news-article {
    flex: 1 1 calc(100% / 2 - 20px); /* Show two items per row on mobile */
}

@media (max-width: 480px) {
    .news-article {
        flex: 1 1 100%; /* Full width on very small screens */
    }
}