/*about-banner*/
#about-banner{background:url(../images/corporate-banner.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%}



/*Solutions*/
#about-con {padding-top: 60px; padding-bottom: 60px; background: #f2f2f2;}
#about-con .container-fluid {width: 75%;}
#about-con h2{font-size: 30px; text-align: left; color: #0A0A08;    margin-top: 0px; font-weight: 600;}
#about-con p{font-size: 16px; text-align: left; color: #525559; line-height: 28px;    text-align: justify;}
#about-con .top {margin-top: 15px;}





/*company*/
#company {padding-top: 60px; padding-bottom: 60px;}
#company .container-fluid {width: 75%;}
#company h2{font-size: 30px; text-align: center; color: #000}
#company p{font-size: 16px; text-align: center; color: #000; width: 70%; margin: auto; display: block;}
#company .read{ padding: 8px; color:#4468b2;  width: 15%; margin: auto; margin-top: 2%; text-align: center;display: block;padding: 8px;}
#company .read:hover{border: 2px solid #4468b2; background: #4468b2; color: #fff; cursor:pointer;margin-top: 2%}


#company .top{}
#company .top .pad{padding-right: 0px; padding-left: 0px}
#company .top img{width: 100%}
#company .top .box{background: #fff; padding: 15px 30px 30px 30px; border: 2px solid #e8e8e8; text-align: left; }
#company .top :hover .box{background: #4368b4; padding: 15px 15px 30px 30px; border: 2px solid #4368b4; color: #fff }
#company .top .box:hover h2{color: #fff }
#company .top .box:hover p{color: #fff; cursor: pointer;}
#company .top :hover img{opacity: .4; color: #fff;}
#company .top :hover .box h2{color: #fff}
#company .top :hover .box p{color: #fff}
#company .top :hover .box p span{color: #fff}
#company .top .box h2{text-align: left; font-size: 24px; color: #4468b3; }
#company .top .box p{text-align: left; width: 100% }
#company .top .box p span{font-size: 40px; color:#4468b3; margin-right: 20px; }

/*vision*/
#vision {padding-top: 60px; padding-bottom: 60px; border-top: 1px solid #ebebeb}
#vision .container-fluid {width: 75%;}
#vision h2{font-size: 30px; text-align: left; color: #0A0A08;margin-top: 0px; font-weight: 600;}
#vision p{font-size: 16px; text-align: justify; color: #525559; line-height: 28px;}
#vision .top {margin-top: 15px;}
#vision ul li{list-style-type:none; font-size: 16px; line-height: 30px}
#vision ul li i{margin-right: 20px; font-size: 9px; color: #4369b2; }


/*quality*/
#quality {padding-top: 60px; padding-bottom: 60px; border-bottom: 1px solid #ebebeb}
#quality .container-fluid {width: 75%;}
#quality h2{font-size: 30px; text-align: left; color: #0A0A08;margin-top: 0px; font-weight: 600;}
#quality p{font-size: 16px; text-align: justify; color: #525559; line-height: 28px;}
#quality .top {margin-top: 15px;}
#quality ul li{list-style-type:none; font-size: 16px; line-height: 30px}
#quality ul li i{margin-right: 20px; font-size: 9px; color: #4369b2; }


/*Solutions*/
#strategy {padding-top: 60px; padding-bottom: 60px; background: #f2f2f2;}
#strategy .container-fluid {width: 75%;}
#strategy h2{font-size: 30px; text-align: left; color: #0A0A08;margin-top: 0px; font-weight: 600;}
#strategy p{font-size: 16px; text-align: justify; color: #525559; line-height: 28px;}
#strategy .top {margin-top: 15px;}
#strategy ul li{list-style-type:none; font-size: 16px; line-height: 30px}
#strategy ul li i{margin-right: 20px; font-size: 9px; color: #4369b2; }








/*services*/
#services {padding-top: 60px; padding-bottom: 60px; background: #f2f2f2;}
#services .container-fluid {width: 75%;}
#services h2{font-size: 30px; text-align: center; color: #000}
#services p{font-size: 16px; text-align: center; color: #000; width: 70%; margin: auto; display: block;}

