/* ==========================================
   CONTACT PAGE

   CONTENTS
   01. Contact Layout
   02. Contact Information
   03. Contact Form

   BREAKPOINTS
   1100px / 900px / 700px / 600px / 480px / 400px
========================================== */


/* ==========================================
   01. CONTACT LAYOUT
========================================== */

.contact-panel {
  display: grid;
  grid-template-columns:
    minmax(0, 0.88fr)
    minmax(0, 1.12fr);
  align-items: stretch;
  gap: 30px;

  padding: 18px;

  background:
    radial-gradient(
      circle at 12% 14%,
      rgba(99, 119, 242, 0.14),
      transparent 29%
    ),
    radial-gradient(
      circle at 92% 86%,
      rgba(226, 231, 255, 0.7),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.99),
      rgba(246, 248, 255, 0.97)
    );
}

.contact-content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
  padding: 58px 34px 58px 46px;
}

.contact-section {
    padding: 20px;
}

.contact-section .contact-title {

  font-size: 48px;
}

.contact-description {
  max-width: 610px;
  margin: 0 0 36px;

  font-size: 18px;
  line-height: 1.7;

  color: var(--color-text-soft);
}


/* CONTACT LAYOUT. RESPONSIVE - 1100px */

@media (max-width: 1100px) {
  .contact-panel {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);
    gap: 24px;
  }

  .contact-content {
    padding: 48px 22px 48px 30px;
  }

  .contact-description {
    font-size: 17px;
  }
}


/* CONTACT LAYOUT. RESPONSIVE - 900px */

@media (max-width: 900px) {
  .contact-panel {
    grid-template-columns: 1fr;
    gap: 28px;

    padding: 34px;
  }

  .contact-content {
    padding: 20px 4px 0;
  }

  .contact-title {
    max-width: 18ch;

    font-size: 48px;
  }

  .contact-description {
    max-width: 760px;
  }
}


/* CONTACT LAYOUT. RESPONSIVE - 800px */

@media (max-width: 800px) {
  .contact-title {
    font-size: 44px;
  }

  .contact-description {
    font-size: 16px;
  }
}


/* CONTACT LAYOUT. RESPONSIVE - 600px */

@media (max-width: 600px) {
  .contact-panel {
    gap: 24px;

    padding: 26px;
  }

  .contact-content {
    padding-top: 10px;
  }

  .contact-title {
    font-size: 42px;
  }

  .contact-description {
    margin-bottom: 30px;

    font-size: 15px;
  }
}


/* CONTACT LAYOUT. RESPONSIVE - 480px */

@media (max-width: 480px) {
  .contact-panel {
    padding: 20px;
  }

  .contact-title {
    font-size: 38px;
  }
}


/* CONTACT LAYOUT. RESPONSIVE - 400px */

@media (max-width: 400px) {
  .contact-panel {
    padding: 16px;
  }

  .contact-title {
    font-size: 34px;
  }
}


/* ==========================================
   02. CONTACT INFORMATION
========================================== */

.contact-details {
  display: grid;
  gap: 13px;
}

.contact-detail {
  display: grid;
  grid-template-columns:
    54px
    minmax(0, 1fr);
  align-items: center;
  gap: 16px;

  padding: 17px 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(244, 246, 255, 0.9)
    );

  border: 1px solid rgba(99, 119, 242, 0.13);
  border-radius: 18px;
}

.contact-detail__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  color: var(--color-accent);

  background:
    linear-gradient(
      145deg,
      rgba(242, 244, 255, 1),
      rgba(225, 230, 255, 0.98)
    );

  border: 1px solid rgba(99, 119, 242, 0.14);
  border-radius: 50%;
}

.contact-detail__icon svg {
  width: 25px;
  height: 25px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-detail__content {
  min-width: 0;
}

.contact-detail__label {
  display: block;
  margin-bottom: 5px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;

  color: var(--color-accent);
}

.contact-detail__value {
  display: block;

  overflow-wrap: anywhere;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;

  color: var(--color-text);
  text-decoration: none;
}

a.contact-detail__value:hover {
  color: var(--color-accent);
}

.contact-note {
  display: grid;
  grid-template-columns:
    42px
    minmax(0, 1fr);
  align-items: center;
  gap: 13px;

  margin-top: 22px;
  padding: 15px 17px;

  background: rgba(226, 231, 255, 0.45);
  border: 1px solid rgba(99, 119, 242, 0.11);
  border-radius: 17px;
}

.contact-note__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  color: var(--color-accent);

  background: rgba(255, 255, 255, 0.78);
  border-radius: 50%;
}

