/* FONTS */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
  @font-face {
    font-family: 'Cursive';
    src: url('assets/font-assets/cursive/woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'Italic Extra';
    src: url('assets/font-assets/italic-extra/woff2') format('woff2'),
         url('assets/font-assets/italic-extra/woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'Basis Grotesque';
    src: url('public/assets/font-assets/basis_grotesque/basis_grotesque_regular-web.7a9ef722.woff2') format('woff2'),
         url('public/assets/font-assets/basis_grotesque/basis_grotesque_regular-web.af6d1c9f.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Sebastian Bobby';
    src: url('assets/font-assets/sebastian-bobby/SebastianBobbyAlt.woff2') format('woff2'),
         url('assets/font-assets/sebastian-bobby/SebastianBobbyAlt.woff') format('woff');
    font-weight: normal;
  }


  /*ALL for Wedsite*/

  /*!* General reset *!*/
  /** {*/
  /*  margin: 0;*/
  /*  padding: 0;*/
  /*  box-sizing: border-box;*/
  /*}*/

  .header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background-color: #a7c08a;    
      color: #000000;
      font-family: "Basis Grotesque";
      width: 100%;
      z-index: 1000;
      margin: 0;
      padding: 0 8px;
      height: 56px;
      position: fixed;
      top: 0;
  /*    animation: animation-88n7sd 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.1) both;*/
  }

  .header span {
    padding: 8px;
    font-size: medium;
    font-family: "Basis Grotesque";
    color: #06402B;
  }

html, body {
    /*overflow-x: hidden;*/
    margin: 0;
    padding: 0;
    width: 100%;
}

  /* Main container holding both sections */
  .main-container {
    display: flex;
    max-width: 100%;
    height: auto;
    flex-direction: row;
    /*overflow-x: hidden;*/
    flex-wrap: wrap; /* Prevents elements from overflowing */
  }

  /* Left section containing text */
  .left-section {
    width: 50%;
    box-sizing: border-box;
    overflow-y: auto;
    background-color: #ffe8d9;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #5f6b45; /*rgb(95, 107, 69) /* #5f6b45;  hex for color green*/
    max-width: 100%;
    overflow-x: hidden;
    /*height: 100vh;*/
  }

  /* Right section containing the image */
  .right-section {
    font-family: "Dancing Script";
    width: 50%;
    height: 100%; /* Full height of the viewport */
    position: relative; /* Fix the section on scroll */
    box-sizing: border-box;
    flex-direction: row;
  }

  .right-section img {
    width: 100%; /* Image takes full width of the right section */
    height: 100%; /* Image fills the height of the viewport */
    object-fit: cover; /* Ensures image covers the entire area */
  }

  /* Make sure the text section scrolls if needed */
  .event-title,.gallery-title h1 {
    font-size: 8rem;
    text-align: center;
    width: 100%;
    display: block;
    margin: 0;
    font-family: "Sebastian Bobby";
  }

      /*Random svg styles */
    .event-title {
      text-align: center;
      box-sizing: border-box;
      margin: 20px;
      letter-spacing: 0;
      line-height: 1;
      display: contents;
    }


  .hostedby-title{
/*    margin: 0px;*/
/*    padding: 0px;*/
/*    display: list-item;*/
  }

  .left-section p {
    font-size: 1rem;
  }

    /* Container for all the lines */
      .container {
        text-align: center; /* Center the content */
      }

     /* Handwriting effect styling for each line */
      .line {
        font-size: 5rem;
          display: block;
        align-content: center;
        font-weight: bold;
        background-image: url('assets/gold.gif'); /* Example GIF URL */
        background-size: cover; /* Ensure the GIF covers the text properly */
        -webkit-background-clip: text; /* For Safari and older browsers */
        background-clip: text; /* For modern browsers */
        color: transparent; /* Make the text color transparent so the background shows */
        display: block; /* Keep each line in its own block */
        width: 0;
        opacity: 0;
        white-space: nowrap; /* Prevent text from wrapping */
        margin: 2rem 0; 
     }

  .line:nth-child(1) {
      animation: line1 10s infinite;

  }

  .line:nth-child(2) {
      animation: line2 10s infinite;
      animation-delay: 0.5s;
  }

  .line:nth-child(3) {
      animation: line3 10s infinite;
      animation-delay: 1s;
  }


  @keyframes line1 {
      0%   { width: 0; opacity: 0; }
      2%   { opacity: 1; }
      8%  { width: 100%; opacity: 1; }
      90% {
          width: 100%;
          opacity: 1;
      }

      100% {
          width: 100%;
          opacity: 0;
      }  }

  @keyframes line2 {
      0%   { width: 0; opacity: 0; }
      6%  { opacity: 1; }
      12%  { width: 100%; opacity: 1; }
      60% {
          width: 100%;
          opacity: 1;
      }

      100% {
          width: 100%;
          opacity: 0;
      }  }

  @keyframes line3 {
      0%   { width: 0; opacity: 0; }
      6%  { opacity: 1; }
      12%  { width: 100%; opacity: 1; }
      70% {
          width: 100%;
          opacity: 1;
      }

      100% {
          width: 100%;
          opacity: 0;
      }  }

      /* Pause after full cycle (3 seconds) */
          /* Text styling and animation */
      .animated-text {
        position: absolute;
        top: 10%; /* Position the text in the middle of the container */
        left: 35%;
        font-size: 5rem;
        font-weight: bold;
        color: transparent;
        /*background-image: url('gold.gif'); !* Example GIF URL *!*/
        background-size: cover;
        -webkit-background-clip: text; /* For Safari */
        background-clip: text; /* For modern browsers */
        z-index: 1; /* Ensure text is on top of the image */
      }

      .wedding-sticker{
        position: absolute;
        z-index: 1; /* Ensure text is on top of the image */
        top: 70%;
        left: 30%;
        img {
          width:60%;
          height:50%;
        }
      }
      .wedding-text{
        left: 14%;
/*        top: 3%;*/
        position: absolute;
        font-family: "Cursive";
        font-size: 2.7rem;
        color: white;
      }

    .hostedby-title span p{
      margin: 20px;
      line-height: 1;
      text-align: center;
      width: 100%;
      font-family: "Arial";
      letter-spacing: 2px;
    }
  
    .design{
      padding: 30px;
      margin: 0 auto;
      max-width: 240px;
      color: #ba7f57;
            svg, path {
            fill: currentColor;  /* Inherit color from parent */
        }
    }    
    .main-announcement{
      font-family: "Italic Extra";
      line-height: 1.5;
      text-align: center;
      width: 80%;
      height: 20%;
      font-size: 1.5rem;
      letter-spacing: 1.5px;
      box-sizing: border-box;
      text-align: center;
    }                        
    .announcement{
            display: flex;
      align-items: center;
      flex-direction: column;
    }        

/*    .information-label-left{
     font-family: "Sebastian Bobby", cursive;
     display: flex;
     line-height: 1.5px;
     width: 80%;
     height: 20%;
     text-align: center;
    }*/
    .information-label {
    font-family: "Sebastian Bobby";
/*    height: auto; /* Let the height adjust based on content */
    text-align: center;
    font-size: 4rem; /* Increase font size */
    color: #5f6b45; /* Match the color scheme */
        flex-direction: row;
       display: flex; 
       width: 90%;

       a{
        text-decoration: none;
        color: #5f6b45; /* Match the color scheme */
       }
}

    .information-label-left {
    top: 5%;
    position: relative;
    width: 50%; /* Take full width */

}

.add-to-class{
  margin: 1rem 2rem;
  text-align: left;
  user-select: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.calendar-options{
  border-bottom: 1px solid rgb(95,107,69);
  color: rgb(95, 107, 69);
  margin: 0px 2rem 1.5rem;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.calendar-modal{
  z-index: 1;
  display: none;
  display: none;
/*  display: none; /* Hidden by default */*/
}

.calendar-modal.show{
    display: block;
}

.calendar-modal-content{
  background-color: rgb(255,232,217); /*color pink*/
  box-shadow: rgba(0, 0, 0, 0.09) 0px 0px 4px 0px;;
  color: rgb(95,107,69);
  display: flex;
  flex-direction: column;
  font-family: "Basis Grotesque";
  padding: 0.5rem 0px;
  text-transform: none;
}
    .dot-bold{
      font-size: 3rem; /* Increase font size */
      font-family: times;
      display: block;
      font-weight: bold;
    }
    .date-info{
    font-size: 2rem; /* Increase font size */
    font-family: "Italic Extra";
    text-decoration: underline;
      display: block;
/*    box-sizing: border-box;*/
/*    height: 15%;*/
      width: 60%;
      left: 15%;
      top: 10%;
      position: relative;
    }

    .venue-info{
      width: 85%;
    }
    .information-label-right{
      position: relative; /* Fix the section on scroll */
    box-sizing: border-box;
    width: 50%; /* Take full width */
    
    }

.rsvp-button {
  position: fixed;
  bottom: 21px; /* Adjust this value to change the distance from the bottom */
  left: 21px; /* Adjust this value to change the distance from the left */
  background-color: #fcc6a2;
  letter-spacing: 15px;
  border: none;
  padding: 10px 20px;
  font-size: 1.2rem;
  cursor: pointer;
  color: #626b4f;
  border: 2px solid #626b4f;
  font-weight: bold;
}

#rsvpButton:hover {
  background-color: #626b4f;
  color: #fcc6a2;
}


     /* Modal Background */
        .modal-background {
            display: none; /* Hidden by default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
            z-index: 999; /* Ensures modal is above other content */
        }

        /* Modal Content */
        .modal-content {
          font-family: "Arial";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            width: 400px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            line-height: 2;
            label{
/*              padding-right: 5px;*/
            }
        }

        /* Form Input Styling */
        .modal-content input, .modal-content select, .modal-content textarea {
            margin-bottom: 10px;
            padding: 8px;
            width: 100%;
            font-family: "Arial";
        }

        label h3{
          text-align: center;
        }

/*        .modal-content button {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
*/
/*        .modal-content button:hover {
            background-color: #45a049;
        }*/

        /* Close Button (X) */
        .close-btn {
/*            position: absolute;*/
            top: 10px;
            right: 10px;
            font-size: 20px;
            cursor: pointer;
            color: #333;
        }




 .button-container {
            position: relative;
            display: flex;
            width: 100%; /* Adjust the width of the container */
            height: 40px; /* Adjust the height of the container */
            border-radius: 20px;
            background-color: rgb(238, 238, 238); /* Background color for the container */
            overflow: hidden;
            border: 5px solid rgb(238, 238, 238);
        }

        /* Common button styling */
        .yes-no-button {
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;
/*            background-color: transparent;*/
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
/*            color: #666;*/
            position: relative;
            transition: color 0.3s ease;
        }

        .yes-no-button:hover {
            color: rgb(0, 90, 200);
        }

        /* Active state for the selected button */
        .active {
            background-color: white;
        }

        /* Background that moves to simulate the slider */
        .slider {
            position: absolute;
            top: 4px;
            left: 4px;
            width: calc(50% - 4px);
            height: calc(100% - 8px);
            background-color: #4CAF50; /* Green color for the selected option */
            transition: transform 350ms cubic-bezier(0, 0.44, 0.66, 1) 0s, width 350ms cubic-bezier(0.56, 1, 0.75, 1) 0s;
            z-index: 0;
        }

        /* Ensure the text stays above the slider background */
        .button-container .yes-no-button {
            position: relative;
            z-index: 1;
        }

        .attending-info {
    margin: 20px;
}

.numeric-input {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.numeric-input__rocker {
    display: flex;
    align-items: center;
}

.numeric-input__button {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    color: rgb(187, 187, 187);
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 50%;
    border: solid 2px rgb(187, 187, 187);
}

.numeric-input__button:active {
    background-color: #0056b3;
}

.numeric-input__input {
    width: 50px;
    text-align: center;
    font-size: 20px;
    margin: 0 10px;
}

.numeric-input__label {
    font-size: 16px;
    margin-left: 10px;
}

.confirm-button{
  width: 100%;
  border-radius: 20px;
  background-color: rgb(0, 90, 200);
  color: white;
  font-weight: unset;
  height: 50px;
}

.confirm-button:hover{
  background-color: #00479e;
  color: white;
}

#name, #email, #phone{
  width: 50%;
}

.separator{
  margin-top: 20px;
}

.pics-section{
  background-color: #5f6b45;
  color: #ffe8d9;
}

.gallery-icon{
  height: 64px;
  width: 64px;
  margin: 0px auto 16px;
}

     .gallery-title {
      text-align: center;
      background-color: inherit
/*      margin-top: 100px;*/
/*      width: 100%;*/
      box-sizing: border-box;
/*      height: 20%;*/
/*      margin: 120px;*/
      font-family: "Sebastian Bobby";
      letter-spacing: 0;
      line-height: 1;
/*      text-transform: none;*/
/*      align-content: center;*/
      display: contents;
/*      font-size: calc(100vw * ((25 * (80 / 100) / 98)));*/
    }

.gallery-wrapper{
  text-align: center;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

.gallery-highlight-box {
  img{
    display: block;
    max-height: 48vh;
    max-width: 88%;
    object-fit: cover;
    min-height: 320px;
  }
}

.gallery-image-highlight {
    padding: 20px;
  margin: 32px auto;
  border: 1px solid currentColor;
  cursor: auto;
  text-align: center;
}

/* Carousel settings */
/* Hide all slides initially */
/* Modal Styling */
.gallery-section {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black background */
    z-index: 1000; /* Ensure it's on top of other content */
    justify-content: center;
    align-items: center;
}

.carousel-modal {
    position: absolute;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
}

/* Close Button Styling */
#carouselCloseButton {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background: none;
    border: none;
    color: #333;
    font-size: 20px;
}

/* Carousel Navigation Buttons */
.carousel-next-button,
.carousel-prev-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    font-weight: bold;
}

.carousel-next-button {
    right: 10px;
}

.carousel-prev-button {
    left: 10px;
}

/* Carousel Image Styling */
.carouselSlide {
    display: none; /* Hide all slides by default */
    text-align: center;
}

.carouselSlide.active {
    display: block; /* Show the active slide */
}

.carouselImageWrapper img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.carouselCaptionWrapper {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
}

/* Thumbnail Navigation Styling */
.image-nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.image-nav-viewport {
    display: flex;
    gap: 10px;
}

.image-nav-viewport li {
    list-style: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.image-nav-viewport li.active {
    opacity: 1;
}

.image-nav-viewport img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;
} 

footer p {
  text-align: center;
}

.language-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.language-toggle button {
    background-color: #5f6b45;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
}

.language-toggle button:hover {
    background-color: #4a5336;
}

.language-dropdown {
    position: fixed;
    top: 10px;
    right: 10px;
/*    z-index: 1000; /* Ensure it's on top */*/
}

#languageSelect {
    appearance: none; /* Remove default arrow */
    background-color: #5f6b45;
    color: white;
    border: none;
    padding: 10px 30px 10px 10px; /* Add padding for the custom arrow */
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    outline: none;
}

.language-dropdown select:hover {
    background-color: #4a5336;
}

/* Custom dropdown arrow */
.language-dropdown::after {
    content: "▼";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    color: white;
    font-size: 12px;
}