@media screen and (max-width: 991px) {
    .main-header {
        justify-content: space-between;
    }

    .main-header .nav-outer {
        width: auto;
    }

    .main-header .logo-box {
        margin-top: 0;
    }

    .main-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        background: #eceeef;
        height: calc(100vh + 50px);
        -webkit-transform: scale(0, 1);
        transform: scale(0, 1);
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transition: -webkit-transform 0.7s ease;
        transition: -webkit-transform 0.7s ease;
        transition: transform 0.7s ease;
        transition: transform 0.7s ease, -webkit-transform 0.7s ease;
    }

    .main-menu.active,
    .overlay.active {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    .overlay.active {
        z-index: 99;
    }

    .main-menu.active {
        z-index: 9999;
    }

    .main-menu ul {
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }

    .main-menu ul li a {
        font-size: 20px;
        color: #9ca3a9;
    }

    .main-menu ul li {
        padding: 10px 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }

    .main-menu ul li:first-child {
        border-top: 1px solid #ccc;
    }
}

@media screen and (max-width: 767px) {
    .container {
        max-width: 100%;
    }

    .topbar-nav,
    .services .owl-dots,
    .box-reverse.why-choose-box::before,
    .why-choose-box::before,
    .why-choose-box::after,
    .box-reverse.why-choose-box::after,
    .why-choose-shape-2 {
        display: none;
    }

    .services .owl-nav::before,
    .services .owl-nav::after {
        width: 50%;
    }

    .why-choose-box {
        display: block;
        padding: 25px;
    }

    .why-choose-box .box-icon {
        justify-content: flex-start;
        width: inherit;
        margin: 15px 0;
    }


    .why-choose-section-image {
        margin: 0;
        padding-bottom: 100px;
    }

    .why-choose-section-image img {
        max-width: 100%;
    }

    .why-choose-box .box-title,
    .why-choose-box .box-text {
        padding: 0;
    }

    .why-choose-section-image .image-award {
        width: 100%;
        right: 0;
        bottom: 0;
    }

    .why-choose-box.box-reverse .box-title {
        width: 100%;
    }

    .cta {
        margin-top: 60px;
    }

    .cta .cta-shape {
        height: 100%;
    }

    .cta .cta-wrap {
        padding: 40px;
    }

    .cta .cta-title {
        font-size: 30px;
        line-height: 32px;
        margin: 0;
    }
}

@media screen and (max-width: 576px) {
    .main-header {
        padding: 10px 29px;
    }

    .main-header .logo-box a {
        font-size: 34px;
        line-height: 34px;
    }

    .banner {
        padding-top: 40px;
    }

    .main-header::after {
        width: 56.1%;
    }

    .hero-title {
        font-size: 32px;
    }

    .banner-img {
        width: 100%;
    }

    h2 {
        font-size: 26px !important;
        line-height: 26px !important;
    }

    .aboutus-image-wrap .about-experience {
        right: 40px;
    }
}