/*--------------------------Title and Paragraf-------------------------------*/

.contact h1 {
  padding-top: 1rem;
  margin-top: 7rem;
  font-size: 3rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 3.2rem;
  text-align: center;

}

.contact h1 span{
  color: var(--primary-color);
}

.contact p{
  margin: 4%;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 2rem;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
}

/*----------------------------- Contact Cards----------------------------- */

.contactforms ul{
  list-style: none;
  padding-bottom: 1rem;
}

.contactforms li{
  border: 2px solid #1b1a1a;
  padding: 2rem;
  margin: 4% 16% 6%;
  font-size: 18px;
  font-family: "roboto", sans-serif;
  font-weight: 700;
  text-align: center;
}

.contactforms li ion-icon {
  font-size: 1.5rem;
  margin-bottom: -6px;
}

.contactforms #card1{
  background:var(--secundary-color);
  transition: 0.2s;
  box-shadow: 3px 3px 0px;
}

.contactforms #card2{
  background:var(--highlight-color) ;
  transition: 0.2s;
  box-shadow: 3px 3px 0px;
}

.contactforms #card3{
  background: var(--primary-color);
  transition: 0.2s;
  box-shadow: 3px 3px 0px;
}

.contactforms #card4{
  background:var(--terciary-color);
   transition: 0.2s;
   box-shadow: 3px 3px 0px;
}

/*Hover*/

.contactforms #card1:hover{
  background: #4caf4fd0 ;
  transform: scale(1.1);
  box-shadow: none;
}

.contactforms #card2:hover{
  background:  #fadd3bc7 ;
  transform: scale(1.1);
  box-shadow: none;
}

.contactforms #card3:hover{
  background: #e43516da ;
  transform: scale(1.1);
  box-shadow: none;
}

.contactforms #card4:hover{
  background:  rgba(23, 62, 255, 0.842);
  transform: scale(1.1);
  box-shadow: none;
}

/*Responsivo*/ 

@media screen and (max-width: 750px) {
  section.section {
    margin-top: 1rem;
  }
}


@media screen and (min-width: 751px) {

  .cards {
    display: flex;
    justify-content: center;
  }

  #card1, #card2, #card3, #card4 {
    margin: 1rem;

  }
  #card1:hover, #card2:hover, #card3:hover, #card4:hover {
    transform: scale(1.07);
  }

  .contact h1 {
    padding-top: 1rem;
  }
  .contactforms ul {
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
  }
  .contactforms ul li {
    width: 25%;
    font-size: 1.2rem;
  }
}