@media only screen and (max-width:767px) and (min-width:360px) {

    a.navbar-brand.mobile-logo {
        display: block;
    }

    .logo-area {
        display: none;
    }

    .topbar-right-area {
        justify-content: center;
        flex-direction: column;
    }

    .clock-area {
        margin-right: 0;
    }

    .phone-area {
        margin-right: 0;
    }

    .clock-icon i {
        font-size: 35px;
    }

    .phone-icon i {
        font-size: 35px;
    }

    .clock-content p {
        color: #000;
        font-weight: 600;
        font-size: 14px;
    }

    .phone-content p {
        color: #000;
        font-weight: 600;
        font-size: 14px;
    }

    .mobile-flex {
        gap: 20px;
        margin-bottom: 16px;
    }

    .social-icon-navbar {
        display: none;
    }

    .navbar-brand img {
        margin-right: 0;
        max-width: 175px;
    }

    .banner-left {
        width: 50%;
        left: 5px;
    }

    .banner-left h1 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    section.banner-area {
        height: 200px;
    }

    section.banner-area::after {
        height: 70px;
        top: 75%;
    }

    section.banner-area::before {
        height: 200px;
        background-position: top right;
    }

    .btn-main {
        padding: 12px 18px;
    }

    .about-img img {
        max-width: 300px;
    }

    .btn-main:hover::after {
        transform: translateX(65%);
    }

    .btn-main:hover .icon-container .icon--left {
        left: -25px;
    }

    .about-img {
        margin-bottom: 40px;
    }

    h3.title {
        margin: 0 auto 20px;
    }

    .img-box2 {
        text-align: center;
        margin-bottom: 80px;
    }

    .img-heading2 {
        left: 240px;
        top: -60px;
    }

    .img-box3 {
        display: none;
    }

    .img-box1 {
        margin: 0 auto 80px;
    }

    .img-heading1 {
        left: -40px;
        top: -60px;
    }

    .img-box2 img {
        width: 290px;
        height: 290px;
    }

    .why-choose-us-left-area-top {
        box-shadow: inset 1px 1px 6px #dcdcdc, inset 1px 1px 6px #dcdcdc;
        height: 240px;
        padding: 10px 0;
        text-align: center;
        border-radius: 5px;
    }

    .why-choose-us-left-area-bottom {
        text-align: center;
        margin-bottom: 50px;
        box-shadow: inset 1px 1px 6px #dcdcdc, inset 1px 1px 6px #dcdcdc;
        height: 240px;
        padding: 10px 0;
        border-radius: 5px;
    }

    .why-choose-us-right-area-top {
        text-align: center;
        margin-bottom: 50px;
        margin-top: 50px;
        box-shadow: inset 1px 1px 6px #dcdcdc, inset 1px 1px 6px #dcdcdc;
        height: 240px;
        padding: 10px 0;
        border-radius: 5px;
    }

    .why-choose-us-right-area-buttom {
        text-align: center;
        box-shadow: inset 1px 1px 6px #dcdcdc, inset 1px 1px 6px #dcdcdc;
        height: 240px;
        padding: 10px 0;
        border-radius: 5px;
    }

    section.work-process-area .section-heading h3.title {
        font-size: 28px;
    }

    .tf__work_text_area::after {
        display: none;
    }

    .process-box-1 {
        margin: 0 auto 110px;
    }

    .process-box-2 {
        margin: 0 auto 110px;
    }

    .process-box-3 {
        margin: 0 auto 110px;
    }

    .process-box-4 {
        margin: 0 auto 110px;
    }

    .process-box-1::after {
        bottom: -70px;
    }

    .process-box-2::after {
        top: auto;
        bottom: -70px;
    }

    .process-box-3::after {
        bottom: -70px;
    }

    .process-box-4::after {
        top: auto;
        bottom: -70px;
    }

    .tf__work_text_area {
        padding-bottom: 0;
    }

    .appointment-form .quote-btn button.form-btn {
        background-color: #fff;
    }

    .appointment-img img {
        max-width: 300px;
    }

    .appointment-form {
        margin-bottom: 40px;
    }

    section.testimonails-area {
        background-position: top;
    }

    .tf_footer_details {
        margin-bottom: 25px;
    }

    .tf_footer_links {
        margin-bottom: 25px;
    }

    h3.footer-heading {
        font-size: 30px;
    }

    .tf_footer_links ul li a {
        font-size: 20px;
    }

    .tf_footer_services {
        margin-bottom: 25px;
    }

    ul.navbar-nav li.nav-item {
        border-bottom: 2px dashed #0d409b;
        padding: 6px 5px;
    }

    ul.navbar-nav.me-auto {
        box-shadow: inset 1px 1px 6px #dcdcdc, inset 1px 1px 6px #dcdcdc;
        padding: 10px;
        margin-top: 20px;
    }

    .about-year-area {
        height: 160px;
        left: 0;
        padding-top: 10px;
    }

    .about-year-area span {
        font-size: 22px;
        margin-bottom: 30px;
    }

    .about-year-area p {
        font-size: 16px;
    }

    .about-page-img-area img {
        border-radius: 0px 0px 65px 0px;
    }

    .certificate-img {
        right: -12px;
    }

    .certificate-img img {
        max-width: 135px;
    }

    .intro-box {
        margin-bottom: 40px;
    }

    section.breadcrumbs-area::after {
        bottom: -3px;
    }

    section.breadcrumbs-area-contact::after {
        bottom: -3px;
    }

    .contact-icon {
        left: 39%;
    }

    li.nav-item.for-desktop {
        display: none;
    }

    button.dropdown-btn {
        display: block;
    }

    .services-content-box {
        margin-bottom: 50px;
    }

    .contact-box {
        margin-bottom: 90px;
    }

    .popup-content {
        width: 100%;
    }

    .blog-inner-img img {
        max-width: 360px;
    }

}

@media only screen and (max-width:990px) and (min-width:768px) {

    .logo-area {
        display: none;
    }

    section.topbar-area .container .row .col-md-8 {
        width: 100%;
    }

    .social-icon-navbar {
        display: none;
    }

    a.navbar-brand.mobile-logo {
        display: block;
    }

    a.navbar-brand.mobile-logo img {
        max-width: 200px;
    }


    ul.navbar-nav li.nav-item {
        border-bottom: 2px dashed #0d409b;
        padding: 6px 5px;
    }

    ul.navbar-nav.me-auto {
        box-shadow: inset 1px 1px 6px #dcdcdc, inset 1px 1px 6px #dcdcdc;
        padding: 10px;
        margin-top: 20px;
    }

    ul.navbar-nav li.nav-item a.nav-link {
        font-size: 20px;
    }

    .banner-left h1 {
        font-size: 45px;
    }

    .banner-left {
        width: 35%;
    }

    section.banner-area::before {
        background-position: right;
    }

    .about-img img {
        width: 100%;
    }

    .btn-main:hover::after {
        transform: translateX(70%);
    }

    .btn-main:hover .icon-container .icon--left {
        left: -12px;
    }

    .img-box2 {
        text-align: center;
        margin-bottom: 80px;
    }

    .img-box3 {
        display: none;
    }

    .img-heading2 {
        left: -30px;
    }

    .services-box-1 .img-heading2 {
        right: -30px;
        left: auto;
    }

    .img-box2 img {
        width: 290px;
        height: 290px;
    }

    .img-heading1 {
        left: -30px;
        top: -50px;
    }

    .services-box-1 .img-heading1 {
        right: -58px;
        left: auto;
        top: -50px;
    }

    .img-box1 {
        margin: 0 auto;
    }

    .tf__work_text_area::after {
        background-size: contain;
    }

    .process-box-1 {
        width: 150px;
        height: 150px;
        margin: 50px 18px 0;
    }

    .process-box-1::after {
        left: -35px;
        font-size: 22px;
    }

    .process-box-2 {
        width: 150px;
        height: 150px;
        margin: 35px 8px 0;
    }

    .process-box-2::after {
        left: -40px;
    }

    .process-box-3 {
        width: 150px;
        height: 150px;
        margin: 50px 0px 0;
    }

    .process-box-3::after {
        left: -35px;
    }

    .process-box-4 {
        width: 150px;
        height: 150px;
        margin: 35px -11px 0;
    }

    .process-box-4::after {
        left: -40px;
    }

    section.work-process-area {
        padding: 50px 0 0px;
    }

    .appointment-form .quote-btn button.form-btn {
        background-color: #fff;
    }

    section.appointment-area .container .row {
        align-items: center;
    }

    .tf_footer_details {
        margin-bottom: 30px;
    }

    h3.footer-heading {
        font-size: 25px;
    }


    .intro-box {
        margin-bottom: 40px;
    }

    .about-year-area {
        width: 75px;
        height: 165px;
        right: -3px;
    }

    .about-year-area span {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .about-year-area p {
        font-size: 17px;
    }

    .about-page-img-area img {
        max-width: 280px;
        border-radius: 0px 0px 40px 0px;
    }

    .certificate-img img {
        max-width: 100px;
    }

    li.nav-item.for-desktop {
        display: none;
    }

    li.nav-item.for-mobile {
        display: block;
    }

    section.breadcrumbs-area::after {
        bottom: -3px;
    }

    .services-content-box {
        margin-bottom: 50px;
    }

    button.dropdown-btn {
        display: block;
    }

    .contact-box {
        margin-bottom: 90px;
    }



}

@media only screen and (max-width:1099px) and (min-width:991px) {


    .clock-area {
        margin-right: 15px;
    }

    .clock-icon i {
        font-size: 40px;
    }

    .phone-icon i {
        font-size: 40px;
    }

    section.banner-area::before {
        background-position: right;
    }

    .img-box3 {
        display: none;
    }

    .img-box2 {
        margin-bottom: 70px;
    }

    .img-heading2 {
        left: 160px;
    }

    .img-heading1 {
        right: -90px;
        top: 20px;
    }

    .tf__work_text_area::after {
        background-size: contain;
    }


    .process-box-1 {
        width: 190px;
        height: 190px;
        margin: 50px 30px 0;
    }

    .process-box-1::after {
        left: -22px;
        font-size: 22px;
    }

    .process-box-2 {
        width: 190px;
        height: 190px;
        margin: 35px 19px 0;
    }

    .process-box-2::after {
        left: -25px;
    }

    .process-box-3 {
        width: 190px;
        height: 190px;
        margin: 50px 10px 0;
    }

    .process-box-3::after {
        left: -20px;
    }

    .process-box-4 {
        width: 190px;
        height: 190px;
        margin: 35px -3px 0;
    }

    .process-box-4::after {
        left: -26px;
    }

    .appointment-form .quote-btn button.form-btn {
        background-color: #fff;
    }

    .appointment-img img {
        width: 100%;
        max-width: 390px;
    }


    .about-year-area {
        right: -3px;
    }

    .certificate-img {
        right: -25px;
    }

    .img-box1 img {
        width: 220px;
        height: 220px;
    }

    .img-box2 img {
        width: 210px;
        height: 210px;
    }

    .img-box1 {
        margin-top: -100px;
    }

    section.breadcrumbs-area::after {
        bottom: -3px;
    }

}





@media only screen and (max-width:1199px) and (min-width:1100px) {


    .tf__work_text_area::after {
        background-size: contain;
    }

    .process-box-1 {
        margin: 20px 30px 0;
    }

    .process-box-2 {
        margin: 20px 20px 0;
    }

    .process-box-3 {
        margin: 20px 8px 0;
    }

    .process-box-4 {
        margin: 20px -2px 0;
    }

    .process-box-2::after {
        left: -25px;
    }

    .appointment-form .quote-btn button.form-btn {
        padding: 12px 35px;
        background-color: #fff;
    }

    .appointment-img img {
        width: 100%;
        max-width: 370px;
    }

    .img-box3 {
        display: none;
    }

    .img-box2 {
        margin-bottom: 70px;
    }

    .img-heading1 {
        right: -100px;
        top: -50px;
    }

    .img-box2 img {
        width: 290px;
        height: 290px;
    }

    .img-heading2 {
        left: 80px;
        top: -60px;
    }

    .clock-icon i {
        color: #0d409b;
        font-size: 40px;
    }

    .phone-icon i {
        font-size: 40px;
    }

    .phone-area {
        margin-right: 20px;
    }

    .clock-area {
        margin-right: 20px;
    }

    .intro-box {
        margin-bottom: 40px;
    }



}



@media only screen and (max-width:1920px) and (min-width:1400px) {

    .banner-left {
        width: 25%;
    }

    section.banner-area {
        height: 560px;
    }

    section.banner-area::before {
        height: 560px;
    }

    section.banner-area::after {
        top: 85%;
    }

    .img-box2 {
        width: fit-content;
        margin: 0 0 70px auto;
        position: relative;
    }

    .img-heading2 {
        left: -90px;
    }


    .img-heading1 {
        top: -65px;
    }

    .img-box3 {
        right: 30px;
        top: 68%;
    }

    .img-box3 img {
        width: 300px;
    }

    .tf__work_text_area {
        padding-bottom: 150px;
    }

    .process-box-1 {
        width: 230px;
        height: 230px;
        margin: 35px 55px 0;
    }

    .process-box-2 {
        width: 230px;
        height: 230px;
        margin: 40px 40px 0;
    }

    .tf__work_text_area::after {
        top: -65px;
    }

    .process-box-3 {
        width: 230px;
        height: 230px;
        margin: 35px 34px 0;
    }

    .process-box-4 {
        width: 230px;
        height: 230px;
        margin: 40px 18px 0;
    }

    .process-box-4::after {
        left: -10px;
    }

    .process-box-3::after {
        left: 0px;
    }

    div#comparison {
        height: 390px;
        max-height: 390px;
    }



























}