@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
  
* {
  margin: 0;
  padding: 0;
  /* font-family: 'Pangolin', cursive; */
  font-family: 'Lora', serif;
 


 
}

  
  body{
    margin: 0%;
  }
  
  
.image-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.image-popup-overlay.show {
  opacity: 1;
  visibility: visible;
}

.image-popup-box {
  position: relative;
  max-width: 70vw;
  max-height: 80vh;

  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  border-radius: 10px;
}

.popup-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: contain;
}

.popup-close {
  position: absolute;
  top: -12px;
  right: -12px;
  background: #fff;
  border: none;
  font-size: 22px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #000;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

  

  
h1{
  font-size : 1.5rem;;
  color: #001730;
  margin-bottom: 10px;
  text-align: center;
  margin-top: 40px;
  
}

h4{
  color: #001730;
  font-weight: 300;
  margin-bottom: 20px;
  text-align: center;
  


}


/* .row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
} */

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  overflow: auto;
  padding-bottom: 50px;
  background-color: rgba(0, 0, 0, 0.932);
  z-index: 999;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
 /* top: 0%;
 transform: translate(-50%,); */
 
  max-height: fit-content;
  max-width: 1200px;
}

.mySlides-banner img{
  height: 87vh;
  max-width: 100%;
}
/* The Close Button */
.close-Ba {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
  
}

