/*************************************************Home video******************************************************/
.carousel-video {
    position: relative;
    width: 100%;
    overflow: hidden;
}

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

@media (max-width: 768px) {
    .carousel-video video {
        height: auto;
    }
}

/* Set square aspect ratio for small screens */
@media (max-width: 480px) {
    .carousel-video {
        width: 100%;
        padding-top: 100%; /* Creates a 1:1 aspect ratio */
        position: relative;
    }

    .carousel-video video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


/*************************************************Home video******************************************************/
/* Default: Mobile view shows mobile images and videos */
.desktop-video,
.desktop-img {
    display: none !important; /* Hide desktop images and videos */
}

.mobile-video,
.mobile-img {
    display: block !important; /* Show mobile images and videos */
    width: 100% !important; /* Make images and videos take full width */
    height: auto !important; /* Maintain aspect ratio */
    aspect-ratio: 1/1 !important; /* Make the images and videos square on mobile */
    object-fit: cover !important; /* Ensure that the content covers the area without distortion */
}

/* Media query for desktop view (larger than 768px) */
@media (min-width: 768px) {
    .desktop-video,
    .desktop-img {
        display: block !important; /* Show desktop images and videos */
        width: 100% !important; /* Make images and videos take full width */
        height: auto !important; /* Maintain aspect ratio */
        object-fit: contain !important; /* Maintain full content visibility without cropping */
    }

    .mobile-video,
    .mobile-img {
        display: none !important; /* Hide mobile images and videos on desktop */
    }
}