/* Main content */
.contacts-page {
  color: var(--black_white50);
  padding: 100px 0 150px;
  position: relative;
  overflow: hidden;
}

.contacts-page .display-5xl {
  opacity: 0;
  transform: scale(0.94);
  animation: heroReveal 1s ease-out forwards;
  animation-delay: 0.6s;
}

/* Upper part text */
.contacts-upper-text {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 16px;
  max-width: 800px;
  padding: 64px 0 0;
  opacity: 0;
  transform: scale(0.94);
  visibility: hidden;
  animation: heroReveal 1s ease-out forwards;
  animation-delay: 0.6s;
  will-change: opacity, transform;
  animation-fill-mode: both;
}

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
  }
}

.contacts-upper-text-l {
  color: var(--neutral300);
}

.contacts-upper-text-r {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contacts-upper-text-r .body-md-regular {
  color: var(--neutral300);
}

/* Upper part contacts */
.contacts-upper-contacts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 100px 0;
}

.contact-item,
.contact-item>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact-item .h2 {
  margin-bottom: 8px;
}

.contact-item-title {
  margin-bottom: 16px;
  color: var(--neutral400);
}

.contact-item>div {
  gap: 16px;
}

.contact-item .contact-item-info {
  width: max-content;
}

.contact-item a {
  transition: color 0.4s ease;
}

.contact-item a:hover {
  color: var(--neutral500);
}

/* Form */
#form-close-contacts {
  display: none;
}

#submit-request-contacts {
  background: var(--black_white950);
  color: var(--black_white50);
  padding: 40px;
  border: 1px solid var(--black_white50);
  border-radius: 16px;
  height: calc(100% - 64px);
  max-width: 700px;
  width: 100%;
  margin: auto;
  position: relative;
  overflow: hidden;
  z-index: 5;
}

.projects-list-contacts,
.services-list-contacts,
.budget-list-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.form-error-msg-contacts,
.form-error-projects-msg-contacts,
.form-error-service-msg-contacts,
.form-error-budget-msg-contacts,
.form-error-inputs-msg-contacts {
  color: #c00;
  flex: 1 0 100%;
}

.form-error-projects-msg-contacts,
.form-error-service-msg-contacts,
.form-error-budget-msg-contacts,
.form-error-inputs-msg-contacts {
  margin-bottom: 28px;
}

/* D.U.K. */
.duk {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 40px;
  padding: 100px 0 150px;
}

.duk-l {
  display: flex;
  flex-direction: column;
}

.duk-l .h1 {
  margin-bottom: 24px;
}

.duk-l .body-lg-regular {
  margin-bottom: 32px;
}

.webrom-duk {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.webrom-duk-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 24px;
  background: linear-gradient(180deg, rgba(60, 74, 193, 0) 0%, rgba(60, 74, 193, 0.1) 100%);
  border: 1px solid #7BFEDD;
  filter: drop-shadow(0px 0px 12px rgba(123, 254, 221, 0.25));
  border-radius: 8px;
}

.contacts-page .accordion-item.is-open .accordion-toggle.accordion-open {
  opacity: 0;
  visibility: hidden;
  display: flex;
}

/* Reviews section */
.contacts-page .reviews-section-content-wrapper {
  padding-top: unset;
}

/* Circles */
.left-side-ellipsis {
  position: absolute;
  width: 326px;
  height: 326px;
  left: -198px;
  top: 1079px;
  background: #3C4AC1;
  filter: blur(150px);
  flex: none;
  order: 4;
  flex-grow: 0;
  z-index: 4;
}

.right-side-ellipsis {
  position: absolute;
  width: 326px;
  height: 326px;
  /* left: 1394px; */
  right: -397px;
  top: 1421px;
  background: #7BFEDD;
  filter: blur(150px);
  flex: none;
  order: 0;
  flex-grow: 0;
  z-index: 0;
}

/* Responsive */
@media (max-width: 1300px) {

  /* Upper part contacts */
  .contacts-upper-contacts {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}

@media (max-width: 1100px) {
  .contacts-page .accordion-item.is-open .accordion-close {
    display: none;
  }
}

@media (max-width: 800px) {
  .contacts-page .services-and-reviews-wrapper {
    padding: 0;
  }

  .contacts-page .review-btn-wrapper button {
    width: max-content;
  }
}

@media (max-width: 768px) {

  /* Main content */
  .contacts-page {
    padding: 70px 0 100px;
  }

  /* Upper content */
  .contacts-upper-text {
    grid-template-columns: 1fr;
    padding: 32px 0 0;
  }

  .contacts-upper-text-r {
    gap: 16px;
  }

  /* Contacts */
  .contacts-upper-contacts {
    grid-template-columns: 1fr;
    padding: 70px 0 100px;
    gap: 40px;
  }

  /* Form */
  #submit-request-contacts {
    padding: 20px 16px;
  }

  /* D.U.K. */
  .duk {
    grid-template-columns: 1fr;
    padding: 100px 0;
    gap: 40px;
  }

  .duk-l .h1 {
    margin-bottom: 16px;
  }

  .webrom-duk {
    gap: 16px;
  }

  .webrom-duk-item {
    padding: 24px 16px;
  }

  /* Circles */
  .left-side-ellipsis,
  .right-side-ellipsis {
    display: none;
  }
}