/* Triple Image Section Styles */
.triple-image-section {
  position: relative;
  padding: 80px 0 80px;
  background-color: #073535;
  overflow: hidden;
}

.wave-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.wave {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
}

.wave-1 {
  background: #a7c4c2;
  height: 120px;
  top: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: scaleX(1.5);
}

.wave-2 {
  background: #729692;
  height: 140px;
  top: 40px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: scaleX(1.7);
}

.wave-3 {
  background: #2d5753;
  height: 160px;
  top: 80px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: scaleX(1.6);
}

.images-container {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 0 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.arch-image {
  position: relative;
  width: 33.333%;
}

.arch-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 100px 100px 0 0;
}

.floral-decor {
  position: absolute;
  width: 60px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
}

.flower-top-right {
  top: 29px;
  right: -1px;
  transform: scale(1.5);
  background-image: url("../images/flower.svg");
}

.flower-top-left {
  top: 0px;
  left: -1px;
  transform: scale(1);
  background-image: url("../images/flower.svg");
}

.flower-bottom-right {
  bottom: -20px;
  right: -20px;
  background-image: url("../images/flower.svg");
}

.leaves-left {
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("../images/leaves.png");
}

.leaves-bottom-left {
  left: -27px;
  bottom: -7px;
  transform: translateY(-50%) scale(2) scaleX(-1);
  background-image: url("../images/leaves.png");
}

.leaves-top-right {
  right: 0%;
  top: 83px;
  transform: translateY(-50%) scale(3) scaleX(-1);
  background-image: url("../images/leaves.png");
}

.leaves-bottom-right {
  right: -30px;
  bottom: 35px;
  transform: translateY(-50%) scale(3.5);
  background-image: url("../images/leaves.png");
}

.leaves-right {
  right: 14px;
  top: 20%;
  transform: translateY(-50%) scaleX(-1) scale(2.5) rotate(29deg);
  background-image: url("../images/leaves.png");
}

.section-title {
  font-family: "Playfair Display";
  font-size: 76px;
  color: #ddffff;
  text-align: center;
  margin: 0 auto 3rem auto;
  max-width: unset;
}

.section-title em {
  font-style: italic;
  font-size: 0.9em;
}

.section-footer {
  text-align: center;
  color: #fff;
  margin-top: 3rem;
}

.couple-names {
  font-family: "Playfair Display";
  font-size: 76px;
  margin: 0 auto 1rem auto;
  max-width: unset;
}

.event-info {
  font-family: "Lato";
  font-size: 1.2rem;
  letter-spacing: 2px;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .wave-container {
    height: 200px;
  }

  .wave-1 {
    height: 80px;
  }

  .wave-2 {
    height: 100px;
    top: 20px;
  }

  .wave-3 {
    height: 120px;
    top: 40px;
  }

  .triple-image-section {
    padding: 60px 0 40px;
  }

  .images-container {
    padding: 0 40px;
  }

  .arch-image.left-image,
  .arch-image.right-image {
    display: none;
  }

  .arch-image.center-image {
    width: 100%;
    max-width: 400px;
  }

  .floral-decor {
    width: 50px;
    height: 50px;
    background-size: contain;
  }

  .flower-top-right {
    top: 25px;
    right: 35px;
    transform: scale(1.5);
  }

  .leaves-left {
    left: -10px;
    top: 75%;
    transform: rotateY(180deg) scale(2);
  }

  .section-title {
    font-size: 36px;
    margin-bottom: 2rem;
  }

  .couple-names {
    font-size: 36px;
  }

  .event-info {
    font-size: 1rem;
    padding: 0 1rem;
    font-weight: 300;
    letter-spacing: 3px;
  }

  .leaves-bottom-right {
    right: -15px;
    bottom: 5px;
    transform: translateY(-50%) scale(2.5);
  }

  .leaves-bottom-left {
    left: -15px;
    bottom: 0;
    transform: translateY(-50%) scale(1.5) scaleX(-1);
  }

  .leaves-top-right {
    right: -10px;
    top: 80px;
    transform: translateY(-50%) scale(2) scaleX(-1);
  }

  .leaves-right {
    right: -9px;
    top: 25%;
    transform: translateY(-50%) scaleX(-1) scale(1.8) rotate(29deg);
  }
}