body.index-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #413e3e; 
    z-index: 9998;
    opacity: 1;
    transition: opacity 0.5s ease-out;
  }

  body.index-page.loaded::before {
    opacity: 0;
    pointer-events: none;
  }



    
    :root { --accent-color: #AFA464;
        --accent2-color: #C28043; 
        --accent3-color: #A67D4E; 
        --accent4-color: #6B5F4A; 
        --primary-color: #D49049; 
        --dark-text-color: #3D2E1E; 
        --gray-text-color: #A19E94; 
        --button-padding-x: 16px;
        --button-padding-y: 10px;
        --font-family-body: 'Work Sans', sans-serif;
        --light-text-color: #F8F4EF;
        --dark-border-color: #583e27; 
        --light-border-color: #FDF8F4; 
        --font-family-heading: 'Poppins', sans-serif; 
        --button-rounded-radius: 12px; 
        /* --dark-background-color: #3D2E1E; 
        --light-background-color: #FDF8F4; 
        --medium-background-color: #FAEFE5;  */
        --dark-background-color: #6d5033; 
        --light-background-color: #FDF8F4; 
        --medium-background-color: #FAEFE5; 

        --header-background-color: #B59410; 
        --header-text-color: #D49049;  
        --dark-header-background-color: #553d26; 

        --test-background-color: #3D2E1E; 
        --test2-background-color: #ebcca8;
        
        
  
        --primary-button-text-color: #FFFFFF; 
        --secondary-button-bg-color: #F8E5D9; 
        --secondary-button-text-color: #D49049; 
        --primary-button-hover-bg-color: #B8783B; 
        --primary-button-hover-text-color: #FFFFFF; 
        --secondary-button-hover-bg-color: #D49049; 
        --secondary-button-hover-text-color: #FFFFFF; 


    }


    .hovered-element {
        outline: #3871E0 dashed 2px;
    }

    .clicked-element {
        outline: #3871E0 solid 2px;
    }

    .clicked-code-section {
        border: #3B82F6 solid 2px;
    }
    
    .hovered-element {
    outline: #3871E0 dashed 2px;
    }

    .clicked-element {
    outline: #3871E0 solid 2px;
    }

    .clicked-code-section {
    border: #3B82F6 solid 2px;
    }




    






    .code-section {
      padding: 4rem 0;
      background: linear-gradient(to bottom, var(--light-background-color), var(--dark-background-color));
      position: relative;
    }

    @media (min-width: 640px) {
      .code-section {
        padding: 6rem 0;
      }
    }

    .max-w-7xl {
      max-width: 80rem;
      margin: 0 auto;
      padding: 0 1rem;
    }

    @media (min-width: 640px) {
      .max-w-7xl {
        padding: 0 1.5rem;
      }
    }

    @media (min-width: 1024px) {
      .max-w-7xl {
        padding: 0 2rem;
      }
    }

    .text-center {
      text-align: center;
    }

    .mb-12 {
      margin-bottom: 3rem;
    }

    @media (min-width: 640px) {
      .mb-12 {
        margin-bottom: 4rem;
      }
    }

    .section-header span {
      display: inline-block;
      color: var(--primary-color);
      font-weight: 600;
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.75rem;
    }

    .section-header h2 {
      font-size: 1.875rem;
      font-weight: bold;
  
      margin-bottom: 1rem;
      font-family: var(--font-family-heading);
    }

    @media (min-width: 640px) {
      .section-header h2 {
        font-size: 2.25rem;
      }
    }

    @media (min-width: 1024px) {
      .section-header h2 {
        font-size: 3rem;
      }
    }

    .section-header p {
      font-size: 1.125rem;
      color: var(--gray-text-color);
      max-width: 48rem;
      margin: 0 auto;
    }

    @media (min-width: 640px) {
      .section-header p {
        font-size: 1.25rem;
      }
    }

    .services-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    @media (min-width: 768px) {
      .services-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .services-grid {
        gap: 2rem;
      }
    }

    .card-container {
      position: relative;
      min-height: 450px;
    }

    .service-card {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: white;
      border-radius: 1rem;
      overflow: hidden;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      border: 1px solid var(--light-border-color);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .service-card:hover {
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
      transform: translateY(-2px);
    }

    .service-card.is-expanded {
      z-index: 100;
      transform: scale(1.1);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      overflow: visible;
    }

    .service-image {
      position: relative;
      height: 12rem;
      overflow: hidden;
    }

    .service-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .service-card:hover .service-image img {
      transform: scale(1.1);
    }

    .image-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, var(--dark-background-color), transparent);
      opacity: 0.4;
    }

    .service-icon {
      position: absolute;
      top: 1rem;
      right: 1rem;
      width: 3rem;
      height: 3rem;
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .service-icon i {
      color: white;
      font-size: 1.25rem;
    }

    .service-content {
      padding: 1.5rem;
    }

    @media (min-width: 640px) {
      .service-content {
        padding: 2rem;
      }
    }

    .service-content {
      background-color:#FAEFE5 ;
    }
    .service-content h3 {
      font-size: 1.5rem;
      font-weight: bold;
      color: var(--dark-text-color);
  
      margin-bottom: 0.75rem;
      font-family: var(--font-family-heading);
    }

    .service-description {
      color: var(--dark-text-color);
     font-weight: 500;
      margin-bottom: 1rem;
      line-height: 1.625;
    }

    .service-features {
      list-style: none;
      margin-bottom: 1.5rem;
    }

    .service-features li {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      color: var(--dark-text-color);
      margin-bottom: 0.5rem;
    }

    .service-features i {
      margin-top: 0.25rem;
    }

    .learn-more {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 600;
      transition: gap 0.2s ease;
      text-decoration: none;
    }

    .learn-more:hover {
      gap: 0.75rem;
    }

    .extra-info {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.5s ease, opacity 0.4s ease, padding 0.4s ease, margin 0.4s ease;
      border-top: 1px solid transparent;
      margin-top: 0;
      padding-top: 0;
    }

    .service-card.is-expanded .extra-info {
      max-height: 800px;
      opacity: 1;
      border-top-color: var(--light-border-color);
      margin-top: 1.5rem;
      padding-top: 1.5rem;
    }

    .extra-info h4 {
      font-size: 1.125rem;
      font-weight: bold;
      color: var(--dark-text-color);
      margin-bottom: 0.75rem;
    }

    .extra-info p {
      color: var(--dark-text-color);
      margin-bottom: 1rem;
      line-height: 1.7;
    }

    .extra-info ul {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 0.75rem;
    }

    .extra-info li {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      color: var(--dark-text-color);
    }

    .extra-info li i {
      flex-shrink: 0; /* Prevent icon from shrinking */
      width: 1.25rem; /* Fixed width */
      height: 1.25rem; /* Fixed height to match width */
      font-size: 1rem; /* Control icon size */
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.125rem; /* Slight adjustment to align with text */
    }

    .extra-info li span {
      flex: 1; /* Allow text to take remaining space */
      line-height: 1.6; /* Consistent line height */
    }

    


    .close-btn {
      position: absolute;
      top: 1rem;
      left: 1rem;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      border: none;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: background 0.2s ease;
      backdrop-filter: blur(5px);
    }

    .service-card.is-expanded .close-btn {
      display: flex;
    }

    .close-btn:hover {
      background: rgba(0, 0, 0, 0.8);
      
    }

  .service-card.is-expanded .service-image {
    height: 35rem; /* Expanded height */
    transition: height 0.5s ease;
  }

  .service-image {
    position: relative;
    height: 12rem;
    overflow: hidden;
    transition: height 0.5s ease; /* Add smooth transition */
  }
  
















  

  /* Cocktail rows section: image + name + description, multiple rows */
  .cocktail-rows {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 128rem;
    margin-left: auto;
    margin-right: auto;
  }

  @media (min-width: 640px) {
    .cocktail-rows {
      grid-template-columns: repeat(4, 1fr);
      place-items: center;
    }
  }

  .cocktail-row-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
     background-color: #ebcca8;
    width: 100%
    
  }

  .cocktail-row-image {
    flex-shrink: 0;
    width: 7rem;
    height: 7rem;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
  }

  .cocktail-row-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .cocktail-row-text {
    min-width: 0;
  }

  .cocktail-row-name {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--dark-text-color);
    margin-bottom: 0.35rem;
    font-family: var(--font-family-heading);
  }

  .cocktail-row-desc {
    font-size: 0.9rem;
    color: var(--dark-text-color);
    line-height: 1.5;
    margin: 0;
  }










  /* Why bar section */
  .why-bar-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .why-bar-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(61, 46, 30, 0.12);
  }

  .why-bar-item:last-child {
    border-bottom: none;
  }

  .why-bar-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--primary-color);
    font-family: var(--font-family-heading);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .why-bar-title::before {
    content: "▪";
    flex-shrink: 0;
    color: var(--primary-color);
  }

  .why-bar-desc {
    font-size: 1rem;
    color: var(--test2-background-color);
    line-height: 1.65;
    margin: 0;
    padding-left: 1.25rem;
    font-weight: bold;
  }

















