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

@media(max-width:1200px) {

    .nav-menu {

        gap: 22px;

    }

}

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

@media(max-width:991px) {

    .nav-btn {

        display: none;

    }

    .menu-toggle {

        display: flex;

    }

    .nav-menu {

        position: fixed;

        top: 95px;

        left: -100%;

        width: 100%;

        background: #151922;

        border-top: 1px solid rgba(255, 255, 255, .08);

        flex-direction: column;

        padding: 40px;

        gap: 28px;

        transition: .4s;

        z-index: 999;

    }

    .nav-menu.active {

        left: 0;

    }

}

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

@media(max-width:768px) {

    .navbar {

        padding: 14px 18px;

    }

    .logo {

        font-size: 24px;

    }

    .menu-toggle {

        width: 44px;

        height: 44px;

    }

}

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

@media(max-width:480px) {

    .navbar {

        padding: 12px 16px;

    }

    .logo {

        font-size: 22px;

    }

}

/*=========================================
            ABOUT RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .about-wrapper {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .about-image {

        order: 2;

    }

    .about-content {

        order: 1;

        text-align: center;

    }

    .about-list {

        justify-items: center;

    }

}

@media(max-width:768px) {

    .about {

        padding: 80px 0;

    }

}

/*=========================================
            SERVICES RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .services-grid {

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

    }

}

@media(max-width:768px) {

    .services {

        padding: 80px 0;

    }

    .services-grid {

        grid-template-columns: 1fr;

    }

    .service-box {

        padding: 28px;

    }

}

/*=========================================
        WHY RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .why-grid {

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

    }

}

@media(max-width:768px) {

    .why-grid {

        grid-template-columns: 1fr;

    }

}


/*=========================================
        PROCESS RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .process-grid {

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

    }

}

@media(max-width:768px) {

    .process {

        padding: 80px 0;

    }

    .process-grid {

        grid-template-columns: 1fr;

    }

}

/*=========================================
        PORTFOLIO RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .portfolio-grid {

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

    }

}

@media(max-width:768px) {

    .portfolio {

        padding: 80px 0;

    }

    .portfolio-grid {

        grid-template-columns: 1fr;

    }

}

/*=========================================
        TESTIMONIAL RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .testimonial-grid {

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

    }

}

@media(max-width:768px) {

    .testimonial-grid {

        grid-template-columns: 1fr;

    }

    .testimonials {

        padding: 80px 0;

    }

}

/*=========================================
            FAQ RESPONSIVE
=========================================*/

@media(max-width:768px) {

    .faq {

        padding: 80px 0;

    }

    .faq-question {

        padding: 20px;

        font-size: 16px;

    }

    .faq-answer p {

        padding: 0 20px 20px;

    }

}

/*=========================================
        CONTACT CTA RESPONSIVE
=========================================*/

@media(max-width:768px) {

    .contact-cta {

        padding: 80px 0;

    }

    .cta-box {

        padding: 50px 25px;

    }

    .cta-box h2 {

        font-size: 32px;

    }

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    .cta-buttons .btn {

        width: 100%;

        max-width: 280px;

        justify-content: center;

    }

}

/*=========================================
            FOOTER RESPONSIVE
=========================================*/

@media(max-width:991px) {

    .footer-grid {

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

    }

}

@media(max-width:768px) {

    .footer {

        padding: 70px 0 25px;

    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .footer-bottom {

        flex-direction: column;

        text-align: center;

    }

}