@media (max-width: 991px) {

    .navbar {
        position: fixed;
        top: 82px;
        right: -100%;
        width: 270px;
        height: calc(100vh - 82px);
        background: #fff;
        transition: right 0.4s ease;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.08);
        z-index: 9998;
    }

    .navbar.active {
        right: 0;
    }

    .navbar ul {
        display: block;
        padding: 40px;
        margin: 0;
    }

    .navbar li {
        margin-bottom: 25px;
    }

    .desktop-btn {
        display: none;
    }

    .menu-btn {
        display: block;
        cursor: pointer;
        position: relative;
        z-index: 9999;
    }

}

/*==========================
Hero Responsive
==========================*/

@media(max-width:991px) {

    .hero {

        height: 700px;

    }

    .hero h1 {

        font-size: 46px;

        line-height: 56px;

    }

    .hero p {

        font-size: 17px;

        line-height: 30px;

    }

}

@media(max-width:768px) {

    .hero {

        height: 620px;

        text-align: center;

    }

    .hero-content {

        max-width: 100%;

    }

    .hero-subtitle::before {

        display: none;

    }

    .hero h1 {

        font-size: 38px;

        line-height: 46px;

    }

    .hero p {

        font-size: 16px;

        line-height: 28px;

    }

    .hero-btn {

        justify-content: center;

        flex-wrap: wrap;

    }

}

@media(max-width:576px) {

    .hero {

        height: 600px;

    }

    .hero h1 {

        font-size: 30px;

        line-height: 38px;

    }

    .hero p {

        font-size: 15px;

    }

    .hero-btn {

        flex-direction: column;

        gap: 15px;

    }

    .hero-btn a {

        width: 220px;

        margin: auto;

    }

}

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

@media(max-width:991px) {

    .about {

        padding: 80px 0;

    }

    .about-wrapper {

        grid-template-columns: 1fr;

    }

    .about-content {

        order: 2;

    }

    .about-image {

        order: 1;

    }

    .about h2 {

        font-size: 38px;

        line-height: 48px;

    }

    .about-list {

        grid-template-columns: 1fr;

    }

    .experience-box {

        right: 0px;

        bottom: -18px;

    }

}

@media(max-width:576px) {

    .about h2 {

        font-size: 30px;

        line-height: 40px;

    }

    .experience-box {

        width: 140px;

        padding:3px;

    }

    .experience-box h2 {

        font-size: 30px;

    }

}

/*==========================
Services Responsive
===========================*/

@media(max-width:991px) {

    .service-grid {

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

    }

}

@media(max-width:576px) {

    .section-title h2 {

        font-size: 34px;

    }

    .service-grid {

        grid-template-columns: 1fr;

    }

    .service-card {

        padding: 30px;

    }

}

/*====================================
Industries Responsive
====================================*/

@media(max-width:991px) {

    .industry-grid {

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

    }

}

@media(max-width:576px) {

    .industry-grid {

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

        gap: 15px;

    }

    .industries h2 {

        font-size: 34px;

    }

    .industry-card {

        padding: 25px 10px;

    }

}

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

@media(max-width:991px) {

    .process-wrapper {

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

    }

    .process-line {

        display: none;

    }

}

@media(max-width:576px) {

    .process-wrapper {

        grid-template-columns: 1fr;

    }

    .process-section {

        padding: 80px 0;

    }

    .process-number {

        width: 50px;

        height: 50px;

    }

    .process-item h3 {

        font-size: 18px;

    }

}

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

@media(max-width:768px) {

    .contact-box {

        width: 100%;

    }

    .contact-title h2 {

        font-size: 36px;

    }

}