.gallery-container {
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
  z-index: 10;
}

/* Varied sizes for masonry effect */
.gallery-item:nth-child(6n+1) {
  grid-row: span 2;
}

.gallery-item:nth-child(8n+3) {
  grid-column: span 2;
}

.gallery-item:nth-child(12n+7) {
  grid-row: span 2;
  grid-column: span 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lightbox styles */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90%;
  position: relative;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 1001;
  transition: opacity 0.3s;
}

.lightbox-close:hover {
  opacity: 0.7;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  color: white;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 20px;
  transition: background 0.3s;
  user-select: none;
}

.lightbox-nav:hover {
  background: rgba(0, 0, 0, 0.8);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

/* Loading spinner for lightbox */
.lightbox-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 1;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 768px) {
  .gallery-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 6px;
  }

  .lightbox-nav {
      font-size: 30px;
      padding: 10px;
  }
}







































.splash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0; 
  transition: opacity 1s ease-in-out;  
  background-color: #000; 
}

.splash-overlay.fade-in {
  opacity: 1;
}

.splash-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.splash-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.close-btn-splash {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.3s;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.close-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
}



@keyframes fade-cycle {
  0%, 45% {
    opacity: 1;
  }
  50%, 95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-cycle-reverse {
  0%, 45% {
    opacity: 0;
  }
  50%, 95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.animate-fade-cycle {
  animation: fade-cycle 10s infinite;
}

.animate-fade-cycle-reverse {
  animation: fade-cycle-reverse 10s infinite;
}










#mobile-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  margin-top: 0; /* Remove any top margin */
}

/* When menu is open */
#mobile-menu.open {
  max-height: 550px;
  opacity: 1;
}

