@media screen and (min-width: 320px) and (max-width: 760px){
    .navbar-brand img {
        width: 85%;
        margin-left: 10px;
    }
    .site-header .navigation .navbar-brand{
        margin-top: 5px;
    }
    .navbar-brand p {
        font-size: 20px;
    }
    .header-style-1 .navbar-header button{
        top: 14px;
    }
    .style-switcher-box button{
        display: none;
    }
    .all-services-section .service-grids-2 .grid {
        width: calc(50% - 30px) !important;
    }
    .contact-info{
        float: left;
        margin-top:5px;
    }
    .aboout-section button{
        margin-bottom: 10px;
    }
    .quote-sec {
        text-align: center !important;
    }
    .quote-sec h2{
        margin-top: 0 !important;
        font-size: 22px !important;
    }
    .quote-sec button{
        float: none !important;
        margin-top: 15px;
    }
    .counter{
        text-align: center;
    }
    .why-col{
        margin-bottom: 20px;
    }
    .title-circle{
        top: -13px;
    }
    
}
.style-switcher-box button{
        display: none;
    }
.all-services-section .service-grids-2 .grid {
    width: calc(25% - 30px);
    float: left;
    margin: 0 15px 30px;
    border-radius: 3px;
}
.services-section .nav-tabs{
    margin: 0 42% 30px;
    border: none;
}
.services-section .nav-tabs .nav-item.active a{
    color: #efefef;
    background-color: #3f6eff;
    border-radius: 4px 4px;
    border: none;
}
.post-head{
background: #cd0b84;
    width: 19%;
    padding: 10px 18px;
    color: #fff;
    margin: 0px 41%;
    margin-bottom: 1px;
    font-size: 24px;
    text-align: center;
    margin-top: 40px;
    font-weight: 500;
    text-transform: uppercase;
}
.post-head-1{
    width:21% !important;
}
.payment-head{
    width: 23% !important;
    margin-bottom: 30px;
}
.mt-80{
    margin-top: 80px;
}
.services-section .services-grids{
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 6px 2px #ddd;
}
.mb-0{
    margin-bottom: 0;
}
.aboout-section{
    background-image: url("../images/bg.jpg");
}
.quote-sec{
    background: #4c4a4b;
    padding: 50px 0;
}
.quote-sec h2{
    color: #fff;
    margin: 0;
    font-weight: 500;
    font-size: 25px;
    margin-top: 14px;
    text-transform: uppercase;
}
.quote-sec button{
    background: #ec268f;
    border: none;
    padding: 15px 30px;
    float: right;
    color: #fff;
    font-weight: 800;
}
.project-block {
    position: relative;
    margin-bottom: 30px;
}
.project-block .inner-box {
    position: relative;
    border-radius: 7px;
    overflow: hidden;
}
.project-block .image {
    position: relative;
    overflow: hidden;
    background-color: #e10400;
}
.project-block .image img {
    position: relative;
    width: 100%;
    display: block;
    transition: all 500ms ease;
}
.project-block .post-number {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 55px;
    height: 55px;
    z-index: 1;
    font-weight: 500;
    line-height: 55px;
    text-align: center;
    font-size: 18px;
}
.project-block .post-number:before {
    position: absolute;
    content: '';
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    border-radius: 50px 0px 50px 50px;
    background-color: #fff;
}
.project-block .content {
    position: absolute;
    left: 20px;
    bottom: 20px;
    right: 50px;
    opacity: 0;
    padding: 20px 25px;
    border-radius: 4px;
    transition: all 500ms ease;
    background-color: #fff;
    transform: scale(1,0.3);
}
.project-block h6 {
    z-index: 1;
}

