/*importing Montesarrat*/
@font-face {
    font-family: AvenirNext;
    font-weight: bold;
    src: url("../assets/fonts/AvenirNextLBold.otf") format("opentype");
}

@font-face {
    font-family: AvenirNext;
    src: url("../assets/fonts/AvenirNextReguler.otf") format("opentype");
}

:root {
    --c-primary: #1c1c1c;
    --c-primary2: #00ab34;
    --c-secondary: #80d7f4;
    --c-navlink: #56565b;
    --c-white: #ffffff;
    --c-black: #000000;
    --c-black-o1: #2a2a2a;
    --c-black-o2: #3b3a3a;
    --c-black-o3: #323031;
    --c-black-o4: #393939;
    --c-black-o5: #484543;
    --c-black-o6: #404141;
    --c-black-o7: #5b5b5b;
    --f-avenirnext: "AvenirNext", sans-serif;
    /*  --f-kohinoor: "raleway", sans-serif;*/
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-17: 17px;
    --fs-18: 18px;
    --fs-19: 19px;
    --fs-20: 20px;
    --fs-21: 21px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-25: 25px;
    --fs-26: 26px;
    --fs-27: 27px;
    --fs-28: 28px;
    --fs-30: 30px;
    --fs-32: 32px;
    --fs-33: 33px;
    --fs-34: 34px;
    --fs-42: 42px;
    --fs-38: 38px;
    --fs-53: 53px;
}



