@media(max-width:1024px) {

    .hero,
    .about,
    .contact,
    .review-layout {
        grid-template-columns: 1fr;
        flex-direction: column;
        text-align: center
    }

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

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

    .brands-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:760px) {
    section {
        padding: 80px 6%
    }

    .navbar {
        padding: 18px
    }

    .menu-toggle {
        display: block
    }

    .nav-menu {
        position: fixed;
        top: 74px;
        right: -100%;
        width: 285px;
        height: calc(100vh - 74px);
        background: #0f172a;
        flex-direction: column;
        padding: 35px;
        transition: .35s
    }

    .nav-menu.active {
        right: 0
    }

    .nav-btn {
        display: none
    }

    .hero {
        padding-top: 140px
    }

    .hero-card {
        width: 100%
    }

    .services-grid,
    .gallery-grid,
    .testimonials-grid,
    .stats,
    .brands-grid {
        grid-template-columns: 1fr
    }

    .about-list {
        grid-template-columns: 1fr
    }
}