/*********************************************************
         Large screen desktop computer laptop
 ********************************************************/
 .mobile-logo{
    display: none;
 }
 @media only screen and (max-width: 1920px) {
    header.site-header .icon{
        display: none;
    }
}@media only screen and (max-width: 1200px) {
       
}
@media only screen and (max-width: 1150px) {
       
    .service-page-section .container .row .col-md-6 img{
        height: 570px;
    }
    .who-we-are .container .row .col-md-6 img{
        height: 500px;
        
    }
    .who-we-are .container .row .col-md-6 a{
        margin: 15px 0px !important;
        
    }
}
@media only screen and (max-width: 1100px) {
    .testimonial .box .container .row i{
        font-size: 46px;
        padding-bottom: 4px;
    }
    .testimonial .box .container .row h4{
        font-size: 26px;
        margin-bottom: 3px;
    }
    .testimonial .box .container .row h6{
        font-size: 16px;
    }
    .testimonial .box .container .row p{
        font-size: 14px;
        padding: 5px 0;
    }
}
@media only screen and (max-width: 991px) {
    .banner-section,.pages-banner-section{
        min-height: 500px;
    }
    .contact-page .container .row .col-md-8 .row textarea{
        height: 190px;
    } 
    .container.portfolio-content .row .col-md-6 img{
        height: 480px;
    }
    .our-portfolio .container .row .col-md-6 .content h2, .service-page-section .container .row .col-md-6 .content h2 {
        font-size: 30px;
    }
    
}
@media only screen and (max-width: 942px) {
    header.site-header .container ul li a {
        font-size: 18px;
    }
    header.site-header .container nav ul li{
        padding-right: 10px;
    }
    header.site-header .container ul li a.contact-btn, header.site-header .container ul li a.blue-grd-btn {
        padding: 9px 25px;
    }
    .banner-section .content h1{
        font-size: 48px;
    }
}
@media only screen and (max-width: 850px) {
    .banner-section .content h1{
        font-size: 42px;
    } 
    .testimonial .box .container .row i{
        font-size: 40px;
        padding-bottom: 4px;
    }
    .testimonial .box .container .row h4{
        font-size: 24px;
        margin-bottom: 1px;
    }
    .testimonial .box .container .row h6{
        font-size: 14px;
    }
    .contact-page .container .row .col-md-8 .row textarea{
        height: 220px;
    }
    .container.portfolio-content .row .col-md-6 img{
        height: 440px;
    }
    .our-portfolio .container .row .col-md-6 .content h2, .service-page-section .container .row .col-md-6 .content h2 {
        font-size: 28px;
    }.our-portfolio .container .row .col-md-6 .content p, .service-page-section .container .row .col-md-6 .content p{
        font-size: 14px;
    }
    .service-page-section .container .row .col-md-6 img{
        height: 540px;
    }
 
}
/**********************************************
         middle screen device tablets 
***********************************************/
/* hide and show navbar */
.addnav{
    left: 50% !important;
    transition: 1s all;
}
.removenav{
    left: 100% !important;
    transition: 1s all;
}
    @media only screen and (max-width: 767px) {
        .main-page h1{
        font-size: 40px;
    }
    header.site-header .container {
        padding: 15px 15px;
    }
    header.site-header .container ul li a{
        color: white;
    }
    header.site-header .container ul li a {
        font-size: 16px;
    }
    header.site-header .container ul li a.contact-btn, header.site-header .container ul li a.blue-grd-btn {
        padding: 6px 12px;
    }
    header.site-header .container ul.side-btn{
        margin-left: auto;
    }
    header.site-header .icon {
        position: relative;
        display: block;
    }  
    header.site-header .icon i {
        border-radius: 50%;
        background: white;
        height: 30px;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 5px;
        font-size: 24px;
    }
    header.site-header .container ul.navbar{
        display: none;
        text-align: left;
        position: absolute;
        left: 100%;
        z-index: 1;
        right: 0;
        top: 0;
        background: #F1AE12;
        overflow: hidden;
        height: 100%;
        padding:20px;

    }  
    .banner-section,.pages-banner-section{
        min-height: 400px;
        margin: 0px 0px 20px 0px !important;
    } 
    .pages-banner-section .content{
        border: 5px solid #ffff;
        width: 550px;
        height: 320px;
    }
    .banner-section .content h1,.pages-banner-section .content h1{
        font-size: 40px;
    } 
    .banner-section .content p,.pages-banner-section .content p{
        font-size: 16px;
    }
    .banner-section .content a,.pages-banner-section .content a{
    font-size: 18px;
    padding: 10px 25px;
    border-radius: 4px;
    }
    
    .service-section .container{
        padding: 0 10px !important;
        }
    .service-section .container .row .col-md-6 p{
        margin:0 !important;
        }
    .service-section .container .row .col-md-6 a.blue-grd-btn{
        margin: 15px 0px !important;
    }
    .who-we-are{
        margin: 10px 0px 60px 0px;
        padding: 20px 5px;
    }
        .who-we-are .container .row{
        flex-direction: column-reverse;

    } .who-we-are .container .row .col-md-6 a.blue-grd-btn{
        margin: 0 !important;
    }
    .happy-client-section .container{
        padding: 0 10px !important;
    }
    .happy-client-section .container .row .col-md-6 p{
        padding: 0 !important;
        margin: 0 !important;
    }
    .happy-client-section .container .row .col-md-6 a.blue-grd-btn{
        margin: 15px 0 !important;
    }
    .happy-client-section .container .row .col-md-6 .row{
        justify-content: center;
    }
    .testimonial h1 {
        font-size: 32px;
    }
    .testimonial .box .container .row{
        text-align: center;
    }
    .testimonial .box .container .row h4{
        padding: 8px 0;
    }
    .testimonial .box .container .row img{
        height: auto;
    }
    .testimonial .box .container .row i{
        display: none;
    }


    .our-team .our-team-banner{
        padding: 40px 0px;
    }


    .our-portfolio .container .row .portfolio-button-group button,
    .our-portfolio .container .row .portfolio-bottom-button-group a,
    .service-page-section .container .row .service-bottom-button-group a{
        font-size: 14px;
        margin: 8px;
         
    }
    .container.portfolio-content .row .col-md-6 img,
    .service-page-section .container .row .col-md-6 img{
        height: auto;
    }
    .container.portfolio-content .row, .service-page-section .container .row{
        margin: 0 !important;
    }
    .container.portfolio-content .row .col-md-6, .service-page-section .container .row .col-md-6{
        margin: 10px 0px !important;
    }
    .who-we-are .container .row .col-md-6 img{
        height: auto;
        
    }
    footer.site-footer, footer.site-footer .footer-area .container .row .col-md-3 h5{
        padding: 10px 0 !important;
    } 
}
@media only screen and (max-width: 667px) {
       
}
@media only screen and (max-width: 575px) {
    .banner-section .content h1,.pages-banner-section .content h1{
        font-size: 35px;
    } 
    .banner-section .content p,.pages-banner-section .content p{
        font-size: 15px;
    }
    .banner-section .content a,.pages-banner-section .content a{
    font-size: 16px;
    padding: 8px 20px;
    border-radius: 3px;
    }
    .pages-banner-section .content{
        width: 400px;
        height: 280px;
    }
    .our-team .our-team-banner{
        padding: 20px 0px;
    }
    .our-portfolio .container .row .portfolio-button-group a,
    .our-portfolio .container .row .portfolio-bottom-button-group a,
    .service-page-section .container .row .service-bottom-button-group a{
        margin: 6px 6px;
         
    }
    footer.site-footer .footer-area .container .row .col-md-3{
        padding: 10px 15px;
    }
}
/**************************************************
        Small screen smart devices moble
***************************************************/
@media only screen and (max-width: 490px) {
    .mobile-logo{
        display: block;
    }
    .large-logo{
        display: none;
    }
    
    header.site-header .container ul li a.contact-btn, header.site-header .container ul li a.blue-grd-btn {
        padding: 9px 15px;
        font-size: 17px;
    }   .our-portfolio .container .row .col-md-6 .content a, .service-page-section .container .row .col-md-6 .content a {
        margin-right: 5px;
        padding: 8px 14px;
    }
}
    @media only screen and (max-width: 460px) {
    .main-page h1{
        font-size: 36px;
    }
    header.site-header .container ul li a.contact-btn, header.site-header .container ul li a.blue-grd-btn {
        padding: 5px 10px;
        font-size: 15px;
        border-radius: 3px;
    }
    header.site-header .container .site-logo {
        height: 40px;
    } 
     .banner-section,.pages-banner-section{
        min-height: 350px;
    }  
    .service-section .container .row .col-md-6 p, .who-we-are .container .row .col-md-6 p ,
    .happy-client-section .container .row .col-md-6 p, .faqs-section .container .row .col-md-6 p,
    .faqs-section .container .row .col-md-6 .accordion .accordion-item .accordion-body {
        font-size: 14px;
    }
    .testimonial h1 {
        font-size: 28px;
    }
    .testimonial .box .testimonial-slider button.slick-prev,
    .testimonial .box .testimonial-slider button.slick-next{
        height: 35px;
        width: 35px;
    }
    .testimonial .box .testimonial-slider button.slick-prev.slick-arrow:before,
    .testimonial .box .testimonial-slider button.slick-next.slick-arrow:before {
         font-size: 32px;
    }
    footer.site-footer .footer-area .container .row .col-md-3 p{
        font-size: 14px;
    }
    footer.site-footer .footer-area .container .row .col-md-3 h5 {
        font-size: 22px;
    } 
    footer.site-footer .footer-area .container .row ul li a{
        font-size: 14px;
    }
}
@media only screen and (max-width: 420px) {
    .banner-section .content h1{
        font-size: 30px;
    }.pages-banner-section .content h1{
        font-size: 26px;
    }
     .banner-section .content p,.pages-banner-section .content p{
    font-size: 14px;
    padding: 0 10px !important;
    }
    .banner-section .content a,.pages-banner-section .content a{
        padding: 8px 16px; 
    }
    .pages-banner-section .content{
        width: 300px;
        height: 200px;
    }
    footer.site-footer .footer-area .container .row ul li a{
        font-size: 13px;
    }
}
@media only screen and (max-width: 375px) {
    header.site-header .container ul li a.contact-btn, header.site-header .container ul li a.blue-grd-btn {
        padding: 3px 6px;
        font-size: 14px;
        border-radius: 2px;
    } header.site-header .container ul li a.blue-grd-btn {
        padding: 4px 7px;
    }
}
    @media only screen and (max-width: 360px) {
        header.site-header .container ul.side-btn li {
            padding-right: 5px;
        }
        header.site-header .container ul li a.contact-btn, header.site-header .container ul li a.blue-grd-btn {
            font-size: 13px;
        }
    header.site-header .container .site-logo {
        height: 35px;
    }
    .banner-section .content h1{
        font-size: 28px;
    }
    .our-portfolio .container .row .col-md-6 .content a, .service-page-section .container .row .col-md-6 .content a {
        padding: 4px 4px;
        border-radius: 2px;
    }
    footer.site-footer .footer-area .container .row ul li a{
        font-size: 12px;
    }
}
@media only screen and (max-width: 320px) {
       
}