#services .top{margin-top: 4%}
#services .top img{width: 100%}
#services .top .box{background: #fff; padding: 15px 30px 30px 30px; border: 2px solid #d0d0d0; text-align: left; }
#services .top :hover .box{background: #4368b4; padding: 15px 30px 30px 30px; border: 2px solid #4368b4; color: #fff }
#services .top .box:hover h2{color: #fff }
#services .top .box:hover p{color: #fff; cursor: pointer;}
#services .top :hover img{opacity: .4; color: #fff;}
#services .top :hover .box h2{color: #fff}
#services .top :hover .box p{color: #fff}
#services .top .box h2{text-align: left; font-size: 24px; color: #4468b3; }
#services .top .box p{text-align: left; width: 100% }
#services .top .read{border: 2px solid #4468b2; padding: 2px; color:#4468b2;  width: 60%; float: right; margin-top: 10%; text-align: center;}
#services .top .read:hover{border: 2px solid #4468b2; color:#fff; background: #4468b2; cursor:pointer;}

#services .top a {font-size: 22px; color: #000; display: block; line-height: 50px;}
#services .top a:hover{color: #4468b2; cursor: pointer;}
#services .top {text-align: right}


.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);
    }
}










@media only screen and (min-width : 1920px) and (max-width : 2559px){ 
  
  
  
}
@media only screen and (min-width : 1600px) and (max-width : 1919px){ 
  
#clients .container-fluid {width: 86%;}






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

#clients .container-fluid {width: 85%;}
#solutions .container-fluid { width: 80%;}
#company .container-fluid {width: 80%;}
#services .container-fluid{width: 80%;}
#company .top .box p span{font-size: 30px;}








}
@media only screen and (min-width : 1366px) and (max-width : 1439px){
  
#clients .container-fluid {width: 85%;}
#solutions .container-fluid { width: 80%;}
#company .container-fluid {width: 80%;}
#services .container-fluid{width: 80%;}
#company .top .box{padding: 15px 15px 30px 15px;}
#about-banner i{width: 8%;}







#about-con h2 {font-size: 25px;}
#company .top .box p span {font-size: 35px;}
#vision h2 {font-size: 25px;}
#vision .top {margin-top: 15px;}
#strategy h2 {font-size: 25px;margin-top: 0px;}
#strategy .top {margin-top: 15px;}
#quality h2 {font-size: 25px;margin-top: 0px;}



  
}
@media only screen and (min-width : 1200px) and (max-width : 1365px){ 


#clients .container-fluid {width: 95%;}
#solutions .container-fluid { width: 90%;}
#company .container-fluid {width: 90%;}
#services .container-fluid{width: 90%;}
#company .top .box{padding: 15px 15px 30px 15px;}
#about-banner i{width: 8%;}
#strategy .container-fluid{width: 90%}
#vision .container-fluid{width: 90%}
#quality .container-fluid{width: 90%}
#about-con .container-fluid{width: 90%}


.arrow {top: 60%;} 






#about-con h2 {font-size: 25px;}
#company .top .box p span {font-size: 35px;}
#vision h2 {font-size: 25px;}
#vision .top {margin-top: 15px;}
#strategy h2 {font-size: 25px;margin-top: 0px;}
#strategy .top {margin-top: 15px;}
#quality h2 {font-size: 25px;margin-top: 0px;}



}

@media only screen and (min-width : 1024px) and (max-width : 1199px){ 
  
  
  
#clients .container-fluid {width: 95%;}
#solutions .container-fluid { width: 90%;}
#company .container-fluid {width: 90%;}
#services .container-fluid{width: 90%;}
#company .top .box{padding: 15px 11px 30px 10px;}
#solutions {padding-top: 50px; padding-bottom: 50px;}
#company {padding-top: 50px; padding-bottom: 50px;}
#company .top .box p span {font-size: 25px;}
#services p{width: 90%}
#services {padding-top: 50px; padding-bottom: 50px;}

#about-banner i{width: 10%}
#strategy .container-fluid{width: 90%}
#vision .container-fluid{width: 90%}
#quality .container-fluid{width: 90%}
#about-con .container-fluid{width: 90%}


#about-con {padding-top: 50px; padding-bottom: 50px;}
#vision {padding-top: 50px; padding-bottom: 50px;}
#quality {padding-top: 50px; padding-bottom: 50px;}
#strategy {padding-top: 50px; padding-bottom: 50px;}
#about-con h2 {font-size: 25px;}
#about-con .top {margin-top: 15px;}
#vision h2{font-size: 25px;margin-top: 0px;}
#vision .top {margin-top: 15px;}
#strategy h2 {font-size: 25px;margin-top: 0px;}
#strategy .top {margin-top: 15px;}  
#quality h2 {font-size: 25px;margin-top: 0px;}
#quality .top {margin-top: 15px;}


}

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

