/* --------------------------------------------------------
    HERO SECTION STYLES (for image switching & parallax)
    -------------------------------------------------------- */
.main-hero {
    /* DEFAULT/DESKTOP STYLES: Set 100% height here to ensure it displays on large screens */
    min-height: 100vh;
    /* <-- ADD THIS LINE */
    height: 100vh;
    /* <-- ADD THIS LINE */

    background-image: url('../img/3148786323_e42d737a6b_b.jpg');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;

    transition: background-position 30s ease-in-out;
}

/* Mobile-Specific Override (screens 767.98px and below) */
@media (max-width: 767.98px) {
    .main-hero {
        /* Mobile height is now lower than the default, so it takes effect */
        min-height: 20vh !important;
        /* <-- REMOVE !important */
        height: 28vh !important;
        /* <-- REMOVE !important */

        /* The background-image is inherited from the main .main-hero block */

        /* Stop the parallax animation and center the background */
        background-position: center center;
        transition: none;
    }
}

/* --------------------------------------------------------
    ANIMATION KEYFRAMES
    -------------------------------------------------------- */



/* --------------------------------------------------------
    UTILITY & HOVER STYLES
    -------------------------------------------------------- */

/* Hover Animation for Logo */
.logo-hover:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.fw-500 {
    font-weight: 500 !important;
}

.message {
    font-weight: 300 !important;
}

.video-container {
    /* Reduced max-width for smaller videos (e.g., 400px) */


    /* These margins center the video within its column */
    margin-left: auto;
    margin-right: auto;

    /* The rest maintains the responsive 16:9 aspect ratio */
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Mobile (Extra Small - xs) - ONLY APPLY W-100 UP TO SMALL BREAKPOINT */
@media (max-width: 767px) {
    .w-100 {
        width: 100% !important;
    }
}

/* Desktop (Medium - md - and up) */
@media (min-width: 768px) {
    .w-md-75 {
        width: 75% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }
}