* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  /*max-width: 100vw;*/
}

body {
  overflow-x: hidden;
}

.background {
  background-color: #d9dce4;
}

header {
  width: 100%;
  height: 737px; /* You might adjust this height based on your overall layout */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 65px; /* Adjust gap between the two cards as needed */
}

.conteiner-card {
  display: flex;
  justify-content: space-evenly;
  gap: 65px; /* Adjust gap between the two cards as needed */
  align-items: center;
}

/*Ефект-----------------------------------------------------*/
.fade-in {
  opacity: 0;
  transition: opacity 1.8s ease; /* Можеш змінити тривалість */
}

.fade-in.visible {
  opacity: 1;
}

.letter {
  opacity: 0;
  display: inline-block;
  animation: fadeInLetter 1.2s ease forwards;
  animation-delay: var(--delay);
  animation-play-state: paused;
}

.letters-animate .letter {
  animation-play-state: running;
}

@keyframes fadeInLetter {
  to {
    opacity: 1;
  }
}


/*Еріка ---------------------------------------------------------------*/
.erika-svg {
  left: -40px;
  top: -40px;
  position: absolute;
  width: 106px;
  height: 136px;
}

.erika {
  width: 539px; /* Or adjust to fit your design */
  height: 583px; /* Allow height to adjust based on content */
  /*background-color: #ffffff; !* White background for the polaroid effect *!*/
  /*border: 1px solid #e0e0e0; !* Subtle border for the card *!*/
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); !* Soft shadow for depth *!*/
  background: white;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px; /* Padding inside the card */
  position: relative; /* For heart decorations if you add them later */
}

.erika-photo,
.vladyslav-photo {
  width: 479px;
  height: 423px;
  display: block; /* Ensures no extra space below the image */
  /*object-fit: contain; !* Ensures the whole image is visible, scales down if needed *!*/
  margin-bottom: 15px; /* Space between photo and name */
  margin-top: 10px;
}

.name {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
  color: #333;
  text-align: center;
  padding-bottom: 10px;
  margin-top: 20px;
}

/*Владислав -----------------------------------------------*/
.vladyslav-svg {
  left: 455px;
  top: 362px;
  position: absolute;
  width: 106px;
  height: 136px;
}

.vladyslav {
  width: 539px; /* Or adjust to fit your design */
  height: 583px; /* Allow height to adjust based on content */
  /*background-color: #ffffff; !* White background for the polaroid effect *!*/
  /*border: 1px solid #e0e0e0; !* Subtle border for the card *!*/
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); !* Soft shadow for depth *!*/
  background: white;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px; /* Padding inside the card */
  position: relative; /* For heart decorations if you add them later */
}

.plus-header {
  width: 47px;
  height: 172px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: black;
  font-size: 138px;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  word-wrap: break-word;
}

