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

@media (max-width:992px){

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

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

.hero-info{
    justify-content:center;
    flex-wrap:wrap;
}

nav{
    display:none;
}

.menu-toggle{
    display:block;
}

}

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

@media (max-width:768px){

.container{
    width:95%;
}

.hero{
    padding:120px 0 60px;
}

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

.section-title h2{
    font-size:30px;
}

.about-cards,
.features-grid,
.services-grid,
.projects-grid,
.gallery-grid{
    grid-template-columns:1fr;
}

.primary-btn,
.secondary-btn{
    display:block;
    width:100%;
    margin:10px 0;
    text-align:center;
}

.hero-info{
    flex-direction:column;
    gap:20px;
}

.contact-grid{
    grid-template-columns:1fr;
}

.footer-grid{
    grid-template-columns:1fr;
}

}

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

@media (max-width:480px){

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

.hero p{
    font-size:16px;
}

.logo{
    font-size:22px;
}

}