/* Logo */
.logo{
  
  margin-left: 55px;
  margin-top: 10px;
}
/* =========================================
   BODY
========================================= */

body{

  background:
  radial-gradient(circle at top right,
  rgba(255,120,0,.12),
  transparent 30%),

  radial-gradient(circle at bottom left,
  rgba(255,90,0,.08),
  transparent 30%),

  #070707;
}
/* =========================================
   CONTACT HERO
========================================= */

.contact-hero{

  min-height:100vh;

  padding:160px 80px 100px;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:60px;

  align-items:center;

  animation: float 5s ease-in-out infinite;
}

/* LEFT */

.contact-left h1{

  font-size:6rem;

  line-height:.9;

  font-weight:900;

  letter-spacing:-4px;

  margin:25px 0;
  
}

.contact-left p{

  color:#b8b8b8;

  font-size:1.1rem;

  line-height:1.8;

  max-width:600px;
}

/* TAG */

.contact-tag{

  display:inline-block;

  padding:10px 18px;

  border-radius:999px;

  background:rgba(255,255,255,.05);

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

  color:#ff7b00;

  letter-spacing:3px;

  font-size:.8rem;

  backdrop-filter:blur(10px);
}

/* CARDS */

.contact-cards{

  display:flex;

  gap:20px;

  margin-top:50px;
}

.contact-card{

  flex:1;

  padding:25px;

  border-radius:28px;
}

.contact-card h3{

  margin-bottom:10px;

  font-size:1.1rem;
}

.contact-card p{

  color:#d5d5d5;
}

/* FORM */

.contact-form{

  padding:45px;

  border-radius:40px;

  border:1px solid rgba(255,255,255,.06);
}

/* FORM GROUP */

.form-group{

  display:flex;

  flex-direction:column;

  margin-bottom:25px;
}

.form-group label{

  margin-bottom:10px;

  color:#d8d8d8;
}

/* INPUTS */

.form-group input,
.form-group textarea{

  width:100%;

  border:none;

  outline:none;

  padding:18px 22px;

  border-radius:18px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.06);

  color:#fff;

  font-size:1rem;

  transition:.4s ease;
}

.form-group input:focus,
.form-group textarea:focus{

  border-color:#ff7b00;

  box-shadow:
  0 0 20px rgba(255,120,0,.15);
}

/* BUTTON */

.submit-btn{

  width:100%;

  margin-top:10px;
}

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

@media(max-width:1200px){

  .contact-left h1{
    font-size:4.5rem;
  }

}

@media(max-width:992px){

  .contact-hero{

    grid-template-columns:1fr;

    padding:140px 40px 80px;
  }

}

@media(max-width:768px){

  .contact-left h1{
    font-size:3rem;
    letter-spacing:-2px;
  }

  .contact-cards{
    flex-direction:column;
  }

  .contact-form{
    padding:30px;
  }

  .contact-hero{
    padding:120px 25px 60px;
  }

}