body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding-top: 90px;
    background-color: #fff;
  }

  /* 🌿 Navbar */
  .custom-navbar {
    background-color: #ffffffff;
    height: 85px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: 0.3s ease;
  }

  .navbar-nav.mx-auto {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }


  /* Logo */
  .logo {
    height: 65px;
    width: 65px;
    
    object-fit: cover;
    border:none;
  }

  /* Brand Text */
  .brand-text {
    font-family: 'Great Vibes', cursive;
    font-size: 32px;
    color: #3b3b3b;
  }

  /* Nav Links */
  .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    font-weight: 500;
    color: #4d3f2b !important;
    transition: 0.3s ease;
    position: relative; /* ADD THIS */
  }

  .nav-link:hover {
    color: #3ba852 !important;
  }

  /* Underline Effect */
  .nav-link::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #3ba852;
    transition: width 0.3s ease;
  }

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

  /* Hamburger */
  .navbar-toggler {
    color: #4d3f2b;
    background: none;
  }

  /* 🌸 SIDE NAV */
  .side-nav {
    position: fixed;
    left: -270px;
    width: 250px;
    height: 100vh;
    background-color: #f4f8ef;
    box-shadow: 3px 0 10px rgba(0,0,0,0.1);
    transition: 0.3s ease;
    z-index: 2000;
    padding-top: 90px;
  }

  .side-nav.active {
    left: 0;
  }

  .side-nav-header {
    background: #f4f8ef;
    border-bottom: 1px solid #ccc;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .side-nav ul li {
    margin: 20px 0;
  }

  .side-nav ul li a {
    display: flex;
    align-items: center;
    font-size: 18px;
    gap: 10px;
    color: #4d3f2b;
    text-decoration: none;
    transition: color 0.3s;
  }

  .side-nav ul li a:hover {
    color: #3ba852;
  }

  /* Book Now button */
  .contact-btn {
    background-color: #a4d378; /* green button */
    color: #ffffff; /* text color */
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #3ff366;
  }

  .contact-btn:hover {
    
    text-decoration: none;
    border-color: #2de54a;
  }

  .contact-btn .material-symbols-outlined {
    font-size: 20px;
    vertical-align: middle;
  }

  /* Overlay */
  #overlay {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0,0,0,0.4);
    z-index: 1500;
  }

  #overlay.active {
    display: block;
  }


  /* 📱 MOBILE COLLAPSED NAVBAR BACKGROUND WITH FADE-IN LEFT */
  @media (max-width: 991px) {
    .navbar-collapse {
      background-color: #ffffffff;       /* section background */
      height: 400px;                     /* fixed height */
      margin-top: 470px;                 /* distance from top */
      border-radius: 0 0 10px 10px;      /* rounded bottom corners */
      width: 100vw;                      /* full viewport width */
      left: 0;                            /* align to left edge */
      position: absolute;                 /* ensure full width positioning */

      /* Fade-in from left for the entire section */
      opacity: 0;
      transform: translateX(-50px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    /* When menu is opened */
    .navbar-collapse.show {
      opacity: 1;
      transform: translateX(0);
    }

    .navbar-nav.mx-auto {
      flex-direction: column;
      width: 100%;                        /* make nav items take full width */
      align-items: center;                 /* center links horizontally */
    }

    /* Fade-in from left for each link */
    .navbar-nav.mx-auto .nav-link {
      opacity: 0;
      transform: translateX(-20px);       /* start slightly shifted left */
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    /* Staggered fade-in for each link */
    .navbar-collapse.show .navbar-nav.mx-auto .nav-link:nth-child(1) {
      transition-delay: 0.05s;
      opacity: 1;
      transform: translateX(0);
    }

    .navbar-collapse.show .navbar-nav.mx-auto .nav-link:nth-child(2) {
      transition-delay: 0.10s;
      opacity: 1;
      transform: translateX(0);
    }

    .navbar-collapse.show .navbar-nav.mx-auto .nav-link:nth-child(3) {
      transition-delay: 0.15s;
      opacity: 1;
      transform: translateX(0);
    }

    .navbar-collapse.show .navbar-nav.mx-auto .nav-link:nth-child(4) {
      transition-delay: 0.20s;
      opacity: 1;
      transform: translateX(0);
    }

    .navbar-collapse.show .navbar-nav.mx-auto .nav-link:nth-child(5) {
      transition-delay: 0.25s;
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* 🖥️ DESKTOP: Restore navbar to normal state */
  @media (min-width: 992px) {
    .navbar-collapse {
      background-color: transparent !important;
      height: auto !important;
      margin-top: 0 !important;
      border-radius: 0 !important;
      width: auto !important;
      left: auto !important;
      position: static !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .navbar-nav.mx-auto {
      position: absolute !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      flex-direction: row !important;
      width: auto !important;
    }

    .navbar-nav.mx-auto .nav-link {
      opacity: 1 !important;
      transform: none !important;
    }

    .navbar-nav.ms-lg-auto {
      position: static !important;
    }
  }