@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

    :root{--accent:#c19a6b;--muted:#f5f1ee;--text:#222;--max:1200px; --font:"Playfair Display", serif; }
    *{box-sizing:border-box}
    body{font-family: "Inter", sans-serif; padding-top: 100px; line-height:1.4;color:var(--text);margin:0;background:#fff url(../images/white-bg.png) center top repeat-y; }
    h1, h2, h3, h4, h5, h6{
      margin: 0;
      padding: 0;
    }
    .clearfix:after,.clearfix:before{content:'';display:block;height:0;overflow:hidden}
.clearfix:after{clear:both}.container{max-width:1170px;margin:0 auto;padding:0 10px}
    ul{
      list-style: none;
      margin: 0;
      padding: 0;
    }
    img{
      max-width: 100%;
      max-height: 100%;
    }
    p{
      padding: 0;
      margin: 0;
    }
    a{
      text-decoration:none;
    }
    .playfair{
      font-family: "Playfair Display", serif;
    }
    .container{max-width:var(--max);margin:0 auto;padding:0 20px}
    /* Header */
    header{background:#0e1414; position: fixed; left: 0; right: 0; top: 0; z-index: 99; }
    .topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{max-width: 200px;}
    .brand .logo{height:36px;width:36px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#b88a5a);display:inline-block}
    nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
    nav a{color:#fff;text-decoration:none; display: inline-block; font-weight:600; font-family: var(--font);    text-transform: uppercase;
    letter-spacing: 2px;}
    nav a:hover{
          color: #eec837;
    }
    .hdrCont a {
        background: #eec837;
        padding: 10px 20px;
        font-size: 18px;
        color: #000;
        font-weight: 600;
        line-height: 30px;
        display: inline-block;
        border-radius: 6px;
    }
    /* Hero */
    .hero{position:relative;background:#eee;display:flex;align-items:center; padding: 150px 0; background-size: cover !important;}
    .hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.25),rgba(0,0,0,0.25));}
    .hero-inner{position:relative;z-index:2;max-width:1000px;margin:0 auto;color:#fff;padding:40px;text-align:center;}
    .eyebrow{ font-size: 24px; font-family: var(--font); }
    .hero-inner h1{
      font-size: 120px;
    }
    .cta{display:inline-block;padding:12px 20px;background:#fff;color:#111;border-radius:6px;font-weight:700;text-decoration:none; margin-bottom: 70px;}
    .sub {
      font-size: 20px;
       font-family: var(--font);
    }

    /* features */
    .features{background:var(--muted);padding:50px 0;}
    .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:var(--max);margin:0 auto;padding:6px 20px}
    .feat{background:transparent;padding:10px 0;text-align:center; border-right: #ebe4da solid 1px;}
    .feat:last-child{
      border-right: 0;
    }
    .restIcon {
        width: 100px;
        height: 100px;
        background: #ebe4da;
        margin: 0 auto 20px auto;
        position: relative;
        border-radius: 50%;
    }
    .restIcon i{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 9;
    }
    .feat strong{font-size:16px; font-family: var(--font); display: block; padding-bottom: 5px; text-transform: capitalize; }
    .feat p{ font-size: 15px; color: #333;} 

    /* About + gallery */
    .aboutResort{padding:60px 0px}
    .aboutInn {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .about_Left {
        width: 48%;
        padding-top: 20px;
    }
    .about_Left h2{font-family: var(--font); font-size:48px; line-height: 56px; margin:0 0 12px}
    .about_Left p {
        color: #555;
        font-size: 17px;
        line-height: 27px;
        padding-bottom: 20px;
    }
    .about_Left small {
        display: block;
        font-size: 14px;
        color: #8d692d;
    }
    .about_Right{
        width: 48%;
        position: relative;
    }
    .about_Right > img {
        max-width: 380px;
        float: right;
    }
   .about_gallery {
        position: absolute;
        left: 20px;
        bottom: -50px;
        width: 250px;
        line-height: 0;
    }
    .about_gallery img {
          width: 100%;
          height: auto;
          border-radius: 10px;
          box-shadow: #a3a3a3 0 0 4px 0px;
      }
      .aboutresBtn{
        display:inline-block;padding:10px 20px; font-size: 16px; background:#0e1414;color:#fff;border-radius:6px;
      }
      .aboutresBtn:hover{
        background: #8d692d;
      }

    .aboutMarquee {
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      padding: 10px 0;
      margin-top: 80px;
    }

    .aboutMarquee ul {
      display: flex;
      gap: 80px; /* distance between text blocks */
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;
      left: 0;
      animation: bounceMarquee 15s linear infinite alternate;
    }

    .aboutMarquee li {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      white-space: nowrap;
      position: relative;
      padding-left: 20px; /* space for circle */
    }

    .aboutMarquee li::before {
      content: "●";  /* circle sign */
      position: absolute;
      left: 0;
      color: #666;
      font-size: 12px;
      top: 50%;
      transform: translateY(-50%);
    }

    @keyframes bounceMarquee {
      0%   { left: 0; }
      100% { left: calc(100% - 100vw); }
    }

    /* facilities grid */
    .facilities{padding:50px 0px; background:var(--muted) }
    .facilitiesHd{
      padding-bottom: 30px;
      text-align: center;
    }
    .facilitiesHd h3{
      font-size: 42px;
      font-family: var(--font);
    }
    .fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
    .card{border-radius:8px;}
    .card i {
        display: block;
        line-height: 0;
        overflow: hidden;
        border-radius: 6px;
    }
    .card i img{width:100%;object-fit:cover;border-radius:6px; transform: scale(1.0); transition: all 0.5s ease-in-out; }
    .card:hover i img{ transform: scale(1.2); transition: all 0.5s ease-in-out; }
    .card h5 {
        text-align: center;
        font-size: 16px;
        padding: 20px 0;
    }
    
    /* offers */
    .offers_Outer{padding:50px 0px;}
    .offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--max);margin:0 auto}
    .offer{position:relative; border-radius:8px; overflow:hidden; line-height: 0;}
    .offer > img { 
      line-height: 0;
      border-radius: 10px;  transform: scale(1.0); transition: all 0.5s ease-in-out;
    }
    .offer:hover > img{
       transform: scale(1.2); transition: all 0.5s ease-in-out; 
    }
    .offer::after{content:'';position:absolute;inset:0; background: linear-gradient(180deg, rgb(0 0 0 / 51%), rgb(0 0 0 / 52%));}
    .exclusive_Offer .owl-controls {
        display: none;
    }
    .offerDetBx {
      position: absolute;
      left: 50%;
      top:50%;
      transform: translate(-50%, -50%);
      line-height: normal;
      width: 70%;
      text-align: center;
      color: #fff;
      z-index: 9;
    }
    .offerDetBx small{
      display: block;
      font-size: 15px;
      padding-bottom: 20px;
      text-transform: uppercase;
    }
    .offerDetBx h5 {
        font-size: 42px;
        line-height: 48px;
        padding-bottom: 90px;
        font-family: var(--font);
    }
    .offerDetBx span {
        display: inline-block;
        background: #fff;
        border-radius: 6px;
        padding: 8px 20px;
        color: #333;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 22px;
    }
    .mmtOuter {
        padding-top: 50px;
    }
    .mmtOuter ul{
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .awesomeCont {
        text-align: center;
        padding-top: 20px;
        font-size: 16px;
    }
    .awesomeCont span {
      background: #333;
      color: #fff;
      padding: 5px 10px;
      font-size: 14px;
      text-transform: uppercase;
      border-radius: 5px;
      margin-right: 5px;
  }
  .awesomeCont strong{
    text-decoration: underline;
  }
.cottageOuter {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background: #f5f1ee;
}
.cottageLeft {
    width: 33.33%;
}
.cottageLeft li a {
    display: block;
    padding: 30px 20px;
    font-size: 20px;
    line-height: 30px;
    color: #333;
    border-bottom: #dad6d3 solid 1px;
}
.cottageLeft li:last-child a{
  border-bottom: 0;
}
.cottageLeft li.active a{
  background: #ac8d55 url(../images/arrow-right.png) right center no-repeat;
  color: #fff;
}

.cottageRight {
    width: 67.67%;
}
.cottageTabBx{
  display: none;
}
.cottageInnBx {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cottageImgBx {
    width: 50%;
    line-height: 0;
    position: relative;
}
.priceStarting {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    right: 0;
    bottom: 0;
    line-height: normal;
}
.priceStsrt {
    background: #fff;
    padding: 10px 20px;
}
.priceStsrt small{
  display: block;
  font-size: 14px;
  color: #666;
  padding-bottom: 5px;
}
.priceStsrt span{
  display: block;
  font-size: 24px;
  color: #333;
  font-weight: 600;
}
.booknow {
    background: #333;
    padding: 10px 20px;
    width: 130px;
    position: relative;
}
.booknow a{
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
}
.booknow a img{
    width: 25px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(0, -50%);
}
.cottageCont {
    width: 50%;
}
.cottageCont {
    width: 50%;
    padding: 60px;
}
.cottageCont small {
    font-size: 15px;
    display: block;
    color: #ac8d55;
}
.cottageCont h4{
  font-size: 36px;
  font-family: var(--font);
  padding-bottom: 10px;
}
.cottageCont p{
  font-size: 16px;
  line-height: 27px;
  padding-bottom: 20px;
}
.cottageCont ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 30px;
}
.cottageCont ul li{
  text-align: center;
}
.cottageCont ul li i {
    display: block;
    padding-bottom: 10px;
    min-height: 80px;
}


    /* rating + subscribe */
    .ratings{padding:40px 20px}
    .rating-row{display:flex; align-items:center; justify-content:space-between;}
    .testimonial {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
        border: #ccc solid 1px;
        width: 49%;
    }
    .testimonialImg{
      padding: 20px;
      position: relative;
      border-bottom: #ccc solid 1px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .testimonialImg i{
      width: 100px;
      height: 100px;
    }
    .testimonialImg i img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .testimonialImg p{
      font-size: 16px;
      line-height: 27px;
      width: calc(100% - 120px);
    }
    .testimonialRating {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }
    .testimonialRating strong{
      display: block;
      font-size: 17px;
      font-family: var(--font);
      padding-bottom: 7px;
    }
    .testimonialRating i img{
      width: 20px;
    }
    .checkallReviews {
        text-align: center;
        padding-top: 30px;
        font-size: 22px;
    }
    .checkallReviews img{
      vertical-align: middle;
    }
    .subscribe_Outer{background: #f5f1ee; padding: 50px 0 0 0;}

    .subsOutBx {
        max-width: 500px;
        margin: 0 auto 20px auto;
        position: relative;
    }
    .subsOutBx .subsInp {
        width: 100%;
        height: 50px;
        padding: 0 15px;
        font-size: 16px;
        border: 0;
        border-radius: 25px;
        box-shadow: #ccc 0 0 10px 2px;
    }
    .subsBtn {
        position: absolute;
        right: 0;
        height: 50px;
        border: 0;
        background: #333333;
        font-size: 17px;
        border-radius: 0 25px 25px 0;
        padding: 0 15px;
        color: #fff;
        cursor: pointer;
    }
    .wearecom {
        text-align: center;
        font-size: 13px;
        color: #99785f;
    }
    .wearecom a{
      color: #333;
      text-decoration: underline;
    }
    .wearecom a:hover{
      color: #000;
      text-decoration: none;
    }
    .instaList {
        margin-top: 50px;
        padding-bottom: 30px;
    }
    .instaList li {
        width: 18.4%;
        float: left;
        margin-right: 2%;
    }
    .instaList li:last-child{
      margin-right: 0;
    }
    .instaList li a{
      display: block;
      line-height: 0;
      position: relative;
    }
    .instaList li a span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        border-radius: 20px;
        padding: 10px;
        white-space: nowrap;
        font-size: 14px;
        color: #000;
        width: 90%;
        text-align: center;
        line-height: 20px;
        display: none;
    }
    .instaList li a span img {
        width: 18px;
        vertical-align: middle;
        position: relative;
        top: -1px;
    }
    .instaList li a:hover span{
      display: block;
    }
    .footer_Outer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0 10px 0;
        border-top: #ccc solid 1px;
    }
    .copyRight {
        font-size: 13px;
    }
    .footSocial a {
        display: inline-block;
        margin-left: 3px;
        line-height: 0;
    }
    .footerNav a {
        display: inline-block;
        font-size: 15px;
        margin: 0 10px;
        color: #000;
        font-weight: 500;
    }
     .footerNav a:hover{
      color: #8d692d;
      text-decoration: underline;
     }
    .callwhatsappBx{
      display: none;
    }


    .overlay {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 100;
      display: none;
  }
  .popupInner {
      background: #fff;
      max-width: 500px;
      border-radius: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
  }
  .popupHd {
      font-size: 30px;
      font-weight: 600;
      text-align: center;
      padding: 10px 20px;
      background: #0e1414;
      color: #fff;
      border-radius: 10px 10px 0 0;
      font-family: var(--font);
  }
  .popupFrmBx{
    padding: 20px;
  }
  .frmBx {
      padding-bottom: 15px;
  }
  .frmInp {
      height: 45px;
      padding: 0 10px;
      width: 100%;
      border: #adadad solid 1px;
      border-radius: 5px;
      font-size: 17px;
      font-family: var(--font);
  }
  .frmInp2 {
      height: 115px;
      padding: 10px;
      width: 100%;
      border: #adadad solid 1px;
      border-radius: 5px;
      font-size: 17px;
      resize: none;
      font-family: var(--font);
  }
  input.frmBtn {
      background: #8d692d;
      height: 45px;
      width: 100%;
      border: 0;
      border-radius: 5px;
      font-size: 20px;
      color: #fff;
      cursor: pointer;
      font-family: var(--font);
      text-transform: uppercase;
    letter-spacing: 1px;
  }
  input.frmBtn:hover{
    background: #0e1414;
  }
  .closePopup {
      position: absolute;
      right: -5px;
      top: -5px;
      color: #000000;
      font-size: 20px;
      background: #fff;
      width: 30px;
      height: 30px;
      text-align: center;
      border-radius: 50%;
      font-weight: 600;
      line-height: 30px;
  }

  .thankyouOuter{padding:200px 0 100px;background:#f5f5f5}
  .thanksContent { text-align: center;}
  .thanksContent > i {display: inline-block; width: 150px;}
  .thanksContent h1{font-size:91px;font-weight:600;padding-top:25px}
  .thanksContent span{font-size:20px;display:block}
  .thanksContent strong{font-weight:800;font-size:35px;padding-top:30px;display:block;color:#f60;line-height:35px}
  .thanksContent strong a {color: #ff5602;}
  .thanksContent strong i{display:inline-block;height:35px;vertical-align:top}