/*Дата та час ------------------------------------------------------*/
.section-time {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.ELoveB {
  margin-top: -30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ELoveB img {
  width: 61px;
  height: 57px;
}

.ELoveB p {
  margin: 0;
  padding: 0;
  font-size: 58px;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  letter-spacing: 10px;
  word-wrap: break-word;
}

.date {
  width: 493.81px;
  height: 85px;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: black;
  font-size: 68px;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  word-wrap: break-word;
  margin-top: 50px;
}

#countdown {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px;
  padding: 10px;
  color: black;
}

.time-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-box span {
  font-size: 150px; /* розмір цифр */
  font-weight: 400;
  font-family: "Great Vibes", cursive;
  padding: 20px;
}

.time-box .label {
  font-size: 38px; /* розмір підписів */
  font-family: Inter, cursive;
  font-weight: 400;
  margin-top: -40px;
}

/*Секція історія -----------------------------------------------------------*/
.section-love {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100vw;
  height: 870px;
  margin-top: 100px;
  /*border: 2px solid gray;*/
}

.card-love {
  display: flex;
  width: 1440px;
  height: 870px;
  align-items: center;
  flex-direction: column;
  background: white;
  /*justify-content: space-between;*/
  /*border: 2px solid gray;*/
  position: relative;
}

.section-love h1 {
  width: 754px;
  height: 85px;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: black;
  font-size: 68px;
  font-family: Great Vibes, cursive;
  font-weight: 400;
  word-wrap: break-word;
  margin-top: 50px;
}

.mobile-br {
  display: none;
}

.text-section-love {
  width: 1004px;
  height: 143px;
  /*justify-content: center;*/
  /*display: flex;*/
  /*flex-direction: column;*/
  color: black;
  font-size: 34.29px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 200;
  /*word-wrap: break-word*/
  margin: 20px;
}

.love-img {
  width: 100%;
  max-width: 424px;
  padding-bottom: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  display: inline-flex;
}

.love-time-img {
  width: 990px;
  max-width: 990px;
  height: auto;
  /*position: relative;*/
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
  /*border: 2px solid gray;*/
}

.date-love {
  color: black;
  font-size: 48px;
  font-family: Great Vibes, cursive;
  font-weight: 200;
}

.love-story {
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: black;
  font-size: 38px;
  font-family: Great Vibes, cursive;
  font-weight: 400;
  word-wrap: break-word;
  margin-top: 25px;
}

.love-svg {
  width: 142px;
  height: 209px;
  max-width: 142px;
  left: 0;
  top: 0;
  position: absolute;
}

.love-svg-2 {
  width: 142px;
  height: 209.25px;
  max-width: 142px;
  left: 1300px;
  top: 0;
  position: absolute;
}

.love-svg-3 {
  width: 142px;
  height: 209.25px;
  max-width: 142px;
  left: 300px;
  top: 500px;
  position: absolute;
}

.love-svg-4 {
  width: 142px;
  height: 209.25px;
  max-width: 142px;
  left: 1000px;
  top: 740px;
  position: absolute;
}

/*Анімація -----------------------------*/

.reveal-up {
  opacity: 0;
  transform: translateY(60px);
  transition: transform 2s ease, opacity 3s ease;
}

.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.reveal-fade.visible {
  opacity: 1;
}


/*Секція локації -------------------------------------------*/
.section-location {
  margin-top: 450px;
  width: 100%;
  display: flex;
  justify-content: space-evenly; /* ось ця зміна */
  align-items: center;
}

.location--card-img {
  width: 409px;
  max-width: 409px;
  padding-bottom: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  display: inline-flex;
}

.location-img {
  align-self: stretch;
  flex: 1 1 0;
  position: relative;
}

.location-info {
  width: 486px;
  height: 297px;
  max-width: 486px;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: start;

}

.location-h1 {
  justify-content: start;
  display: flex;
  flex-direction: column;
  color: black;
  font-size: 68px;
  font-family: Great Vibes, cursive;
  font-weight: 400;
  word-wrap: break-word;
}

.location-p {
  color: black;
  font-size: 34px;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

.button-location {
  width: 421px;
  height: 60px;
  max-width: 421px;
  padding: 1px;
  border-radius: 30px;
  outline: 1px #2C2C2C solid;
  outline-offset: -1px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  text-align: center;
  /*justify-content: center;*/
  /*display: flex; */
  flex-direction: column;
  color: #2C2C2C;
  font-size: 28px;
  font-family: Playfair, sans-serif;
  font-weight: 300;
  word-wrap: break-word;
  background-color: #d9dce4;
}

.location-svg {
  width: 176px;
  height: 225.56px;
  max-width: 176px;
  left: -180px;
  top: -70px;
  position: absolute;
}

/*Анімації----------------------------------------*/
.reveal-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: all 1s ease-out;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(100px);
  transition: all 1s ease-out;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.08);
  }
  50% {
    transform: scale(0.92);
  }
  75% {
    transform: scale(1.05);
  }
}

.location-svg {
  animation: heartbeat 2s infinite ease-in-out;
  transform-origin: center;
}

/*Секція дрес-код----------------------------*/
.section-dress-code {
  width: 100%;
  margin-top: 170px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  display: inline-flex;

}

