/* vide container with hero content */
.landingSection {
    height: 100vh;
    position: relative;
    /* Add position relative */
    /* background-image: url(../images/hero.jpg); */
    background-color: rgb(0, 0, 0);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.landingSection video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: 1;
}

.landingSection .aboutImg{
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: 1;
}

.landingSection .tourImage{
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: 1;
}




/* Add the black overlay */
.landingSection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    /* Black overlay with 50% opacity */
    z-index: 2;
    /* Overlay above video but behind text content */
}

.heroTitle {
    font-family: "Playfair", serif;

}


/* keep title,icon,text,button on top of video */
.heroTitle,
.heroIcon,
.heroText,
.heroBtn,
.topLine,
.bottomLine {
    color: #fff;
    z-index: 3;
}

/* top bar | top devider */
.topLine {
    height: 20vh;
    position: absolute;
    top: 8%;
}

/* bottom bar | bottom devider */
.bottomLine {
    height: 20vh;
    position: absolute;
    bottom: 6.6%;
}



/* swiper -> marquee effect */

.heroSwiper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.heroSwiper .swiper-wrapper {
    transition-timing-function: linear !important;
    position: relative;
}

.heroSwiper .swiper-slide {
    color: white;
    font-size: 16px;
    width: calc(fit-content + 10px) !important;
}





/* Parallex effect image */
.image-container {
    position: relative;
    overflow: hidden;
    padding-bottom: calc(100% / (var(--ratio)));
    height: auto;
    /* Ensure height auto adjustment */
}

.image-two {
    --ratio: 16/9;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 480px) {
    .image-two {
        --ratio: 2/3;
        min-height: 300px;
        /* Add a minimum height for small devices */
    }
}






.bannerSection {
    min-height: 100vh;
    background-image: url(../img/banner.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}















.swiper-slide-overlay {
    position: relative;
    overflow: hidden;
}

.swiperContent{
    z-index: 2;
}


.swiperOverlay {
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: all 0.3s ease;
    z-index: 1;
}

.swiper-slide-overlay:hover .swiperOverlay {
    background-color: rgba(0, 0, 0, 0.3);

}








.commentContent{
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 0;
}











/* [------------------------------------------ MEDIA QUERY ------------------------------------------] */


/* Media Query for Mobile Devices */
@media (max-width: 480px) {

    .landingSection,
    .landingSection video {
        height: 85vh;
    }

    .topLine {
        top: 5%;
    }

    .bottomLine {
        bottom: 5.2%;
    }

    .bannerSection {
        min-height: 110vh;
        background-image: url(../img/banner.jpg);
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
}



/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {

    .landingSection,
    .landingSection video {
        height: 85vh;
    }

    .bottomLine {
        bottom: 4.8%;
    }
}



/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {

    .landingSection,
    .landingSection video {
        height: 80vh;
    }


    .bottomLine {
        bottom: 5.2%;
    }

}