@font-face {
    font-family: 'AlexBrush';
    src: url('../fonts/alex/AlexBrush-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  :root {
    --white: #fdf5e9;
    --black: #191823;
    --neutral: #191823;
    --neutral6: #76748E;
    --neutral8: #48455E;
    --neutral9:#2C2A3B;
    --primary: #3d5347;
    --background: var(--white);
    --border: #EEEEED;
    --shadow: #CCCCCC;
  }

  html, body {
    margin: 0;
    height: 100%;
    scroll-behavior: smooth; /* Optional for smooth scroll on anchor clicks */
    overflow: hidden; /* Optional: prevents default scrollbars */
  }
  

body {
    text-align: center;
    background-color: var(--background);
    color: var(--black);
    font-family: "AlexBrush", serif;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}
section:not(:last-child) {
    min-height:100vh;
    scroll-snap-align: start;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(61, 83, 71, 0.5); 
    z-index: 1;
  }
.background-image {
    background-color: var(--primary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
  }
  .hero {
      background-image: url('../images/venue_dock.jpg');
    }
  
  .hero .overlay {
      background-color: rgba(61, 83, 71, 0.9); 
    }
  .hero-content {
    position: relative;
    z-index: 2;
  }
  .hero-content img {
    width:250px;
  }
  
  .hero-content .header {
    color: var(--white);
    font-size: 4rem;
    font-weight: normal;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 0 1rem;
    line-height:0.8;
  }
  .hero-content .header > * {
    display: block;
}
.hero-content .header > .name {
    font-size:2em;
}
.hero-content .header > .subtitle {
    font-size: 0.5em;
    font-family:  "Bodoni Moda", serif;
    font-weight:100;
    text-transform: uppercase;
    margin-top:30px;
}

.img_text {
    display: flex;
    height: 100vh;
  }
  .img_text .title {
      font-size:2em;
  }
  .img_text .subtitle {
      font-size:1em;
  }
  
  .column {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:40px;
  }
  
  .left .image-border {
    padding: 10px;
    border: 20px double var(--primary);
    margin: 150px;
  }
  
  .left img {
    max-width: 100%;
    height: auto;
    display: block;
    max-height: 80vh;
  }
  
  .right .text-content {
    text-align: center;
  }
  
  .introduction {
    background-image: url('../images/venue_ceremony.jpeg');
  }
  .introduction .overlay {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  .introduction .content {
    width: calc(90% - 140px);
    height: calc(80% - 40px);
    background-color: rgba(61, 83, 71, 0.8); 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    flex-direction:column;
    padding:20px 70px;
  }
  .introduction .title {
  font-size: 2em;
  }
  .introduction .body {
    font-family:  "Bodoni Moda", serif;
    font-size:0.7em;
    margin-top:1em;
  }
  .schedule {
    flex-direction: column;
  }
  .schedule .title {
    font-size:2em;
  }
  .card-carousel { 
    font-family:  "Bodoni Moda", serif;
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 400px;
    margin: 40px auto 10px;
    perspective: 1000px;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .card {
    position: absolute;
    width: 300px;
    height: 100%;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.5s ease, z-index 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    opacity: 0.8;
    flex-direction: column;
    justify-content: flex-start;
  }
  .card .title {
    font-size: 1em;
    display: block;
    padding: 15px 5px;
    background-color: var(--primary);
    color: var(--white);
    width: calc(100% - 10px);
    overflow: hidden;
    border-radius: 10px 10px 0px 0px;
    margin-bottom: 20px;
}
.card .title i {
    margin-right:5px;
}
  
  .card:nth-child(1) {
    transform: translateX(-80px) scale(0.9);
    z-index: 1;
  }
  .card:nth-child(2) {
    transform: translateX(0) scale(1);
    z-index: 2;
    opacity: 1;
  }
  .card:nth-child(3) {
    transform: translateX(80px) scale(0.9);
    z-index: 1;
  }
  
  .carousel-controls {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  
  .carousel-controls button {
    background: #333;
    color: var(--white);
    border: none;
    font-size: 24px;
    margin: 0 10px;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
  }
  
  .card .icon {
    width: 62px;
    height: 62px;
    background-image: url(../images/icons_green.png);
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 480px 480px;
  }
  
  /* Adjust the background-position to show the right icon */
  
  .card .icon.champagne {
    background-position: -320px -20px;
  }
  .card .icon.ring {
    background-position: -400px -320px;
  }
  
  .card .icon.drink {
    background-position: -400px -400px;
  }



.rsvp {
    display: flex;
    height: 100vh;
    background-color: var(--primary);
    color: var(--background);
  }
  
  .rsvp .left-column, .rsvp .right-column {
    flex: 1;
  }
  
  .rsvp .left-column {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    flex-direction: column;
  }
  
  .rsvp .title {
    font-size: 2em;
  }
  
  .rsvp .right-column {
    position: relative;
    background-image: repeating-linear-gradient(to right, var(--background), var(--background) 60px, transparent 0px, transparent 120px);
    background-size: 100% 100%;
    height: 100vh;
  }

  .accommodation {
    background-image: url('../images/hotel_night.jpg');
  }
  .accommodation .overlay {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    }
    .accommodation .title {
        color: var(--white);
        font-size: 1.5em;
        margin-bottom: 40px;
    }
    .accommodation .columns {
        height: calc(80% - 80px);
        display: flex;
        align-items: center;
        color: var(--white);
    }
    .accommodation .column {
        width: 300px;
        height: 100%;
        background-color: rgba(61, 83, 71, 0.8);
        padding: 20px 70px;
        margin: 40px;
    }
  
    .footer {
        background-color: var(--primary);
        color:var(--white);
    }
  @media (max-width: 768px) {
    .hero-content h1 {
      font-size: 2.5rem;
    }
  }