/* Contact section styles */
section#contact {
  padding: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

section#contact form {
  margin-block: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
  width: 90%; /* height: 30rem; */
  /* background: linear-gradient(to bottom right, black, #2a323e); */
  background: var(--clr-card-bg);

  :is(input, textarea) {
    border: 1px solid gray;
  }
}

section#contact form div.form-wrapper-summary {
  position: absolute;
  top: 2rem;
  left: -4rem;
  height: 25rem;
  width: 25rem;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  background: var(--clr-card-bg);
  border: 1px solid gray;
  box-shadow: 2rem 2rem 2rem var(--clr-card-bg);
}

section#contact form div.form-wrapper-summary div.top {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
}

section#contact form div.form-wrapper-summary div.top div {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
}

section#contact form div.form-wrapper-summary div.top div i {
  font-size: 1.5rem;
  color: var(--clr-text);
}

section#contact form div.form-wrapper-summary div.top address {
  width: 100%;
  color: var(--clr-text);
}

section#contact form div.form-wrapper-summary div.bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

section#contact form div.form-wrapper-summary div.bottom a {
  text-decoration: none;
  cursor: pointer;
}

section#contact form div.form-wrapper-summary div.bottom i {
  font-size: 2rem;
}

section#contact form div.form-wrapper-summary div.bottom a:is(:hover, :focus) {
  transition: all 0.4s ease-in-out;
  transform: scale(0.9);
}

section#contact form div.form-wrapper-summary div.bottom a:hover i {
  color: var(--clr-deco);
}

section#contact form div.form-wrapper-information {
  width: 70%;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
}

section#contact form div.form-wrapper-information h2 {
  font-size: 2rem;
}

section#contact form div.form-wrapper-information div.form-data.split {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

section#contact form div.form-wrapper-information div.form-data {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

section#contact form div.form-wrapper-information div.form-data label {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--clr-heading);
}

section#contact
  form
  div.form-wrapper-information
  div.form-data
  :is(input[type="text"], input[type="email"]) {
  width: 100%;
  padding: 0.5rem;
}

section#contact
  form
  div.form-wrapper-information
  div.form-data
  :is(input[type="text"], input[type="email"])::placeholder {
  font-family: var(--font-txt2);
  color: #999999;
}

section#contact form div.form-wrapper-information div.form-data textarea {
  width: 100%;
  max-width: 60dvw;
  min-width: 40dvw;
  max-height: 25dvh;
  min-height: 10dvh;
}

input[type="text"]:is(:hover, :focus),
input[type="email"]:is(:hover, :focus),
textarea:is(:hover, :focus) {
  border: 2px solid transparent;
  outline: none;
  border-bottom: 2px solid var(--clr-deco);
}

/*contact section*/
section#contact form div.form-wrapper-information .form-data.submit {
  margin-top: 0.5rem;
  width: fit-content;
  padding: 0.2rem 1rem;
  border: 1px solid var(--clr-heading);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.2rem;
  background: var(--clr-nav-bg);
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%);
  background-position: 25%;
  background-size: 400%;
  transition: background 500ms ease-in-out, color 500ms ease-in-out;
}

section#contact
  form
  div.form-wrapper-information
  .form-data.submit
  input[type="submit"] {
  color: var(--clr-heading);
  background: transparent;
  text-transform: uppercase;
  border: none;
  outline: none;
}

section#contact form div.form-wrapper-information .form-data.submit i {
  font-size: 1.5rem;
  color: var(--clr-heading);
}

section#contact form div.form-wrapper-information .form-data.submit:active {
  transition: scale 0.4s ease-in-out;
  transform: scale(0.8);
}

section#contact form div.form-wrapper-information .form-data.submit:hover {
  background-position: 100%;
}

@media screen and (max-width: 1290px) {
  section#contact form div.form-wrapper-summary {
    left: -6rem;
    padding: 0.5rem !important;
    width: 23rem;
  }
}

@media screen and (max-width: 1040px) {
  section#contact form div.form-wrapper-summary {
    left: -7rem;
    padding: 0.2rem !important;
    width: 22rem;
    height: 22rem;
  }

  section#contact form div.form-wrapper-summary .top i,
  section#contact form div.form-wrapper-summary .top a,
  section#contact form div.form-wrapper-summary .top address {
    font-size: 1rem;
  }
}

@media screen and (max-width: 900px) {
  section#contact form {
    width: 100%;
  }

  section#contact form div.form-wrapper-summary {
    top: 30rem !important;
    padding: 0.5rem !important;
    left: 0;
    width: 100%;
    height: 10rem;
  }

  section#contact form div.form-wrapper-information {
    width: 100%;
    padding: 1rem !important;
  }

  div.form-data.split {
    gap: 0.5rem;
  }

  textarea {
    padding: 10px;
    width: 100%;
    max-width: 92dvw !important;
    min-width: 50dvw !important;
    max-height: 25dvh;
    min-height: 10dvh;
  }
}

@media screen and (max-width: 950px) {
  section#contact {
    height: 100dvh;
    display: block;
    padding: 10px;
    margin-bottom: 5rem;
    position: relative;

    form {
      flex-direction: column-reverse;
      width: 100%;
      height: 100%;
      margin: 0;

      :is(.form-wrapper-information, .form-wrapper-summary) {
        position: static !important;
        width: 100% !important;
      }

      textarea {
        min-width: 100% !important;
      }
    }
  }
}

@media screen and (max-width: 550px) {
  form .form-wrapper-information .form-data.split {
    flex-direction: column !important;
  }
  form .form-wrapper-summary div > * {
    font-size: 16px !important;
  }
}