/* CONTACT HERO */

.contact-hero{
  margin-top: 100px;
  height: 300px;
  background: linear-gradient(rgba(17, 0, 0, 0.7),rgba(17,0,0,.7)), url('../resources/images/website/vino.webp');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  padding:0 8%;
  color: var(--white-color);
}

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

.contact-hero-content p{
  color: var(--silver-color);
  max-width:700px;
}

/* 
==========
Ccontact information
========== 
*/

.contact-info{
  padding:80px 8%;
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

.info-card{
  background: var(--dark-color);
  padding:40px;
  border-radius:15px;
  text-align:center;
  transition:.3s;
}

.info-card:hover{
  transform:translateY(-5px);
}

.info-card i{
  font-size:35px;
  color: var(--yellow-color);
  margin-bottom:20px;
}

.info-card h3{
  margin-bottom:10px;
  color: var(--yellow-color);
}

.info-card p{
  color: var(--silver-color);
}

/* 
==========
Contact
==========
*/

.contact-section{
  padding:40px 8% 80px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.contact-form{
  background: var(--dark-color);
  padding:40px;
  border-radius:15px;
}

.contact-form h2{
  margin-bottom:30px;
  color: var(--yellow-color);
}

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

.contact-form input,
.contact-form textarea{
  background: var(--dark-color);
  border:1px solid var(--grey-color);
  padding:15px;
  border-radius:10px;
  color:var(--white-color);
  font-family:'Poppins',sans-serif;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color: var(--yellow-color);
}

.contact-form button{
  padding:15px;
  border:none;
  background: var(--scarlet-color);
  color: var(--white-color);
  font-weight:600;
  border-radius:10px;
  cursor:pointer;
  transition:.3s;
}

.contact-form button:hover{
  transform:translateY(-3px);
}

.contact-map iframe{
  width:100%;
  height:100%;
  min-height:500px;
  border:none;
  border-radius:15px;
}

/* 
==========
Socials 
==========
*/

.contact-socials{
  padding:0 8% 80px;
  text-align:center;
}

.contact-socials h2{
  margin-bottom:30px;
  font-size:40px;
}

.social-icons{
  display:flex;
  justify-content:center;
  gap:20px;
}

.social-icons a{
  width:60px;
  height:60px;
  background: var(--dark-color);
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:22px;
  transition:.3s;
}

.social-icons a:hover{
  background: var(--yellow-color);
  transform:translateY(-5px);
}

.social-icons a:hover .icon svg{
  fill: var(--white-color);
}

.social-icons a .icon{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icons a .icon svg{
  width: 25px;
  height: 25px;
  fill: var(--white-color);
}

/* RESPONSIVE */

@media(max-width:900px){

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

}

@media(max-width:768px){

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

  .contact-map iframe{
    min-height:350px;
  }

}