/* Video Container Styles */
.video {
    position: relative;
    width: 100%;
    height: 400px; /* Default height for larger screens */
    background-size: cover;
    background-position: center;
}

.video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text Overlay Styles */
.text-overlay {
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translate(-50%, 50%);
    color: white;
    text-align: center;
    width: 90%; /* Ensure the text-overlay stays within bounds */
    max-width: 100%; /* Ensure it doesn't exceed the video width */
    padding: 10px; /* Add padding to prevent text from touching edges */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.text-overlay h1 {
    font-size: 4em !important; /* Ensure the size is applied */
    word-wrap: break-word; /* Wrap long words to prevent overflow */
}

/* Responsive Text Sizes */
@media (max-width: 768px) {
    .text-overlay h1 {
        font-size: 3em !important; /* Adjust the size for tablets */
    }
    .text-overlay h2 {
        font-size: 1.2em !important; /* Adjust the size for tablets */
    }
    .bottom-right-text {
        font-size: 0.9em; /* Adjust the size for tablets */
    }
}

@media (max-width: 480px) {
    .text-overlay h1 {
        font-size: 2em !important; /* Adjust the size for mobile devices */
    }
    .video {
        height: 200px; /* Decrease the height for mobile devices */
    }
    .bottom-right-text {
        font-size: 0.8em; /* Adjust the size for mobile devices */
    }
    i {
        font-size: smaller;
    }
    .d-flex{overflow-x: auto;}

}

/* Bootstrap Card Styles */
.d-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto; /* Enable horizontal scrolling if needed */
}

.card {
    flex: 1;
    width: 20%; /* Adjust width for all cards */
    min-width: 160px; /* Ensure a minimum width for smaller screens */
    margin: 10px; /* Margin for spacing */
    flex-shrink: 0; /* Prevent shrinking on smaller screens */
    text-align: center;
    transition: transform 0.3s ease;
}
.card:hover { transform: translateY(-10px); /* Translate on hover */ }
.card img {
    width: 100%;
    height: 250px; /* Adjust height for a better aspect ratio */
    object-fit: cover;
}

.card-body {
    padding: 15px;
}

.card-title {
    font-size: 1.2em;
    margin-bottom: 0;
}