/*about-banner*/
#about-banner{background:url(../images/car.png) center top no-repeat; height: auto; padding-bottom: 110px; margin-top: 1%}
#about-banner h2{font-size: 40px; font-weight: 600; color: #fff; text-align: center; margin-top: 18%; text-transform: uppercase; width: 100%;}
#about-banner .container-fluid{width: 70%}


/*services*/
#services {padding-top: 60px; padding-bottom: 60px; background: #f2f2f2;}
#company .container-fluid {width: 75%;}
#services h2{font-size: 30px; text-align: left; color: #0A0A08;margin-top: 0px;font-weight: 600;}
#services p{font-size: 16px; text-align: left; color: #525559; width: 100%; text-align: justify;line-height: 28px;}
#services .big{font-size:20px; text-align: left; color: #100c08;text-align: justify;line-height: 28px; }
#services .mail{font-size:18px; }

#services .top{margin-top: 1%}

#services .container-fluid{width: 70%;}


.arrow{ position: absolute; top: 58%; left: 48%; border: 1px solid #f6cd27; border-radius: 45px 45px 45px 45px; width: 45px;
 height: 12%;}
.arrow .arrow1{margin-top: 40px}
.arrow span{ display: block; width: 10px; height: 10px; border-bottom: 2px solid #fff; border-right: 2px solid #fff;
 transform: rotate(45deg); margin: -10px auto; animation: animate 2s infinite;}
.arrow span:nth-child(2){ animation-delay: -0.2s;}
.arrow span:nth-child(3){ animation-delay: -0.4s;}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}



#company .about-mail .set{ width: 100%; margin: auto;  }
#company .about-mail .form-control{ padding: 15px 12px; margin-bottom: 25px; height: 60px!important; font-size: 16px;border-radius: 0px;}

.pull-right { color: #fff; float: none!important; background: #4468b2; padding: 20px; font-size: 20px; width: 25%; border-radius: 0px;}
.pull-right { color: #fff; float: none!important; margin: auto; display: block; padding: 20px; width: 15%; border-radius: 0px; margin-top: 2%;}
.pull-right:hover{ background: #f6cd27; color: #fff}


#company .high p {width: 100%}
#company .high p a{font-size:16px; color:#767575;  display:initial; text-decoration: none;}
#company .high p a:hover{color:#566d31; font-weight: 600;}


#company{padding-top:80px; padding-bottom:80px;}
#company .high{margin-top: 2%}
#company .high h3 i{font-size: 30px; color: #bda263;    margin-left: 0px;}
#company .to img{width: 100%}
#company {padding-top: 100px; padding-bottom: 100px; background: #f2f2f2; width: 100%;}
#company .bg { width: 100%;}
#company .bg .centr{text-align: center;}
#company .bg .centr p{text-align: center; margin: auto; }
#company .bg .hi{margin-top: 2% }
#company .to .col-md-3{margin-bottom: 30px}
#company .to .ser-box{padding: 20px; border: 1px solid #ccc}
#company .to .ser-box h3{font-size:22px; font-family: 'Assistant', sans-serif; color:#566d31; margin-top: 0px;line-height: 28px;}
#company .to .ser-box  p{ font-size:15px; width: 100%; line-height: 29px; font-family: 'Assistant', sans-serif; color:#575757;}
#company .to .ser-box a{color: #ab8a3a;font-size: 16px; font-weight: 600; text-decoration: none;}
#company .to .ser-box a:hover{color: #566d31; cursor: pointer;}
#company .to .ser-box a:hover i{background: #566d31;}
#company .to .ser-box i{background: #ab8a3a; padding: 10px; color: #fff; border-radius: 4px; font-size: 10px; width: 10%}

#company h2{font-size:30px; text-transform:uppercase; font-weight:600;letter-spacing:1px;font-family: 'Assistant', sans-serif; color:#332a28;}
#company p{ font-size:17px; width: 60%; line-height: 29px; font-family: 'Assistant', sans-serif; color:#575757;}
#company .top{padding:8px;margin:auto; width:15%; margin-top:2%;
     font-weight: 600;    text-align: center; cursor: pointer;}
#company .top:hover{background: #566d31;}
#company .top:hover a{color: #fff;}
#company .top a{color:#566d31; font-size: 16px;}
#company i{text-align:right;    margin-left: 15px;
    font-size: 17px;
    font-weight: 600;}

#company .box{background:#474134;border-radius:200px;padding:44px; width:200px; height:200px;margin:auto;}

#company .box:hover{background:#566d31; cursor:pointer;}
#company :hover.box h2{color:#fff;}
#company :hover.box p{color:#fff;}

#company .achives p{text-align:center;width:100%;color:#fff; font-size:17px;}
#company .achives h2{font-weight:600;color:#fff;font-family: 'Assistant', sans-serif;font-size:40px; font-weight:600;}
#company .container{width:65%; padding-top:5%;}

.form-control {padding: 28px 12px;}





@media only screen and (min-width : 1920px) and (max-width : 2559px){ 
  
  
  
}
@media only screen and (min-width : 1600px) and (max-width : 1919px){ 


}
@media only screen and (min-width : 1440px) and (max-width : 1599px){ 

#services .container-fluid{width: 80%;}
  


}
@media only screen and (min-width : 1366px) and (max-width : 1439px){
  
  
#services .container-fluid{width: 80%;}
 #about-banner i{width: 8%}
   
    #services h2 {font-size: 25px;}
}
@media only screen and (min-width : 1200px) and (max-width : 1365px){ 


  
#services .container-fluid{width: 90%;}
#about-banner i{width: 8%}
.arrow {top: 60%;}  

    #services h2 {font-size: 25px;}
}

@media only screen and (min-width : 1024px) and (max-width : 1199px){ 
  
  
.pull-right {width: 20%;}  
#services .container-fluid{width: 80%;}
 
#services p{width: 100%}


#about-banner i{width: 10%}

   #services {padding-top: 50px;padding-bottom: 50px;}
    #services h2 {font-size: 25px;}



}

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

.arrow {top: 50%;width: 42px;}  
.arrow .arrow1 {margin-top: 35px;}
#services .container-fluid{width: 80%;}
 
#services p{width: 100%}
#services {padding-top: 50px; padding-bottom: 50px;}

#services .top .read{    width: 100%;font-size: 20px;    line-height: 38px;}
#services .top a{   font-size: 19px;    line-height: 38px;}
#about-banner i{width: 13%}

.pull-right {width: 25%;}   

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

.kb_wrapper {overflow: hidden; height: 260px;}
.kb_wrapper>.carousel-inner>.item>img, .kb_wrapper>.carousel-inner>.item>a>img{height: 260px}

.arrow {top: 47%;width: 42px; left: 45%;}  
.arrow .arrow1 {margin-top: 35px;}


#services p{width: 100%}
#services {padding-top: 40px; padding-bottom: 40px;}
#services .top{text-align: center;}
#services .top .read{width: 100%; float: none; margin-bottom: 20px;}
#services .container-fluid {width: 94%;}

#about-banner h2 {font-size: 30px; margin-top: 40%;}
#about-banner i {width: 20%; padding: 8px; font-size: 16px;}
#services h2{text-align: center; font-size: 25px;}
.pull-right {width: 50%; margin-top: 8%;} 

  }
  
  
@media only screen and (max-width: 375px) {
.topnav{margin-top: -5%}
.arrow {top: 45%;}

.pull-right {width: 58%;} 

} 
@media only screen and (max-width: 320px) {
#services .top a{font-size: 20px; line-height: 42px;}
.arrow {top: 40%;}

.pull-right {width: 68%;} 

}