/* contact - hero section */
.hero.contact-hero {
  height: 60svh;
  max-width: 2000px;
  margin: 0 auto;
}

.hero.contact-hero .hero-container .hero-img-container {
  background-color: var(--base-500);
}

.hero.contact-hero .hero-container .hero-content .container {
  justify-content: flex-end;
}

.hero.contact-hero
  .hero-container
  .hero-content
  .container
  .hero-content-footer
  .hero-content-header
  h1,
.hero.contact-hero
  .hero-container
  .hero-content
  .container
  .hero-content-footer
  .hero-callout
  p {
  color: var(--base-400);
}

.hero.contact-hero
  .hero-container
  .hero-content
  .container
  .hero-content-footer
  .hero-callout
  p {
  font-weight: 600;
}

/* contact - contact form section */
.contact-form {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0.5rem 1rem;
  overflow: hidden;
}

.contact-form .container {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 6rem;
}

.contact-form .container .contact-form-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: url("#goo");
  z-index: -1;
}

.contact-form .container .contact-form-bg-wrapper .contact-form-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--base-300);
  clip-path: polygon(
    4rem 0%,
    calc(100% - 4rem) 0%,
    100% 4rem,
    100% calc(100% - 4rem),
    calc(100% - 4rem) 100%,
    4rem 100%,
    0% calc(100% - 4rem),
    0% 4rem
  );
}

.contact-form .container .contact-form-row:nth-child(2) {
  display: flex;
  justify-content: space-between;
}

.contact-form .container .contact-form-row:nth-child(2) p {
  color: var(--base-100);
}

.contact-form .container .contact-form-row:nth-child(3) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(1) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4em;
}

.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(1)
  .contact-form-header {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(1)
  .contact-form-header
  h3 {
  color: var(--base-100);
}

.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(1)
  .contact-form-header
  p {
  margin-bottom: 0.5em;
  width: 75%;
  color: var(--base-100);
}

.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(1)
  .contact-form-availability {
  width: 75%;
  display: flex;
  justify-content: space-between;
  gap: 1em;
  border-top: 1px dashed var(--bg);
  padding: 0.5em 0;
}

.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(1)
  .contact-form-availability
  p {
  color: var(--base-100);
}

.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(2)
  .form-item
  input,
.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(2)
  .form-item
  textarea {
  border: none;
  outline: none;
  width: 100%;
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #3a3a3a;
  color: var(--base-100);
  font-family: "Geist Mono", monospace;
  font-weight: 500;
  line-height: 1;
}

.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(2)
  .form-item
  input:active,
.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(2)
  .form-item
  input:focus,
.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(2)
  .form-item
  textarea:active,
.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(2)
  .form-item
  textarea:focus {
  border: none;
  outline: none;
  background-color: #3a3a3a;
  color: var(--base-100);
}

.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(2)
  .form-item
  input::placeholder,
.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(2)
  .form-item
  textarea::placeholder {
  font-family: "Geist Mono", monospace;
  font-weight: 500;
  line-height: 1;
}

.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(2)
  .form-item
  .btn {
  width: 100%;
}

.contact-form
  .container
  .contact-form-row:nth-child(3)
  .contact-form-col:nth-child(2)
  .form-item
  .btn
  a.btn {
  background-color: var(--base-400);
}

/* contact - faq section */
.faq-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.faq-container .container {
  display: flex;
  gap: 1.5rem;
}

.faq-container .container .faq-header {
  flex: 1;
}

.faq-container .container .faq-header h3 {
  width: 75%;
  color: var(--base-100);
}

.faq-container .container .faq-wrapper {
  flex: 1;
}

.faq-container .container .faq-wrapper .faq-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-container .container .faq-wrapper .faq-items .faq-item {
  padding: 0.75rem 1.5rem;
  background-color: var(--base-300);
  border-radius: 0.5rem;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}

.faq-container .container .faq-wrapper .faq-items .faq-item .faq-question {
  padding: 0.75rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.faq-container .container .faq-wrapper .faq-items .faq-item .faq-question h3 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: clamp(0rem, -0.5vw, -0.05rem);
  transition: opacity 0.3s ease;
  color: var(--base-100);
}

.faq-container
  .container
  .faq-wrapper
  .faq-items
  .faq-item
  .faq-question
  .faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 1.5rem;
  will-change: transform;
}

.faq-container .container .faq-wrapper .faq-items .faq-item .faq-answer {
  height: 0;
  opacity: 0;
  will-change: height, opacity;
  overflow: hidden;
}

.faq-container .container .faq-wrapper .faq-items .faq-item .faq-answer p {
  padding: 0.75rem 0;
  color: var(--base-100);
  opacity: 0.8;
  user-select: none;
}

/* contact - media queries */
@media (max-width: 1000px) {
  .contact-form .container .contact-form-bg-wrapper .contact-form-bg {
    clip-path: none;
  }

  .contact-form .container {
    padding: 3rem 1rem;
  }

  .contact-form .container .contact-form-row:nth-child(2) {
    flex-direction: column;
    gap: 0.25em;
  }

  .contact-form .container .contact-form-row:nth-child(3) {
    flex-direction: column;
  }

  .contact-form
    .container
    .contact-form-row:nth-child(3)
    .contact-form-col:nth-child(1) {
    gap: 2em;
  }

  .contact-form
    .container
    .contact-form-row:nth-child(3)
    .contact-form-col:nth-child(1)
    .contact-form-header
    p,
  .contact-form
    .container
    .contact-form-row:nth-child(3)
    .contact-form-col:nth-child(1)
    .contact-form-availability {
    width: 100%;
  }

  .contact-form
    .container
    .contact-form-row:nth-child(3)
    .contact-form-col:nth-child(1)
    .contact-form-availability {
    flex-direction: column;
    text-align: center;
    gap: 0.25em;
  }

  .faq-container {
    margin: 3rem 0;
    padding: 0;
  }

  .faq-container .container {
    flex-direction: column;
    padding: 1rem;
  }

  .faq-container .container .faq-header h3 {
    width: 100%;
  }

  .faq-container .container .faq-wrapper {
    width: 100%;
  }

  .faq-container .container .faq-wrapper .faq-items .faq-item .faq-question h3 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    letter-spacing: clamp(0rem, -0.5vw, -0.05rem);
    line-height: 1;
  }
}