/* ========== Google Fonts Import ========== */
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Source+Sans+Pro:wght@200;300;400;600;700;900&family=Playfair+Display:wght@700&family=Poppins:wght@400;500;600&display=swap');

    /* ========== GLOBAL ========== */
    body {
      font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f9f9f9;
      color: #000000;
      line-height: 1.7;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .section-heading {
      font-family: "Playfair Display", serif;
      font-weight: 700;
      color: #c3a165 !important;
      margin-bottom: 15px;
      letter-spacing: 0.5px;
    }

    p {
      color: #000000 !important;
      font-size: 1.05rem;
      margin-bottom: 1rem;
    }

    a {
      text-decoration: none;
      transition: 0.3s;
    }

    .text-gold {
      color: #c3a165;
    }

    .bg-gold {
      background: #c3a165;
    }

    /* ========== FLOATING BUTTONS ========== */
    .whatsapp-float {
      position: fixed;
      bottom: 30px;
      left: 30px;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #25D366;
      color: #fff;
      text-decoration: none;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      animation: pulse-green 2s infinite;
    }

    .whatsapp-float:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
      color: #fff;
    }

    .whatsapp-float svg {
      width: 32px;
      height: 32px;
      fill: #fff;
    }

    .whatsapp-float .tooltip-text {
      position: absolute;
      left: 75px;
      background: #333;
      color: #fff;
      padding: 5px 12px;
      border-radius: 5px;
      font-size: 14px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      font-family: "Poppins", sans-serif;
    }

    .whatsapp-float:hover .tooltip-text {
      opacity: 1;
      visibility: visible;
    }

    .whatsapp-float .tooltip-text::after {
      content: '';
      position: absolute;
      left: -5px;
      top: 50%;
      transform: translateY(-50%);
      border-right: 5px solid #333;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    .phone-float {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #0d6efd;
      color: #fff;
      text-decoration: none;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      animation: pulse-blue 2s infinite;
    }

    .phone-float:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
      color: #fff;
    }

    .phone-float svg {
      width: 26px;
      height: 26px;
      fill: #fff;
    }

    .phone-float .tooltip-text {
      position: absolute;
      right: 75px;
      background: #333;
      color: #fff;
      padding: 5px 12px;
      border-radius: 5px;
      font-size: 14px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      font-family: "Poppins", sans-serif;
    }

    .phone-float:hover .tooltip-text {
      opacity: 1;
      visibility: visible;
    }

    .phone-float .tooltip-text::after {
      content: '';
      position: absolute;
      right: -5px;
      top: 50%;
      transform: translateY(-50%);
      border-left: 5px solid #333;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    @keyframes pulse-green {
      0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
      }

      70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
      }
    }

    @keyframes pulse-blue {
      0% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
      }

      70% {
        box-shadow: 0 0 0 15px rgba(13, 110, 253, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
      }
    }

    @media (max-width: 576px) {

      .whatsapp-float,
      .phone-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
      }

      .whatsapp-float svg {
        width: 24px;
        height: 24px;
      }

      .phone-float svg {
        width: 20px;
        height: 20px;
      }

      .whatsapp-float {
        left: 20px;
      }

      .phone-float {
        right: 20px;
      }

      .whatsapp-float .tooltip-text,
      .phone-float .tooltip-text {
        display: none;
      }
    }

    /* ========== NAVBAR (Full-width bg + centered content) ========== */
    .navbar {
      background-color: #ffffff !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      padding-top: 0;
      padding-bottom: 0;
    }

    .nav-box {
      max-width: 1140px;
    }

    .nav-logo {
      height: 80px;
      width: auto;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    .nav-menu {
      font-size: 13.4px;
    }

    .navbar-nav .nav-link {
      font-family: "Poppins", sans-serif;
      font-weight: 600;
      color: #000000 !important;
      transition: color 0.3s ease;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link.active {
      color: #cfa97a !important;
    }

    /* Navbar phone icon */
    .nav-phone-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .nav-phone-link svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
      transition: fill 0.3s;
    }

    .nav-phone-link:hover svg {
      fill: #cfa97a;
    }

    .navbar-toggler {
      border: 1px solid #c3a165;
      padding: 0.25rem 0.5rem;
    }

    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c3a165' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* ========== HERO BANNER ========== */
    .hero-banner {
      background-image: url("../../assets/images/around-resort/hero1.jpg");
      background-color: #c3a165;
      background-size: cover;
      background-position: center;
      height: 60vh;
      min-height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-top: 80px;
    }

    .hero-banner::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }

    .hero-banner .container {
      position: relative;
      z-index: 2;
    }

    .hero-title {
      color: #ffffff !important;
      font-size: 3.5rem;
      font-weight: bold;
      letter-spacing: 1px;
      text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
      font-family: "Playfair Display", serif;
    }

    /* ========== RESORT SECTION ========== */
    .resort-section {
      padding: 80px 15px 60px;
      background: #fff;
      border-radius: 10px;
      margin-bottom: 40px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    }

    .resort-section img {
      width: 100%;
      height: 350px;
      object-fit: cover;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .resort-section img:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
    }

    .event-head h3 {
      font-size: 2rem;
      color: #c3a165 !important;
      font-weight: bold;
      text-align: center;
      margin-bottom: 30px;
      position: relative;
      padding-bottom: 20px;
    }

    .event-head h3::before {
      content: "";
      position: absolute;
      background-color: #c3a165;
      height: 3px;
      width: 100px;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

    .section-heading a {
      color: #c3a165 !important;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .section-heading a:hover {
      color: #a7853f !important;
      text-decoration: underline;
    }

    /* ========== FOOTER ========== */
    .site-footer {
      background: #121212;
      color: #ccc;
    }

    .footer-logo {
      max-width: 160px;
    }

    .social-icon {
      width: 35px;
      height: 35px;
      background: #d4af37;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: 0.3s ease;
    }

    .social-icon svg {
      width: 16px;
      height: 16px;
      fill: #121212;
    }

    .social-icon:hover {
      background: #fff;
    }

    .footer-title {
      color: #d4af37;
      border-left: 4px solid #d4af37;
      padding-left: 10px;
      font-family: "Playfair Display", serif;
      font-weight: 700;
    }

    .footer-text {
      color: #ccc;
      text-decoration: none;
      transition: 0.3s;
    }

    .footer-text:hover {
      color: #d4af37;
    }

    .footer-line {
      border-color: rgba(255, 255, 255, .1);
    }

    /* Footer contact icons */
    .footer-contact li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 10px;
      color: #ccc;
      font-size: 0.95rem;
    }

    .footer-contact li svg {
      width: 16px;
      height: 16px;
      fill: #d4af37;
      flex-shrink: 0;
      margin-top: 4px;
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 991px) {
      .hero-banner {
        height: 50vh;
        min-height: 350px;
        margin-top: 70px;
      }

      .hero-title {
        font-size: 2.5rem;
      }

      .resort-section img {
        height: 300px;
      }

      .nav-logo {
        height: 70px;
      }
    }

    @media (max-width: 767px) {
      .hero-banner {
        height: 40vh;
        min-height: 300px;
        margin-top: 60px;
      }

      .hero-title {
        font-size: 2rem;
      }

      .resort-section img {
        height: 240px;
      }

      .nav-logo {
        height: 55px;
      }

      .event-head h3 {
        font-size: 1.6rem;
      }
    }

    @media (max-width: 575px) {
      .hero-banner {
        height: 35vh;
        min-height: 250px;
      }

      .hero-title {
        font-size: 1.8rem;
      }

      .resort-section img {
        height: 200px;
      }
    }