/* responsive */

@media(max-width:1920px){

    .banner {height: 100vh;}
    
    .container {max-width: 1338px;}
    
    .banner .carousel .carousel-item img{height: 100%;}
    
    .header .navbar-brand{width: 211px;}
    
    .header .navbar-brand img {width: 100%;}
    
    .banner .carousel .carousel-caption {bottom: 20%;left: 277px;}   
    
    .carousel-indicators{right: -262px;}
    
    .banner .carousel-control-next-icon {right: 81px;bottom: 22px;}
    
    .banner .carousel-control-prev-icon {right: 125px; bottom: 23px; }
    
    .about .title {font-size: 27px; line-height: 48px; margin-bottom: 60px;}
    
    .about .text{margin-bottom: 77px;}
    
    .testi .testi-body .slider-body {padding: 60px;}
    
    .projects .padding-right {padding-right: 0px;}
    
    .about .btns{margin-top: 0px;}
    
    .footer ul li a{margin-right: 60px;}
    
    .testi .testi-body .carousel-control-prev-icon{top: -127px;}
    
    .testi .testi-body .carousel-control-next-icon{top: -127px;}

    .inner-banner .padding-top { padding-top: 232px;}

    .header.sticky .navbar-brand { width: 100px !important;}
    
    
    }
    
@media(max-width:1800px){
    
        .carousel-indicators {right: -230px;}
    
    }
    
@media(max-width:1700px){
    
        .carousel-indicators {right: -215px;}
    
    }
    
    
@media(max-width:1600px){
    
    .banner .carousel .carousel-caption {bottom: 20%;left: 130px;}
    
    .carousel-indicators { right: -206px;}
    
    }
    
@media(max-width:1480px){
    
    
    .header .navbar-brand {width: 115px !important;}
    
    .banner .carousel-control-prev-icon {right: 140px;bottom: 23px;}
    
    .banner .carousel-control-next-icon {right: 101px;bottom: 22px;}
    
    .banner .carousel .carousel-caption {bottom: 20%; left: 70px; }
    
    .testi .testi-body .slider-body {padding: 30px;}
    
    .about .title {font-size: 27px; line-height: 38px; margin-bottom: 35px;}
    
    .carousel-indicators {right: -171px;}
    
    .testi .testi-body .carousel-control-prev-icon {top: -180px;}
    
    .testi .testi-body .carousel-control-next-icon {top: -180px;}

    
    }
    
    
@media(max-width:1400px){
    
    .header .navbar-brand {width: 115px !important;}    
    
    .banner .carousel .carousel-caption { bottom: 20%; left: 137px;}
    
    .container {max-width: 1140px;}
    
    .navbar-light .navbar-nav .nav-link{margin-right: 15px;}
    
    .navbar-light .navbar-nav .btn{margin-left: 48px;}

    .project-gallery-box h5{font-size: 18px !important;}
    
    }
    
    
@media(max-width:1366px){
    
        .header .navbar-brand {width: 115px !important;}
    
        .banner .carousel .carousel-caption { bottom: 20%;  left: 118px;}
        
        .banner .carousel .carousel-caption h5{font-size: 53px;}
    
        .projects .project-text {padding: 0 62px 0 40px;}
    

    }
    

@media(max-width:1200px){
    
            .header .navbar-brand {width: 115px !important;}
    
            .banner {height: 580px;}
    
            .navbar-light .navbar-nav .nav-link {margin-right: 10px; font-size: 16px;}
    
            .navbar-light .navbar-nav .btn {margin-left: 25px;}
    
            .header .navbar-brand{height: auto; width: auto;}
    
            .banner .carousel-control-next-icon{ right: 78px;}
    
            .banner .carousel-control-prev-icon { right: 117px;}
    
            .banner .carousel-indicators{right: -143px;}
        
            .banner .carousel .carousel-caption {bottom: 13%;left: 30px;}
            
            .banner .carousel .carousel-caption h5{font-size: 50px;}
    
            .projects .project-text {padding: 0 57px 0 40px;}

            .about-company .left-right-padding {padding: 0;}
                
            }
    
    
