/* contact.css */

.contact-hero{
  position:relative;
  padding:180px 40px 120px;
  overflow:hidden;
  background:
  linear-gradient(145deg,#13161B 0%,#1E2228 55%,#1B3A6B 100%);
}

.contact-hero-bg{
  position:absolute;
  inset:0;
  opacity:.12;

  background-image:
  linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);

  background-size:40px 40px;
}

.contact-hero-content{
  position:relative;
  z-index:2;
  max-width:820px;
}

.contact-eyebrow{
  color:#C8DAFF;
  letter-spacing:3px;
  font-size:11px;
  margin-bottom:24px;
}

.contact-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(48px,6vw,82px);
  line-height:1.02;
  color:white;
}

.contact-title em{
  background:linear-gradient(135deg,#4C8EF7,#8B6FE8);
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.contact-subtitle{
  margin-top:28px;
  max-width:650px;
  color:rgba(255,255,255,.68);
  line-height:1.8;
  font-size:15px;
}

/* ========================= */

.contact-section{
  padding:80px 40px 120px;
  background:#F6F2EC;
}

.contact-card{
  display:grid;
  grid-template-columns:420px 1fr;
  border-radius:28px;
  overflow:hidden;

  background:white;

  box-shadow:
  0 10px 40px rgba(0,0,0,.08);
}

/* LEFT */

.contact-card-left{
  background:
  linear-gradient(180deg,#1E2228 0%,#13161B 100%);

  padding:50px;
  color:white;
}

.contact-tag{
  display:inline-flex;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(76,142,247,.12);
  border:1px solid rgba(76,142,247,.3);

  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:30px;
}

.contact-card-left h2{
  font-family:'Playfair Display',serif;
  font-size:42px;
  line-height:1.1;
  margin-bottom:22px;
}

.contact-card-left p{
  color:rgba(255,255,255,.7);
  line-height:1.8;
  margin-bottom:40px;
}

.contact-features{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.feature-item{
  display:flex;
  align-items:center;
  gap:14px;

  color:#C8DAFF;
}

.feature-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4C8EF7;

  box-shadow:0 0 12px #4C8EF7;
}

/* RIGHT */

.contact-card-right{
  padding:50px;
  background:#FAF9F6;
}

.eviz-contact-form{
  display:flex;
  flex-direction:column;
  gap:26px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.form-group label{
  font-size:13px;
  font-weight:500;
  letter-spacing:.4px;
  color:#1E2228;
}

.form-group input,
.form-group textarea,
.form-group select{
  width:100%;
  padding:16px 18px;

  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);

  background:white;

  font-size:14px;
  font-family:'Outfit',sans-serif;

  transition:.25s;
}

.form-group textarea{
  min-height:140px;
  resize:vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  outline:none;

  border-color:#4C8EF7;

  box-shadow:
  0 0 0 4px rgba(76,142,247,.12);
}

/* MULTI GRID */

.multi-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.check-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px 14px;

  border-radius:16px;

  border:1px solid rgba(0,0,0,.08);

  background:white;

  cursor:pointer;

  transition:.25s;
}

.check-card:hover{
  transform:translateY(-2px);

  border-color:#4C8EF7;

  box-shadow:
  0 8px 24px rgba(76,142,247,.12);
}

.check-card input{
  position:absolute;
  opacity:0;
}

.check-card span{
  font-size:13px;
  color:#1E2228;
  text-align:center;
}

.check-card input:checked + span{
  color:#2A5FC0;
  font-weight:600;
}

/* BUTTON */

.contact-submit-btn{
  margin-top:10px;

  height:58px;

  border:none;
  border-radius:16px;

  background:
  linear-gradient(135deg,#2A5FC0,#4C8EF7,#8B6FE8);

  color:white;

  font-family:'Outfit',sans-serif;
  font-size:13px;
  font-weight:600;

  letter-spacing:2px;
  text-transform:uppercase;

  cursor:pointer;

  transition:.3s;

  box-shadow:
  0 10px 24px rgba(76,142,247,.25);
}

.contact-submit-btn:hover{
  transform:translateY(-2px);

  box-shadow:
  0 16px 34px rgba(76,142,247,.32);
}

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

@media(max-width:980px){

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

  .contact-card-left,
  .contact-card-right{
    padding:36px;
  }

}

@media(max-width:680px){

  .contact-section{
    padding:40px 18px 80px;
  }

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

  .contact-title{
    font-size:52px;
  }

}
/* TOP CHOICE */

.top-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.top-choice-btn{

  height:54px;

  border-radius:14px;

  border:1px solid rgba(0,0,0,.08);

  background:white;

  font-family:'Outfit',sans-serif;
  font-size:13px;
  font-weight:500;

  cursor:pointer;

  transition:.25s;
}

.top-choice-btn:hover{

  border-color:#4C8EF7;

  transform:translateY(-2px);

}

.top-choice-btn.active{

  background:#1E2228;
  color:white;

  border-color:#1E2228;

}

/* DYNAMIC */

.dynamic-section{
  display:none;
}