/* some css for bootstrap container-fluid and container */

.drag-row,.drag-sub-col1{display:inline-block;}


/* carasol div */

.hello{position: relative;overflow: hidden !important;}

.skew-box{width: 40%;height: 185px;background:#FFFFFF;display: inline-block;transform: rotate(-35deg);z-index:+10;position: absolute;top:-60px;left:-85px;border-radius:16px;}

.hello img{    width:100%;    height:100%;    display: block;    z-index:-1;}

/* for slider dots color */

.active span { background:#1076bc !important;}

.ani-box{    width:80%;    height:118px;    margin:0px auto 0px auto;    z-index:+10;    background:#ffff;    position:relative;    top:-25px;}










.ani-box::before{   content:"";   width:5px;   height:100%;   background:#1076bc;   display: inline-block;   position: absolute; left: 0; top: 0;}

.ani-box h6{ position: absolute; left: 15px; top: 20px;    font-family: 'Fira Sans', sans-serif;    color:#1076bc;    font-weight:400;    text-align:left;    display: block;   }

.ani-box h2{  position: absolute; left: 15px; top: 50px;   font-family: 'Fira Sans', sans-serif;    text-align:left;    display: inline-block;    font-size:24px;    font-weight:600;}



/* ...................hover effects..................... */

.hello .skew-box{    transition:background 0.5s linear;}

.hello:hover .skew-box{    background:#1076bc !important;}

.hello .ani-box{    transition:transform 0.5s linear;}

.hello:hover .ani-box {    transform: translateY(-20px);}

.ani-box h2:hover{ color:#1076bc; transition:color 0.5s ease-in-out;}

.ani-box h2{color: #000;}

.hello:hover .skew-box span{ color: #fff;}

/* ..............................some responsive settings.......................... */

@media screen  and (max-width:768px){
    
    .skew-box{
        top: -70px !important;
        left: -85px !important;
    }
    .ani-box{height:100px;}
    .ani-box h2{font-size:22px;}
}
@media screen  and (max-width:600px){
    
    .skew-box{
        top:-60px !important;
        left:-85px !important;
    }
    .ani-box{height:118px;}
    .ani-box h2{font-size:26px !important;}
}
@media screen  and (max-width:360px){
    
    .skew-box{
        top: -77px !important;
        left: -125px !important;
    }
    .ani-box{height:100px;}
    .ani-box h2{font-size:22px !important;}
}



.service-row{ display: inline-block; margin-top:20px;}

.s-slider{text-align: center;padding-bottom:20px;border:0.5px solid #dddddd;}

.img-div{display: inline-block;margin-top:20px;text-align: center;position: relative;margin-bottom:20px;}

.ser-img{width:90px !important;height:90px !important;border-radius:50px}

.quatation{width:50px;height:50px;background:#1076bc;text-align: center;box-sizing: border-box;position: absolute;right:-20px;bottom:-10px;border-radius:50px;}

.div-qut{color:white;font-size:24px;margin-top:12px;}

.slider-para{font-family: 'Rubik', sans-serif;font-size:16px;color:#6d6d6d;font-weight:400;width:80%;display: inline-block;margin-bottom:10px;}

.slide-star{display:block;text-align: center;}

.star-1{color:#1076bc;}

.star-2{color:#6d6d6d;}

.s-spacer{width:50px;height:1px;background:#dddddd;display: inline-block;position: relative;}

.s-spacer::before{content: "";width:25px;height:1px;background:#1076bc;position: absolute;left:0;}

.s-heading{font-size:18px;font-family: 'Fira Sans', sans-serif;font-weight:700;text-align: center;margin-top:10px;}

.head-span{display: block;font-size:14px; color: #1076bc;font-weight:400;margin-top:8px;text-decoration: none;}

.active span{background: #1076bc !important; }

.owl-item span{width:30px !important;height:6px !important;}

.owl-dot span{width:20px !important;height:4px !important;}


/* 2nd slides */

.logo-div{display: inline-block;margin-top:30px;}

.logo-item img{filter: grayscale(100%);transition:filter 0.4s ease-in-out;}

.logo-item img:hover{filter: grayscale(0%);}










/* ..............................last slider.................................. */


.last-slide{margin-top:20px;position: relative;}

.l-hello{box-shadow: 8px 7px 24px 0px rgba(222,217,217,0.75);padding-bottom:20px;position: relative;}

.l-hello img{width:100%;height:100%;display: inline-block;}

.l-hello a{display: block;text-decoration: none;padding:0px 0px 0px 10%;}

.l-a,.l-a2{margin:20px 0px 10px 0px;color:#707070;font-family: 'Fira Sans', sans-serif;font-size:15px;}

.l-a1{margin:0px 0px 20px 0px;color:#252525;font-family: 'Rubik', sans-serif;font-size:22px;font-weight:500;}

.l-a2{color:#1076bc;margin-bottom:0px !important;}

.active span{ background:#1076bc !important;}

.last-one .owl-prev {position: absolute;top:42% !important;left:-80px !important; width:60px ;height:60px;background:#1076bc !important;z-index:+1;border-radius:50% !important;box-sizing: border-box; transition:background 0.7s ease-in-out,transform 0.3s ease-in-out;transform: scale(0) !important;}

.last-one .owl-next {position: absolute;top:42% !important;right:-80px !important; width:60px ;height:60px;background:#1076bc !important;z-index:+1;border-radius:50% !important;box-sizing: border-box;transition:background 0.7s ease-in-out,transform 0.3s ease-in-out;transform: scale(0) !important;}

.last-one .owl-prev span{font-size:42px !important;color:#fff !important;display: inline-block !important;position: relative;bottom:8px !important;right:2px !important;}

.last-one .owl-next span{font-size:42px !important;color:#fff !important;display: inline-block !important;position: relative;bottom:8px !important;left:2px !important;}

.last-one .owl-dots span{width:40px !important; height:6px !important;}

.rec1{background:#1076bc;width:62px;height:64px;border-radius:6px;box-sizing: border-box;text-align: center;position: absolute;top:50%;right:10%;}

.l-p{color: #fff;font-size:16px;font-family: 'Rubik', sans-serif;position: relative;top:8px;}

.l-p1{color: #fff;font-size:16px;font-family: 'Rubik', sans-serif;position: relative;bottom:8px;}

.b-line{background:#1076bc;width:100%;height:2px;position: absolute;bottom:0px;transform: scale(0);transition:0.5s transform ease-in-out;}

/* ...........hover effects */

.l-a:hover{color:#707070;}

.l-a1:hover{color:#252525;}

.l-a2:hover{color:#1076bc;}


.item:hover .b-line{
    transform: scale(1.0) !important;
}
.last-one:hover  .owl-prev{
    transform: scale(1.0) !important;}

    .last-one:hover .owl-next{
    transform: scale(1.0) !important;}

.last-one .owl-prev:hover{background:#121B51 !important;}

.owl-next:hover{background:#121B51 !important;}



/* ..................responsive.................. */

@media screen and (max-width:768px) {
    .l-a1{font-size:20px;margin-bottom:0px;}
    .l-a2{margin-top:10px;}
    .rec1{right:6%;}
    .owl-prev{left:-30px !important;}
    .owl-next{right:-30px !important}
    .last-one:hover  .owl-prev{
        transform: scale(0) !important;}
    
        .last-one:hover .owl-next{
        transform: scale(0) !important;}
    
}
@media screen and (max-width:640px) {
    .l-a1{font-size:14px;}
    .rec1{right:4%;top:44%;width:50px;}
    .owl-prev{left:-40px !important;}
    .owl-next{right:-40px !important}
    
}
@media screen and (max-width:480px) {
    .l-a1{font-size:22px;margin-bottom:0px;}
    .l-a2{margin-top:10px;}
    .rec1{right:6%;top:60%;}
    .owl-prev{left:-30px !important;}
    .owl-next{right:-30px !important}
    
}
@media screen and (max-width:360px) {
    .l-a1{font-size:22px;margin-bottom:0px;}
    .l-a2{margin-top:10px;}
    .rec1{right:6%;top:50%;}
    .owl-prev{left:-40px !important;}
    .owl-next{right:-40px !important}
    
}
@media screen and (max-width:320px) {
    .l-a1{font-size:22px;margin-bottom:0px;}
    .l-a2{margin-top:10px;}
    .rec1{right:6%;top:45%;}
    .owl-prev{left:-40px !important;}
    .owl-next{right:-40px !important}
    
}












.div-slide3{display: inline-block;}

.hello-3{border-radius:8px !important;position: relative;transition: background 0.6s ease-in-out}

.contentbox2{width:60%;height:268px;background:#F7F8F9;clip-path: polygon(0 0, 100% 0, 35% 100%, 0% 100%);transition: background 0.6s ease-in-out;}

.tri{    width: 0;  height: 0; border-top: 40px solid #1076bc; border-left: 45px solid transparent;position: absolute;right:0;top:0;}

.hello-3 img{position: absolute;top:36px;left:5%;width:80px !important;height:80px !important;}

.head-div{display: inline-block;position: absolute;top:36px;left:21%;}

.head-div h2{color: #000; font-family: 'Rubik', sans-serif;font-size:22px !important;font-weight:500 !important;}

.head-div a{float: left; text-decoration: none;color:#1076bc;font-size:16px;font-family: 'Fira Sans', sans-serif;font-weight:400;text-transform: capitalize;}

.hello-3 p{position: absolute;top:55%;left:5%;width:90%;font-size:15px;font-family: 'Fira Sans', sans-serif;color: #707070;}

.stars{display: inline-block;position: absolute;top:80%;left:5%;}

.l-star{color:#1076bc;margin:0px 2px 0px 2px;}

.d-c{color:grey !important;}

/* for dots */

.active span{ background:#1076bc !important;}

/* hover effects */

.hello-3:hover{  background:#1076bc !important;}

.hello-3:hover .contentbox2 {   background:#252525 !important;}

.hello-3:hover p {color: #fff;}

.hello-3:hover .head-div h2 {color:#fff;}


/* for responsive */

@media screen and (max-width:600px) {
    .contentbox2{width:70%;}
    .head-div{left:24%;}
}
@media screen and (max-width:480px) {
    .contentbox2{width:80%;}
    .hello-3 p{font-size:13px;}
    .stars{top:75%}
    .head-div{left:26%;}

}
@media screen and (max-width:360px) {
    .contentbox2{width:90%;}
    .hello-3 p{font-size:11px;}
    .stars{top:75%}
    .head-div{left:32%;}

}
@media screen and (max-width:320px) {
    .contentbox2{width:99%;}
    .hello-3 p{font-size:11px;}
    .stars{top:75%}
    .head-div{left:37%;}

}














/* some css for bootstrap container-fluid and container */

.drag-row-2{display:inline-block;}


/* carasol div */

.hello-2{position: relative;overflow: hidden !important;position: relative;}


.hello-2 img{    width:100%;    height:100%;    display: block;    z-index:-1;}

.content-box{width:100%;height:122px;background:#fff;display: inline-block;padding-left:11.2%; }

.content-box a{text-decoration: none;font-size:24px;color:#252525;display: inline-block;font-family: 'Rubik', sans-serif;font-weight:600;margin-top:20px;}

.content-box span{font-size:16px;color:#1076bc;display:block;font-family: 'Rubik', sans-serif;font-weight:300;margin-top:8px;}

.line{width:100%;height:2px;background:#1076bc;position: absolute;left:0;bottom:0;transform:scale(0);transition:transform 0.6s ease-in-out;}























/* ...................hover effects..................... */

.hello-2:hover .line{
    transform: scale(1.0);
}



/* ..............................some responsive settings.......................... */

@media screen  and (max-width:768px){
 
}
@media screen  and (max-width:600px){
    
 
}
@media screen  and (max-width:360px){
    
    
}