/* Responsive Design */
@media (max-width: 768px) {
    .header-bar .row {
        flex-wrap: nowrap;
    }
    
    .logo {
        text-align: left;
    }

    .contact-info {
        justify-content: flex-end;
        text-align: right;
    }

    .contact-details span,
    .contact-details a {
        font-size: 14px;
    }

    .contact-info i {
        font-size: 16px;
    }
    .carousel-controls {
        position: absolute;
        top: 30% !important;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        z-index: 10;
    }
    .video-text h3 {
        font-size: 22px;
    }
    .top-caption {
        position: absolute;
        top: -6%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 80%;
        color: #fff;
        z-index: 10;
    }
    .top-caption h2 {
        font-size: 26px;
     }
     .top-caption p {
         font-size: 10px;
         font-weight: 400;
     }
}

@media (max-width: 576px) {
    .header-bar .row {
        flex-direction: column;
        text-align: center;
    }

    .logo,
    .contact-info {
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .contact-info {
        margin-top: 10px;
        display:none !important;
    }
    .carousel-controls {
        position: absolute;
        top: 30% !important;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        z-index: 10;
    }
    .video-text h3 {
        font-size: 20px;
    }

    .video-text p {
        font-size: 14px;
    }

    .btn {
        font-size: 14px;
        padding: 8px 16px;
    }

    /* Ensure iframe adapts properly on small screens */
    .video-container {
        height: 300px;
    }
    .top-caption {
        position: absolute;
        top: -6%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 80%;
        color: #fff;
        z-index: 10;
    }
    .top-caption h2 {
       font-size: 26px;
    }
    .top-caption p {
        font-size: 10px;
        font-weight: 400;
    }
    .header-bar .row{
        flex-direction: column;
        text-align: left;
    }
    .info-c{
        font-size: 12px;
    }
}