.project-block h6:before {
    position: absolute;
    content: '';
    left: 22px;
    right: 0px;
    bottom: 25px;
    height: 5px;
    z-index: -1;
    opacity: 0;
    background: url(../images/vector-6.png) no-repeat;
}
.project-block h6 a {
    color: #000;
    font-size: 14px;
}
.project-block .arrow i {
    position: absolute;
    right: 12px;
    top: 13px;
    width: 45px;
    height: 45px;
    line-height: 44px;
    text-align: center;
    font-size: 13px;
    color: #000;
    border-radius: 50px 0px 50px 50px;
    transition: all 500ms ease;
}
.project-block .inner-box:hover .image img {
    opacity: 0.70;
    transform: scale(1.05,1.05) rotate(2deg);
}
.project-block .inner-box:hover .content {
    opacity: 1;
    transform: scale(1,1);
}
.project-block h6:hover::before {
    opacity: 1;
}
.project-block .inner-box:hover .arrow i {
    color: #000;
    background: #ddd;
}
.counter-sec{
    background: linear-gradient(rgb(26 26 26 / 90%), rgb(28 28 28 / 90%)), url(../images/banner-3.jpg);
    padding: 50px 0;
}
.counter-sec .section-title h2{
    color: #fff;
}
.counter-sec .section-title{
    margin-bottom: 0;
}
.counter-content h2, .counter-content p{
    color: #fff;
}
.why-sec{
    background-image:url("../images/bg.jpg");
}
.why-col{
    text-align: center;
    position: relative;
    z-index: 0;
    border-radius:5px;
}
.why-col:before{
    position: absolute;
    content: "";
    background: #01aef0;
    bottom: 0;
    left:0;
    z-index:-1;
    width: 100%;
    height: 3%;
    transition: .5s ease;
}

.why-col:hover .why-heads h3{
    color: #fff;
}
.why-col:hover::before{
    height: 100%;
    transition: .5s ease;
}
.why-col:hover p{
    color: #fff;
}
.why-col:hover .why-heads i{
    color:#fff;
    border: 1px solid #fff;
}
.why-heads h3{
    font-size: 25px;
    font-weight: 500;
}
.why-col p{
    color: #000;
}
.why-heads i{
    color: #01aef0;
    font-size: 30px;
    text-align: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid #01aef0;
    vertical-align: middle;
    margin: 0 0 0px;
    padding: 0;
    line-height: 80px;
}
.carousel-indicators{
    display: none;
}
.sidebar-service ul{
    background: #fff;
    box-shadow: 0 0 10px 3px #cbcbcb;
    padding: 15px;
    border-radius: 5px;
}
.sidebar-service ul li {
    padding: 15px 15px;
    background: #fff;
    border-bottom: 1px solid #ddd;
}
.mb-50{
    margin-bottom: 50px;
}
li a{
    color: #000;
}
.contact-form{
    padding: 40px;
    box-shadow: 0 0 10px 2px #ddd;
    border-radius: 5px;
}
.testimonial{
    margin: 0 20px 40px;
}
.testimonial .testimonial-content{
    padding: 35px 25px 35px 50px;
    margin-bottom: 35px;
    background: #fff;
    border: 1px solid #f0f0f0;
    position: relative;
}
.testimonial .testimonial-content:after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #fff;
    position: absolute;
    bottom: -10px;
    left: 22px;
    transform: rotate(45deg);
}
.testimonial-content .testimonial-icon{
    width: 50px;
    height: 45px;
    background:#01aef0;
    text-align: center;
    font-size: 22px;
    color: #fff;
    line-height: 42px;
    position: absolute;
    top: 37px;
    left: -19px;
}
.testimonial-content .testimonial-icon:before{
    content: "";
    border-bottom: 16px solid #0470a3;
    border-left: 18px solid transparent;
    position: absolute;
    top: -16px;
    left: 1px;
}
.testimonial .description{
    font-size: 17px;
    font-style: italic;
    color: #8a8a8a;
    line-height: 23px;
    margin: 0;
}
.testimonial .title{
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #525252;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin: 0 0 5px 0;
}
.testimonial .post{
    display: block;
    font-size: 14px;
    color: #ff4242;
}
/*.owl-theme .owl-controls{*/
/*    margin-top: 20px;*/
/*}*/
/*.owl-theme .owl-controls .owl-page span{*/
/*    background: #ccc;*/
/*    opacity: 1;*/
/*    transition: all 0.4s ease 0s;*/
/*}*/
/*.owl-theme .owl-controls .owl-page.active span,*/
/*.owl-theme .owl-controls.clickable .owl-page:hover span{*/
/*    background: #ff4242;*/
/*}*/
.testimonial-icon i {
    margin-top: 10px;
}
.testi-sec{
    padding: 50px 0;
    background:#f7f7f7;
}