.contact-section {
  position: relative;
  padding: 5.5rem 0 8.5rem;
  background: linear-gradient(180deg, rgba(253, 247, 247, 0.2) 0%, #fdf7f7 30%, #fdf7f7 100%);
}

.circle-bg {
  position: absolute;
  width: 30rem;
  height: 30rem;
}
.circle-red {
  z-index: 1;
  top: -10%;
  left: 10%;
}
.circle-green {
  z-index: 2;
  top: 8%;
  left: 18%;
}

.contact-box {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 2rem;
  border-radius: 3rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);
}

.contact-title-box {
  width: 30%;
}

.contact-cards-box {
  display: flex;
  gap: 2rem;
  width: 70%;
}

.contact-card {
  position: relative;
  width: 100%;
  min-width: 9rem;
  height: 27rem;
  border-radius: 1.5rem;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.contact-card.active {
  width: 300%;
  transition: all 0.3s ease-in-out;
}

.contact-card::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 100%;
  height: 70%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}

.contact-card-img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.contact-card-contents {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 1rem;
  color: #ffffff;
}
.contact-card.active .contact-card-contents {
  padding: 2rem;
}

.contact-card-title {
  position: relative;
  margin-bottom: 0.625rem;
}

.contact-card-title::before {
  content: "";
  position: absolute;
  top: calc(100% + 0.125rem);
  display: block;
  width: 2rem;
  height: 0.125rem;
  background-color: #ec1c24;
}

.contact-card-contents-details {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

.contact-card.active .contact-card-contents-details {
  max-height: 10rem;
  opacity: 1;
  visibility: visible;
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out 0.2s, visibility 0.4s ease-in-out 0.2s;
}

.contact-card-desc {
  margin-bottom: 1.5rem;
}

@media (min-width: 1200px) {
  .contact-box {
    margin: 0 6rem;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .contact-box {
    flex-wrap: wrap;
    margin: 0 2rem;
  }

  .circle-red {
    top: -10%;
    left: 4%;
  }
  .circle-green {
    top: 8%;
    left: 9%;
  }

  .contact-title-box {
    width: 100%;
  }

  .contact-cards-box {
    width: 100%;
  }
}

@media (min-width: 1025px) {
  .contact-box {
    padding: 2.5rem;
  }
}

@media (max-width: 1024px) {
  .contact-section {
    padding: 6.125rem 0;
  }

  .contact-box {
    flex-wrap: wrap;
    padding: 2rem 0;
  }

  .circle-red {
    top: -6%;
    left: -24%;
  }
  .circle-green {
    top: 1%;
    left: 8%;
  }

  .contact-title-box {
    width: 100%;
    padding: 0 2rem;
  }

  .contact-cards-slides {
    width: 100%;
  }

  .contact-cards-slides .swiper-wrapper {
    align-items: center;
  }

  .contact-card {
    min-width: unset;
  }
  .contact-card.active {
    width: 100%;
  }

  .contact-cards-slides .swiper-slide .contact-card {
    transform: scale(0.9);
    transition: all 0.3s ease-in-out;
  }

  .contact-cards-slides .swiper-slide.swiper-slide-active .contact-card {
    transform: scale(1);
    transition: all 0.3s ease-in-out;
  }
}