*{ margin: 0px; padding: 0px; box-sizing: border-box;}
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
body{ font-size: 18px; line-height: 26px;  color: #424242; font-family: 'Open Sans';} 
ul, ol, li{ list-style: none; padding: 0px; margin: 0px;}
img{max-width: 100%;}
a{text-decoration: none;}
/****************************/
.headerMain{ width: 100%; position:absolute; left: 0px; top: 0px;}
.headerdiv{ width: 100%; position:fixed; top:0px; left:0px;  z-index: 1;}
.headerdiv.sticky ul li a {color: #000; font-weight: 600;}
.headerdiv.sticky ul li a:hover{border-bottom: 2px solid#000;}
 
.headrtop{width: 100%; padding: 8px 0;}
.headrtop ul{display: flex; flex-wrap: wrap; align-items: center;}
.headrtop ul li{padding: 0px 25px 0 0; }
.headrtop ul li a{text-decoration: none; color:#fff; font-size: 16px; line-height: 20px; font-weight: 500; list-style-type: none;}
.headrtop ul li a:hover{ border-bottom: 2px solid#fff;}
.headrtop ul li.mlogo{ padding: 0px; text-align:center; margin: 0 auto;}
 
.sticky{ background:rgb(255, 255, 255, 0.9);}
.logomobilein{ display: none;}
.logomobile{ display: none;}

.headerdiv img{width: 150px;}



.bannerdiv{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; width: 100%; height: 100vh; background: url(../images/slider1.jpg) no-repeat left top; background-size: cover;  padding: 40px 0 0 0;}
.bannerdiv h2{font-size: 25px; line-height: 35px; font-weight: 600; color: #fff;text-shadow:  0 0 3px#000; font-family: 'Marcellus', serif;}
.bannerdiv h1{font-size: 75px; line-height: 80px; font-weight: 500; color: #fff; text-shadow:  0 0 6px#000; font-family: 'Marcellus', serif;}
.bannerdiv span{display: block;}

h2,h1,h3{font-weight: 600;font-family: 'Marcellus', serif;}

.superior{width: 100%; text-align: center; background:#e7ebeffb; padding: 80px 0 80px 0;}
.superior img{width: 40px;}
.superior h2{font-size: 50px; line-height: 60px; font-weight: 400; color: #111; padding: 20px 0 20px 0;font-family: 'Marcellus', serif;}
.superior h2 span{color: #898b8a;}
.superior p{font-size: 14px; line-height: 24px; font-weight: 500; color: #000; padding: 0 0 30px 0;}
.learnin { font-size: 15px; line-height: 22px; font-weight: 400; color: #fff; background: #153D39; padding: 12px 25px; border-radius:4px;}
.learnin:hover{ background:orangered; color: #fff;}


.elegance{width: 100%; background: #031B18; padding: 50px 0 50px 0; text-align: center;}
.elegance h2{font-size: 64px; line-height: 72px; font-weight: 500; color: #fff;font-family: Times;}
.elegance h3{font-size: 22px; line-height: 28px; font-weight: 500; color: #fff;font-family: Times; padding: 10px 0 10px 0;}
.elegance h4{font-size: 30px; line-height: 38px; font-weight: 500; color: #fff; text-align: center;font-family: Times;}
.elegancediv{width: 100%; text-align: center; padding: 30px 0 0 0;}
.elegancediv h5{font-size:22px; line-height: 28px; font-weight: 500; color: #fff; padding:20px 0 0 0;}
.elegancediv p{font-size:14px; line-height: 24px; font-weight: 400; color: #fff;}
.bottin { font-size: 15px; line-height: 22px; font-weight: 400; color: #fff; background: #153D39; padding: 12px 25px; border-radius:4px; border: 0px; margin: 50px 0 0 0;}
.bottin:hover{ background:orangered;}
.elegance span{color: #898b8a;}
.choice{padding: 0 10px 20px 10px ;}

.amenities {width: 100%; background:#d2dbe2; padding: 50px 0 60px 0; text-align: center;}
.amenities h2{font-size: 58px; line-height: 64px; font-weight: 500; color: #111; font-family: Times;}
.amenities h3{font-size: 22px; line-height: 28px; font-weight: 500; color: #111;font-family: Times; padding: 10px 0 10px 0;}
.amenities h4{font-size: 26px; line-height: 34px; font-weight: 500; color: #111;font-family: Times;}
.amenities span{color: #898b8a;}
.amenitiesdiv{width: 100%; text-align: center; padding: 30px 0 0 0;}
.amenitiesdiv img{width: 100%;}
.event{padding: 0 10px 20px 10px;}

.residency { width: 100%; background: url(../images/hills.jpg) no-repeat left top; background-size: cover; padding: 50px 0 50px 0;}
.residencyin{background: #fff; padding: 40px 30px; } 
.residencyin h2{font-size: 24px; line-height: 32px; font-weight: 500; color: #111; padding: 0 0 10px 0;}
.residencyin p{font-size: 15px; line-height: 24px; font-weight: 500; color: #111; padding: 0 0 20px 0;}
.morein{ font-size: 15px; line-height: 22px; font-weight: 400; color: #fff; background: #153D39; padding: 12px 25px; border-radius:4px;}
.morein:hover{ background:orangered; color: #fff;}



.residencydiv{width: 100%; background: #ddd; padding: 40px 0 50px 0;}
.residencydiv h3{font-size: 26px; line-height: 34px; color: #111; padding: 0 0 20px 0;font-family: Times;}

/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #fff;
  
}

/* Slides */
.mySlides {
  padding: 40px;
 
}

/* Next & previous buttons */
.prevs, .nexts {
  cursor: pointer;
  position: absolute;
  top: 0%;
  width: auto;
 padding: 16px;
  color: #000;
  font-weight: bold;
  font-size: 22px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

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

/* Add an italic font style to all quotes */
q {font-style: italic; font-size:16px; line-height: 22px; color:#111;}



  
  /* Add a blue color to the author */
  .author {font-size: 16px; line-height: 24px; color:blue; padding: 10px 0 0 30px;}


  .footer{width: 100%; padding: 50px 0px 20px 0px; background: #031B18;}
  .footermid h2{font-size: 20px; line-height: 28px; color: #cdcdcd; padding: 8px 0 0 0;}
  .footermid p{font-size: 16px; line-height: 24px; color: #cdcdcd;} 
  .footermid img{width: 140px;}

   

  .footerin h3{font-size: 22px; line-height: 30px; color: #fff; padding: 20px 0 20px 30px; font-family: times;}
  .footerin ul li{font-size: 16px; line-height: 20px; position:relative; padding: 0px 0 20px 26px;color: #cdcdcd}
  .footerin ul li a{font-size: 14px; line-height: 20px; color: #cdcdcd; }
  .footerin ul li a:hover{color: blue;} 
  .footerin ul li label img{ position: absolute; left: 0px; top:3px;}
  .footerin ul li label img{filter: brightness(0) invert(1);}


  .footerdiv h3{font-size: 20px; line-height: 30px; color: #fff; padding: 20px 0 0px 30px; font-family: times;}
  .footerdiv h4{font-size: 16px; line-height: 20px; color:#fff ; padding: 20px 0 0 30px;}
  .footerdiv ol{display: flex; flex-wrap: wrap; align-items: center;}
  .footerdiv ol li{padding: 20px 0px 0px 30px;}
  .footerdiv ol li a img{background: #fff; padding:8px; border-radius: 50px;}
 
   
  
  .reseverd{text-align: center; border-top: 1px solid#999; padding: 30px 0 0px 0; margin: 40px 0 0 0;}
  .reseverd p{font-size: 14px; line-height: 20px; color: #fff;}


  .menuclick{ display: none; align-items: center; justify-content: center; width: 30px; height: 30px; position: relative;}
  .menuclick::after{ content: ""; position: absolute; left: 0px; top:2px; background: #000; height: 2px; width: 100%;}
  .menuclick::before{ content: ""; position: absolute; left: 0px; bottom:3px; background: #000; height: 2px; width: 100%;}
  .menuclick b{ width: 100%; height: 2px; background: #000;}



  /***********************************************************************/
.bannerview{ display: flex; flex-wrap: wrap; align-items: center; width: 100%; min-height: 550px; background: url(../images/Mountain.webp) no-repeat left top; background-size: cover; }
.bannerview h2{font-size: 22px; line-height: 34px; color:#000;}
.bannerview a{font-size: 24px; line-height: 34px; color: #fff;}
.bannerview a:hover{color: orangered;}

.heavenly{ display: flex; flex-wrap: wrap; align-items: center; background: #e6ebf0; width: 100%; height: 490px; z-index: 2;}
.heavenly h2{font-size: 55px; line-height: 64px; color: #949C9B;}
.heavenly h3{font-size: 28px; line-height: 40px; color:#000;}
.heavenly p{font-size: 16px; line-height: 26px; font-weight: 400; color:#000; padding: 10px 0 0px 0;}
.heavenly span{display: block; color: #000;}
.heavenly a{font-size: 24px; line-height: 34px; color: #fff;}
.heavenly a:hover{color: orangered;}
.deodar{padding: 0 10px 10px 10px; }
.stunning{background:#bec2c5; padding: 0px 0 30px 0;}
.trees img{ position:relative; left: 0px; bottom: 80px;}

.expectations{width: 100%; padding: 30px 0 50px 0; background:#efeeee}
.expectations p{font-size: 16px; line-height: 26px; color: #111; font-weight: 400; } 
.expectations h2{font-size: 26px; line-height: 34px; font-weight: 600; color: #111; font-family: Times; padding: 0px 0 10px 0;}
.expectations img{border-radius: 4px;}
.sunrise{ padding: 50px 15px 0 15px;}


.directions{width: 100%; padding: 50px 0 0px 0;}
.directions img{height: 100%; overflow: hidden; border-radius: 5px; box-shadow: 0 0 8px#999;}
.queries{padding:0 10px 20px  10px;}


/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top:15px;
  left: 0;
  top: 0px;
  width: 100%;
  height: 100%;
 background: #ddd;
}

/* Modal Content */
.modal-content {

  margin: auto;
  padding:0px;
  width: 100%;
  max-width: 1000px;
 
}

/* The Close Button */
.close {
  color:#000;
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 30px;
  font-weight: bold;
  padding: 5px 15px;
 
}




/* Next & previous buttons */
.previn,
.nextin {
  cursor: pointer;
  position: absolute;
  top: 55%;
  width: auto;
  padding: 14px;
  margin-top: -50px;
  color: black;
  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 */
.nextin {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

.myModal:hover{background: #000;}


/* On hover, add a black background color with a little bit see-through */
.previn:hover,
.nextin:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}

/* Number text (1/3 etc) */
.numbertext {
 
  font-size: 14px;
  position: absolute;
  top: 5px;
}

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

.hover-shadow:hover {
  box-shadow: 0 0px 8px#000;
}

  

/*************************************************/




  .eventsdiv{width: 100%; background: #efeeee;padding: 60px 0 50px 0;}
  .eventsdiv h2{font-size: 32px; line-height: 40px; font-weight: 600; color: #111; text-align: center;}
  .eventsdiv h3{font-size:24px; line-height: 30px; font-weight: 600; color: #111; text-align: center; padding: 35px 0 0px 0;}
  .eventsdiv p{font-size:16px; line-height: 26px; font-weight: 400; color: #111;  text-align: center; padding: 10px 0 10px 0;}
  .eventsdiv h4{font-size: 24px; line-height: 32px; font-weight: 600; color: #111; text-align: center;}
  .eventsdiv h5{font-size: 24px; line-height: 32px; font-weight: 600; color: #111; text-align: center;}
  
  .watering{width: 100%; padding: 40px 0 0 0;}
  .watering ul li{font-size: 16px; line-height: 26px; color: #000; position: relative; font-weight: 400; padding: 0px 0 10px 20px;}
  .watering ul li label img{width: 10px; position: absolute; left:0px; top:7px;}
  .peacefulin{width: 100%; padding: 40px 0 0 0; } 
  .peacefulin img{box-shadow: 0 0 4px#999; border-radius: 4px; height: 100%; overflow: hidden;}
  .value{padding: 0 15px 30px 15px;}




  /****************************************************************************/
  .adventure{width: 100%; background: #efeeee;padding: 60px 0 40px 0;}
  .adventure h2{font-size: 26px; line-height: 38px; font-weight: 700; color: #111; padding: 0 0 20px 0;}
  .adventure ol li{font-size: 16px; line-height: 26px; font-weight: 500; color: #111; position:relative; padding: 0 0 15px 18px;}
  .adventure ol li::after{content: ""; position: absolute; left: 0px; top:10px; background: #000; width: 5px; height: 5px; border-radius: 50%;}
  .hosting{padding: 0 15px 30px 15px;}
  .facilities{width: 100%; padding: 30px 0 0 0; } 
  .facilities img{box-shadow: 0 0 4px#999; border-radius: 4px; height: 100%; overflow: hidden;}
  /* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top:15px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width:100%;
 border: 0px;
  max-width: 1000px;
}

/* The Close Button */
.close {
  color: #000;
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 35px;
  font-weight: bold;
 
}

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

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color:#fff;
  font-weight: bold;
  font-size: 25px;
  transition: 0.6s ease;
  border-radius:50px;
  user-select: none;
  -webkit-user-select: none;
 
}
 /* Position the "next button" to the right */
.next {
  right: 0;
  border-radius:50px;}



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

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

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color:black;
  padding: 2px 16px;
  color:white;
}
.hover-shadow:hover {
  box-shadow: 0 0px 8px#000;
}

  /*******************************************************************************/
 .gallerydiv{width: 100%; background:#efeeee; padding: 60px 0 50px 0;}
 .gallerydiv img{border:10px solid#fff; border-radius: 4px; height:100%; overflow: hidden;}
 .gallerydiv h2{font-size: 40px; line-height: 50px; color:#111; padding: 0 0 30px 0;}
 .suites{padding: 0 15px 30px 15px;}

  /**************************************************************************/
 .cottages{width: 100%; text-align: center; padding: 60px 0 0 0;} 
 .cottages h2{font-size: 35px; line-height: 45px; color: #000; padding: 0 0 10px 0;}
 .cottages p{font-size:16px; line-height: 24px; color: #000;}
.mountain{width: 100%; padding: 60px 0 70px 0;}
.chakrata{background:#efeeee; height: 90%; margin: 0 80px 30px 0; padding: 40px;}
.chakrata h4{font-size: 18px; line-height: 26px; color: #000; position: relative; left: 0px; top:0px; padding: 0 0 0 50px;}
.chakrata img{ position:absolute; left: 0px; top:10px;}
.chakrata p{font-size: 15px; line-height: 22px; color: #000; padding: 0 0 0 50px;}
.chakrata input{width:220px;outline: none; border: 1px solid#ddd; height: 40px; font-size: 14px; padding: 0 0 0 15px; margin: 0 0 0 50px; border-radius: 5px;}
.chakrata button{border: 0px; font-size: 13px; line-height: 20px; color: #fff; background: #031B18; padding: 8px 20px; margin: 20px 0 0 50px; border-radius: 4px;}
.chakrata button:hover{background:#ed5434;}
.fromin ul{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.fromin input{width: 100%; outline: none; border: 1px solid#ddd; height: 40px; font-size: 14px; padding: 0 0 0 10px;  margin: 10px 0 10px 0; border-radius: 5px;}
.fromin button{border: 0px;  font-size: 13px; line-height: 20px; color: #fff; background: #031B18; padding: 8px 20px; border-radius: 4px; margin: 30px 0 0 0;}
.fromin button:hover{background:#ed5434;}
.fromin ul li{ width: 48%;}
.fromin b{font-size: 16px; line-height: 22px; padding: 10px 0 10px 0; font-weight: 400;}


.form-control:focus {
  color: #000;
  border: 1px solid #ddd;
  outline: 0;
  -webkit-box-shadow:none;
   box-shadow:none;
}
 

.logoBlack{ display: none;}
.sticky .logoBlack{ display: block;}
.sticky .logoWhite{ display: none;}
  /***************************************************************/

  

.container{ max-width: 1320px;}

  @media screen and (max-width: 1320px){
    .container{ max-width: 100%; padding-left: 20px; padding-right: 20px;}
  } 


    @media screen and (max-width: 1164px){
   
            .menuclick{ display: flex;}
            .menuclick.active{ display: flex; }
            .headrtop .menulist{ display: none; flex-direction: column; position: fixed; left: 0px; top:0px; background: #000; height: 100%; width: 250px; padding: 0px; height: 100vh; z-index: 1;}
            .headrtop .menulist li{ width: 100%; margin: 0px; padding: 0px;}
            .headrtop .menulist li a { width: 100%; margin: 0px; padding: 8px 10px; color: #fff; display: block;}

            .logomobilein { display: none;}
            .sticky .logomobilein { display: block;}
            .sticky .logomobile { display: none;}
            .logomobile {display: block;}
            .headerdiv img{width: 130px;}
.headrtop .container{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
       .mlogo{display: none;}  
       .headerdiv.sticky ul li a {color: #fff; font-weight: 600;}
       .headerdiv.sticky ul li a:hover{border-bottom: 2px solid#fff;}
    }

    @media screen and (max-width: 992px){
      .chakrata input{width: 80%;}

    }

    @media screen and (max-width: 768px){
        .residencyin {margin: 20px 0 0 0;}
        .approxleft{border-right: 0px;}
        
    }    

    
    @media screen and (max-width: 600px){
        .superior h2{font-size: 28px; line-height: 35px;} 
        .elegance h2{font-size: 35px; line-height: 45px;}
        .elegance h3{font-size: 20px; line-height: 28px;}
        .elegance h4{font-size: 24px; line-height: 34px;}
        .amenities h3{font-size: 20px; line-height: 26px;}
        .amenities h2{font-size: 35px; line-height: 45px;}
        .amenities h4{font-size: 22px; line-height: 32px;}
        .bannerdiv h2{font-size: 18px; line-height: 30px;}
        .bannerdiv h1{font-size: 40px; line-height: 50px;}
        .reseverd p{font-size: 12px; line-height: 18px;}
        .footermid img{width: 110px;}
        .footermid h2{font-size: 18px; line-height: 26px;}
        .expectations h2{font-size: 24px; line-height: 32px;}
        .adventure h2{font-size: 20px; line-height: 26px;}
        .bannerdiv{padding: 20px;}
        .eventsdiv h2{font-size: 25px;}
        .heavenly h2{font-size: 30px; line-height: 40px;}
        .heavenly h3{font-size: 22px; line-height: 34px;}
        .directions h2{font-size:28px;}
        .fromin ul li {width: 100%;}
        .headerdiv img{width: 110px;}
        
    }
    @media screen and (max-width: 400px){
      .bannerdiv h1{font-size: 35px; line-height: 45px;}
      .heavenly p{padding: 0 0 50px 0;}
      .eventsdiv h3{font-size: 20px; line-height: 28px;}
      .eventsdiv h4{ font-size: 20px; line-height: 28px;}
      .eventsdiv h5{ font-size: 20px; line-height: 28px;}
    }