.dress-code-h1 {
  /*align-self: stretch;*/
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #2C2C2C;
  font-size: 68px;
  font-family: Great Vibes, sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

.dress-code-p {
  /*align-self: stretch;*/
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #2C2C2C;
  font-size: 38px;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

.dress-color {
  align-self: stretch;
  padding-top: 10px;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  display: inline-flex
}

.dress-color-1 {
  width: 150px;
  height: 143px;
  max-width: 170px;
  background: #f3cfcf;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.30)
}

.dress-color-2 {
  width: 150px;
  height: 143px;
  max-width: 170px;
  background: #f8dce0;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.30)
}

.dress-color-3 {
  width: 150px;
  height: 143px;
  max-width: 170px;
  background: #fbeedd;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.30)
}

.dress-color-4 {
  width: 150px;
  height: 143px;
  max-width: 170px;
  background: #e7dbce;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.30)
}

.dress-color-5 {
  width: 150px;
  height: 143px;
  max-width: 170px;
  background: #d5cabe;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.30)
}

.dress-color-6 {
  width: 150px;
  height: 143px;
  max-width: 170px;
  background: #d9d0aa;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.30)
}

.dress-color-7 {
  width: 150px;
  height: 143px;
  max-width: 170px;
  background: #ffffff;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.30)
}


/*Анімація ----------------------------------------*/
.reveal-fade {
  opacity: 0;
  transition: opacity 3s ease;
}

.reveal-fade.visible {
  opacity: 1;
}

.reveal-rotate {
  transform: rotateY(-90deg);
  opacity: 0;
  transition: transform 3s ease, opacity 3s ease;
  transform-origin: left center;
}

.reveal-rotate.visible {
  transform: rotateY(0);
  opacity: 1;
}

/*Секція побажання ------------------------------------*/

.section-rec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rec-1div {
  margin-top: 100px;
}

.rec-h1 {
  align-self: stretch;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #2C2C2C;
  font-size: 68px;
  font-family: Great Vibes, sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

.rec-p {
  align-self: stretch;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #2C2C2C;
  font-size: 38px;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  line-height: 42px;
}

.rec-text-p {
  align-self: stretch;
  padding-bottom: 31px;
  border-bottom: 2px black solid;
  justify-content: space-evenly;
  align-items: flex-start;
  display: flex; /* змінено з inline-flex */
  margin-top: 50px;
}

.rec-conteiner-1 {
  width: 40%;
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.rec-defis {
  width: 1px;
  height: 430px;
  background: black;
}

/*Анімація ---------------------------------------------*/
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/*Секція опросу------------------------------------------------*/
.question {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  flex-direction: column;
}

.form-wrapper {
  width: 600px;
}

.form-wrapper h1 {
  align-self: stretch;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: black;
  font-size: 68px;
  font-family: Great Vibes, sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

.subtitle {
  align-self: stretch;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: black;
  font-size: 30px;
  font-family: "Poiret One", sans-serif;
  font-weight: 400;
  word-wrap: break-word;
  margin-top: 20px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}

label {
  font-weight: bold;
  font-size: 18px;
}

input[type="text"] {
  border: none;
  border-bottom: 1px solid #2C2C2C;
  background: transparent;
  padding: 10px 4px;
  font-size: 16px;
  color: #2C2C2C;
  font-family: inherit;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radio-option {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 16px;
}

.submit-button {
  margin-top: 30px;
  background: #2C2C2C;
  color: white;
  font-family: "Playfair Display", serif;
  font-size: 20px;
  border: none;
  padding: 12px;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.submit-button:hover {
  background: #444;
}

.lastname {
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: black;
  font-size: 32px;
  font-family: Playfair, sans-serif;
  font-weight: 300;
  word-wrap: break-word
}


.footer {
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: #2C2C2C;
  font-size: 68px;
  font-family: Great Vibes, sans-serif;
  font-weight: 400;
  word-wrap: break-word;
  margin-top: 50px;
}