/* ===========================
   TABLET (992px)
=========================== */

@media (max-width: 992px) {

    .navbar{
        padding:18px 5%;
    }

    .logo{
        font-size:26px;
    }

    .nav-links{
        gap:20px;
    }

    .hero{
        padding:130px 5% 80px;
        gap:40px;
    }

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

    .hero-content h1{
        font-size:48px;
    }

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

/* ===========================
   MOBILE (768px)
=========================== */

@media (max-width:768px){

    .navbar{

        flex-direction:column;

        gap:20px;

        position:relative;

    }

    .nav-links{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }

    .hero{

        flex-direction:column-reverse;

        text-align:center;

        padding:60px 20px;

    }

    .top-hero-heading{
        padding:50px 20px 20px;
    }

    .top-hero-heading h1{
        font-size:34px;
    }

    .hero-content{

        width:100%;

    }

    .hero-image{

        width:90%;

        margin-bottom:30px;

    }

    .hero-content h1{

        font-size:38px;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

}

/* ===========================
   SMALL MOBILE (480px)
=========================== */

@media (max-width:480px){

    .logo{

        font-size:24px;

    }

    .hero-content h1{

        font-size:30px;

    }

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

    .hero-content p{

        font-size:15px;

    }

    .primary-btn,
    .secondary-btn,
    .btn{

        width:100%;

        text-align:center;

    }

}

/* WHY */

@media(max-width:992px){

.why-container{

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

}

.stats{

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

}

.services-container{

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

}

.about-container{

flex-direction:column;

}

}

@media(max-width:768px){

.services-container{

grid-template-columns:1fr;

}

.why-container{

grid-template-columns:1fr;

}

.stats{

grid-template-columns:1fr;

}

.about-features{

grid-template-columns:1fr;

}

}

.team-container{
    flex-direction:column;
}

.testimonial-container{
    grid-template-columns:1fr;
}

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

.gallery-item-wide{
    grid-column:span 2;
}

@media(max-width:768px){

.gallery-container{

grid-template-columns:1fr;

}

.gallery-item-wide{

grid-column:span 1;

}

}

@media(max-width:768px){

.contact-container{

grid-template-columns:1fr;

}

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

}