@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

body {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:20px;
}

/* Prevent horizontal overflow on mobile */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}


.container {
    padding:5vw;
}
.map-container {
  position: relative;
  width: 100%;
  /* 16:9 aspect ratio */
  padding-bottom: 56.25%; 
  height: 0;
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#invitation {
      background-color: #f8f9fa;
}

.fa {
     color:#ffffff;
 }

    .full-vh {
      height: 100vh;
    }

    .hero-section {
      height: 100vh;
      min-height: 600px; /* Minimum height for very small screens */
/*transition: opacity 10s ease, transform 10s ease;*/
    }

    /* Initial loading state */
    .hero-section .bg-image {
      opacity: 0.3;
      filter: saturate(0);
       transform: scale(1);
    }

    /* Loaded state */
    .hero-section.loaded .bg-image {
      opacity: 1;
      filter: saturate(0.8);
      transform: scale(1.2);
      transition: opacity 2s ease, transform 6s ease, filter 4s ease;
    } 


.hero-title {
 
  opacity: 0;
  font-size:7vh;
  padding-top:20px;
}

.hero-title-small {
    
  opacity: 0;
  font-size:5vh;
  margin-top:-10px;
  line-height:1;
 }
  
  
  .hero-title, .hero-title-small {
   
  opacity: 0;
  transform: translateY(-10%);
  animation: heroFadeDown 4s ease forwards, opacity 6s ease;
  animation-delay: 0.2s;
}

@keyframes heroFadeDown {
  to {
    opacity: 1;
    transform: translateY(5vh);
  }
}

    /* Ensure consistent background image display */
    .hero-section .bg-image {
      background-attachment: scroll !important;
    }


    @media (min-width: 1200px) {
      .hero-section .bg-image {
        background-size: cover !important;
        background-position: center center !important;
      }
    } 
 
   .hide {
      display: none !important;
  }