.contact-note__icon svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-note p {
  margin: 0;

  font-size: 13px;
  line-height: 1.55;

  color: var(--color-text-soft);
}


/* CONTACT INFORMATION. RESPONSIVE - 600px */

@media (max-width: 600px) {
  .contact-detail {
    grid-template-columns:
      48px
      minmax(0, 1fr);

    padding: 15px;
  }

  .contact-detail__icon {
    width: 48px;
    height: 48px;
  }

  .contact-detail__value {
    font-size: 14px;
  }
}


/* CONTACT INFORMATION. RESPONSIVE - 480px */

@media (max-width: 480px) {
  .contact-detail {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .contact-detail__icon {
    margin-inline: auto;
  }

  .contact-note {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .contact-note__icon {
    margin-inline: auto;
  }
}


/* ==========================================
   03. CONTACT FORM
========================================== */

.contact-form-card {
  min-width: 0;
  padding: 44px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 1),
      rgba(247, 248, 255, 0.97)
    );

  border: 1px solid rgba(99, 119, 242, 0.15);
  border-radius: 28px;

  box-shadow:
    0 18px 42px rgba(42, 52, 101, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.contact-form-card__heading {
  margin-bottom: 30px;
}

.contact-form-card__eyebrow {
  display: block;
  margin-bottom: 10px;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: var(--color-accent);
}

.contact-form-card__title {
  margin: 0 0 10px;

  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.16;

  color: var(--color-text);
}

.contact-form-card__description {
  max-width: 560px;
  margin: 0;

  font-size: 15px;
  line-height: 1.6;

  color: var(--color-text-soft);
}

.contact-form {
  display: grid;
  gap: 19px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.contact-field {
  display: grid;
  gap: 8px;

  min-width: 0;
}

.contact-field__label {
  font-size: 13px;
  font-weight: 800;

  color: var(--color-text);
}

.contact-field__control {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 14px 16px;

  font: inherit;
  font-size: 15px;
  line-height: 1.4;

  color: var(--color-text);
  background: rgba(248, 249, 255, 0.9);

  border: 1px solid rgba(99, 119, 242, 0.16);
  border-radius: 14px;
  outline: none;

  transition:
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.contact-field__control::placeholder {
  color: rgba(89, 94, 112, 0.7);
}

.contact-field__control:hover {
  border-color: rgba(99, 119, 242, 0.3);
}

.contact-field__control:focus {
  background: #ffffff;
  border-color: var(--color-accent);

  box-shadow:
    0 0 0 4px rgba(99, 119, 242, 0.12);
}

.contact-field__select {
  appearance: none;

  padding-right: 46px;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--color-text-soft) 50%
    ),
    linear-gradient(
      135deg,
      var(--color-text-soft) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 21px) 50%,
    calc(100% - 15px) 50%;

  background-size:
    6px 6px,
    6px 6px;

  background-repeat: no-repeat;
}

.contact-field__textarea {
  min-height: 170px;

  resize: vertical;
}

.contact-consent {
  position: relative;

  display: grid;
  grid-template-columns:
    22px
    minmax(0, 1fr);
  align-items: start;
  gap: 11px;

  cursor: pointer;
}

.contact-consent__input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}

.contact-consent__box {
  position: relative;

  width: 22px;
  height: 22px;

  background: rgba(248, 249, 255, 0.9);
  border: 1px solid rgba(99, 119, 242, 0.24);
  border-radius: 6px;

  transition:
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.contact-consent__box::after {
  position: absolute;
  top: 4px;
  left: 7px;

  width: 6px;
  height: 10px;

  content: "";
  opacity: 0;
  transform: rotate(45deg) scale(0.7);

  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;

  transition:
    opacity var(--transition),
    transform var(--transition);
}

.contact-consent__input:checked + .contact-consent__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.contact-consent__input:checked + .contact-consent__box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.contact-consent__input:focus-visible + .contact-consent__box {
  box-shadow:
    0 0 0 4px rgba(99, 119, 242, 0.14);
}

.contact-consent__text {
  padding-top: 1px;

  font-size: 13px;
  line-height: 1.5;

  color: var(--color-text-soft);
}

.contact-form__submit {
  justify-self: start;

  min-width: 190px;
  margin: 0 auto;
background:
  linear-gradient(
    135deg,
    #4459c8  0%,
    #2c356d 100%
  );
}


/* CONTACT FORM. RESPONSIVE - 1100px */

@media (max-width: 1100px) {
  .contact-form-card {
    padding: 38px;
  }
}


/* CONTACT FORM. RESPONSIVE - 900px */

@media (max-width: 900px) {
  .contact-form-card {
    padding: 42px;
  }
}


/* CONTACT FORM. RESPONSIVE - 600px */

@media (max-width: 600px) {
  .contact-form-card {
    padding: 30px;

    border-radius: 24px;
  }

  .contact-form-card__title {
    font-size: 33px;
  }

  .contact-form__row {
    grid-template-columns: 1fr;
  }

  .contact-field__control {
    min-height: 52px;

    font-size: 14px;
  }

  .contact-field__textarea {
    min-height: 150px;
  }
}


/* CONTACT FORM. RESPONSIVE - 480px */

@media (max-width: 480px) {
  .contact-form-card {
    padding: 24px 20px;

    border-radius: 21px;
  }

  .contact-form-card__title {
    font-size: 30px;
  }

  .contact-form {
    gap: 17px;
  }

  .contact-form__submit {
    width: 100%;
  }
}


/* CONTACT FORM. RESPONSIVE - 400px */

@media (max-width: 400px) {
  .contact-form-card {
    padding-inline: 17px;
  }

  .contact-form-card__title {
    font-size: 28px;
  }
}

/* ==========================================
   01. CONTACT LAYOUT
========================================== */

.contact-panel {
  display: grid;
  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(0, 1.08fr);
  align-items: stretch;
  gap: 0;

  padding: 18px;

  background:
    radial-gradient(
      circle at 12% 14%,
      rgba(99, 119, 242, 0.14),
      transparent 29%
    ),
    radial-gradient(
      circle at 92% 86%,
      rgba(226, 231, 255, 0.7),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.99),
      rgba(246, 248, 255, 0.97)
    );
}

.contact-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  min-width: 0;
padding: 60px 26px 0 40px;
}