#clients .container-fluid {width: 95%;}
#solutions .container-fluid { width: 90%;}
#company .container-fluid {width: 90%;}
#services .container-fluid{width: 90%;}
#company .top .box{padding: 15px 11px 30px 35px;}
#solutions {padding-top: 50px; padding-bottom: 50px;}
#company {padding-top: 50px; padding-bottom: 50px;}
#company .top .box p span {font-size: 30px;}
#services p{width: 90%}
#services {padding-top: 50px; padding-bottom: 60px;}
#clients .carousel img{width: 120%}
#clients .carousel-control.left{    margin-top: -20px;}
#clients .carousel-control.right{    margin-top: -20px;}
#clients {padding-top: 20px; padding-bottom: 30px;}
#solutions .top .read{width: 30%;}
#company .read{width: 30%;}
#services .top .read{    width: 100%;font-size: 20px;    line-height: 38px;}
#services .top a{   font-size: 19px;    line-height: 38px;}
#solutions .top .box{border: 1px solid #d0d0d0;}


#about-banner i{width: 13%}
#strategy .container-fluid{width: 90%}
#vision .container-fluid{width: 90%}
#quality .container-fluid{width: 90%}
#about-con .container-fluid{width: 90%}
#about-con{padding-bottom: 50px; padding-top: 50px}
#vision{padding-bottom: 50px; padding-top: 50px}
#quality{padding-bottom: 50px; padding-top: 50px}
#strategy{padding-bottom: 50px; padding-top: 50px}

.arrow {top: 50%;width: 42px;}  
.arrow .arrow1 {margin-top: 35px;}

#about-con img{width:50%;margin: auto;}
#vision img{width: 50%;margin: auto;}
#strategy img{width: 50%;margin: auto;}


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


#about-banner i{width: 20%; padding: 8px; font-size: 16px;}
#about-banner h2{font-size: 30px; margin-top: 40%}

#about-con {padding-top: 40px; padding-bottom: 40px;}
#vision {padding-top: 40px; padding-bottom: 40px;}
#quality {padding-top: 40px; padding-bottom: 40px;}
#strategy {padding-top: 40px; padding-bottom: 40px;}

#about-con .container-fluid {width: 90%;}
#vision .container-fluid {width: 90%;}
#quality .container-fluid {width: 90%;}
#strategy .container-fluid {width: 90%;}
ul {padding: 0px; }




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

#solutions .top .read{width: 100%}

#solutions {padding-top: 20px; padding-bottom: 37px;}
#solutions p{width: 100%}
#solutions .container-fluid {width: 90%;}
#solutions .top {margin-top: 10%;}
#solutions .top .pad{margin-bottom: 20px}


#company p{width: 100%}
#company .read{width: 60%}
#company {padding-top: 40px; padding-bottom: 40px;}
#company .container-fluid {width: 82%;}


#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-con h2{text-align: center;    font-size: 25px;}
#company .top .box p span {font-size: 35px;}
#about-con p{text-align: center;}
#vision h2{text-align: center;    font-size: 25px; margin-top: 0px;}
#quality h2{text-align: center;    font-size: 25px;margin-top: 0px;}

#vision p{text-align: center;}
#quality p{text-align: center;}
#strategy h2{text-align: center;    font-size: 25px; margin-top: 0px;}
#strategy p{text-align: center;}

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







  }
  
  
@media only screen and (max-width: 375px) {
.topnav{margin-top: -5%}
#clients1 .carousel-control.left{margin-top: 14px;}
#clients1 .carousel-control.right{margin-top: 14px;}
.arrow {top: 45%;}

} 
@media only screen and (max-width: 320px) {
  
#company h2 {font-size: 24px;}
#services .top a{font-size: 20px; line-height: 42px;}
#clients1 .carousel-control.left{margin-top: 4px;}
#clients1 .carousel-control.right{margin-top: 4px;}
.arrow {top: 40%;}



}