@charset "UTF-8";

      :root {
          --brand: #e01c72;
          --brand-dark: #ad0e53;
          --brand-soft: #fff0f6;
          --ink: #21191c;
          --muted: #73696d;
          --sand: #f1efee;
          --sand-2: #efe5d5;
          --gold: #c99b50;
          --white: #fff;
          --border: #eadfe2;
          --success: #188b59;
          --shadow: 0 22px 60px rgba(34, 17, 24, .12);
          --radius: 24px;
      }

      @media (min-width: 1400px) {
          .container {
              max-width: 1320px;
          }
      }

      .section {
          position: relative;
          padding: 70px 0
      }

      .btn {
          min-height: 50px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          padding: 12px 20px;
          border-radius: 12px;
          border: 1px solid transparent;
          font-weight: 800;
          transition: .22s ease;
          cursor: pointer;
      }

      .btn:hover {
          transform: translateY(-2px)
      }

      .btn-primary {
          color: #fff;
          background: linear-gradient(135deg, var(--brand), var(--brand-dark));
          box-shadow: 0 12px 26px rgba(224, 28, 114, .25);
      }

      .btn-primary:hover {
          border-color: var(--brand) !important;
      }

      .btn-light {
          background: #fff;
          color: var(--ink);
          border-color: rgba(255, 255, 255, .42);
      }

      .btn-outline {
          color: var(--brand);
          background: #fff;
          border-color: rgba(224, 28, 114, .35);
      }

      .icon {
          width: 20px;
          height: 20px;
          flex: 0 0 20px;
      }

      /* Header */
      .lp-header {
          position: sticky;
          top: 0;
          z-index: 50;
          background: rgba(255, 255, 255, .95);
          backdrop-filter: blur(14px);
          border-bottom: 1px solid rgba(36, 24, 29, .07);
      }

      .header-inner {
          min-height: 78px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 24px;
      }

      .brand-logo img {
          height: 54px;
          width: auto
      }

      .header-actions {
          display: flex;
          align-items: center;
          gap: 10px
      }

      .header-actions .btn {
          min-height: 44px;
          padding: 10px 16px;
          border-radius: 10px
      }

      .wa {
          color: #fff;
          background: #1fa463
      }

      .call {
          background: #fff;
          border-color: var(--border);
          color: var(--ink)
      }

      /* Hero */
      .hero {
          position: relative;
          overflow: hidden;
          background:
              linear-gradient(90deg, rgba(22, 13, 17, .90) 0%, rgba(22, 13, 17, .78) 44%, rgba(22, 13, 17, .55) 100%),
              url("https://ranntentresort.com/frontend_assets/images/rann/g42.webp") center/cover no-repeat;
          isolation: isolate;
          margin-top: 112px;
      }

      .hero::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: -1;
          background:
              radial-gradient(circle at 15% 10%, rgba(224, 28, 114, .20), transparent 28%),
              linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, .15));
      }

      .hero-inner {
          padding: 100px 0;
      }

      .hero-copy {
          color: #fff
      }

      .hero .sec-title {
          margin-bottom: 0;
      }

      .hero h1 {
          margin: 0;
          color: #fff;
          font-size: 75px;
          font-weight: 700;
          line-height: 85px;
          max-width: 820px;
      }

      .hero h2 {
          margin: 22px 0 0;
          max-width: 800px;
          font-size: 24px;
          line-height: 1.4;
          font-weight: 600;
          color: #fff;
      }

      .hero p {
          max-width: 760px;
          color: rgba(255, 255, 255, .82);
          margin: 20px 0 0;
      }

      .price-strip {
          margin-top: 30px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 14px;
      }

      .price-pill {
          display: inline-flex;
          align-items: baseline;
          gap: 8px;
          background: rgba(255, 255, 255, .11);
          border: 1px solid rgba(255, 255, 255, .2);
          backdrop-filter: blur(10px);
          padding: 14px 16px;
          border-radius: 14px;
      }

      .price-pill small {
          font-size: .9rem;
          color: rgba(255, 255, 255, .72);
          font-weight: 700
      }

      .price-pill strong {
          font-size: 1.45rem
      }

      .hero-points {
          margin-top: 18px;
          display: flex;
          flex-wrap: wrap;
          gap: 8px 16px;
          color: #fff;
          font-size: 14px;
          font-weight: 700;
      }

      .hero-points span {
          display: flex;
          align-items: center;
          gap: 7px
      }

      .hero-points i {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          display: grid;
          align-content: center;
          justify-content: center;
          background: var(--brand);
          font-style: normal;
          font-size: .72rem;
      }

      .hero-cta {
          display: flex;
          flex-wrap: wrap;
          gap: 11px;
          margin-top: 28px
      }

      .hero-note {
          font-size: 15px !important;
          margin-top: 14px !important;
          color: rgba(255, 255, 255, .65) !important
      }

      /* Lead form */
      .lead-card {
          background: rgba(255, 255, 255, .98);
          border-radius: 14px;
          padding: 25px;
          box-shadow: 0 30px 90px rgba(0, 0, 0, .30);
          border: 1px solid rgba(255, 255, 255, .7);
      }

      .lead-card .mini {
          margin: 0 0 4px;
          color: var(--brand);
          font-size: .78rem;
          font-weight: 800;
          letter-spacing: .12em;
          text-transform: uppercase;
      }

      .lead-card h2 {
          margin: 0;
          color: var(--ink);
          font-size: 26px;
          line-height: 1.16;
      }

      .lead-card .intro {
          margin: 10px 0 20px;
          color: var(--muted);
          font-size: .91rem;
      }

      .form-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 12px
      }

      .field {
          display: flex;
          flex-direction: column;
          gap: 7px
      }

      .field.full {
          grid-column: 1/-1
      }

      .field label {
          font-size: .82rem;
          font-weight: 800;
          color: #4a3d42;
      }

      .field input,
      .field select {
          display: block !important;
          width: 100%;
          min-height: 48px;
          border: 1px solid #ded3d6;
          background: #fff;
          border-radius: 10px;
          padding: 11px 12px;
          color: var(--ink);
          outline: none;
          transition: .18s;
      }

      .field .nice-select {
          display: none !important;
      }

      .field input:focus,
      .field select:focus {
          border-color: var(--brand);
          box-shadow: 0 0 0 4px rgba(224, 28, 114, .08);
      }

      .lead-card .btn {
          width: 100%;
          margin-top: 14px
      }

      .form-note {
          margin-top: 12px;
          padding-top: 12px;
          border-top: 1px dashed #ded3d6;
          color: #665a5e;
          font-size: .78rem;
      }

      .form-trust {
          display: grid;
          grid-template-columns: 1fr;
          gap: 5px;
          margin-top: 10px;
          color: #4f4448;
          font-size: .78rem;
          font-weight: 700;
      }

      .form-trust span::before {
          content: "✓";
          color: var(--success);
          margin-right: 7px
      }

      /* Inclusions */
      .included {
          background: var(--sand)
      }

      .feature-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 18px;
          margin-top: 42px;
      }

      .feature-card {
          position: relative;
          overflow: hidden;
          background: #fff;
          border: 1px solid #eee4d8;
          border-radius: 20px;
          padding: 26px;
          min-height: 210px;
          transition: .25s;
      }

      .feature-card:hover {
          transform: translateY(-5px);
          box-shadow: var(--shadow)
      }

      .feature-icon {
          width: 52px;
          height: 52px;
          border-radius: 15px;
          display: grid;
          place-items: center;
          background: var(--brand-soft);
          color: var(--brand);
          margin-bottom: 20px;
      }

      .feature-icon svg {
          width: 25px;
          height: 25px
      }

      .feature-card h3 {
          margin: 0;
          font-size: 1.12rem;
          font-size: 25px;
          line-height: 33px;
          font-weight: 700;
      }

      .feature-card p {
          margin: 8px 0 0;
      }

      /* Packages */
      .package-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 26px;
          margin-top: 44px;
      }

      .package-card {
          border: 1px solid var(--border);
          border-radius: 26px;
          overflow: hidden;
          background: #fff;
          box-shadow: 0 14px 40px rgba(40, 22, 30, .07);
      }

      .package-media {
          position: relative;
          height: 260px;
          overflow: hidden;
      }

      .package-media img {
          width: 100%;
          height: 100%;
          object-fit: cover
      }

      .package-badge {
          position: absolute;
          left: 18px;
          top: 18px;
          padding: 8px 12px;
          border-radius: 999px;
          background: rgba(255, 255, 255, .94);
          color: var(--brand);
          font-size: .76rem;
          font-weight: 800;
      }

      .package-content {
          padding: 28px
      }

      .package-content h3 {
          margin: 0;
          font-size: 1.75rem;
          line-height: 1.2;
          font-weight: 600;
      }

      .package-price {
          margin: 10px 0 16px;
          color: var(--brand);
          font-size: 1.3rem;
          font-weight: 700;
      }

      .package-content p {
          color: var(--muted);
          margin: 0
      }

      .check-list {
          list-style: none;
          margin: 20px 0 24px;
          padding: 0;
          display: grid;
          gap: 9px
      }

      .check-list li {
          display: flex;
          gap: 10px;
          align-items: flex-start;
          font-size: .95rem
      }

      .check-list li::before {
          content: "✓";
          display: grid;
          align-content: center;
          justify-content: center;
          width: 20px;
          height: 20px;
          flex: 0 0 20px;
          border-radius: 50%;
          background: var(--brand-soft);
          color: var(--brand);
          font-size: .72rem;
          font-weight: 900;
          margin-top: 2px;
      }

      .package-content .btn {
          width: 100%
      }

      .package-disclaimer {
          margin: 24px auto 0;
          max-width: 840px;
          color: var(--muted);
          text-align: center;
          font-size: 14px;
      }

      /* Why */
      .why {
          background: #000000;
          color: #fff;
          overflow: hidden;
      }

      .why-wrap {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 56px;
          align-items: center;
      }

      .why .sec-title h2,
      .why .sec-title p {
          color: #fff;
      }

      .why-media {
          position: relative;
          min-height: 520px;
      }

      .why-main {
          position: absolute;
          inset: 0 66px 56px 0;
          border-radius: 28px;
          overflow: hidden;
      }

      .why-main img {
          width: 100%;
          height: 100%;
          object-fit: cover
      }

      .why-float {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 48%;
          height: 250px;
          border: 8px solid #201419;
          border-radius: 22px;
          overflow: hidden;
      }

      .why-float img {
          width: 100%;
          height: 100%;
          object-fit: cover
      }

      .why-grid {
          margin-top: 32px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
      }

      .why-item {
          padding: 18px;
          border: 1px solid rgba(255, 255, 255, .12);
          border-radius: 16px;
          background: rgba(255, 255, 255, .045);
      }

      .why-item h3 {
          display: block;
          font-size: 22px;
          line-height: 33px;
          font-weight: 700;
          color: #fff;
      }


      /* Audience */
      .audience-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
          margin-top: 38px;
      }

      .audience-card {
          position: relative;
          overflow: hidden;
          min-height: 300px;
          border-radius: 24px;
          display: flex;
          align-items: flex-end;
          color: #fff;
          padding: 28px;
      }

      .audience-card::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: -1;
          background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .82) 100%);
      }

      .audience-card::after {
          content: "";
          position: absolute;
          inset: 0;
          z-index: -2;
          background: var(--bg) center/cover no-repeat;
          transition: transform .35s;
      }

      .audience-card:hover::after {
          transform: scale(1.05)
      }

      .audience-card h3 {
          margin: 0;
          color: #fff;
      }

      .audience-card p {
          margin: 6px 0 0;
          color: #fff;
      }

      /* Gallery */
      .gallery {
          background: var(--sand)
      }

      .gallery-grid {
          display: grid;
          grid-template-columns: 1.25fr .8fr .8fr;
          grid-template-rows: 240px 240px;
          gap: 14px;
          margin-top: 40px;
      }

      .gallery-item {
          overflow: hidden;
          border-radius: 20px;
          position: relative
      }

      .gallery-item:first-child {
          grid-row: 1/3
      }

      .gallery-item:last-child {
          grid-column: 1/-1;
          height: 220px
      }

      .gallery-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: .35s
      }

      .gallery-item:hover img {
          transform: scale(1.04)
      }

      .gallery-label {
          position: absolute;
          left: 14px;
          bottom: 14px;
          padding: 8px 11px;
          border-radius: 10px;
          background: rgba(20, 13, 16, .72);
          backdrop-filter: blur(8px);
          color: #fff;
          font-size: .76rem;
          font-weight: 800;
      }

      .gallery-cta {
          text-align: center;
          margin-top: 26px
      }

      /* Reviews */
      .google-reviews {
          position: relative;
          overflow: hidden;
          background: #fff;
      }

      .reviews-carousel {
          display: flex;
      }

      .reviews-carousel .owl-stage {
          display: flex;
      }

      .reviews-carousel .owl-item {
          display: flex;
      }

      .google-review-card {
          height: 100%;
          min-height: 100%;
          padding: 28px;
          background: #fff;
          border: 1px solid #e8e8e8;
          border-radius: 18px;
      }

      .reviewer {
          display: flex;
          align-items: center;
          gap: 12px;
      }

      .review-avatar {
          width: 48px;
          height: 48px;
          flex: 0 0 48px;
          border-radius: 50%;
          background: #339432;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 600;
      }

      .reviewer-name {
          font-weight: 500;
          line-height: 1.2;
          color: #000;
      }

      .reviewer-date {
          margin-top: 3px;
          color: var(--muted);
          font-size: 12px;
      }

      .review-google-mark {
          margin-left: auto;
          width: 29px;
          height: 29px;
          border-radius: 50%;
          display: grid;
          place-items: center;
          background: #f7f7f7;
          border: 1px solid #ececec;
          color: #4285f4;
          font: 900 .92rem Arial, sans-serif;
      }

      .review-stars {
          margin-top: 18px;
          color: #fbbc04;
          letter-spacing: 1.5px;
          font-size: 18px;
      }

      .review-text {
          margin: 14px 0 0;
          color: #5f5358;
          font-size: 16px;
          line-height: 1.7;
      }

      .review-source {
          margin-top: auto;
          padding-top: 18px;
          color: #8a7e83;
          font-size: .75rem;
          font-weight: 700;
      }

      #googleReviewsCarousel .owl-nav {
          display: none !important;
      }

      #googleReviewsCarousel .owl-dots {
          display: none !important;
      }

      /* FAQ */
      .faq {
          background: var(--sand);
      }

      .faq-list {
          max-width: 900px;
          margin: 36px auto 0;
      }

      .faq .accordion {
          display: grid;
          gap: 12px;
      }

      .faq .accordion-item {
          border: 1px solid var(--border);
          border-radius: 16px;
          overflow: hidden;
          background: #fff;
      }

      .faq .accordion-button {
          padding: 20px;
          font-size: 22px;
          line-height: 32px;
          font-weight: 600;
          transition: all 500ms ease;
          color: #161616;
          background: #fff;
          box-shadow: none;
      }

      .faq .accordion-button:not(.collapsed) {
          color: var(--brand);
          background: #fff;
          box-shadow: none;
      }

      .faq .accordion-button:focus {
          box-shadow: none;
      }

      .faq .accordion-button::after {
          width: 30px;
          height: 30px;
          flex-shrink: 0;
          border-radius: 50%;
          background-color: var(--brand-soft);
          background-size: 14px;
          background-position: center;
      }

      .faq .accordion-body {
          padding: 0 20px 20px;
          color: var(--muted);
          line-height: 1.7;
      }

      @media (max-width: 767px) {
          .faq-list {
              margin-top: 25px;
          }

          .faq .accordion-button {
              padding: 17px 16px;
              font-size: 15px;
          }

          .faq .accordion-body {
              padding: 0 16px 18px;
              font-size: 14px;
          }
      }


      /* CTA */
      .final-cta {
          padding: 78px 0;
          background:
              linear-gradient(90deg, rgba(30, 18, 23, .95), rgba(30, 18, 23, .76)),
              url("https://ranntentresort.com/frontend_assets/images/rann/gallery55.webp") center/cover no-repeat;
          color: #fff;
      }

      .final-wrap {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 36px;
      }

      .final-copy {
          max-width: 760px
      }

      .final-cta h2,
      .final-cta p {
          color: #fff;
      }

      .final-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: 24px
      }

      /* Mobile sticky */
      .mobile-dock {
          display: none
      }

      @media (max-width: 980px) {
          .hero-inner {
              padding: 70px 0;
          }

          .hero-copy {
              max-width: 820px
          }

          .lead-card {
              max-width: 720px
          }

          .feature-grid {
              grid-template-columns: 1fr 1fr
          }

          .why-wrap {
              grid-template-columns: 1fr
          }

          .why-media {
              min-height: 440px
          }

      }

      @media (max-width: 760px) {
          .container {
              width: min(100% - 28px, 1180px);
              padding: 0;
          }

          .section {
              padding: 68px 0
          }

          .header-inner {
              min-height: 70px
          }

          .brand-logo img {
              height: 46px
          }

          .header-actions .call {
              display: none
          }

          .header-actions .btn {
              font-size: .82rem;
              padding: 9px 12px
          }

          .hero {
              background-position: center
          }

          .hero-inner {
              padding: 52px 0
          }

          .hero h1 {
              font-size: 38px;
              line-height: 42px;
          }

          .hero h2 {
              font-size: 1.05rem
          }

          .form-grid {
              grid-template-columns: 1fr
          }

          .lead-card {
              padding: 22px;
              border-radius: 20px
          }

          .feature-grid,
          .package-grid,
          .audience-grid {
              grid-template-columns: 1fr
          }

          .package-media {
              height: 230px
          }

          .gallery-grid {
              grid-template-columns: 1fr 1fr;
              grid-template-rows: 260px 190px 190px;
          }

          .gallery-item:first-child {
              grid-column: 1/-1;
              grid-row: auto
          }

          .gallery-item:last-child {
              grid-column: 1/-1;
              height: 190px
          }

          .why-main {
              inset: 0 30px 42px 0
          }

          .why-float {
              width: 52%;
              height: 190px
          }

          .why-grid {
              grid-template-columns: 1fr
          }

          .final-wrap {
              display: block
          }

          .mobile-dock {
              position: fixed;
              left: 12px;
              right: 12px;
              bottom: 12px;
              z-index: 70;
              display: grid;
              grid-template-columns: 1fr 1fr 1.2fr;
              gap: 7px;
              padding: 7px;
              background: rgba(255, 255, 255, .95);
              backdrop-filter: blur(14px);
              border: 1px solid rgba(32, 20, 25, .09);
              box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
              border-radius: 16px;
          }

          .mobile-dock a {
              min-height: 46px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 11px;
              font-weight: 900;
              font-size: .78rem;
          }

          .mobile-dock .m-call {
              background: #f4eff1
          }

          .mobile-dock .m-wa {
              background: #1fa463;
              color: #fff
          }

          .mobile-dock .m-book {
              background: var(--brand);
              color: #fff
          }
      }

      @media (max-width: 520px) {
          .header-actions .wa span {
              display: none
          }

          .header-actions .wa {
              width: 44px;
              padding: 0
          }

          .hero-cta .btn {
              width: 100%
          }

          .price-strip {
              align-items: stretch
          }

          .price-pill {
              width: 100%;
              justify-content: center
          }

          .gallery-grid {
              grid-template-columns: 1fr;
              grid-template-rows: 260px repeat(4, 190px)
          }

          .gallery-item:first-child {
              grid-column: auto
          }

          .gallery-item:last-child {
              grid-column: auto;
              height: 190px
          }
      }