.contact-form-card {
  min-width: 0;
  padding: 60px 26px 26px 40px;

  background: transparent;
  border: 0;
  /* border-left: 1px solid rgba(99, 119, 242, 0.16); */
  border-radius: 0;
  box-shadow: none;
}

.contact-description {
  max-width: 610px;
  margin: 0 0 36px;

  font-size: 18px;
  line-height: 1.7;

  color: var(--color-text-soft);
}


/* CONTACT LAYOUT. RESPONSIVE - 1100px */

@media (max-width: 1100px) {
  .contact-panel {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);
  }

  .contact-content {
    padding: 48px 34px 48px 30px;
  }

  .contact-form-card {
    padding: 48px 30px 48px 40px;
  }

  .contact-description {
    font-size: 17px;
  }
}


/* CONTACT LAYOUT. RESPONSIVE - 900px */

@media (max-width: 900px) {
  .contact-panel {
    grid-template-columns: 1fr;
    gap: 0;

    padding: 34px;
  }

  .contact-content {
    padding: 20px 4px 42px;
  }

  .contact-form-card {
    padding: 42px 4px 10px;

    border-left: 0;
    border-top: 1px solid rgba(99, 119, 242, 0.16);
  }

  .contact-title {
    max-width: 18ch;

    font-size: 48px;
  }

  .contact-description {
    max-width: 760px;
  }
}


/* CONTACT LAYOUT. RESPONSIVE - 800px */

@media (max-width: 800px) {
  .contact-title {
    font-size: 44px;
  }

  .contact-description {
    font-size: 16px;
  }
}


/* CONTACT LAYOUT. RESPONSIVE - 600px */

@media (max-width: 600px) {
  .contact-panel {
    padding: 26px;
  }

  .contact-content {
    padding-top: 10px;
    padding-bottom: 34px;
  }

  .contact-form-card {
    padding-top: 34px;
  }

  .contact-title {
    font-size: 42px;
  }

  .contact-description {
    margin-bottom: 30px;

    font-size: 15px;
  }
}


/* CONTACT LAYOUT. RESPONSIVE - 480px */

@media (max-width: 480px) {
  .contact-panel {
    padding: 20px;
  }

  .contact-title {
    font-size: 38px;
  }
}


/* CONTACT LAYOUT. RESPONSIVE - 400px */

@media (max-width: 400px) {
  .contact-panel {
    padding: 16px;
  }

  .contact-title {
    font-size: 34px;
  }
}