.contact-us-container {
  padding-top: 10rem;
  display: flex;
  justify-content: center;
}

.contact-us-wrapper {
  /* CA SA MEARGA MAX WIDHT SI SA FIE RESPONSIVE */
  /* https://stackoverflow.com/questions/43705866/max-width-not-working-on-flex-item */
  max-width: 110rem;
  width: 100%;
}

.contact-us-title {
  font-size: 2.4rem;
  text-transform: uppercase;
  text-align: center;
}

.contact-icon-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 6.4rem;
  justify-items: center;
}

.contact-icons {
  display: flex;
  flex-direction: column;
}

.contact-icons ion-icon {
  font-size: 5rem;
  text-align: center;
  display: block;
  align-self: center;
  color: var(--primary-color);
}

.contact-icons p {
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--text-gray);
  margin-top: 2.4rem;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  margin-top: 6.4rem;
  gap: 3.2rem;
}

.contact-fields {
  max-width: 55rem;
  width: 100%;
}

.contact,
.email {
  max-width: 55rem;
  width: 100%;
  padding: 1.2rem 2.4rem;
  margin-bottom: 2.4rem;
}

.contact-name,
.email-name {
  position: relative;
}

.contact-name input,
.email-name input {
  border: 1px solid var(--primary-color);
  border-radius: 0.5rem;
  outline: none;
}

.contact-name input:focus,
.email-name input:focus {
  box-shadow: 0px 0px 0px 3px rgba(211, 84, 0, 0.3);
  border: 1px solid var(--white-color);
}

.contact-name label,
.email-name label {
  position: absolute;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--light-gray);
  top: 20%;
  left: 2.4rem;
  pointer-events: none;
  transition: all 0.3s;
}

.contact:focus ~ label,
.contact:valid ~ label,
.email:focus ~ label,
.email:valid ~ label {
  top: -11%;
  left: 5%;
  color: var(--primary-color);
  padding: 0 2rem 0 2rem;
  font-size: small;
  background: var(--white-color);
}

.area-container {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
}

textarea {
  resize: none;
  width: 100%;
  height: 100%;
  outline: none;
  border: 1px solid var(--primary-color);
  border-radius: 5px;
  padding: 1rem 2.4rem;
}

.area-container label {
  position: absolute;
  top: 8%;
  left: 2.4rem;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--light-gray);
  pointer-events: none;
  transition: all 0.3s;
}

textarea:focus ~ label,
textarea:valid ~ label {
  top: -5%;
  left: 4%;

  color: var(--primary-color);
  padding: 0 2rem;
  background: var(--white-color);
}

textarea:focus {
  border: transparent;
  box-shadow: 0px 0px 0px 3px rgba(211, 84, 0, 0.3);
}

.contact-btn {
  max-width: 55rem;
  width: 100%;
  padding: 1rem 2rem;
  text-align: center;
  background: var(--primary-color);
  color: var(--white-color);
  font-weight: 700;
  border-radius: 0.5rem;
  border-style: outset;
  border: none;
  cursor: pointer;

  transition: all 0.3s;
}

.contact-btn:hover {
  color: var(--primary-color);
  background: var(--white-color);
  box-shadow: 0 0 0 4px var(--primary-color);
}