.mySlides-banner {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.modal-content .prev,
.modal-content .next {
  cursor: pointer;
  position: absolute;
  top: 45%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.modal-content .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.modal-content .prev:hover,
.modal-content .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #000000;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  background-color: #fff;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

.column-list{
  overflow-x: scroll;
}

.img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

  /* Gallery container */
   .gallery {
    display: flex;
    height: 450px;
    overflow: hidden;
    background-color: #fff;
    
  }

  /* Slider container */
  .slider {
    position: relative;
    width: 65%;
    height: 100%;
    border-right: 5px solid #ffffff !important;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  }

  /* Slider images */
  .slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;

  }

  /* Slider navigation buttons */
  .slider .prev,
  .slider .next {
    position: absolute;
    top: 62%;
    transform: translateY(-62%);
    font-size: 1rem;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    cursor: pointer;
  }

  .slider .prev,
  .slider .next:hover{
    background-color: #000000a2;
  }

  .slider .prev {
    left: 0;
    margin-left: 20px;
    border-radius: 50px;
   
  }

  .slider .next {
    right: 0;
    border-radius: 50px;
    margin-right: 20px;
   
  }

  /* Thumbnail images */
  .thumbnails {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;  
    width: 35%;
    /* gap: 10px; */
  }

  .thumbnails img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;   
    object-fit: cover;
    
  }

  .imgboxthumb{
    width: 100%;
    height: 225px !important;
    cursor: pointer;
    filter: brightness(80%);
    overflow: hidden;
    outline: 1px solid #fff;
    
  }


  .thumbnails img:hover{
    transform: scale(1.1);
    transition: 1s;
  }





    .detailsContainer{
    background-color: #ffffff;
    }
    .detailsContainer .innerDetails{
    margin:0 5%;
    padding:2rem 0;
    display: flex;
    justify-content:space-between;
    text-align: justify;
    }
    .mainDetailsBox{
    width:70%;
    }
    .rightSideBox{
    width: 30%;
    }


    /* Top Box Start */
.mainDetailsBox .detalesHeadingBox{
   background-image:linear-gradient(10deg, #08182f 30%, #1f878c 75%, #163a3a 90%);
    width: auto;
    padding: 1.5rem;
    margin-right: 40px;
    border-top-left-radius: .4rem;
    border-top-right-radius: .4rem;
    position: relative;
  
    color: #ffffff;
   
    }    

@keyframes rbnani{
0%{transform: translateX(100px);}
}

    .detalesHeadingBox-subheading{
      font-size: 1.2rem;
      margin-top: 5px;
    }
    .mainDetailsBox .detalesHeadingBox h2{
    font-size: 1.8rem;
    color: #ffffff;
    width: 80%;
    }
    .mainDetailsBox .detalesHeadingBox .ratingBox{
    display: flex;
    /* align-items: center;
    justify-content: flex-start; */
    padding-top: .5rem;
    }
    .mainDetailsBox .detalesHeadingBox .ratingBox .rating{
    width: 60px;
    background-color: #5a5a5a;
    color: #ffffff;
    padding: .4rem;
    text-align: center;
    border-radius: .3rem;
    font-weight: bold;
    }
   
    .mainDetailsBox .detalesHeadingBox .ratingBox ul li{
    display: inline;

    margin-right:1rem;
    color: #ffffff;
    font-size: .9rem;
    }

    .heding-amenities{
      width: 80%;
      
    }

    .review{
      width: 20%;
     
      text-align: right;
      
    }
  


    .details{
      margin-right: 40px;  
      padding: 20px;
      margin-top: 0px;
      margin-bottom: 0px;
      background-color: #ffffff;
      line-height: 25px;
      list-style:circle;
  }

  .details p{
    text-align:justify;
    font-size: 0.8rem;
  }

  .details h4{
    text-align: left;
    font-weight: 700;
    
  }


    .villa-heading{
      display: flex;
    }

    .villa-head{
      width: 35%;
    }
    .villa-heading li{
      display: inline;
    margin:0 .5rem;
    color: #000000;
    font-size: .7rem;

    }

    .about-section {
      line-height: 25px;
      text-align: justify;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      padding: 20px;
      margin-right: 40px; 
      
  
    }

    .about-section p{
      text-align:justify;
      font-size: 0.8rem;
    }
  



    .about-section .content {
      max-height: 100px;
      overflow: hidden;
      transition: max-height 0.3s ease;
      margin-top: .8rem;
    }
    .about-section .content li{
       margin-left: 1.1rem;
    }
    
    .about-section .read-more {
      border-radius: 2rem;
      border: none;
      border: 1px solid black;
      background-color:transparent;
      height: 2rem;
      width: 8rem;
      margin-top: 10px
      
    }
    
  
    .amenities-container{
      margin-top: 1rem;
      margin-bottom: 1rem;
      margin-right: 40px; 
    }
  
    .amenities-container h2{
      padding-left: 20px;
    }

     .amenities{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      
    }

    .amenities-container p{
      margin-top: 5px;
      font-size: 0.9rem;
    }

    .icons{
      display: block;
      width: 150px;
      margin-top: 2rem;
      text-align: center;
    }

    .sleeping-container{
      padding: 20px;
      margin-right: 40px; 
      border-top: 0.5px solid rgb(109, 109, 109);
      margin-bottom: 2rem;
      
    }

    .sleeping-container ul{
      margin-top: 1rem;
    }

    .sleeping-container li{
      margin-top: 0.5rem;
      line-height: 25px;
      text-align: justify;
      
    }

   .houserule{
      padding: 20px;
      margin-right: 40px; 
      border-top: 0.5px solid rgb(109, 109, 109);
    }
    .houserule-heading{
     display: flex;
     align-items:center;
     justify-content: space-between;
     width: 100%;
    }
    #ulShow{
      display: none;
      margin-top:1rem;
   }
    #ulShow ul{
  padding-left: 1.3rem;
   }
   #ulShow ul li{
    list-style-type: inherit;
   }
   #ulShow.active{
  display: block;
   }
    .cancellation-policy{
      padding: 20px;
      margin-right: 40px; 
      border-top: 0.5px solid rgb(109, 109, 109);
    }
    .cancellation-heading{
      display: flex;
      align-items:center;
      justify-content: space-between;
      width: 100%;
    }
    #ulShow2{
      display: none;
      margin-top:1rem;
   }
    #ulShow2 ul{
  padding-left: 1.3rem;
   }
   #ulShow2 ul li{
    list-style-type: inherit;
   }
   #ulShow2.active{
  display: block;
   }
    .things-know{
      padding: 20px;
      margin-right: 40px; 
      border-top: 0.5px solid rgb(109, 109, 109);
    }
    .things-know-heading{
      display: flex;
      align-items:center;
      justify-content: space-between;
      width: 100%;
    }
    #ulShow3{
      display: none;
     margin-top:1rem; 
   }
    #ulShow3 ul{
  padding-left: 1.3rem;
   }
   #ulShow3 ul li{
    list-style-type: inherit;
   }
   #ulShow3.active{
  display: block;
   }
    
