/* =========================
           GLOBAL
        ========================= */

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

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      body {

          background: #f5f5f1;


      }

      p {
          font-family: "Inter", sans-serif;
          font-size: 16px !important;
      }

      h1,
      h2,
      h3 {
          font-family: "Cal Sans", sans-serif;
          font-weight: 600;
      }

      h4,
      h5 {
          font-family: "Manrope", sans-serif;
      }

      span {
          font-family: "Manrope", sans-serif;
      }

      a {

          font-family: "Manrope", sans-serif;
          text-decoration: none;
          color: inherit;
      }

      .section {
          padding: 75px 0;
      }

      .eyebrow {
          font-size: 18px;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          color: #6d8b79;
          margin-bottom: 8px;
      }

      .section-title {
          font-size: 44px;
          color: #075c38;
          margin-bottom: 10px;
      }

      .section-description {
          font-size: 13px;
          color: #66746c;
          line-height: 1.7;
      }

      .nav-links a {
          text-decoration: none;
          color: #004f2e;
          position: relative;
      }

      .nav-links a::after {
          position: absolute;
          content: '';
          width: 0;
          bottom: 0;
          left: 0;
          height: 1px;
          background-color: #004f2e;
          transition: 0.4s;
      }

      .nav-links a:hover::after {
          width: 100%;
      }

      .green-btn {
          background: #006b3f;
          color: white;
          border: none;
          padding: 13px 25px;
          padding-right: 60px;
          border-radius: 30px;
          font-size: 16px;
          font-weight: 600;
          text-decoration: none;
      }

      .green-btn:hover {
          background: #004f2e;
          color: white;
      }

      .green-btn:hover::after {
          transform: translateY(-50%) rotate(315deg);
      }

      /* =========================
           NAVBAR
        ========================= */

      .navbar-custom {
          position: absolute;
          top: 12px;
          left: 50%;
          transform: translateX(-50%);
          width: 94%;
          z-index: 20;

          background: rgba(255, 255, 255, .94);
          border-radius: 50px;
          padding: 8px 15px;

          box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
      }

      .brand {
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .brand-icon {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: #075c38;
      }

      .brand-text h5 {
          margin: 0;
          font-family: "Playfair Display";
          font-size: 14px;
          color: #075c38;
      }

      .brand-text span {
          display: block;
          font-size: 14px;
          letter-spacing: 1px;
          color: #829084;
      }

      .nav-links {
          display: flex;
          gap: 26px;
          align-items: center;
          font-size: 16px;
          color: #4e5e55;
      }

      .nav-links a:hover {
          color: #075c38;
      }

      .phone {
          font-size: 18px;
          color: #607067;
      }

      /* =========================
           HERO
        ========================= */

      /* =========================================
   HERO SLICK SLIDER
========================================= */

      .home-hero {
          height: 90vh;
          position: relative;

          overflow: hidden;

          border-radius: 0 0 28px 28px;
      }


      /* =========================================
   SLIDER
========================================= */

      .hero-slider {
          width: 100%;
          height: 100%;
      }

      .hero-slide {
          position: relative;

          width: 100%;
          height: 520px;

          overflow: hidden;
      }


      /* =========================================
   VIDEO / IMAGE
========================================= */

      .hero-media {


          inset: 0;

          width: 100%;
          height: 100%;

          object-fit: cover;
      }

      .hero-video {
          background: #063d29;
      }


      /* =========================================
   DARK OVERLAY
========================================= */

      .hero-overlay {
          position: absolute;

          inset: 0;

          background:
              linear-gradient(90deg,
                  rgba(0, 45, 28, .78),
                  rgba(0, 45, 28, .30),
                  rgba(0, 0, 0, .08));

          z-index: 1;
      }


      /* =========================================
   HERO CONTENT
========================================= */




      /* =========================================
   SLICK FIX
========================================= */

      .hero-slider .slick-list,
      .hero-slider .slick-track {
          height: 100%;
      }


      .hero-slider .slick-slide>div {
          height: 100%;
      }


      /* =========================================
   REMOVE DEFAULT SLICK ARROWS
========================================= */

      .hero-slider .slick-prev,
      .hero-slider .slick-next {
          z-index: 10;

          width: 35px;
          height: 35px;
      }

      .hero-slider .slick-prev {
          left: 25px;
      }

      .hero-slider .slick-next {
          right: 25px;
      }


      /* =========================================
   DOTS
========================================= */
      .parent-content-wrap{
        position: relative;
      }
      .hero-slider .slick-dots {
          position: absolute;
          bottom: 40px;
          transform: translateX(-50%);
          left: 50%;
          width: auto;
          display: flex;
          gap: 5px;
      }

      .hero-slider .slick-dots li {
          margin: 0;
      }

      .hero-slider .slick-dots li button:before {
          color: white;

          opacity: .45;

          font-size: 7px;
      }

      .hero-slider .slick-dots li.slick-active button:before {
          color: white;

          opacity: 1;
      }


      /* =========================================
   SLIDE CONTENT ANIMATION
========================================= */
      .hero-media{
        position: absolute;
      }
      .hero-slide .hero-content {
          transform: translateY(-50%);
    top: 50%;
    opacity: 1;
    position: relative;
    z-index: 2;
    transition: opacity .7s ease, transform .7s ease;
      }

      .hero-slide.slick-active .hero-content {
        transform: translateY(-60%);
          opacity: 1;

      }

      .hero-title,
      .hero-description,
      .hero-tag {
          color: #fff;
      }

      .hero-title {
          font-size: 74px;
      }

      /* =========================================
   BOOKING BAR ABOVE SLIDER
========================================= */

      .home-hero .booking-wrapper {
          z-index: 20;
      }

      .green-btn {
          position: relative;
      }

      .green-btn::after {
          position: absolute;
          content: '';
          right: 10px;
          border-radius: 50%;
          top: 50%;
          transform: translateY(-50%) rotate(267deg);
          background-color: #ffffff;
          background-image: url(../images/btn-arrow.png);
          width: 30px;
          height: 30px;
          padding: 16px;
          transition: 0.4s;
      }



      .weather {
          position: absolute;
          right: 45px;
          top: 105px;

          font-size: 18px;
          color: white;
      }

      /* =========================
           SEARCH / BOOKING BAR
        ========================= */

      .booking-wrapper {
          position: absolute;
          bottom: 30px;
          left: 6%;
          right: 6%;
      }

      .booking-box {
          background: #f8f8f4;
          padding: 13px 18px;
          border-radius: 12px;

          display: flex;
          align-items: center;
      }

      .booking-item {
          flex: 1;
          border-right: 1px solid #ddd;
          padding: 0 18px;
      }

      .booking-item:first-child {
          padding-left: 5px;
      }

      .booking-item:last-of-type {
          border-right: none;
      }

      .booking-label {
          font-size: 14px;
          color: #809087;
          text-transform: uppercase;
          letter-spacing: .8px;
          margin-bottom: 4px;
      }

      .booking-value {
          font-size: 22px;
          color: #254b3b;
          font-weight: 600;
      }

      .check-btn {
          background: #006b3f;
          color: white;
          border: none;
          border-radius: 8px;

          height: 35px;
          width: 135px;

          font-size: 18px;
          font-weight: 600;
      }

      /* =========================
           ABOUT
        ========================= */

      .about-section {
          background: #f7f7f3;
      }

      .about-image {
          /* height: 150px; */
          width: 100%;
          object-fit: cover;
          border-radius: 8px;
          box-shadow: 0 8px 15px rgba(0, 0, 0, .12);
      }

      .about-image.left {
          transform: rotate(-3deg);
      }

      .about-image.right {
          transform: rotate(3deg);
      }

      .about-content {
          text-align: center;
          padding: 0 25px;
      }

      .about-content h2 {
          font-size: 44px;
          color: #075c38;
          margin-bottom: 8px;
      }

      .about-content p {
          font-size: 22px;
          line-height: 1.7;
          color: #69756e;
      }

      .stats {
          display: flex;
          justify-content: center;
          gap: 35px;
          margin-top: 20px;
      }

      .stat h4 {
          margin: 0;
          font-weight: 700;
          color: #075c38;
          font-size: 28px;
      }

      .stat span {
          font-size: 14px;
          color: #8b958f;
          text-transform: uppercase;
      }

      /* =========================
           PROPERTY SECTION
        ========================= */

      .property-section {
          background: #efefeb;
      }

      .property-list {
          margin-top: 20px;
      }

      .property-list li {
          list-style: none;
          font-size: 16px;
          margin-bottom: 12px;
          color: #68766e;
      }

      .property-list li::before {
          content: "✓";
          color: #087243;
          font-weight: bold;
          margin-right: 8px;
      }

      .property-image {
          height: 290px;
          width: 100%;
          object-fit: cover;
          border-radius: 10px;
      }

      .property-card {
          position: relative;
      }

      .property-caption {
          position: absolute;
          bottom: 15px;
          left: 15px;
          right: 15px;

          background: rgba(240, 250, 245, .88);
          padding: 13px;
          border-radius: 9px;
      }

      .property-caption h4 {
          margin: 0;

          font-size: 12px;
          color: #075c38;
          font-weight: 700;
      }

      .property-caption p {
          margin: 3px 0 0;
          font-size: 16px;
          color: #6d7771;
      }

      /* =========================
           ROOMS
        ========================= */

      .rooms-section {
          background: #f7f7f3;
      }

      .room-card {
          background: white;
          border-radius: 9px;
          overflow: hidden;
          box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
          transition: 0.4s;
          min-height: 285px;
          transform: translateY(0px);
      }

      .room-card:hover {
          transform: translateY(-5px);
      }

      .room-image {
          width: 100%;
          height: 145px;
          object-fit: cover;
      }

      .room-info {
          padding: 12px;
      }

      .room-rating {
          font-size: 12px;
          color: #087243;
          margin-bottom: 5px;
      }

      .room-title {
          font-size: 22px;

          font-weight: 700;
          color: #075c38;
          margin-bottom: 4px;
      }

      .room-description {
          font-family: "Manrope", sans-serif;
          font-size: 12px;
          color: #7b857f;
      }

      .room-bottom {
          font-family: "Manrope", sans-serif;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12px;
      }

      .room-price {
          font-family: "Manrope", sans-serif;
          font-size: 18px;
          color: #075c38;
          font-weight: 700;
      }

      .room-price span {
          font-family: "Manrope", sans-serif;
          font-size: 18px;
          font-weight: 400;
          color: #8b958f;
      }

      .book-link {
          font-size: 16px;
          color: #075c38;
          font-weight: 700;
      }

      /* =========================
           EVENTS
        ========================= */

      .events-section {
          background: #f1f1ed;
      }

      .events-intro {
          text-align: center;
          margin-bottom: 30px;
      }

      .event-card {
          position: relative;
          height: 260px;
          overflow: hidden;
          border-radius: 10px;
          transform: translateY(0);
          transition: 0.4s;
      }

      .event-card:hover {
          transform: translateY(-5px);
      }

      .event-card img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .event-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;

          padding: 16px;

          background: linear-gradient(transparent,
                  rgba(0, 65, 40, .95));

          color: white;
      }

      .event-overlay h4 {

          font-size: 14px;
          font-weight: 700;
          margin: 0 0 4px;
      }

      .event-overlay p {
          font-size: 16px;
          margin: 0;
          opacity: .85;
      }

      /* =========================
           TESTIMONIAL
        ========================= */

      .testimonial-section {
          background: #f7f7f3;
      }

      .testimonial-images {
          display: flex;
          gap: 15px;
          align-items: center;
      }

      .testimonial-images img {
          width: 135px;
          height: 190px;
          object-fit: cover;
          border-radius: 9px;
      }

      .testimonial-images img:first-child {
          transform: rotate(-3deg);
      }

      .testimonial-images img:last-child {
          transform: rotate(4deg);
      }

      .quote {
          font-family: "Manrope", sans-serif;
          font-size: 23px;
          line-height: 1.45;
          color: #075c38;
      }

      .quote-author {
          margin-top: 20px;
          font-size: 18px;
          color: #68766e;
      }

      /* =========================
           DESTINATIONS
        ========================= */

      .destination-section {
          background: #f1f1ed;
      }

      .destination-card {
          height: 190px;
          border-radius: 9px;
          overflow: hidden;
          position: relative;
      }

      .destination-card img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .destination-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 15px;

          background: linear-gradient(transparent,
                  rgba(0, 70, 45, .9));

          color: white;
      }

      .destination-overlay h4 {

          font-size: 12px;
          margin: 0;
      }

      .destination-overlay p {
          margin: 3px 0 0;
          font-size: 14px;
      }

      /* =========================
           CTA
        ========================= */

      .cta-section {
          background: #f7f7f3;
      }

      .cta-box {
          min-height: 220px;
          border-radius: 12px;

          padding: 40px;

          background:
              linear-gradient(90deg,
                  rgba(0, 82, 48, .96),
                  rgba(0, 95, 56, .8)),
              url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1200&q=80");

          background-size: cover;
          background-position: center;

          color: white;
      }

      .cta-box h2 {
          font-size: 30px;
          line-height: 1.1;
          max-width: 430px;
      }

      .cta-box p {
          font-size: 22px;
          line-height: 1.6;
          max-width: 400px;
          color: rgba(255, 255, 255, .75);
      }

      .cta-buttons {
          display: flex;
          gap: 10px;
      }

      .white-btn {
          background: white;
          color: #075c38;
          border: none;
          padding: 9px 18px;
          border-radius: 30px;
          font-size: 18px;
          font-weight: 600;
      }

      .outline-btn {
          background: transparent;
          color: white;
          border: 1px solid rgba(255, 255, 255, .6);
          padding: 9px 18px;
          border-radius: 30px;
          font-size: 18px;
      }

      /* =========================
           EMAIL CTA
        ========================= */

      .email-box {
          margin-top: 35px;
          padding: 20px 25px;
          background: white;
          border-radius: 10px;

          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      .email-box h5 {

          font-size: 12px;
          color: #075c38;
          margin: 0 0 3px;
      }

      .email-box p {
          margin: 0;
          font-size: 16px;
          color: #87918b;
      }

      .email-input {
          width: 230px;
          height: 35px;
          border: 1px solid #e1e4e0;
          border-radius: 20px;
          padding: 0 14px;
          font-size: 18px;
      }

      .email-btn {
          height: 35px;
          border: none;
          background: #075c38;
          color: white;
          border-radius: 20px;
          padding: 0 20px;
          font-size: 18px;
      }

      /* =========================
           FOOTER
        ========================= */

      footer {
          background: #f0f0ec;
          padding: 60px 0 30px;
          border-top: 1px solid #e5e5df;
      }

      .footer-brand h3 {
          font-size: 22px;
          color: #075c38;
      }

      .footer-brand p {
          font-size: 18px;
          line-height: 1.7;
          color: #758078;
          max-width: 280px;
      }

      .footer-heading {

          font-weight: 700;
          font-size: 22px;
          color: #075c38;
          margin-bottom: 15px;
      }

      .footer-links {
          list-style: none;
          padding: 0;
      }

      .footer-links li {
          font-size: 16px;
          color: #7a837e;
          margin-bottom: 8px;
      }

      .footer-bottom {
          margin-top: 35px;
          padding-top: 20px;
          border-top: 1px solid #dddeda;

          display: flex;
          justify-content: space-between;

          font-size: 14px;
          color: #8a918c;
      }
      .footer-links li a{
        color: #004f2e;
      }