.carousel-container {
    position: relative;
    width: 98vw;
    /* Almost full width */
    height: calc(30vw * (2050 / 1444));
    /* Keep aspect ratio based on width */
    overflow: hidden;
    /*border: 2px solid #000;*/
    /*background: #ddd;*/
    margin: 0 auto;
    /* ✅ Horizontally center */
    /* left: -7%;  ✅ Reset any manual offset */
}

.zoom-wrapper {
    touch-action: pinch-zoom;
    /* allows pinch gesture */
}



.slider-track {
    display: flex;
    transition: transform 0.6s ease-in-out;
    padding: 0 5vw;
    /* Allows partial preview of next/prev slides */
    box-sizing: content-box;
    gap: 0;
    /* ✅ No gap between slides */
}

#sliderTrack {
    display: flex;
    transition: transform 0.6s ease-in-out;
    /* 👈 Smooth transition */
    will-change: transform;
}

.foldWrapper {
    position: relative;
    flex-shrink: 0;
    width: 50vw;
    height: calc(30vw * (2050 / 1444));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.foldWrapper {
    transition: transform 0.4s ease-in-out;
    transform-origin: center center;
}

.foldWrapper .zoom-content {
    flex-shrink: 0;
    width: 50vw;
    /* Smaller than container to show adjacent slides */
    height: calc(30vw * (2050 / 1444));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*
.foldWrapper.zoomed-in {
  transform: scale(2);
  z-index: 10;  Keeps zoomed slide above others 
}*/

.foldWrapper.zoomed-in {
    transform: none;
    /* Remove scale so native zoom works */
    overflow: auto;
    position: relative;
    z-index: 10;
    cursor: grab;
    background-size: contain;
}

.foldWrapper.zoomed-in img,
.foldWrapper.zoomed-in .zoom-content {
    transform: scale(2);
    /* Zoom up to 400% */
    /*transform-origin: top left;*/
    width: 100vw;
    /* Smaller than container to show adjacent slides */
    height: calc(30vw * (2050 / 1444));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.foldWrapper.zoomed-in:active {
    cursor: grabbing;
}

.zoom-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    padding: 6px 10px;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Show the zoom button when hovering over the foldWrapper */
.foldWrapper:hover .zoom-btn {
    opacity: 1;
    pointer-events: auto;
}

.slide-content {
    position: absolute;
    bottom: 80px;
    left: 20px;
    background: rgba(255, 255, 255, 0.85);
    padding: 10px 15px;
    border-radius: 6px;
    max-width: 80%;
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 2;
}

.nav-arrow.left {
    left: 10px;
}

.nav-arrow.right {
    right: 10px;
}

.thumbnail-nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.thumbnail-nav {
    display: flex;
    overflow: hidden;
    gap: 10px;
    max-width: 880px;
}

.thumbnail {
    width: 150px;
    height: 105px;
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border 0.3s;
    flex-shrink: 0;
}

.thumbnail.active {
    border-color: #000;
}

.thumb-nav-arrow {
    background: #333;
    color: #fff;
    font-size: 1.5rem;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
}


.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.lightbox-content {
    position: relative;
    width: 80%;
    max-width: 1080px;

    aspect-ratio: 16 / 9;
}

#lightboxContent {
    padding: 20px;
    color: #000;
    background: #fff;
    border-radius: 8px;
}

.lightbox-close {
    position: absolute;
    top: -10px;
    right: -10px;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

.slide1 p {
    position: absolute;
    top: 35%;
    right: 2%;
    font-size: 25px;
    text-align: end;
}

.slide2 {
    position: absolute;
    top: 11%;
    padding: 27px;
    padding-right: 70px;
}

.time-slide2 {
    display: flex;
    justify-content: space-between;
}

.slide2a {
    width: 48%;
}

.slide2a h2 {
    font-size: 27px;
    padding-bottom: 5px;
}

.slide2a p {
    font-size: 18px;

}

.hero-3 .container-fluid {
    padding: 0px !important;
}

.hero-3 .container {
    max-width: fit-content;
    padding: 0;
}

.sild1a {
    position: absolute;
    bottom: 90px;
    left: auto;
    background: none;
    right: 20px;
}

.sild1a p a {
    font-size: 20px;
    background-color: #3faba5;
    padding: 10px 15px;
    color: #fff;
}

.sildv8 {
    top: 40%;
}

.sildv10 {
    top: 12%;
}

.sildv13 {
    top: 10%;
}

.sildv16 {
    top: 10%;
    right: 0%;
}

.sildv18 {
    bottom: 12%;
    right: 30%;
}

.sildv20 {
    bottom: 12%;
    right: 3%;
}

.sildv22 {
    bottom: 12%;
    right: 30%;
}








.slide3 p {
    position: absolute;
    top: 32%;
    color: #fff;
    width: 27%;
    right: 40px;
    font-size: 18px;
}

.slide3 p a {
    color: #fff;
}

.slide6 p {
    position: absolute;
    top: 14%;
    color: #63565d;
    width: 40%;
    right: 0px;
    font-size: 18px;
}

.slide8 p {
    position: absolute;
    top: 14%;
    color: #63565d;
    width: 40%;
    right: 0px;
    font-size: 18px;
}

.slide11 p {
    position: absolute;
    top: 67%;
    color: #63565d;
    width: 30%;
    right: 0px;
    font-size: 18px;
}

.slide12 p {
    position: absolute;
    top: 72%;
    color: #63565d;
    width: 30%;
    left: 20px;
    font-size: 18px;
}

.slide13a p {
    position: absolute;
    top: 66%;
    color: #63565d;
    width: 30%;
    left: 15%;
    font-size: 18px;
}

.slide13b p {
    position: absolute;
    top: 67%;
    color: #63565d;
    width: 30%;
    right: 13%;
    font-size: 18px;
}

.slide15a p {
    position: absolute;
    top: 73%;
    color: #63565d;
    width: 46%;
    left: 3%;
    font-size: 18px;
}

.slide15b p {
    position: absolute;
    top: 58%;
    color: #63565d;
    width: 30%;
    right: 0%;
    font-size: 18px;
}

.slide17 {
    position: absolute;
    top: 14%;
    color: #63565d;
    width: 30%;
    right: 14%;
    font-size: 18px;
}

.slide19 {
    position: absolute;
    top: 14%;
    color: #63565d;
    width: 22%;
    left: 1%;
    font-size: 18px;
}

.slide23 {
    position: absolute;
    top: 14%;
    color: #63565d;
    width: 22%;
    right: 21%;
    font-size: 18px;
}

.slide27 {
    position: absolute;
    top: 14%;
    color: #63565d;
    width: 28%;
    right: 2%;
    font-size: 18px;
}

.slide31 {
    position: absolute;
    top: 14%;
    color: #63565d;
    width: 29%;
    left: 10%;
    font-size: 18px;
}

.slide39 {
    position: absolute;
    top: 14%;
    color: #63565d;
    width: 29%;
    left: 20%;
    font-size: 18px;
}

.slide44 {
    position: absolute;
    top: 56%;
    color: #000;
    width: 40%;
    right: 16%;
    font-size: 18px;
}
  .slide2a p a,
    .slide2b p a,
    .slide3 p a,
    .slide6 p a,
    .slide8 p a,
    .slide11 p a,
    .slide12 p a,
    .slide13a p a,
    .slide13b p a,
    .slide15a p a,
    .slide15b p a,
    .slide17 p a,
    .slide19 p a,
    .slide23 p a,
    .slide27 p a,
    .slide31 p a,
    .slide39 p a,
    .slide44 p a{
            /* border: 1px solid #4551516e; */
    /* padding: 7px 7px; */
    /* background-color: #ffffff78;*/
    }

.slide3 p a {
  
}

.desktop{
    display:block;
}
.mobile{
    display:none;
}
.theme-btn2 span { 
    margin-right: 0px;
}
.theme-btn2 { 
    padding-right: 0;
    padding: 9px 22px; 
        padding-bottom: 8px;
            margin-top: 6px;

}

.footer-bottom-1 .footer-bottom-wrapper { 
    gap: 10px;
}



/* 110 %  */
@media only screen and (max-width: 1399px) {

    .slide1 p {
        font-size: 20px;
    }

    .slide3 p,
    .slide6 p,
    .slide8 p,
    .slide11 p,
    .slide12 p,
    .slide13a p,
    .slide13b p,
    .slide15a p,
    .slide15b p,
    .slide17,
    .slide19,
    .slide23,
    .slide27,
    .slide31,
    .slide39,
    .slide44 {
        font-size: 15px;
        line-height: 1.6;
    }


    .slide2a p {
        font-size: 15px;
        line-height: 1.6;
    }

    .sild1a p a {
        font-size: 17px;
        padding: 8px 12px;
    }

    .slide2a h2 {
        font-size: 23px;
    }

}


/* 125 %  */
@media screen and (max-width: 1280px) and (max-height: 800px) {
    .slide1 p {
        font-size: 17px;
        line-height: 1.6;
    }


}

/* 150 %  */
@media only screen and (max-width: 1024px) {

    .slide1 p {
        font-size: 15px;
        line-height: 1.5;
    }

    .slide2a h2 {
        font-size: 18px;
    }

    .slide2a p {
        font-size: 12px;
        line-height: 1.6;
    }

    .slide3 p,
    .slide6 p,
    .slide8 p,
    .slide11 p,
    .slide12 p,
    .slide13a p,
    .slide13b p,
    .slide15a p,
    .slide15b p,
    .slide17,
    .slide19,
    .slide23,
    .slide27,
    .slide31,
    .slide39,
    .slide44 {
        font-size: 12px;
        line-height: 1.6;
    }

    .sild1a p a {
        font-size: 13px;
        padding: 8px 10px;
    }

    .sild1a {
        bottom: 40px;
        right: 5px;
    }


}











@media (max-width: 768px) {
    .desktop{
    display:none;
}
.mobile{
    display:block;
}
    .carousel-container {
        width: 95vw;
        height: calc(95vw * (2050 / 1444));
    }

    .slider-track {
        padding: 0 3vw;
        gap: 0;
    }

    .foldWrapper {
        width: 80vw;
        height: calc(95vw * (2050 / 1444));
    }

    .thumbnail {
        width: 80px;
        height: 60px;
    }

    .header-main .main-menu ul li a {
        padding: 5px 8px;
        font-size: 12px;
    }

    .header-main {
        display: block;
    }

    .foldWrapper .zoom-content {
        flex-shrink: 0;
        width: 60vw;
        height: calc(30vw * (2052 / 1444));
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .foldWrapper {
        width: 60vw;
        height: calc(95vw * (2050 / 1444));
    }

    .slide1 p {
        font-size: 6px;
        line-height: 1.5;
        top: 11%;
        width: 18%;
        right: 2%;
    }

    .sild1a {
        bottom: 66%;
        right: -6px;
    }

    .sild1a p a {
        font-size: 6px;
        padding: 4px 5px;
    }

    .slide2 {
        position: relative;
        top: -5%;
        padding: 20px;
        padding-right: 21px;
    }

    .slide2a h2 {
        font-size: 9px;
        padding-bottom: 2px;
    }

    .slide2a p {
        font-size: 5px;
        line-height: 1.6;
    }

    .sild1a p a {
        font-size: 6px;
        padding: 4px 5px;
    }

    .sild1a {
        bottom: 66%;
        right: -6px;
    }

    .lightbox-content {
        aspect-ratio: 5 / 9;
    }

    .carousel-container {
        height: calc(30vw * (2050 / 1444));
    }

    .nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 11px;
        padding: 0px 4px;
        line-height: 1.6;
    }

    .thumb-nav-arrow {
        font-size: 12px;
        padding: 0px 10px;
    }

    .header__hamburger {
        display: none;
    }

    .slide3 p,
    .slide6 p,
    .slide8 p,
    .slide11 p,
    .slide12 p,
    .slide13a p,
    .slide13b p,
    .slide15a p,
    .slide15b p,
    .slide17,
    .slide19,
    .slide23,
    .slide27,
    .slide31,
    .slide39,
    .slide44 {
        font-size: 5px;
        line-height: 1.6;
        width: auto;
    }

    .slide3 p {
                position: absolute;
        top: 26%;
        right: 11px;
        width: auto;
    }
    .slide6 p { 
    top: 5%; 
}
.slide8 p { 
    top: 7%; 
    width: 50%; 
    width: auto;
}
.slide11 p { 
    top: 24%; 
}
.slide12 p { 
    top: 25%; 
    width: 30%;
    width: auto;
    left: 8px; 
}
.slide13a p { 
    top: 22%; 
    width: 25%;
    width: auto;
    left: 16%; 
}
.slide13b p { 
    top: 22%; 
    width: 35%;
    width: auto;
    right: 14%; 
    
}
.sildv13 {
    top: 24%;
}
.slide15a p { 
    top: 25%; 
    width: 46%;
    width: auto;
    left: 3%; 
}
.slide15b p { 
    top: 21%; 
}
.sildv16 {
    top: 25%;
    right: 0%;
}
.slide17 { 
    top: 8%; 
}
.sildv18 {
    bottom: 67%;
    right: 64px;
}
.slide19 { 
    top: 4%; 
    width: 21%;
    left: 2%; 
}
.slide23 { 
    top: 7%; 
}
.slide27 { 
    top: 5%; 
    width: 30%;
    width: auto;
    right: 2%; 
}
.slide31 { 
    top: 4%; 
} 
.slide39 { 
    top: 6%; 
    width: 30%; 
    width: auto;
}
.slide44 { 
    top: 19%; 
    width: 44%;
    width: auto;
    right: 16%; 
}
.theme-btn2 { 
    font-size: 10px;
        padding: 5px 9px;
}  
    
    
    
    
    
    
    
    
}