html {overflow-x: hidden;}
body {font-weight: normal;margin: 0;padding: 0;position: relative;font-family: var(--f-avenirnext);font-size: var(--fs-15)}
a {text-decoration: none;transition: all 0.3s ease;}
* {box-sizing: border-box;scroll-margin-top: 130px;}
h1,h2,h3,h4,h5,h6{font-family:var(--f-avenirnext)}
img:not(header), .nav-link {transition: all 0.3s ease;}
button, a {cursor: pointer}
.text__primary {color: var(--c-primary)!important;}
.text__primary2 {color: var(--c-primary2)!important;}
.bg__primary {background: var(--c-primary)!important;}
.bg__secondary {background: var(--c-secondary)!important;}
.text__primary2 {color: var(--c-primary2);}
.text__secondary {color: var(--c-secondary);}
.btn__primary {background-color: var(--c-primary);color: var(--c-white);transition: 0.7s ease-in-out;}
.btn__primary:hover, .btn__primary:focus, .btn__primary:active {color: var(--c-white);box-shadow: 0 0 0 50px var(--c-secondary) inset;}
.custom__border {position: relative;}
.custom__scrollbar::-webkit-scrollbar{height:12px;width:12px;}
.custom__scrollbar::-webkit-scrollbar-track {background-image: url("../images/phillipins/img01_2.webp");backdrop-filter: opacity(0.2);border-radius: 10px;background-position: center
    /*box-shadow: 0 0 3px 4px red, 0 0 3px 4px orange, 0 0 3px 4px yellow, 0 0 3px 4px green, 0 0 3px 4px blue, 0 0 3px 4px indigo, 0 0 3px 4px violet inset*/
}
.custom__scrollbar::-webkit-scrollbar-thumb{background: #a8a8a8;border-radius: 10px;transition: background 0.3s;}
.custom__scrollbar::-webkit-scrollbar-thumb:hover {background: #4d4d4d;}
.topSlider__container{text-align:justify}
.cursive__heading {font: 300 var(--fs-42) cursive;}
.primary__heading {font: 600 var(--fs-32) var(--f-avenirnext);}
.primary__subHeading {font: normal var(--fs-20) var(--f-avenirnext);color:#664db4;}
.primary__para {font: var(--fs-17) var(--f-opensans);}
.btn__grey{background: var(--c-navlink)!important;border-color: var(--c-navlink);}
.btn__grey:hover{background: var(--c-primary)!important;border-color: var(--c-primary);}
.custom__border::after {position: absolute;content: "";background: #3a3485;bottom: 0;left: 0;width: 80%;height: 3px;}
.custom__arrowList li {list-style: none;position: relative}
.custom__arrowList li::before {position: absolute;content: "";background: url("../images/icon3.png") no-repeat center center;padding: 30px;top: 50%;transform: translateY(-50%);left: -50px;}
.custom__flowerList li {list-style: none;position: relative;}
.custom__flowerList li::before {position: absolute;content: "";background: url("../images/phillipins/icon01.webp") no-repeat center center;padding: 6px 30px 30px;top: 0%;left: -60px;}
.custom__arrowList2 li {list-style: none;position: relative;color:inherit}
.hr__fade{position:relative;border:0;height:1px;background:#86868a;}
.hr__fade::after, .hr__fade::before {position: absolute;content: '';top: 0;height: 1px;width: 350px;background-image: linear-gradient(90deg, #f3f3f3 8%, #ff0f0f00);z-index: 9;}
.hr__fade::after {left:0;background-image: linear-gradient(90deg,  #f3f3f3 13%, #ff0f0f00);}
.hr__fade::before {left: initial;right: 0;background-image: linear-gradient(90deg, #ff0f0f00 13%, #f3f3f3);}
.custom__arrowList2 li::before {position: absolute;content: "";padding: 0px;top: 50%;transform: translateY(-50%);left: -20px;border: 7px solid #56565b;border-right-color: transparent;border-top-color: transparent;border-bottom-color: transparent}
.custom__flightList li {list-style: none;position: relative}
.custom__flightList li::before {position: absolute;content: "";background: url("../images/icon9.png") no-repeat center center;filter: opacity(0.5);background-size: 18px;padding: 30px;top: 50%;transform: translateY(-50%);left: -50px;}

/*line clamp*/
ul.ulLineClamp {display: block;list-style: none;padding-left: 45px !important;max-width: 100%; max-height:120px;height: auto;overflow-y: hidden;
    transition: height 0.3s ease;position:relative;}
    ul.ulLineClamp::after {
        position: absolute;content: '';top: 0;bottom: 0;left: 0;right: 0;background-image: linear-gradient(180deg, transparent 70%, #3934a3);
        z-index: 2;width: 100%;height: 100%;display: block;} 
.ulLineClamp li {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;text-overflow: ellipsis;padding:  0;}

.section_attraction input[type="checkbox"] {display: none;}
.section_attraction label {display: inline-block;margin-top: 10px;color: #007bff;cursor: pointer;font-size: 14px;position:absolute;bottom:20px;
    left:50%;transform:translateX(-50%);border:2px solid white;background:#ccc;padding: 4px 15px;font-weight:bold;color:var(--c-primary)}
.section_attraction input[type="checkbox"]:checked + label + ul.ulLineClamp {max-height: 100%; }
 .section_attraction input[type="checkbox"]:checked + label + ul.ulLineClamp::after {position: relative;display: none;} 
.section_attraction input[type="checkbox"]:checked + label {content: "Read Less"; }
.section_attraction input[type="checkbox"]:checked + label::before {content: "Read Less"; }
.section_attraction input[type="checkbox"]:not(:checked) + label::before {content: "Read More";}


/*Header*/
header.enlarged {background: #1c1c1c !important;transition: all 0.3s ease}
header {position: sticky;top: 0;background: var(--c-white);width: 100%;z-index:105;transition:all 0.3s ease}
header.header__section.header__shadow {box-shadow: 0 10px 9px 0px rgba(0, 0, 0, 0.05);transition: all 0.1s ease-in-out;}
header.enlarged > img {height: 45px;object-fit:cover;width:100%}
header > img {height: 25px;object-fit:cover;width:100%}
.border__primary{border-color: var(--c-primary)!important}
a.nav-link {color: var(--c-navlink);font-family: var(--f-avenirnext);font-size: var(--fs-20);transition: all 0.3s ease;line-height: 1.45;white-space: nowrap;}
/*header+.navbar{position: sticky;z-index: 999;top: 107px;}*/
/*NavbarUL header*/
/*.navbarUL:hover a{opacity:0.65}*/
.navbarUL li {position: relative;/*overflow: hidden;*/line-height: 20px;padding: 0 7px;z-index:5;/*background: var(--c-primary);border-right: 1px solid var(--c-navlink);*/}
.navbarUL li a {position: relative;line-height: 1.4;padding: 5px;font-weight: 500; font-size: 15px;color:var(--c-white);/*background-color:var(--c-primary);*/transition: all 0.3s ease;border-radius: 15px 0;}
.navbarUL li a img {width:30px;margin-right:8px}
.navbarUL li a::after {bottom: 0;content: "";display: block;height: 1.5px;left: 50%;position: absolute;background: #e4beb6;transition: width 0.3s ease 0s, left 0.3s ease 0s;width: 0;}
.navbarUL li a:hover:after {width: 100%;left: 0;}
/*.navbarUL .nav-item:not(:first-child):hover a.nav-link, .navbarUL .nav-item:not(:first-child).active a.nav-link, .navbarUL .nav-item:not(:first-child):focus a.nav-link {transition: all 0.3s ease;color: var(--c-primary) !important;line-height: 1.2;opacity:1;font-weight:700}*/
.navbarUL .nav-item:hover a.nav-link{transition: all 0.3s ease;color: var(--c-white) !important;line-height: 1.2;opacity:1;}
.navbarUL .nav-item.active a.nav-link, .navbarUL .nav-item:focus a.nav-link {transition: all 0.3s ease;color: var(--c-white) !important;line-height: 1.2;opacity:1;font-weight:700}
.navbarUL .nav-item.active a::after{width:100%;left: 0;}
/*.navbarUL .nav-item.active a.nav-link img {animation: blurss 1s ease alternate infinite;box-shadow: 100px 100px 0 var(--c-primary2) inset}*/
.navbarUL li.nav-item:hover {overflow: visible;}

/*Carousel*/
.topSlider{z-index: 100;position: relative;}
.topSlider .carousel .carousel-item > img{max-height:400px;object-fit:cover;filter: saturate(1.5) brightness(0.9);object-position: center;}
.topSlider .carousel .carousel-item > .carousel-caption{height: 50%;background: #003a85b5;width: 40%;left: 0;position: absolute;bottom: 0;animation: slideReset 0.8s ease-out forwards 0.4s;transform: translateX(30%);opacity:0;border-radius: 0 80px 0 0}
.topSlider .carousel .carousel-item > .carousel-caption h2{text-shadow: 0 0 5px rgba(0,0,0,0.5);font-size:28px}
.topSlider .carousel .carousel-item > .carousel-caption h2 span{font-size:40px}
.gradd__bg{background:linear-gradient(var(--c-primary) 60vh,white 0);}
.topSlider .frame{position: absolute;top: -25px;left: -35px;right: 0;bottom: 0;width: calc(100% + 60px);height: 130%;z-index: 9;    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, .5));}
#topSlider .carousel.slide {background-size: contain;border-radius: 0px;}
#topSlider .carousel-item, .carousel-item-next, #topSlider .carousel-item-prev, .carousel-item.active {border-radius: 30px;}
#topSlider .carousel-indicators {justify-content: center;    align-items: center;margin: auto;opacity: 1;bottom: 10px;}
#topSlider .carousel-indicators [data-bs-target] {background-color: #eceae8;opacity: 1;    width: 10px;height: 10px; border-bottom: 0px; border-top: 0px;border-radius: 50px;}
#topSlider .carousel-indicators .active {background-color: #b2b2b2;opacity: 1; width: 15px;height: 15px;}
/*.sectionTopSlider .aboutus::after{position: absolute;content: "";bottom: 1px;left: 50%;transform: translateX(-50%);height: 0;width: 0;padding: 0;border: 20px solid transparent;border-top-color: #ffffff;z-index: 1;}*/
.aboutus a{color: var(--c-primary);font-weight:600}
.aboutus p{color: #454545}

.whybook{background:var(--c-primary)}
.whybook h3{text-align:center}
.whybookpoints{display:flex;align-items:center;justify-content:space-between}
.bookpoints{display:flex;align-items:center}
.bookpoints h5{max-width: 200px;font-size:16px;margin-left:10px;margin-bottom:0}
.whybookpoints img{height:60px;width: 60px}
/*cards3d*/
/* CARD 3D */
.card__3d {
    position: relative; /* width: 224px;height: 272px;*/
    border-radius: 3px;
    box-sizing: border-box;
    transition: 0.5s ease-out;
    transform: perspective(500px);
    overflow: hidden;
    cursor: pointer;
    max-height: 100%;
    width: 32%;
}
.hotelaccom .row{display:flex;justify-content:space-between}
.cardimg__3d {height:300px;width: 100%;max-width: 100%;background-size: cover;background-position: center center;transition: all 0.5s ease-in-out;object-fit:cover}
.card__3d:hover .cardimg__3d, .card__3d.active  .cardimg__3d{box-shadow: 0 1px 26px 0px rgba(0, 0, 0, 0.47);filter:brightness(0.6)}
.card__3d .meta-dataknow {background:var(--c-white);height:70px;padding:20px}
.card__3d .meta-dataknow a {font-size:18px;color:var(--c-primary);text-decoration:none}
.card__3d .meta-data h3 {font-size: 21px;font-weight: 600;text-shadow: 0 0 3px black}
.card__3d .meta-data p {font-size: 16px;height: 0;overflow: hidden;opacity:0;transition: all 0.3s ease}
.card__3d:hover .meta-data .cardtitle__3d ~ p, .card__3d.active .meta-data .cardtitle__3d ~ p {height: auto;overflow: initial;opacity: 1; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}

.slick-sliderattraction .cardimg__3d {height:190px;width: 100%;max-width: 100%;background-size: cover;background-position: center center;transition: all 0.5s ease-in-out;object-fit:cover}
.slick-sliderattraction .card__3d{ width:95% !important; position: relative; /* width: 224px;height: 272px;*/border-radius: 3px; box-sizing: border-box;transition: 0.5s ease-out;transform: perspective(500px);overflow: hidden; cursor: auto; max-height: 100%;margin: 0;}
.slick-sliderattraction .card__3d .meta-dataknow {background:var(--c-white);height:70px;padding:10px 20px}
.slick-sliderattraction .slick-prev{left:-7px;top:45%;z-index:1;}
.slick-sliderattraction .slick-prev:before{display:none;}
.slick-sliderattraction .slick-next{right:-7px;top:45%;z-index:1;}
.slick-sliderattraction .slick-next:before{display:none !important}
.slick-sliderattraction .slick-prev img, .slick-sliderattraction .slick-next img{box-shadow:0px 0px 5px #c1c1c1}
.slick-sliderattraction .card__3d .meta-dataknow a {font-size:16px;color:var(--c-primary);text-decoration:none}

.disclaimer span {
    font-size: 10px;
    font-style: italic;
    margin-top: 15px
}

@media only screen and (min-width: 1400px){
    .container{max-width : 1050px !important}
}

@media only screen and (max-width: 1399.98px) {
    .card__3d{max-height:100%;}
}

@media only screen and (min-width:1200px) and (max-width: 1399.98px){
    .sanir .card__3d{max-height:100%;max-width:20%}
}

@media only screen and (max-width: 1199.98px){
    
    body {font-size: var(--fs-17)}
    .card__3d:hover .meta-data{bottom:initial;}

    .cardimg__3d {filter:brightness(0.9)}
    .card__3d .meta-data h3 {font-size: 22px}
    .card__3d .meta-data p{font-size: 16px}
    .card__3d .meta-data a {font-size:16px;opacity:1;visibility:visible}

}

/*Cards3d End*/


.sectionAccom {background: url("../images/img04.jpg");background-repeat:no-repeat;background-size:cover;}
.sectionAmentities .amentitiespoint h5{font-size:16px;margin:20px;color:#454545}
.sectionAmentities .amentitiespoint{width:70%;align-items:center}
.sectionAmentities .col{border-bottom: 2px solid var(--c-primary);padding-bottom:20px}

.sectionWhyGallery{background: var(--c-primary);padding:20px}
.sectionWhyGallery img {
    cursor: pointer
}
.sectionWhyGallery .nav-link{color:var(--c-primary);font-weight:600}
.sectionWhyGallery .nav-link:hover{box-shadow:0 0 0 20px var(--c-primary) inset;color:white}
.sectionWhyGallery .nav-link.active{background:var(--c-primary);color:white;}
/*about section*/
.section__about p {
    color: var(--c-black-o7);
    font: var(--fs-20) / 1.5 var(--f-avenirnext);
}
.section__about ul li {color: #86868a;font-weight:500;font-size:20px}
.section__about img {aspect-ratio: 16 / 7;object-fit: cover;object-position: center;box-shadow: 0 6px 0px #d9d7d7;opacity: 0;visibility: hidden;animation: fade-in 4s alternate;animation-fill-mode: forwards;animation-timeline: view(block 90% 10%);}

/*section cards*/
.section__cards .card {/* outline: 2px dashed red;outline-offset: 5px;*/min-height: 340px;}
.section__cards .card-body {transition: all 0.3s ease;z-index: 1;background: rgba(191,44,56,0.81)}
.section__cards .card:hover .card-body {background: #780912;}
.section__cards .card:hover .card-title img {transform: rotate(-15deg) scale(1.1);animation: blurss 1s ease alternate infinite;}
.listText{font: 600 var(--fs-20)/1.5 var(--f-avenirnext);color:#86868a;}
.listText > img{height:32px;object-fit:contain}
.section__cards .card-img-top {position: absolute;width: 100%;height: 100%;z-index: 0;background:var(--c-primary);background-blend-mode:multiply}
.section__cards .card-body h5 {font: bold var(--fs-27)/1.5 var(--f-avenirnext)}
.section__cards .card-body h5 img {width: 45px;}
.section__cards .card-body ul {font: 600 var(--fs-20)/1.3 var(--f-avenirnext)}
.section__cards .card-body ul li::before {border-left-color:var(--c-white);}
.section__cards .main__img{aspect-ratio: 16 / 13;object-fit: cover;max-width: 100%;z-index: 9;display: block;position: relative;}
.fCardLeftAnimation, .fCardRightAnimation {opacity: 0;visibility: hidden;animation: fCardAnimation 3s alternate;animation-fill-mode: forwards;animation-timeline: view(block 95% 10%);}

#visa, .section__mustWatch, .section_hotels {opacity: 0;visibility: hidden;animation: fade-in 4s alternate;animation-fill-mode: forwards;animation-timeline: view(block 90% 10%);}
.gallery__coverImage2 {max-width: 100%;cursor: pointer;}

    /*Itineraries*/
    .section__itineraries {background: #f3f3f3;}
.section__itineraries .card {max-width: 310px;margin: auto;border-color: transparent;transition: border 0.1s ease;}
.section__itineraries .card:hover {border: 2px solid var(--c-primary);box-shadow: var(--bs-box-shadow-lg);}
.section__itineraries .card:hover .card-img-top {transform: scale(1.5) rotate(15deg);}
.section__itineraries .card .card-title, .section__itineraries .card .card-text, .section__itineraries .card a {font: bold var(--fs-17)/1.5 var(--f-avenirnext);}
.section__itineraries .card a {z-index: 2;}


.MW__row{position:relative;overflow:auto;    -webkit-overflow-scrolling: touch;   scroll-snap-type: x mandatory; }
.MW__row > *{flex:0 0 40%;}

.MW_cards{transition: all 0.6s ease;overflow:hidden;border-radius: 25px;scroll-snap-align: end;}
.MW_cards figure{margin-bottom:0;transition: all 0.6s ease;}
.MW_cards:hover{transform:translateY(-10px);    box-shadow: var(--bs-box-shadow-lg)!important}
.MW_cards:hover figure > img{transform:scale(1.2);}
.MW_cards figure > img{ width: 100%;min-height:360px;object-fit:cover;object-position:center;}
.MW_cards figcaption {padding: 20px 15px;background: var(--c-secondary);color: var(--c-white);font: 500 var(--fs-17) / 1.3 var(--f-avenirnext);
                        position: absolute;bottom: 0;width: 100%;transition: all 2s ease;min-height:65px;display:flex;align-items:center;justify-content: center;}

.MW_cards:hover figcaption {padding: 30px 15px 0px;display:block}
.MW_cards figcaption p, .MW_cards figcaption a {border-top:1px dashed white;font-size:var(--fs-13);padding:8px;margin-top:5px;display:none;transition: all 0.6s ease;}
.MW_cards:hover figcaption p, .MW_cards:hover figcaption a{display:block;padding:10px;transition: all 0.6s ease;}
.MW_cards figcaption img {position: absolute;display: block;margin: auto;top: -25px;left: 50%;background-color: var(--c-secondary);border-radius: 80px;
padding: 10px;object-fit: contain;transform: translateX(-50%);opacity:1;transition: all 0.6s ease}
.scroll_btn_left, .scroll_btn_right{transition: transform 0.2s ease;height: fit-content;width: fit-content;margin: 0;padding:5px;
        position: absolute;content: '';opacity: 1;z-index: 11;background:var(--c-secondary)}
.scroll_btn_left:hover, .scroll_btn_right:hover{background:var(--c-primary)}
.scroll_btn_left{top:50%; left:5vw;transform:translateY(-50%)}
.scroll_btn_right{top:50%; right:5vw;transform:translateY(-50%) rotate(180deg);}

/*.MW_cards:hover figcaption img:not(h3) {display: block;top: -25px;opacity:1;}*/

/*EXPLORE SCTION START*/
.explore-section {background-image: url('../images/phillipins/img19.webp');background-position: 100%;background-size: cover;background-attachment:fixed;
    background-repeat: no-repeat;padding: 30px;}
.explore-img-box {display: flex;}
.explore-img {border: 2px solid var(--c-white);border-radius: 20px;height: 250px;width: 200px;overflow: hidden;margin: 0px 3px;}
.explore-img img {height: 100%;width: 100%;object-fit: cover;transition: all 0.4s;}
.explore-img img:hover {opacity: 0.5;transition: all 0.4s;}
.explore-text {text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.explore-text h5 {color: var(--c-white);font-size: 25px;}
.explore-text .btn__hover2{background:var(--c-primary)}
.explore-text .btn__hover2::after,   .explore-text  .btn__hover2::before{transform: rotate(40deg);background: var(--c-secondary);top: -75%;width: 140%;
    height: 270%;}
/*EXPLORE SCTION END*/


/*EXPERIENCE START*/
.experience-img-box {height:100%;position: relative;overflow: hidden;transition: all 0.4s;cursor: pointer;}
.experience-img-box img {width: 100%;height: 100%;}
.exp-img-box {position: relative;overflow: hidden;transition: all 0.4s;cursor: pointer;}
.experience-img-box:hover h5 {color: var(--c-primary);}
.exp-img-box img {width: 100%;aspect-ratio: 16 / 7;object-fit: cover;max-width: 100%;}
.exp-img-box:hover img, .experience-img-box:hover img  {transform: scale(1.1);transition: all 0.4s ease-in-out;}
.experience-title, .exp-title {position: absolute;bottom: 0;width: 100%;background: #000000a1;color: white;padding: 10px 20px;margin-bottom:8px}
.experience-title .icon_cal, .exp-img-box .icon_cal{width:20px;height:20px;object-fit:contain}
.experience-title h5, .exp-title h5 {font-size: 20px;font-weight: bold;/*border-radius: 0 30px 30px 0;*/}
.exp-title h5 {text-align:end}
.exp-img-box a, .experience-img-box a {color:white}
.exp-img-box:hover a, .experience-img-box:hover a {color: var(--c-secondary);}
/*EXPERIENCE END*/

/*Visa fixed image*/
.fixedVisaImg{position:fixed;left:0;top:70%;z-index:119;background:var(--c-primary2);border-radius:0 15px 15px 0;padding:15px 5px;box-shadow:0 0 25px 5px rgba(0,0,0,0.2) }

.section__moreevents .card-img-top{width:25%}
.activities__title {background: rgba(0, 0, 0, 0.5);position: absolute;bottom: 10px;left: 0;z-index: 99;width: 100%;text-align: center;color: white;}

/*first hover1 effect*/
.btn__hover1:hover {
    color: var(--c-white);
    box-shadow: 0 0 0 50px var(--c-primary) inset;
}
/*first hover1 effect ends*/

/* second hover effect*/
.btn__hover2 {position: relative;transition: all 0.4s linear;overflow: hidden;color: var(--c-white);background: var(--c-primary2);border-color:var(--c-white);z-index:2}
.btn__hover2:hover {color: white;background: var(--c-primary2);border-color:var(--c-white);}
.btn__hover2::after, .btn__hover2::before {position: absolute;content: "";top: -75%;width: 140%;height: 275%;background: var(--c-primary);z-index: -1;
        transition: all 0.4s linear;transform: rotate(22deg);}
.btn__hover2::after {left: -50%;}
.btn__hover2::before {right: -50%;}
.btn__hover2:hover::after {left: -200%;}
.btn__hover2:hover::before {right: -200%;}
/*btn hover2 ends*/



@media only screen and (min-width: 1199.98px) {
    .topSlider__container{max-width:500px;}
}
@media only screen and (max-width: 1199.98px) {
    :root {
        --fs-15: 13px;
        --fs-16: 14px;
        --fs-17: 15px;
        --fs-19: 18px;
        --fs-20: 18px;
        --fs-21: 19px;
        --fs-22: 20px;
        --fs-24: 18px;
        --fs-27: 25px;
        --fs-33: 31px;
        --fs-34: 32px;
        --fs-53: 51px;
    }

            .topSlider .carousel .carousel-item > .carousel-caption{width:50%;height:40%}
.topSlider .carousel .carousel-item > .carousel-caption h2{text-shadow: 0 0 5px rgba(0,0,0,0.5);font-size:30px}
.topSlider .carousel .carousel-item > .carousel-caption h2 span{font-size:32px}
header.enlarged a.navbar-brand .brandLogo {width: 130px;}
header a.navbar-brand .brandLogo {width: 100px;}
/*.navbarUL {margin-left: 35px;}*/

.navbarUL li {width: 96%;left: 3%;/*border-right: none;*/margin-top: 10px;}
.navbarUL li a {padding: 5px 15px;font-size: 17px;text-align:left}
.navbarUL .nav-item.active {position: relative;overflow: visible;margin-left: 10px;width: calc(100% - 10px);}
/*.navbarUL .nav-item.active::after {position: absolute;content: '';top: 50%;left: -30px;background: url(../images/arrow-right.webp) no-repeat center center;
                width: 35px;height: 35px;transform: translateY(-50%);}*/
.topSlider .frame {width: calc(100% + 55px);left: -30px;}
/*    .navbarUL .nav-item:not(:first-child):hover a.nav-link, .navbarUL .nav-item:not(:first-child).active a.nav-link, .navbarUL .nav-item:not(:first-child):focus a.nav-link {color:var(--c-secondary)}
*/    }

@media only screen and (min-width: 1023.98px) {
    /*    .container__custom {
        max-width: 1135px
    }*/

.fCardLeftAnimation {transform: translateX(50%);}
.fCardRightAnimation {transform: translateX(-50%);}
.section__itineraries{opacity: 0;visibility: hidden;animation: fade-in 3s alternate;animation-fill-mode: forwards;animation-timeline: view(block 90% 15%);}

}
@media only screen and (min-width: 990.99px){
    .section__cards .main__img{transform:scale(1.7,1.3);animation: scaleToNormal 3s alternate;animation-fill-mode: forwards;animation-timeline: view(block 95% 5%);animation-range:cover}
    .counter-container .icon__box:nth-child(1) {transform: translateY(100px);opacity: 0;animation: slideRight 0.7s alternate;animation-fill-mode:forwards;}
     .section__moreevents .card {opacity: 0;visibility: hidden;transform: translateX(10em);animation: fCardAnimation 5s alternate;animation-fill-mode: forwards;animation-timeline: view(block 100% 0%);}
     
     @keyframes fCardAnimation{
            100% {transform: translateX(0);opacity: 1;visibility: visible;}
     }
   /* .MW_cards:nth-of-type(1) {transform: translateY(-800px);opacity: 0;visibility: hidden;animation: slideToNormal 3s alternate;animation-fill-mode: forwards;}
    .MW_cards:nth-of-type(2) {transform: translateY(800px);opacity: 0;visibility: hidden;animation: slideToNormal 3s alternate;animation-fill-mode: forwards;}
    .MW_cards:nth-of-type(3) {transform: translateY(-800px);opacity: 0;visibility: hidden;animation: slideToNormal 3s alternate;animation-fill-mode: forwards;}
    .MW_cards:nth-of-type(4) {transform: translateY(800px);opacity: 0;visibility: hidden;animation: slideToNormal 3s alternate;animation-fill-mode: forwards;}
    .MW_cards:nth-of-type(5) {transform: translateY(-800px);opacity: 0;visibility: hidden;animation: slideToNormal 3s alternate;animation-fill-mode: forwards;}*/
}
@media only screen and (max-width: 1023.98px) {
    :root {
        --fs-15: 14px;
        --fs-16: 15px;
        --fs-17: 16px;
        --fs-19: 18px;
        --fs-20: 19px;
        --fs-21: 20px;
        --fs-22: 21px;
        --fs-24: 22px;
        --fs-27: 25px;
        --fs-30: 26px;
        --fs-33: 28px;
        --fs-34: 32px;
        --fs-53: 51px;
    }
    .topSlider .frame {top: -20px;left: -20px;right: 0;bottom: 0;width: calc(100% + 40px);}
        .topSlider .carousel .carousel-item > img{    max-height: 45vh;}
        .navbarUL li a {font-size: 16px;}
    .card__3d:hover .meta-data{bottom:initial;}

    .card__3d .meta-data h3 {font-size: 20px}
    .card__3d .meta-data p{font-size: 14px}
    .card__3d .meta-data a {font-size:14px;}
    .sectionInclusiveActivites h4, .sectionWhySpecial h4{font-size:15px}
        .sectionikosResorts .card__3d{max-width:300px !important}
        .topSlider .carousel .carousel-item > .carousel-caption{width:50%;height:50%}
.topSlider .carousel .carousel-item > .carousel-caption h2{text-shadow: 0 0 5px rgba(0,0,0,0.5);font-size:22px}
.topSlider .carousel .carousel-item > .carousel-caption h2 span{font-size:20px}
}

@media only screen and (max-width: 991.98px) {
    :root {
        --fs-53: 45px;
        --fs-22: 20px;
    }

  /*  .carousel-indicators {display: block;bottom: 20px;right: initial;left: 50%;transform: translateX(-50%)}*/
#topSlider .carousel {border-right: none;}
    /*#topSlider  .carousel-control-next {left:55%}
#topSlider  .carousel-control-prev {left: 45%}*/


.MW__row{flex-wrap:wrap}
.MW__row > * {flex: 1 0 320px;}
.MW_cards{min-height:350px}
.MW_cards figure > img{aspect-ratio: 9 / 9;width: 100%;max-height: 490px;}
    .sectionikosResorts .card__3d{max-width:initial !important}
    .topSlider .carousel .carousel-item > .carousel-caption{width:100%}
.topSlider .carousel .carousel-item > .carousel-caption h2{text-shadow: 0 0 5px rgba(0,0,0,0.5);font-size:18px}
.topSlider .carousel .carousel-item > .carousel-caption h2 span{font-size:15px}
    header .navbar-toggler{background: white !important}
    .whybookpoints{justify-content:start;flex-direction:column;align-items:start}
    .flex-column-mob{flex-direction:column}
    .card__3d{width:100%}
    .sectionAmentities .amentitiespoint{width:100%}
    .navbarUL li a{color:#000000}
        .whybook {padding: 20px 0 !important}

}

@media only screen and (max-width: 767.98px) {
header.enlarged a.navbar-brand .brandLogo {width: 130px;}
header a.navbar-brand .brandLogo {width: 100px;}
/*#topSlider .carousel-item > img {max-height: 300px;}*/
.counter-container .icon__box::after {/*border-right: none;*//*border-bottom: 2px dashed #ffffff;*//*width: 100%;*/transform: initial;}
.counter-container .icon__box:nth-of-type(even)::after {display: none;}
.MW_cards{min-height:100%;}
.MW_cards figcaption{min-height:80px;}
.MW_cards figure > img{aspect-ratio: 9 / 7; max-height: 320px;}
.topSlider .frame {left: -16px;width: calc(100% + 27px);}
.section__moreevents .card-img-top{width:100%}
.topSlider .carousel .carousel-item > .carousel-caption{width:60%}
.topSlider .carousel .carousel-item > .carousel-caption h2{text-shadow: 0 0 5px rgba(0,0,0,0.5);font-size:18px}
.topSlider .carousel .carousel-item > .carousel-caption h2 span{font-size:15px}
    .card__3d:hover .meta-data{bottom:initial;}


    .card__3d .meta-data h3 {font-size: 17px}
    .card__3d .meta-data p{font-size: 12px}
    .card__3d .meta-data a {font-size:12px;}
    .sectionInclusiveActivites h4, .sectionWhySpecial h4{font-size:15px}
    .sectionikosResorts .card__3d{max-width: initial !important}
    .sectionInclusiveActivites .col-2 > img{height:35px;}
    .row-cols-xxl-4 > * {
        width: 100% !important
    }
    .slick-arrow{display:none !important}
}

@media only screen and (max-width:575.98px) {
    :root {
        --fs-33: 21px;
        --fs-30: 25px;
        --fs-34: 30px;
        --fs-53: 37px;
    }
.gradd__bg {background: linear-gradient(var(--c-primary) 30vh,white 0);}
header.enlarged a.navbar-brand .brandLogo {width: 100px;}
header a.navbar-brand .brandLogo {width: 80px;}
.topSlider .frame{top: -5px;left:0;width:100%}
.about-bg{background:none}
.navbarUL li {width: 100%;left: 0%;}
.carousel-inner {width: 96%;margin: auto;}
.topSlider .carousel .carousel-item > .carousel-caption{width:100%}
.topSlider .carousel .carousel-item > .carousel-caption h2{text-shadow: 0 0 5px rgba(0,0,0,0.5);font-size:18px}
.topSlider .carousel .carousel-item > .carousel-caption h2 span{font-size:13px}
#topSlider .carousel-indicators [data-bs-target]{height:10px;width:10px}
#carouselExampleIndicators .carousel-control-next, #carouselExampleIndicators .carousel-control-prev{bottom:30px}
#carouselExampleIndicators .carousel-item::before {left: -125px;top: -26px;}
#carouselExampleIndicators .carousel-item:hover::before {left: -120px;top: -21px;}
#carouselExampleIndicators .carousel-item::after {right: -125px;bottom: -26px;top: initial;}
#carouselExampleIndicators .carousel-item:hover::after {right: -120px;bottom: -21px;top: initial;}
#carouselExampleIndicators .carousel-item > img {max-height: 180px;aspect-ratio: 16 / 10;object-fit: cover;}
#carouselExampleIndicators .carousel-item .carousel-caption h2 {font: bold var(--fs-24) / 1.5 var(--f-avenirnext);}
#carouselExampleIndicators .carousel-item .carousel-caption h3 {font: bold var(--fs-18) / 1.5 var(--f-avenirnext);}

.MW_cards figure > img {aspect-ratio: 9 / 6;max-height: 320px;}
.MW_cards figcaption{min-height:50px}

.btn__hover2::before {right: -70%;}
.btn__hover2::after, .btn__hover2::before {top: -75%;width: 140%;height: 440%;}
.btn__hover2::after {left: -35%;}
.experience-title h5, .exp-title h5 {font-size: 18px;}
.exp-title h5{text-align:left}
.exp-title p{text-align:left!important}
.section__events p{font-size:14px;}
    .card__3d:hover .meta-data{bottom:initial;}

   
    .card__3d:hover .cardimg__3d{width: 100%}
    .card__3d .meta-data h3 {font-size: 16px}
    .card__3d .meta-data p{font-size: 13px}
    .card__3d .meta-data a {font-size:13px;}

    .sectionInclusiveActivites h4, .sectionWhySpecial h4{font-size:15px}
    .sectionResorts .nav-link{font-size: 12px}

}

@media only screen and (max-width:352px) {
    :root {
        --fs-33: 18px;
        --fs-34: 18px;
        --fs-53: 18px;
    }

header a.navbar-brand .brandLogo {width: 90px;}
.MW__row > * {flex: 1 0 295px;}
.card__3d .meta-data {bottom: 60px;display:flex;align-items:center;justify-content:center;flex-direction:column}
    .card__3d .meta-data h3{width:90%}
    .card__3d:hover .meta-data {
        bottom: initial;
    }
}

.shine {position: relative;overflow: hidden;font-size: 1.1rem;padding: 1rem 3rem;border-radius: 4px;text-decoration: none;border: 1px solid rgba(255, 255, 255, 0.2);}
.shine::before {content: "";position: absolute;top: 0;width: 100%;height: 100%;background: linear-gradient( 120deg, transparent,rgba(255, 255, 255, 0.4), transparent );}
.shine-hover::before {left: -100%;transition: all 0.4s ease-in-out;}
.shine-hover:hover::before {left: 100%;}

@keyframes fade-in {
    to {opacity: 1;visibility: visible}
}

@keyframes fade-grow-in {
    to {opacity: 1;visibility: visible;transform: scale(1)}
}

@keyframes zoom-out {
    to {scale: 1;opacity: 1;visibility: visible}
}

@keyframes moveupdown {
    to {transform: translateY(-10px)}
}

@keyframes slideLeft {
    to {transform: translate(0px, -50%);visibility: visible}
}
@keyframes slideRight {
    to {transform: translate(0);visibility: visible;opacity:1;}
}
@keyframes slideToNormal {
    to {transform: translateY(0);visibility: visible;opacity:1;}
}

@keyframes slideReset {
    to {transform: translateX(0);visibility: visible;opacity: 1}
}

@keyframes slideBottom {
    to {transform: translateY(0);visibility: visible}
}

@keyframes slideLeft2 {
    to {transform: translateX(0px);visibility: visible;opacity: 1;}
}

@keyframes blurss {
    0% {filter: blur(3px);}

    50% {filter: blur(0px);}
}

@keyframes fCardAnimation {
    to {transform: translateX(0);opacity: 1;visibility: visible;}
}

@keyframes scaleToNormal {
    to{transform:scale(1.15);}
}