/* Mobile menu inner container */
#mobile-menu .flex {
  background: var(--dark-background-color);
  padding: 1rem;
  padding-top: 1rem; /* Adjust spacing */
}

/* Mobile menu links */
#mobile-menu a {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  display: block;
  transform: translateX(-10px);
  opacity: 0;
  transition: all 0.2s ease;
}

/* Animate links when menu opens */
#mobile-menu.open a {
  transform: translateX(0);
  opacity: 1;
}

/* Stagger animation for each link */
#mobile-menu.open a:nth-child(1) { transition-delay: 0.05s; }
#mobile-menu.open a:nth-child(2) { transition-delay: 0.1s; }
#mobile-menu.open a:nth-child(3) { transition-delay: 0.15s; }
#mobile-menu.open a:nth-child(4) { transition-delay: 0.2s; }
#mobile-menu.open a:nth-child(5) { transition-delay: 0.25s; }
#mobile-menu.open a:nth-child(6) { transition-delay: 0.3s; }
#mobile-menu.open a:nth-child(7) { transition-delay: 0.35s; }

/* Hover effect for mobile links */
#mobile-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Icon rotation animation */
#mobile-menu-toggle i {
  transition: transform 0.3s ease;
}

#mobile-menu-toggle.active i {
  transform: rotate(90deg);
}




















   /* ── Section Header ── */
    .reviews-section {
      padding: 80px 40px;
      
      margin: 0 auto;
      background-color: #ebcca8;
    }

    .section-header {
      text-align: center;
      margin-bottom: 60px;
    }


  

    .section-title em {
      font-style: italic;
      color: var(--rose);
    }

    .section-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-top: 20px;
    }

    .section-divider::before,
    .section-divider::after {
      content: '';
      height: 1px;
      width: 70px;
      background: linear-gradient(to right, transparent, var(--blush));
    }

    .section-divider::after {
      background: linear-gradient(to left, transparent, var(--blush));
    }

    .divider-ornament {
      font-size: 1rem;
      color: var(--gold);
    }

    /* ── Grid ── */
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 24px;
    }

    /* ── Card ── */
    .review-card {
      background: var(--warm-white);
      border: 1px solid var(--border);
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      transition: transform 0.35s ease, box-shadow 0.35s ease;
      animation: fadeUp 0.6s ease both;
      background-color: #FAEFE5;
    }

    .review-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 44px rgba(180, 128, 67, 0.11);
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .review-card:nth-child(1)  { animation-delay: 0.05s; }
    .review-card:nth-child(2)  { animation-delay: 0.10s; }
    .review-card:nth-child(3)  { animation-delay: 0.15s; }
    .review-card:nth-child(4)  { animation-delay: 0.20s; }
    .review-card:nth-child(5)  { animation-delay: 0.25s; }
    .review-card:nth-child(6)  { animation-delay: 0.30s; }
    .review-card:nth-child(7)  { animation-delay: 0.35s; }
    .review-card:nth-child(8)  { animation-delay: 0.40s; }
    .review-card:nth-child(9)  { animation-delay: 0.45s; }
    .review-card:nth-child(10) { animation-delay: 0.50s; }
    .review-card:nth-child(11) { animation-delay: 0.55s; }
    .review-card:nth-child(12) { animation-delay: 0.60s; }
    .review-card:nth-child(13) { animation-delay: 0.65s; }
    .review-card:nth-child(14) { animation-delay: 0.70s; }

    /* ── Image slot ── */
    .card-image-wrapper {
      flex-shrink: 0;
      width: 140px;
      overflow: hidden;
      background: #F8ECD8;
      position: relative;
    }

    .card-image-wrapper img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
      display: block;
    }

    .review-card:hover .card-image-wrapper img {
      transform: scale(1.05);
    }

    .card-image-placeholder {
      width: 100%;
      height: 100%;
      min-height: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--text-light);
      background: linear-gradient(160deg, #FDF0E3 0%, #FAEFE5 100%);
    }

    .placeholder-icon {
      font-size: 1.6rem;
      opacity: 0.45;
    }

    .placeholder-text {
      font-size: 0.62rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      opacity: 0.45;
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }

    /* ── Card body ── */
    .card-body {
      padding: 20px 22px 16px;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }

    .quote-mark {
      font-family: 'Poppins', sans-serif;
      font-size: 3.2rem;
      line-height: 0.55;
      color: var(--blush);
      margin-bottom: 10px;
      display: block;
    }

    .review-text {
      font-family: 'Work Sans', sans-serif;
      font-size: 0.85rem;
      font-weight: 300;
      line-height: 1.7;
      color: var(--text-mid);
      flex: 1;
    }

    /* ── Card footer ── */
    .card-footer {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .couple-name {
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-dark);
      letter-spacing: 0.02em;
    }

    .review-date {
      font-family: 'Work Sans', sans-serif;
      font-size: 0.67rem;
      font-weight: 300;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-light);
      white-space: nowrap;
    }

    /* ── Responsive ── */
    @media (max-width: 800px) {
      .reviews-section { padding: 50px 20px; }
      .reviews-grid { grid-template-columns: 1fr; gap: 18px; }
      .card-image-wrapper { width: 110px; }
      .review-text {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }