/* ===========================
TABLET
=========================== */

@media (max-width:1024px){

.container{
    width:94%;
}

.hero-grid{
    grid-template-columns:1fr;
    text-align:center;
}

.hero img{
    margin-top:30px;
}

.hero h1{
    font-size:40px;
}

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

.footer-grid{
    grid-template-columns:repeat(2,1fr);
}

}


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

@media (max-width:768px){

.navbar{

    flex-direction:column;

    gap:20px;

}

.menu{

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

}

.hero{

    padding:60px 0;

}

.hero h1{

    font-size:32px;

}

.hero p{

    font-size:16px;

}

.section-title h2{

    font-size:30px;

}

.grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

}

.card-content{

    padding:18px;

}

.btn{

    width:100%;

    text-align:center;

}

.scrollTop{

    width:50px;

    height:50px;

    font-size:20px;

}

}


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

@media (max-width:480px){

.logo{

    font-size:22px;

}

.logo img{

    width:36px;

}

.menu a{

    font-size:14px;

}

.hero h1{

    font-size:28px;

}

.hero p{

    font-size:15px;

}

.section-title h2{

    font-size:26px;

}

.card h3{

    font-size:20px;

}

footer{

    text-align:center;

}

.copy{

    font-size:14px;

}

}