@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }

    .cl-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .cl-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .cl-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .cl-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .cl-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .cl-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .cl-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .cl-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .cl-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .cl-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .cl-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .cl-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .text-md-start {
        text-align: left!important;
    }

    .text-md-end {
        text-align: right!important;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }

    .d-lg-none {
        display: none !important;
    }
    .cl-lg-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .cl-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .cl-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .cl-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .cl-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .cl-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .cl-lg-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .cl-lg-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .cl-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .cl-lg-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .cl-lg-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .cl-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .offcanvas-nav.offcanvas-end,
     .offcanvas-nav.offcanvas-start {
        width: 100%;
    }
    .offcanvas-nav {
        position: unset;
        flex-direction: row;
    }
    .offcanvas {
        position: inherit;
        bottom: 0;
        z-index: 1000;
        flex-grow: 1;
        visibility: visible!important;
        background-color: transparent;
        border-right: 0;
        border-left: 0;
        transition: none;
        transform: none;
    }
     .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }

    .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
    }
     .dropdown-mega,.navbar-nav {
        position: static!important;
    }
    .flex-lg-row {
        flex-direction: row!important;
    }
     .navbar-nav {
        flex-direction: row;
    }
     .navbar-collapse .nav-link {
        white-space: nowrap;
    }
     .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1366px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1500px;
    }
}

@media (min-width: 2000px) {
    .container {
        max-width: 1920px;
    }
}

@media (min-width: 770px) and (max-width: 979px) {
    body {
        font-size: 14px;
    }
    body,
    html {
        overflow-x: hidden;
    }
    body.mmenu {
        overflow: hidden;
    }
    h1 {
        font-size: 38px;
    }
    h2 {
        font-size: 32px;
    }
    h3 {
        font-size: 18px;
    }
}

@media (min-width: 980px) and (max-width: 1179px) {
    body {
        font-size: 15px;
        line-height: 1.64;
    }

    .button {
        padding: 12px 18px;
        font-size: 14px;
    }
    .mt-4 {
        margin-top: 25px;
    }
    .mt-5 {
        margin-top: 30px;
    }
    .mt-6 {
        margin-top: 35px;
    }
    .mt-12 {
        margin-top: 60px;
    }
    .mb-10 {
        margin-bottom: 55px;
    }
    .pl-6 {
        padding-left: 35px;
    }
    .pr-12 {
        padding-right: 60px;
    }
    h1 {
        font-size: 40px;
    }
    h2 {
        font-size: 40px;
    }
    h3 {
        font-size: 20px;
    }
}

@media (min-width: 1180px) and (max-width: 1339px) {
    body {
        font-size: 16px;
    }

    .button {
        padding: 15px 20px;
        font-size: 15px;
    }
    .mt-4 {
        margin-top: 30px;
    }
    .mt-5 {
        margin-top: 35px;
    }
    .mt-6 {
        margin-top: 40px;
    }
    .mb-10 {
        margin-bottom: 60px;
    }
    .pl-6 {
        padding-left: 40px;
    }
    h1 {
        font-size: 46px;
    }
    h2 {
        font-size: 40px;
    }
    h3 {
        font-size: 20px;
    }
}

@media (min-width: 1340px) and (max-width: 1539px) {
    body {
        font-size: 17px;
    }

    h1 {
        font-size: 56px;
    }
    h2 {
        font-size: 42px;
    }
    h3 {
        font-size: 22px;
    }
}

@media (min-width: 1540px) and (max-width: 1739px) {
    body {
        font-size: 18px;
    }
    h1 {
        font-size: 60px;
    }
    h2 {
        font-size: 44px;
    }
    h3 {
        font-size: 24px;
    }
}

@media (min-width: 1740px) and (max-width: 1939px) {
    section + section {
        margin-top: 100px;
    }
}

@media (min-width: 769px) {
    .d-none {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body,
    html {
        overflow-x: hidden;
    }
    body.mmenu {
        overflow: hidden;
    }
    body {
        font-size: 14px;
        line-height: 1.6;
    }
    .mt-5 {
        margin-top: 30px;
    }
    .mt-6 {
        margin-top: 40px;
    }
    .mt-8 {
        margin-top: 50px;
    }
    .mt-12 {
        margin-top: 60px;
    }
    .mb-6 {
        margin-bottom: 30px;
    }
    .mb-12 {
        margin-bottom: 60px;
    }
   
    header {
        padding: 30px 20px;
    }

    .hero h1{
        font-size: 36px;
    }

    .our-services span{
        font-size: 16px;
    }

    .contact-us span{
        font-size: 16px;
    }

    .about-us span{
        font-size: 16px;
    }

    .about-us img{
        margin-bottom: 20px;
    }

    .about-us  h2{
        font-size: 36px;
    }

    .contact-us h2{
        font-size: 36px;
    }

    section + section {
        margin-top: 60px;
    }

    .our-services h2{
        font-size: 36px;
    }

    .services-box{
        margin-bottom: 20px;
    }

    .our-services .cl-lg-8 .cl-lg-6{
        margin-bottom: 20px;
    }

    .pricing-plans .cl-12{
        margin-bottom: 20px;
    }
  
    h1 {
        font-size: 34px;
        line-height: 1.3;
    }
    h2 {
        font-size: 30px;
        line-height: 1.3;
    }
    h2 .icon-headings {
        padding-left: 20px;
    }
    h2 .icon-headings:before {
        width: 10px;
        height: 20px;
        margin-top: -9px;
    }
    .text-medium {
        font-size: 14px;
        line-height: 1.6;
    }
    .img120 {
        width: 100%;
    }

    .header-btn .navbar-nav{
        gap: 10px;
    }

    .header-btn a{
        border: none;
        padding: 5px;
    }

    .login-btn{
        color: #223344;
    }

    .register-btn{
        color: #223344;
        background:transparent;
    }
}

@media (max-width: 992px){
    .offcanvas-nav {
        overflow-x: hidden;
        overflow-y: auto;
        flex-direction: column;
    }

    .blog-meta .post-img {
        height: 250px;
        padding: 15px;
    }

    .mobile-header {
        display: block;
    }

    .menu-sidebar-area {
        display: block !important;
    }

    .mobile-header .navbar-brand h2{
        color: #fff;
    }
    .mobile-header .row {
        margin-left: 0;
        margin-right: 0;
    }
}