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

.contact-hero{
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:140px;
}

.contact-hero-content{
  max-width:760px;
}

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

.contact-section{
  background:#050505;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:start;
}

.contact-info h2,
.contact-form-box h2{
  margin-bottom:20px;
}

.contact-info > p{
  margin-bottom:30px;
}

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

.contact-card{
  display:flex;
  align-items:flex-start;
  gap:18px;

  background:var(--bg-card);
  border:1px solid var(--border-color);

  border-radius:20px;
  padding:22px;

  margin-bottom:18px;
}

.contact-card svg{
  color:var(--primary);
  min-width:24px;
}

.contact-card h3{
  margin-bottom:6px;
}

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

.contact-form-box{
  background:var(--bg-card);
  border:1px solid var(--border-color);

  border-radius:24px;
  padding:35px;
}

/* ========================================
   OFFICE SECTION
======================================== */

.office-section{
  background:#0b0b0b;
}

.office-card{
  text-align:center;
}

.office-card svg{
  color:var(--primary);
  margin-bottom:18px;
}

/* ========================================
   CTA
======================================== */

.contact-cta{
  text-align:center;

  background:var(--primary);
  color:#000;
}

.contact-cta p{
  color:#111;
  margin:16px 0 28px;
}

.contact-cta .btn-primary{
  background:#000;
  color:#fff;
}

/* ========================================
   RESPONSIVE
======================================== */

@media(max-width:768px){

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

  .contact-form-box{
    padding:24px;
  }

}