/* HERO */
.contact-hero{
padding:140px 20px 80px;
text-align:center;
background:linear-gradient(135deg,#3a86ff,#06d6a0);
color:white;
}

.contact-hero h1{
font-size:clamp(24px,5vw,50px);
font-family:'Fredoka', sans-serif;
}

/* CONTACT SECTION */
.contact-section{
padding:80px 8%;
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
background:#f7fbff;
}

/* CONTACT INFO */
.contact-info{
background:white;
padding:40px;
border-radius:18px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.contact-info h2{
font-family:'Fredoka', sans-serif;
margin-bottom:15px;
color:#103669;
}

.contact-info p{
margin:15px 0;
font-size:18px;
}

.contact-info a{
color:#103669;
text-decoration:none;
font-weight:500;
}

/* WhatsApp button */
.contact-whatsapp{
display:inline-block;
margin-top:20px;
background:#25D366;
color:white !important;
padding:12px 25px;
border-radius:25px;
text-decoration:none;
font-weight:600;
}

/* MAP */
.map iframe{
border-radius:18px;
}

/* email link style */
.email-link{
color:#fff;
text-decoration:none;
font-weight:500;
}

.email-link:hover{
text-decoration:underline;
color:#ffbe0b;
}
.direction-btn{
  display:inline-block;
  margin-top:15px;
  background:#25D366;
  color:white;
  padding:12px 20px;
  border-radius:22px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.direction-btn:hover{
  background:#1ebe5d;
  transform:scale(1.05);
}


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

/* Tablets */
@media (max-width:992px){

  .contact-section{
    grid-template-columns:1fr;
    padding:70px 6%;
  }

  .contact-hero{
    padding:120px 20px 70px;
  }

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

}

/* Large Phones */
@media (max-width:768px){

  .contact-hero{
    padding:110px 20px 60px;
  }

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

  .contact-info{
    padding:25px;
  }

  .contact-info p{
    font-size:16px;
  }

}

/* Small Phones */
@media (max-width:480px){

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

  .direction-btn,
  .contact-whatsapp{
    width:100%;
    text-align:center;
  }

}