/* ===========================
   RESPONSIVO
=========================== */

@media (max-width: 1024px){

header{

    padding:0 5%;

}

.hero-content h1{

    font-size:52px;

    line-height:60px;

}

.hero-content p{

    font-size:18px;

}

.cards{

    grid-template-columns:repeat(2,1fr);

}

}

/* ===========================
   TABLETS
=========================== */

@media (max-width:768px){

header{

    flex-direction:column;

    height:auto;

    padding:20px;

}

nav{

    margin-top:20px;

}

nav ul{

    flex-direction:column;

    align-items:center;

    gap:20px;

}

.icons{

    margin-top:20px;

}

.hero{

    padding:100px 20px;

}

.hero-content h2{

    font-size:18px;

    letter-spacing:4px;

}

.hero-content h1{

    font-size:40px;

    line-height:48px;

}

.hero-content p{

    font-size:16px;

}

.cards{

    grid-template-columns:1fr;

}

.beneficios{

    grid-template-columns:1fr 1fr;

}

footer{

    grid-template-columns:1fr;

    text-align:center;

}

.newsletter form{

    flex-direction:column;

    align-items:center;

}

.newsletter input{

    width:100%;

}

.newsletter button{

    width:220px;

}

}

/* ===========================
   CELULARES
=========================== */

@media (max-width:480px){

.logo h1{

    font-size:24px;

}

.hero-content h1{

    font-size:32px;

    line-height:40px;

}

.hero-content p{

    font-size:15px;

}

.btn{

    padding:15px 30px;

}

section{

    padding:70px 20px;

}

section h2{

    font-size:30px;

}

.card img{

    height:260px;

}

.beneficios{

    grid-template-columns:1fr;

}

footer h3{

    font-size:22px;

}

footer p{

    font-size:14px;

}

}