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

.contact {
  background: var(--clrBackground);
}

.contact .container {
  display: flex;

  flex-direction: column;

  gap: var(--space64);
}

.contact .sectionHeader {
  max-width: 760px;

  margin: 0 auto;

  text-align: center;
}

/*==================================================
                CONTACT LAYOUT
==================================================*/

.contactLayout {
  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: var(--space40);

  align-items: start;
}
/*==================================================
                CONTACT PANELS
==================================================*/

.contactInfo,
.contactForm {
  background: var(--clrSurface);

  border-radius: var(--borderRadiusLg);

  box-shadow: var(--shadowMd);

  padding: 2rem;
}

/*==================================================
                CONTACT INFO
==================================================*/

.contactInfo {
  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: var(--space32);
}

.contactHeader {
  display: flex;

  flex-direction: column;

  gap: var(--space12);
}

.contactHeader p {
  color: var(--clrBody);

  line-height: 1.7;
}
/*==================================================
                CONTACT LIST
==================================================*/

.contactList {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: var(--space20);
}

.contactItem {
  display: flex;

  flex-direction: column;

  gap: 0.45rem;

  padding: 1.25rem;

  background: rgba(109, 40, 217, 0.04);

  border: 1px solid rgba(109, 40, 217, 0.08);

  border-radius: var(--borderRadiusMd);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.contactItem:hover {
  transform: translateY(-4px);

  border-color: rgba(109, 40, 217, 0.2);

  box-shadow: var(--shadowSm);
}

.contactLabel {
  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--clrPrimary);
}

.contactValue {
  color: var(--clrHeading);

  text-decoration: none;

  font-weight: 600;

  transition: color 0.3s ease;
}

.contactValue:hover {
  color: var(--clrPrimary);
}
/*==================================================
                    FORM ROW
==================================================*/

.formRow {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space20);
}
/*==================================================
                    FORM
==================================================*/

.contactFormElement {
  display: flex;

  flex-direction: column;

  gap: var(--space16);
}

.formGroup {
  display: flex;

  flex-direction: column;

  gap: 0.12rem;
}

/*==================================================
                CONTACT FORM
==================================================*/

.contactForm {
  display: flex;

  flex-direction: column;

  gap: var(--space32);
}

.contactFormHeader {
  display: flex;

  flex-direction: column;

  gap: 0.25rem;
}

.contactFormHeader p {
  color: var(--clrBody);

  line-height: 1.6;
}

.contactFormElement {
  display: flex;

  flex-direction: column;

  gap: 0.3rem;
}

.formRow {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 0.85rem;
}

.formGroup {
  display: flex;

  flex-direction: column;

  gap: 0.3rem;

  margin: 0;
}
/*==================================================
                FORM CONTROLS
==================================================*/

.formLabel {
  font-size: 0.9rem;

  font-weight: 600;

  color: var(--clrHeading);
}

.formControl {
  width: 100%;

  height: 48px;

  padding: 0 0.95rem;

  border: 1px solid rgba(17, 24, 39, 0.12);

  border-radius: var(--borderRadiusMd);

  background: var(--clrSurface);

  color: var(--clrHeading);

  font: inherit;

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

textarea.formControl {
  resize: vertical;

  min-height: 120px;
}
/*==================================================
                FORM FOCUS
==================================================*/

.formControl:focus {
  outline: none;

  border-color: var(--clrPrimary);

  box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.12);
}
/*==================================================
                FORM ACTIONS
==================================================*/

.contactFormActions {
  display: flex;

  justify-content: flex-start;
}
/*==================================================
                CONTACT HOVER
==================================================*/

.contactItem{

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;

}

.contactItem:hover{

    transform:translateY(-6px);

    background:rgba(109,40,217,.06);

    border-color:rgba(109,40,217,.18);

    box-shadow:var(--shadowMd);

}

.contactItem:hover .contactValue{

    color:var(--clrPrimary);

}
/*==================================================
                FORM HOVER
==================================================*/

.formControl:hover{

    border-color:rgba(109,40,217,.25);

}
.contactFormActions .btn{

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.contactFormActions .btn:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadowMd);

}
/*==================================================
                CONTACT RESPONSIVE
==================================================*/

@media (max-width:992px){

    .contactLayout{

        grid-template-columns:1fr;

        gap:var(--space32);

    }

}
@media (max-width:768px){

    .contact{

        overflow:hidden;

    }

    .contact .container{

        gap:var(--space48);

    }

    .contactInfo,
    .contactForm{

        padding:1.5rem;

    }

    .contactList{

        grid-template-columns:1fr;

    }

    .formRow{

        grid-template-columns:1fr;

    }

    .contactFormActions .btn{

        width:100%;

        justify-content:center;

    }

}

@media (max-width:480px){

    .contactInfo,
    .contactForm{

        padding:1.25rem;

    }

    .contactItem{

        padding:1rem;

    }

    .formControl{

        height:44px;

    }

    textarea.formControl{

        height:100px;

    }

}