{% include 'public_header.html' %}
<style>
  .pclass {
    color: #f5deb3; /* Cream color */
    font-weight: bold; /* Bold text */
    font-style: italic; /* Italic text */
  }

</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

<section id="secondSection" data-anim-wrap="" class="layout-pt-lg layout-pb-lg">
      <div class="container">
        <div class="row justify-center text-center">
          <div class="col-auto">
            <div data-anim-child="slide-up delay-1" class="text-15 uppercase mb-30 sm:mb-10">About Skyes Glamping Resort</div>
            <h2 data-anim-child="slide-up delay-2" class="text-64 md:text-40">Enjoy a Luxury Experience</h2>
          </div>
        </div>
    
        <div class="row y-gap-30 pt-100 sm:pt-50">
          <div class="col-lg-6">
            <div data-anim-child="slide-up delay-3" class="col-lg-8 px-0">
              <p>The SKYES GLAMPING RESORT plantation experience is an eco-friendly plantation conservancy project nestled amidst a large private estate reserve on the pristine Pandavarmala range of the Munnar hills. The rainforest experience, with the authentic gigantic trees in our secluded ecosystem, along with the adjacent tea and cardamom plantations, provides a rejuvenating vacation for a lifetime with an endless attachment to nature.</p>
            </div>
    
            <div data-anim-child="slide-up delay-4">
              <button class="button -type-1 mt-60 md:mt-30">
                <i class="-icon">
                  <svg width="50" height="30" viewBox="0 0 50 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M35.8 28.0924C43.3451 28.0924 49.4616 21.9759 49.4616 14.4308C49.4616 6.88577 43.3451 0.769287 35.8 0.769287C28.255 0.769287 22.1385 6.88577 22.1385 14.4308C22.1385 21.9759 28.255 28.0924 35.8 28.0924Z" stroke="#122223"></path>
                    <path d="M33.4808 10.2039L32.9985 10.8031L37.2931 14.2623H0.341553V15.0315H37.28L33.0008 18.4262L33.4785 19.0285L39 14.6492L33.4808 10.2039Z" fill="#122223"></path>
                  </svg>
                </i>
                Book now
              </button>
            </div>
    
            <div class="lg:d-none mt-60 md:mt-30" data-anim-child="slide-up delay-6">
              <img src="/static/images/bg/2413_680misty_hills__1_.jpeg" alt="image">
            </div>
          </div>
    
          <div class="col-lg-6 lg:d-none">
            <div data-anim-child="slide-up delay-7">
              <img src="/static/images/bg/2413_misty_hills__1_.jpg" alt="image">
            </div>
            <div class="mt-30" data-anim-child="slide-up delay-8">
              <img src="/static/images/bg/2413_treetop.jpg" alt="image">
            </div>
          </div>
        </div>
      </div>
    
      <!-- Decorative leaves -->
      <div class="leaf leaf-1">
        <img src="/static/images/bg/leaf1.png" alt="Leaf">
      </div>
      <div class="leaf leaf-2">
        <img src="/static/images/bg/leaf2.png" alt="Leaf">
      </div>
      <div class="leaf leaf-3">
        <img src="/static/images/bg/leaf1.png" alt="Leaf">
      </div>
      <div class="leaf leaf-4">
        <img src="/static/images/bg/leaf2.png" alt="Leaf">
      </div>
    </section>
    <section class="why-section">
      <h2>WHY <span style="color: #88cfb3;">CHOOSE US</span></h2>
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <div class="feature-card">
              <div class="icon">
                <i class="bi bi-building"></i> <!-- Icon -->
              </div>
              <h5 class="mb-3 pclass" >BEST LOCATION</h5>
              <p class="pclass">Misty Hill Nestled in nature's embrace, offering the best location for serene retreats and memorable experiences.</p>
              <div class="card-number">01</div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="feature-card">
              <div class="icon">
                <i class="bi bi-star"></i> <!-- Icon -->
              </div>
              <h5 class="mb-3 pclass">BEST RATE GUARANTEE</h5>
              <p class="pclass">Misty Hill Best Rate Guarantee ensures the lowest prices for unparalleled comfort and satisfaction.</p>
              <div class="card-number">02</div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="feature-card">
              <div class="icon">
                <i class="bi bi-calendar-check"></i> <!-- Icon -->
              </div>
              <h5 class="mb-3 pclass">RESERVATIONS 24/7</h5>
              <p class="pclass">Reserve anytime, anywhere. 24/7 availability for seamless booking convenience. Experience tranquility.</p>
              <div class="card-number">03</div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="feature-card">
              <div class="icon">
                <i class="bi bi-cup-hot"></i> <!-- Icon -->
              </div>
              <h5 class="mb-3" pclass>FREE BREAKFAST</h5>
              <p class="pclass">Complimentary breakfast to enhance your stay with a delicious <br> start to the day.</p>
              <div class="card-number">04</div>
            </div>
          </div>
        </div>
      

        <!-- Decorative leaves - similar to previous section -->
        <div class="leaf leaf-1">
          <img src="/static/images/bg/leaf1.png" alt="Leaf">
        </div>
        <div class="leaf leaf-2">
          <img src="/static/images/bg/leaf2.png" alt="Leaf">
        </div>
        <div class="leaf leaf-3">
          <img src="/static/images/bg/leaf1.png" alt="Leaf">
        </div>
        <div class="leaf leaf-4">
          <img src="/static/images/bg/leaf2.png" alt="Leaf">
        </div>
      </section>


{% include 'public_footer.html' %}

<style>

  .why-section {
      text-align: center;
      padding: 50px 20px;
    }
    .why-section h2 {
      font-size: 2rem;
      font-weight: bold;
      color: #88cfb3;
      margin-bottom: 40px;
    }
    .feature-card {
      background-color: #1a3c39;
      border: none;
      border-radius: 10px;
      padding: 20px;
      margin: 20px 0;
      color: #ffffff;
      position: relative;
      overflow: hidden;
    }
    .feature-card .icon {
      width: 60px;
      height: 60px;
      background-color: #88cfb3;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto 20px;
    }
    .feature-card .icon i {
      font-size: 24px;
      color: #0d2826;
    }
    .feature-card h5 {
      font-weight: bold;
    }
    .feature-card p {
      font-size: 0.9rem;
    }
    .feature-card .card-number {
      position: absolute;
      bottom: 10px;
      right: 10px;
      font-size: 1.5rem;
      font-weight: bold;
      opacity: 0.2;
    }
    .dotted-line {
      border-top: 2px dotted #88cfb3;
      margin: 20px 0;
    }
    /* Mobile Styles */
    @media (max-width: 767px) {
      .dotted-line {
        display: none; /* Hide dotted line on small screens */
      }
    }
    .leaf {
  position: absolute;
  z-index: 2;
}

.leaf-1 {
  top: 10%;
  left: 5%;
  width: 100px;
  animation: float 6s ease-in-out infinite;
}

.leaf-2 {
  bottom: 15%;
  right: 10%;
  width: 120px;
  animation: float 7s ease-in-out infinite;
}

.leaf-3 {
  top: 90%;
  left: 20%;
  width: 90px;
  transform: translate(-50%, -50%);
  animation: float 5s ease-in-out infinite;
}

.leaf-4 {
  top: 40%;
  left: 40%;
  width: 90px;
  transform: translate(-50%, -50%);
  animation: float 4s ease-in-out infinite;
}
</style>