.rightSideBox .innerRight{
  height: 100%;
    }
   

    .contact-form-container{
      position: sticky !important;
      
      margin-top: 30px;
      top: 4rem !important;
    }


    .priceBox{
    width: auto;
    padding:.8rem;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
   background-image:linear-gradient(10deg, #08182f 30%, #1f878c 75%, #163a3a 90%);
    border-top-left-radius: .4rem;
    border-top-right-radius: .4rem;
 
    }
    
   
    .priceBox .price{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:0.5rem;
    margin-top: .5rem;
    }
    .priceBox .price h3{
    color: #ffffff;
    font-size: 1.7rem;
    font-weight: 600;
    }

      #slas{
  rotate: -15deg;
  font-size: 1.8rem;
  color: #fff;
  margin-left: -5px;
  }
  #hiphan{
  font-size: 2rem;
  color: #fff;
  margin-left: -5px;
  }
  #inStar{
  color: #fff;
  }
  #pernight{
  font-size: 0.8rem;
  color: #fff;
  font-family: 'Lora', serif;
  text-align:center;
  }


    .priceBox .price p{
    margin-left: 1.3rem;
    color: #ffffff;
    background-color: #5a5a5a;
    padding: .5rem .8rem;
    border-radius: .4rem;
    font-size: .8rem;
    }
    #adultP{
    color: #bbbbbb;
    }
  
    .contactFormBox{
    width: auto;
    border-radius: .4rem;
    padding: 1.5rem;   
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    }
   
    form input{
    display: block;
    width: 100%;
    padding:.5rem 0;
    margin:.8rem 0;
    padding-left: 0.5rem;
    border: none;
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
    }
    .contactFormBox{
        font-size: 18px;
    }

    .check-in-out{
      display: flex;
      justify-content: space-between;
    }

    .check-in-out label{
      font-size: 0.8rem;
      width: 40%;
     
  
    }
  
  
    .check-in-out input{
  width: 40%;
  padding: .5rem !important;
    }

    

   
 

    .form-adult-child{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
     

    }

    .form-adult-child input{
      text-align: center;
      box-shadow: none;
      padding: 0;
    }

    .form-adult-child label{
      font-size: .8rem;

    }

    .form-adult-child span{
      font-size: 0.8rem;
      color: #757575;

    }
 
    
    input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


    
   

    .contactFormBox form input::placeholder{
    padding-left: .5rem;
    font-size: 0.7rem;
    }
    .contactFormBox form .ContactPhone{
    display: flex;
    justify-content: space-between;
    }
    .contactFormBox form .ContactPhone #countryCode{
    width: 25%;
    padding:.5rem 0;
    margin:.5rem 0;
    border-radius: .5rem;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
    }
    .contactFormBox form .ContactPhone input{
    width: 70%;
    }
    .contactFormBox form .ContactPhone input::placeholder{
    padding-left: .5rem;
    }
    .contactFormBox form textarea{
    width: 100%;
    height: 10vh;
    padding: 2%;
    border: none;
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
    }
    .contactFormBox form textarea::placeholder{
    padding: 2%;
    font-size: .7rem;
    }
    .checkCntner{
    display: flex;
    align-items: flex-start;
    }
    .checkCntner p{
    font-size: .8rem;
    margin-left: .3rem;
    color: #767676;
    }
    .contactFormBox form .checkBox{
    width: auto;
    }
    .contactFormBox form button{
   background-image:linear-gradient(300deg, #08182f 30%, #1f878c 75%, #163a3a 90%);
    color: #fff;
    font-size: 1.2rem;
    width: 100%;
    padding:.5rem 0;
    margin:.5rem 0;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
    border-radius: .5rem;
    }



    
  .question{
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   
    
  }
  .question h3{
    color: #242424;
    font-weight: bold;
    font-size: 20px;
    padding-bottom:5px;
    margin-bottom: 10px;
    border-bottom:2px solid #0a1d3b;

  }
 .question p{
    margin-bottom: 10px;
    font-size: small;
  }
 
    .question p:last-child{
    margin-top: 10px;
    margin-bottom: 0px;
    font-size: small;
  }
  .question a{
    color: #000000;
    text-decoration: none;
    font-weight: bold;
  }




  /*.about-section h2{
    text-align: center;
  }
 
  .about-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
  
  } */




  .otherbanner{
    padding: 1rem 0;
    background-position: center !important;
    background-size: cover !important;
    background-blend-mode: darken;
   background-image:linear-gradient(300deg, #08182f 30%, #1f878c 75%, #163a3a 90%);
    color:#fff;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 20px;
    margin-bottom: 20px;
    }
    .innerOther{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:0 5%;
    }
    .innerOther .fa-thumbs-up{
    font-size: 3.5rem;
    }
    .callContct{
    display: flex;
    align-items: center;
    }
    .innerOther a{
    text-decoration: none;
    width: 150px;
    text-align: center;
    padding: .5rem;
    background-color: #eee;
    border: none;
    color: #222;
    border-radius: .5rem;
    }
    .innerOther a:hover{
    background-color: #000000;
    color: #fff;
    }
    .calllcontactHeading{
    margin-left: 1rem;
    }