/* =========================
CONTACT PAGE
========================= */
h2{
  text-decoration: underline red;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}
.contact-page{
  text-align:center;
}

/* HERO */

.contact-hero{
  max-width:600px;
  margin:0 auto 80px;
}

.contact-hero h2{
  font-size:2.5rem;
  margin-bottom:20px;
}

.contact-hero p{
  opacity:.85;
  line-height:1.7;
}

/* BUTTONS */

.contact-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}

.contacts-btns{

  position:relative;
  display:inline-block;

  padding:16px 30px;

  border-radius:8px;

  overflow:hidden;

  font-size:1rem;

  transition:.25s;

}

/* glowing layer */

.contacts-btns::before{

  content:"";

  position:absolute;
  top:0;
  left:-100%;

  width:200%;
  height:100%;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );

  transition:.6s;

}

/* hover animation */

.contacts-btns:hover::before{
  left:100%;
}

/* lift + glow */

.contacts-btns:hover{

  transform:translateY(-4px);

  box-shadow:0 0 20px rgba(255,255,255,0.2);

}


/* =========================
MOBILE
========================= */

@media (max-width:600px){

  .contact-links{
    flex-direction:column;
    align-items:center;
  }

  .contacts-btns{
    width:80%;
    text-align:center;
  }

}