@media only screen and (max-width: 767px) {
    .header-1 .navigation > ul > li > a.active, .header-1 .navigation > ul > li:hover > a {
        color: #fff;
    }
    .header-1 .navigation > ul > li > a {
        color: #fff;
        padding: 15px 20px;
    }
    .navigation ul li i {
        font-size: 20px;
    }
    .navigation .sub-nav li a {
        font-size: 13px; 
    }
    .inner-whatwedo .content-box .d-col img {
        width: 100%;
    }
    .clients-list .col-md-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media screen and (max-width: 480px){
    .header_bg{background-color: #fff;}
    .intro-area .bg-wrapper{height: auto;}
    .intro-content{top: 65%; margin-top:0;}
    .intro-area-4 .layer-1 h2{font-size: 25px;line-height: 28px;}
    .intro-area-4 .layer-2 p{font-size: 14px;line-height: 24px;}
    .top-social-icon {
        display:  none;
    }
    .header-1 .top-bar-section {
        display: block;
        text-align: center;
    }
    .header-1 .logo a {
        padding: 2px 0 2px !important;
    }
    .header-1 .logo img {
        height: auto;
    }
    .menu {
        top: 40px;
    }
    .header .top_loction {
        float: none;
    }
    .intro-area {
        min-height: 250px;
    }
    .intro-area .bg-wrapper {
        height: auto;
    }
    .intro-area .intro-bg {
        min-height: unset;
    }
    .intro-area-4 .intro-content {
        height: auto;
        margin-top: 0;
        top: 25%;
    }
    .about-us-img::before {
        left: -10px;
    }
    .single-service {
        margin-top: 20px;
    }
    .project-pagination .owl-nav > .owl-prev {
        left: 0;
    }
    .project-pagination .owl-nav > .owl-next {
        right: 0;
    }
    .our-projects {
        padding: 40px 15px;
    }
    .client-section {
        padding: 40px 15px;
    }
    .clients img {
        width: auto!important;
    }
    .whatwe_half h4 {
        display: none;
    }
    .footer .widget {
        margin-bottom: 25px;
    }
    .vm-iconbox {
        min-height: auto;
    }
    .border_rgt_btm, .border_btm, .border_rgt, .border_none {
        border:  none;
        padding: 0px 15px;
    }
    .clients_logo {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 15px;
    }
    .inner-whatwedo .content-box {
        height: auto;
        margin-bottom: 35px;
    }
    .inner-whatwedo {
        margin-bottom: 0px;
    }
    .inner-whatwedo .mb-40 {
        margin-bottom: 10px;
    }
    .shape-img {
        margin-left: 0%;
    }
    .shape-img figure {
        transform: none;
        width: 100%;
    }
    .shape-img figure img {
        transform: none;
    }
    .header .top_loction {
        margin: 5px 0;
    }
    .clients_logo img {
        width: 100%;
    }
}
@media screen and (max-width: 414px){
    .intro-area-4 .intro-content {
        top: 18%;
    }
    .clients img {
        margin: 0px auto;
    }
}
@media screen and (max-width: 393px){
    .breadcrumb-title {
        font-size: 26px;
        line-height: 36px;
    }
    .contact-details .icn_txt .txt {
        font-size: 16px;
    }
    .clients-list .col-md-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .clients_logo img {
        width: auto;
    }
}
@media screen and (max-width: 375px){ 
    .intro-area-4 .layer-1 h2 {
        font-size: 22px;
        line-height: 24px;
    }
    .intro-area {
        min-height: 210px;
    }
}
@media screen and (max-width: 360px){  
    .intro-area-4 .layer-1 h2 {
        margin-bottom: 10px;
    }
    .intro-area-4 .layer-2 p {
        font-size: 13px;
    }
    .intro-area {
        min-height: 200px;
    }
}
@media screen and (max-width: 320px){ 
    .intro-area-4 .layer-1 h2 {
        font-size: 18px;
        line-height: 20px;
    }
    .intro-area-4 .layer-2 p {
        font-size: 12px;
        line-height: 22px;
    } 
    .intro-area-4 .intro-content {
        top: 15%;
    }
    .intro-area {
        min-height: 180px;
    }
    .breadcrumb-title {
        font-size: 22px;
        line-height: 32px;
    }
}