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

.contact-hero{

  height:450px;

  position:relative;

  background:
  url('../img/contact/contact-banner.jpg')
  center/cover;

  display:flex;
  justify-content:center;
  align-items:center;

  text-align:center;
}

.contact-overlay{

  position:absolute;
  inset:0;

  background:
  rgba(0,0,0,.65);
}

.contact-hero-content{

  position:relative;
  z-index:2;

  color:white;

  max-width:850px;
  padding:20px;
}

.contact-hero-content span{

  color:#b79b4a;

  letter-spacing:2px;
  font-weight:600;
}

.contact-hero-content h1{

  font-size:58px;

  margin:20px 0;
}

.contact-hero-content p{

  font-size:18px;

  color:#ddd;
}

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

.contact-cards{

  padding:80px 0;
}

.contact-cards-container{

  width:85%;
  margin:auto;

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

  gap:25px;
}

.contact-card{

  background:white;

  text-align:center;

  padding:40px;

  border-radius:12px;

  box-shadow:
  0 10px 25px rgba(0,0,0,.06);

  transition:.3s;
}

.contact-card:hover{

  transform:translateY(-8px);
}

.contact-card i{

  font-size:42px;

  color:#b79b4a;

  margin-bottom:20px;
}

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

.contact-form-section{

  padding:100px 0;

  background:#f8fafc;
}

.contact-form-container{

  width:85%;
  margin:auto;

  display:grid;
  grid-template-columns:
  1fr 1fr;

  gap:60px;
}

.contact-info-side h2{

  font-size:42px;

  margin:20px 0;
}

.contact-info-side p{

  color:#666;

  line-height:1.8;

  margin-bottom:25px;
}

.contact-info-side ul{

  list-style:none;
}

.contact-info-side li{

  margin-bottom:15px;
}

.contact-form{

  display:flex;
  flex-direction:column;
  gap:18px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{

  padding:16px;

  border:1px solid #ddd;

  border-radius:8px;

  font-size:15px;
}

.contact-form textarea{
  resize:none;
}

/* =========================
   SERVICE AREA
========================= */

.service-area{

  padding:100px 0;

  text-align:center;
}

.service-area-container{

  width:70%;
  margin:auto;
}

.service-area h2{

  font-size:42px;

  margin:20px 0;
}

/* =========================
   FAQ
========================= */

.faq-section{

  background:#f8fafc;

  padding:100px 0;
}

.faq-container{

  width:85%;
  margin:auto;
}

.faq-grid{

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

  gap:25px;
}

.faq-card{

  background:white;

  padding:35px;

  border-radius:12px;

  box-shadow:
  0 10px 25px rgba(0,0,0,.05);
}

.faq-card h3{

  margin-bottom:15px;

  color:#081521;
}

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

@media(max-width:1024px){

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

  .faq-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .contact-cards-container{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){

  .contact-hero-content h1{
    font-size:38px;
  }

  .contact-cards-container,
  .faq-grid{
    grid-template-columns:1fr;
  }

  .contact-form-container,
  .service-area-container,
  .faq-container{
    width:90%;
  }

  .contact-info-side h2,
  .service-area h2{
    font-size:30px;
  }
}