.hme-bim { height: 100%; ;}
.room-highlight li { text-align: left; }
.hero-caption br, .hero-sub-caption-pt { display: none;}


.parent-pagination.swiper-pagination  { top: auto; bottom: 0px; }
.room-block-wrapp { padding-bottom: 80px;}
.testim-wrapp { padding-bottom: 160px;}

.parent-pagination .swiper-pagination-bullet, .child-pagination .swiper-pagination-bullet { width: 20px; height: 20px; background-color: #e8d9b9; border: 1px solid #fff; opacity: 1;}

.parent-pagination .swiper-pagination-bullet-active, .child-pagination .swiper-pagination-bullet-active { background-color: #c5bca9 }

.child-next, .child-prev, .parent-prev, .parent-next  { background-image: url(../images/prev-arrow.webp); background-size: 100% auto; width: 30px; height: 30px;}
.child-next { background-image: url(../images/next-arrow.webp);}
.child-next svg, .child-prev svg, .parent-prev svg, .parent-next svg { display: none;}
.parent-prev, .parent-next {background-image: url(../images/next-arrow-parent.webp); width: 40px; height: 40px; top: auto; bottom: 0; }

.parent-prev  {background-image: url(../images/prev-arrow-parent.webp); }
.parent-prev:hover, .parent-next:hover { opacity: 1;}
.parent-nav { position: absolute; right: 0; bottom: 40px; z-index: 1500; width: 100px;} .parent-prev { left: 0;}
.roomcontent p { padding: 2px 0;}


@media (max-width: 1600px) { 
.facil-items p { font-size: 12pt; line-height: 18pt;}
.why-stay-title h2 {
    font-size: 34pt;
}
.widget-title h2 {
    font-size: 46pt; }

.widget-title h3 {
    font-weight: 400;
    font-size: 20pt;
}

.room-name {
    font-size: 22pt;
    padding-bottom: 10px; }
    .activi-title {
    font-size: 34pt;
    line-height: 40pt;
    }
    .facil-cap {
    padding: 30px 0;
    font-size: 18pt;
    font-weight: 300;
}
.munnar-title h2, .loc-title, .testi-title h2 {
    font-size: 28pt; line-height: 32pt; }
.loc-advantages p {
    font-size: 14pt;
}
.foot-cap {
    color: #fff;
    font-size: 26pt;
}
}


@media (max-width: 1500px) { 
    .container-large, .container { padding: 0 50px;}
    
    .card p { text-align: left;}
    .roomcontent {    padding-right: 0px; } .room-block-wrapp-odd { padding-left: 50px; }

:root {
    --gutter60: 50px 0;
    --gutter80: 70px 0;
    --gutter: 80px 0;
 
}


#page { font-size: 12pt; }
p { line-height: 22pt; padding: 2px 0;}
    
.container-large, .container {        padding: 0 50px;    }

.hero-sub-caption {    top: auto;    bottom: 126px; }
.card p {    display: block;    padding: 15px; }
.card h2 {
    position: absolute;
    padding: 0 0 15px 15px; }
.bfor { margin-top: 5px;}
.faq-block { padding-right: 40px; }

.roomimage { width: calc(60%  - 40px); margin-right: 40px;}
.roomcontent {
    width: calc(40% - 0px);

}
.hero-caption h1 { font-size: 44pt;}
.hero-caption h2 {
    font-size: 28pt; }
 .activi-title  {    font-size: 30pt; line-height: 36pt; }

.hero-sub-caption h3 {      font-size: 16pt;    line-height: 25pt; } 
.why-stay-title h2 {    font-size: 32pt; }
.card h2 { font-size: 18pt; }
.widget-title h2 {    font-size: 34pt; }
.widget-title h3 {
    font-weight: 400;
    font-size: 18pt;
}

.room-name {
    font-size: 20pt; padding-bottom: 10px; text-align: left; line-height: 26pt; }



.facil-cap {    font-size: 16pt; }

.munnar-title h2, .loc-title, .testi-title h2 {    font-size: 28pt; }
.loc-advantages p {
    font-size: 16pt;
    padding: 22px 0; }

.room-highlight li {
    display: block; font-size: 11.5pt;
    padding: 2px 0 2px 20px; }
.room-highlight li:before {
   
    top: 17px;
    left: 5px;
}
.facil-items img { width: 100px;}
.foot-cap {
    color: #fff;
    font-size: 22pt;
}

.feature-grid-nw-grp {
    gap: 40px;
    row-gap: 50px;
}

.feature-grid-nw {
 
    width: calc(25% - 40px);
    padding: 30px;
}
.feature-grid-nw img { width: 110px;}


}
@media (max-width: 1400px) { 

    .card h2 {
        font-size: 16pt;
    }

.feature-grid, .feat-card-top-left {
    gap: 10px;
}
.feat-location, .viewpoints {
    width: calc(19.4% - 5px);
}
.feat-plantation, .feat-rooms, .featue-activities, .featue-experience, .staycation, .booking {     width: calc(50% - 5px);}
.feat-card-left, .card-bottom-left {
    width: calc(80.6% - 5px);
}

.feat-card-btm-left {
    width: calc(76.4% - 10px)
}
.feat-card-left {
    row-gap: 10px;
}
.loc-title {   }
.feature-grid-nw img { width: 100px;}


}

@media (max-width: 1300px) { 

    p { line-height: 18pt;}
    :root {
    --gutter60: 40px 0;
    --gutter80: 50px 0;
    --gutter: 60px 0;
 
}
.site-logo {     width: 160px; }


.room-highlight li {
    display: block; font-size: 11.5pt; line-height: 20pt;
    padding: 1px 0 1px 20px; }
.room-highlight li:before {
   
    top: 14px;
    left: 5px;
}


.munnar-title, .widget-title, .why-stay-title, .testi-title { padding-bottom: 30px;  }
      


 .activi-title {        font-size: 28pt;    }
 .hero-caption h1 { font-size: 38pt;}
.hero-caption h2 {
    font-size: 24pt; }
.why-stay-title h2 {        font-size: 30pt;     }
    .hero-sub-caption h3, .widget-title h3 {
        font-size: 14pt; }
    .widget-title h2 {
        font-size: 32pt;
    }
    .room-name {
        font-size: 18pt; line-height: 26pt; }

.room-highlight h3 { font-size: 14pt; }

.foot-cap, .faq-title {

    font-size: 20pt;
}
     .card h2 {
        font-size: 14pt;
    }
.facil-items p {
        font-size: 11pt;
        line-height: 16pt;
    }

    .facil-items li {
    padding: 0 10px;
    width: calc(16.6% - 0px);
}

    .facil-items img {
        width: 79px;
    }

.gmap-align {
    padding-left: 558px; }

.munnar-title h2, .loc-title, .testi-title h2 {
        font-size: 26pt;
    }
.loc-title { line-height: 30pt;}
    .feature-grid-nw-grp {
    gap: 20px;
    row-gap: 20px;
}

.feature-grid-nw {
 
    width: calc(25% - 20px);
    padding: 20px;
}

.feature-grid-nw h3 {
    font-size: 19pt;
    }

.feature-grid-nw img { width: 90px;}

    .title-bg img { width: 280px;}
}


@media (max-width: 1080px) { 

    .container-large, .container {
        padding: 0 30px;
    }

        .feat-location, .viewpoints {
        width: calc(33.333% - 5px);
    }
        .feat-location { width: calc(33% - 5px);}
    .feat-card-left, .card-bottom-left {
        width: calc(66.3333% - 5px);
    }
.feat-card-btm-left { width: calc(100% - 5px);}
    .viewpoints {position: relative;}

    .card-bottom { display: flex; gap: 10px; flex-wrap: wrap;}

.card::after {content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.5);}
    .roomimage, .room-block-wrapp-odd  {
        width: calc(100% - 0px); padding-left: 0; padding-right: 0; 
    }
    .roomimage figure  { border-radius: 0px !important; } .roomcontent { padding: 30px 0px 0 0px; width: calc(100% - 0px); }
    .roomimage {
        margin-right: 0;
    }

    .room-highlight ul { display: flex; flex-wrap: wrap;}
    .room-highlight li { width: calc(50% - 0px);}
     .gmap-align {
        padding-left: 500px;
    }

.loc-advantages {
    width: 500px;
    padding: 50px 40px 50px 0; }

.munnar-title h2, .loc-title, .testi-title h2 {
        font-size: 24pt;
    }
.faq-image { display: none; }
.faq-block { width: calc(100% - 0px); padding-left: 0; padding-right: 0; }



.testiSlider::after { display: none;}

.feature-grid-nw-grp { justify-content: center;
    gap: 20px;
    row-gap: 20px;
}

.feature-grid-nw {
 
    width: calc(33% - 20px);
    padding: 20px;
}
.feature-grid-nw img {}
.feature-grid-nw h3 {
    font-size: 18pt;
    }
.banner-cap-wrapp { padding: 80px 0 0 0; bottom: 80px;}
.home-banner.owl-carousel .owl-nav button.owl-next, .home-banner.owl-carousel .owl-nav button.owl-prev { top: auto; bottom: 40px; transform: translate(0,0); width: 35px; height: 35px;}
.home-banner.owl-carousel .owl-nav button.owl-prev  { left: auto; right: 70px;}
.parent-pagination .swiper-pagination-bullet, .child-pagination .swiper-pagination-bullet { width: 15px; height: 15px;}
.owl-theme .owl-dots .owl-dot span { width: 14px; height: 14px;}
    .hero-caption h1 {
        font-size: 32pt;
    }

.hero-caption h2 {
    font-size: 28pt; }
    .feature-grid-nw h3 {
        font-size: 15pt;
    }

    .widget-title h2 {
        font-size: 28pt;
    }



}

@media (max-width: 800px) { 

.site-logo {     width: 140px; }

.feat-location, .feat-card-left, .card-bottom-left, .viewpoints, .loc-advantages, .faq-block { width: calc(100% - 0px); padding-left: 0; padding-right: 0; }
.facil-items ul { row-gap: 20px;}
    .facil-items li {
    padding: 0 10px;
    width: calc(33.333% - 0px);
}

    .facil-items img {
        width: 79px;
    }


.gmap-align { position: relative; padding: 0; height: 450px;}




.hero-caption { padding: 0 50px; top: 150px; transform: translate(0,0); left: 0; width: calc(100% - 0px); text-align: center;}

}


@media (max-width: 968px) { 

.feature-grid-nw {
 
    width: calc(50% - 20px);
    padding: 20px;
}

.feature-grid-nw h3 {
    font-size: 19pt;
    }

.feature-grid-nw img { width: 80px;}
.parent-nav {
  /*  position: relative;
    right: 0; text-align: center;
    width: 100px; margin: 0 auto;
    bottom: 20px;
    z-index: 1500;
    width: 100px; */
    position: absolute; top: 30px; left: auto; bottom: auto; right: 0; width: 100%;
}
.parent-swiper { padding-top: 0px;}

 .child-next, .child-prev { display: none;}

.parent-prev {
    background-image: url(../images/prev-arrow.webp);
}
 .parent-next {
    background-image: url(../images/next-arrow.webp);
    }

}





@media (max-width: 628px) { 
    .container-large, .container {
        padding: 0 20px;
    }


.feat-plantation, .feat-rooms, .featue-activities, .featue-experience, .staycation, .booking, .feat-card-btm-left { width: calc(100% - 0px); row-gap: 10px;}
.booking { margin-top: 10px;}

.footer-contact {
    justify-content: center;
    padding: 20px 0;
}

.footer-top {
    padding-bottom: 13px; }

.hero-caption  { padding: 0 20px; top: 200px;}

.footer-address-wrapp {
    padding-top: 40px;
}


.footer-address-wrapp .container {
    justify-content: center;
    gap: 20px;
}

.hero-caption h1 { padding: 0; font-size: 20pt; padding-bottom: 10px; }
    .hero-caption h2 {
        font-size:16pt; font-weight: 400;
    }
      .hero-sub-caption  { padding: 0 20px; bottom: 100px;}
    .hero-sub-caption h3 {
        font-size: 12pt;  line-height: 18pt;
    }

    .foot-book { margin-top: 0px;}
    .foot-call, .foot-whats { border: none; padding: 0; }
    .footer-contact { gap: 10px; row-gap: 15px;}
    .footer-logo { padding-right: 0; }
    .footer-logo img {
    width: 143px;
}

.hero-sub-caption { position: relative; color: var(--color); padding: 30px 0; bottom: 0; display: none;}
.hero-sub-caption-pt { padding: 60px 30px 0 30px; display: block;}
.hero-sub-caption-pt  h3 {    font-size: 12pt; line-height: 22pt; text-align: center;  }

    .why-stay-title h2 {
        font-size: 18pt;
    }

.feature-grid-nw h3 {
    font-size: 16pt; }
.loc-title, .testi-title span { font-size: 28pt; line-height: 32pt;}
    .loc-advantages p {
        font-size: 14pt;
        padding: 22px 0;
    }


.room-highlight ul { gap: 0px; justify-content: ;}
.room-highlight li { width: calc(100% - 0px);}
.room-name  br { display: none;}
.room-block-wrapp-odd .roomcontent {
    padding-right: 0px;
}
    .widget-title h3 { padding-top: 15px;  }
 .testim-wrapp {
    padding-bottom: 108px;
}
.stay-wrapp { padding-bottom: 60px;}
.testim-wrapp .owl-dots, .stay-wrapp .owl-dots {
    position: absolute;
    bottom: -60px; }

    .munnar-title h2, .loc-title, .testi-title h2,     .loc-advantages p { text-align: center;}
    .why-stay-title span{  display: block;  }

    /*
.home-banner,
.home-banner .item,
.home-banner .item img {
    width: 100%;
    height: 100svh; 
    object-fit: cover;
}
.owl-carousel .owl-stage {
    touch-action: pan-y;
}

.home-banner img {
    transform: translateZ(0);
    will-change: transform;
}

*/

#page { text-align: left;}

.star-rate { padding-left: 0; text-align: center; padding-top: 30px; background-position: top center;}


.feature-grid-nw-grp { justify-content: center;
    gap: 10px;
    row-gap: 10px;
}

.feature-grid-nw {
 
    width: calc(100% - 10px);
    padding:30px 20px;
}
.feature-grid-nw img { width: 60px;}
.feature-grid-nw h3 {
    font-size: 23pt; text-align: center; padding-bottom: 15px;
    }

.feature-grid-nw figure { float: left; padding: 0 15px 0 0;}
.feature-grid-nw p { text-align: left;}
 .hero-caption br { display: block;}

    .home-banner .owl-nav  { position: absolute; bottom: 0; display: flex; justify-content: center; flex-wrap: wrap; width: calc(100% - 0px);}
    .home-banner.owl-carousel .owl-nav button.owl-next, .home-banner.owl-carousel .owl-nav button.owl-prev { position: relative; left: auto; right: auto;}

.test-item {
    padding: 10px 20px 25px 20px;
}


.fab, .bbtnLink {
    position: relative;
    width: 46px;
    height: 46px; padding: 10px;
}
.footer-wrapp { padding-bottom: 100px;}

.floating-btns { right: 0px; width: calc(100% - 0px); display: flex; justify-content: center; gap: 20px; bottom: 10px; }

.banner-cap-wrapp { bottom: auto; top: 70px;}

.faq-title { text-align: center;}


.book-btn-acc { text-align: center;}
}

@media (max-width: 428px) { 

    .facil-items li {
    padding: 0 10px;
    width: calc(50% - 0px); border: none;
}

    .facil-items img {
        width: 90px;
    }


.feature-grid-nw h3 { font-size: 16pt; text-align: left; padding-left: 76px; text-align: left; padding-bottom: 5px;}

.feature-grid-nw p { padding-left: 76px;}

.roomimage figure a:after { background-size: 20px 20px;}
    .widget-title h2, .activi-title, .loc-title, .testi-title span { line-height: 30pt;;
        font-size: 24pt;
    }
.widget-title h2, .activi-title, .loc-title, .testi-title span {
        line-height: 30pt;
        font-size: 20pt;
    }
    .foot-cap, .faq-title { font-size: 18pt; line-height: 24pt;}

    .title-bg img { width: 180px;}
    .stay-wrapp { width: 100%; overflow-x: hidden;}
    .foot-book{ padding-left: 0;}
}

@media (max-width: 360px) { 

.hero-caption h1 { padding: 0; font-size: 18pt; padding-bottom: 10px; }
    .hero-caption h2 {
        font-size: 14pt; font-weight: 400;
    }
}












/* Sidebar placement */
.sidebar-cta {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
}

/* Button */
.book-btn {
  position: relative;
  background: #ff5a1f;
  color: #fff;
  border: none;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  animation: shake 4s infinite;
}

/* Shake animation (subtle) */
@keyframes shake {
  0%, 90%, 100% { transform: translateX(0); }
  92% { transform: translateX(-4px); }
  94% { transform: translateX(4px); }
  96% { transform: translateX(-4px); }
  98% { transform: translateX(4px); }
}



/* --------------------------------- */
/* --------------------------------- */
/* -------- Metex Creations -------- */
/* -------- 2026 20 jan Gadhafi -------- */
/* -------------------------------- */
/* -------------------------------- */
/* ------------------------------- */