@media(max-width:1024px){

           
            .heading{font-size: 50px !important;}
    
            .banner .carousel .carousel-caption {left: 0px;}
    
            .banner .carousel-indicators { right: -101px;}
    
            .banner .carousel-control-prev-icon {right: 136px;}
    
            .banner .carousel-control-next-icon { right: 100px;}
    
            .banner .carousel .carousel-caption h5 {font-size: 40px;}
    
            .about .title{font-size: 20px;}
    
            p{font-size: 14px !important;}

            .header.sticky .navbar-brand{width: 70px !important;}
            
    
    
        } 


    @media(max-width:991px){


        .projects-page .tab_content .border-one.click .gallery-body img{height: 100px;}

        .navbar-light .navbar-toggler{border-color: #9bbb59;}

        .header {position: unset;}

        .navbar-light .navbar-nav .nav-link {color: #000;}

        .navbar-light .navbar-nav .active>.nav-link {color: #000;}

        .navbar-light .navbar-nav .btn {margin-left: 0px; background: #000; color: #ffffff;}

        .header .navbar { padding: 10px 0;}

        .banner .carousel .carousel-caption {bottom: 26%; width: 100%;}

        .banner .carousel .carousel-caption .margin-left {margin-left: 100px;}

        .banner .carousel .carousel-caption h5 {font-size: 42px;}

        p {font-size: 17px !important;}

        .about .text {margin-bottom: 50px;}


        .projects .project-text {padding: 0 15px 0 15px;}

        .projects .project-text .btns{margin-top: 0;}

        .projects .project-text p{margin-top: 0;}

        .cards .margin-top, .projects .margin-top {margin-top: 50px;}

        .cards, .clients, .footer, .about-company, .contact-about-two, .services-page, .projects-page, .clients-page, .contact-about{padding: 70px 0px;}

        .projects, .about{ margin: 70px 0;}

        .team .title{font-size: 50px;}

        .clients .heading{margin-bottom: 50px;}

        .footer ul li a {margin-right: 0;}

        .about-company .margin-top .row {align-items: unset !important;}

        .inner-banner{height: 220px;}

        .inner-banner .padding-top {padding-top: 50px;}

        .services-page .team-text h3{font-size: 30px; line-height: 35px !important; margin-bottom: 15px;}

        .services-page .number h4{font-size: 22px;}

        .services-page .team-text{padding: 30px;}

        .services-page .padding-box { padding: 0px;}

        .projects-page .tab_content h2{font-size: 25px;}

        .projects-page .margin-top {margin-top: 50px;}

        .projects-page .tab_content h5{font-size: 13px !important;}

        .projects-page ul.tabs li{font-size: 15px;}

        .tab_content{padding: 0 !important;}

        .contact-about .inputs .form-control{font-size: 13px;}

        .contact-about .inputs textarea{font-size: 13px;}

        .contact-about .contact-details p,  .contact-about .contact-details a{font-size: 12px !important;}

        .contact-about .contact-details h3{font-size: 25px;}

        .contact-about .contact-details .title{font-size: 40px; margin-bottom: 15px;}

        .cards .center-box {margin-top: 0px;}
       
        .about-company .heading-green-text {font-size: 50px;}

        .navbar-nav{text-align: center;}

        .clients-page .clients-body img:hover{transform: scale(1);}

        .navbar-light .navbar-nav .nav-link:hover{color: #9bbb58;}

        .header.sticky .navbar-light .navbar-nav .nav-link:hover{color: #fff;}

    }


    @media(max-width:900px){

        .projects .margin-top {
            background-color: unset;
        }

        .projects .project-text {
            padding: 15px;
            background-color: #c4d79d;
        }

        .clients-page .clients-body img{margin-top: 15px;}


    }


    @media(max-width:768px){

        .banner {height: 500px;}

        .heading {font-size: 40px !important;}
    
        .cards .number h3{font-size: 150px;}

        .footer h3{font-size: 24px;} 

        
    }

    @media(max-width:767px){

        .about .pot {right: 0 !important; left: unset !important; bottom: 10px;}

        .about .text {margin-bottom: 15px;}

        .about .title{margin-bottom: 15px;}

        .cards .center-box {margin-top: 0;}

        .clients .heading {margin-bottom: 30px;}

        .projects .margin-top .Reserved{flex-flow: column-reverse;}

        .banner .carousel .carousel-caption .margin-left {margin-left: 0px;}

        .banner .carousel .carousel-caption {bottom: 15%;width: 100%;}

        .banner .carousel-indicators {right: -60px;}

        .banner {height: auto;}

        .about-company .left-right-padding{padding-top: 30px;}

        .services-page .Reserved{flex-flow: column-reverse;}

        .projects-page .tab_content .bg{margin-bottom: 30px;}

        .clients-page .potts{padding-bottom: 40px;}

        .clients-page .potts .pots{position: absolute; bottom: 25px; left: unset; right: 0;}

        .contact-about .contact-details p,  .contact-about .contact-details a{font-size: 18px !important;}

        .contact-about .contact-details h3{font-size: 25px;}

        .about-company .heading-green-text { font-size: 30px; }

        .projects-page .tab_content .gallery-body img { height: auto;}

        .services-page .number { height: 128px;}

        .projects-page h3{font-size: 40px;}

        .about-company .margin-top {
            margin-top: 15px;
        }

        
    }

    @media(max-width:715px){

        .banner .carousel .carousel-caption h5{margin-bottom: 15px; font-size: 35px;}

        p{font-size: 16px !important;}

        .cards .margin-top {margin-top: 0px;}

        .heading {font-size: 35px !important; line-height: 40px !important; margin-bottom: 15px !important;}

        .clients .swiper-container .swiper-pagination{bottom: -15px;}

        .banner .carousel .carousel-caption {bottom: 0; width: 90%;}

        .banner .carousel .carousel-caption .margin-left p {margin-bottom: 15px;}

        .team .padding-box {padding: 0px;}

        

        
    }


    @media(max-width:575px){


        .header .navbar {padding: 0px;}

        .clients-page .potts .pots {position: unset;}

        .navbar-light .navbar-nav .btn{margin-bottom: 15px;}

        .projects-page .tab_content .bg {padding: 15px;}

        .projects-page .tab_content .gallery-body img { height: 300px;}

        .projects-page .tab_content .gallery-body img{height: 139px;}

        .projects-page .tab_content .border-one.click .gallery-body img {height: 300px;}

        .services-page .number h4{position: unset;}

        .services-page .product-body{margin-top: 0;}

        .services-page .number { height: auto;}

        .services-page .padding-box{ background: #f0ffd0; padding: 30px 0;}

        .services-page .number h3 {font-size: 100px;}

        .services-page .team-text {padding: 0px;}

        .clients-page .clients-body {padding: 15px; }

       

    }

    @media(max-width:554px){

        .contact-details{text-align: center;}

        .contact-details .d-flex{display: unset !important;}
        
        .inputs{text-align: center;}

        .contact-about .inputs .form-control::placeholder{text-align: center; font-size: 15px;}

        .contact-about .inputs textarea::placeholder{text-align: center; font-size: 15px;}


    }

    @media(max-width:599px){

        .banner .carousel .carousel-caption{width: 100%; position: unset; background-color: #000;}

        .banner .carousel .carousel-caption h5 { margin-bottom: 15px; font-size: 26px; }

        p{font-size: 14px !important;}

        .about .title {font-size: 18px;}

        .about-company .title {font-size: 18px; margin-bottom: 15px; line-height: 30px;} 

        .heading{font-size: 30px;}

        .cards .padding-box {padding: 0px;}

        .projects .project-text .btns .read-btn, .about .read-btn{font-size: 18px;}

        .footer h3{margin-bottom: 15px;}

        .footer p{line-height: 25px;}

        .footer .overlay{margin-bottom: 15px;}

        .footer .overlay.second-ul{margin-bottom: 0;}

        .footer .overlay .contact{margin-bottom: 15px;}

       

        .services-page .team-text p{line-height: 30px;}

        .clients-page .clients-body img{margin-bottom: 15px;}

        .contact-about .contact-details p,  .contact-about .contact-details a{font-size: 14px !important;}

        .clients-page h3{font-size: 40px;}


        
    }


    
    @media(max-width:564px){

        .contact-about .inputs .mrt{margin-top: 1.5rem !important;}

        .contact-about h3{font-size: 30px; margin-bottom: 0;}


    }

    @media(max-width:480px){

        .banner .carousel-indicators{display: none;}

        .inner-banner .padding-top {padding-top: 60px;}

        .cards, .clients, .footer, .about-company, .contact-about-two, .services-page, .projects-page, .clients-page, .contact-about{padding: 50px 0px;}

        .projects, .about{ margin: 50px 0;}

        
    }

    @media(max-width:375px){

        .about .pot {position: unset !important;}

        .projects-page .tab_content h2 {font-size: 22px; line-height: normal;}



        
    }


    @media(max-width:320px){

        
        
    }