/******************************************************************************/
/* Basic Video Banner Styles*/
/******************************************************************************/
.video-banner-container {
    position: relative;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    overflow: hidden;
}

.video-banner {
    object-fit: cover;  /* Ensures the video fills the container */
    width: 100%;        /* Make sure the video spans the entire width */
    height: 100%;       /* Make sure the video spans the entire height */
    position: absolute; /* Position it absolutely to fill the container */
    top: 0;             /* Align to the top */
    left: 0;            /* Align to the left */
}

/* Banner text container */
.banner-text {
    position: absolute;
    bottom: 120px; /* Move text above the button */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    z-index: 10;
    width: 100%; /* Ensure full width of the screen */
}

/* Video Titles Styling */
.video-titles {

  margin: auto 0;
    font-size: 45px; /* Default to 45px on desktop */
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    line-height: 1.5;
    text-align: center;
    max-width: 90%; /* Limit the width of the title area */
    margin-bottom: 20px; /* Space between title and button */
    white-space: normal; /* Allow wrapping */
    word-wrap: break-word; /* Allow words to break and wrap */
    overflow-wrap: break-word; /* Ensure the text wraps properly */
}

/* Ensure the titles are initially hidden */
.video-title {
    display: block;
    opacity: 0; /* Initially hide the title */
    transition: opacity 1s ease-in-out; /* Fade transition */
    position: absolute; /* Overlay titles in the same spot */
    width: 100%; /* Make sure titles fill the container */
}

/* When the title becomes active, make it visible */
.video-title.active {
    opacity: 1; /* Show title when it has the 'active' class */
}

/* Button text styling */
.video-button-text {
    margin:auto 0;
    font-size: 25px; /* Keep the button text size at 25px */
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 1px;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    /* For tablets (768px to 1024px) */
    .video-titles {
        font-size: 40px; /* Adjust to 40px for tablet screens */
        max-width: 90%; /* Allow a larger area for title text */
    }

    .video-button-text {
        font-size: 25px; /* Keep the button text size at 25px */
        margin-top: 30px;
    }

    .banner-text {
        bottom: 90px; /* Move banner text a bit higher on smaller screens */
    }
}

@media (max-width: 768px) {
    /* For smaller screens (phones, 480px to 768px) */
    .video-titles {
        font-size: 35px; /* Adjust to 35px for smaller screens */
    }

    .video-button-text {
        font-size: 25px; /* Keep the button text size at 25px */
    }

    .banner-text {
        bottom: 60px; /* Move text further up on very small screens */
    }
}

@media (max-width: 480px) {
    /* For very small screens (phones < 480px) */
    .video-titles {
        font-size: 30px; /* Adjust to 30px for very small screens */
    }

    .video-button-text {
        font-size: 25px; /* Keep the button text size at 25px */
    }

    .banner-text {
        bottom: 50px; /* Further adjust positioning on small screens */
    }
}