@font-face {
    font-family:'Lato - Heavy';
    src: url('../fonts/Lato-Bold.ttf') format('truetype');
    
}
@font-face {
    font-family:'Lato';
    src: url('../fonts/Lato-Light.ttf') format('truetype');

}
@font-face {
    font-family:'Lato-Black';
    src: url('../fonts/Lato-Black.ttf') format('truetype');

} 
@font-face {
    font-family:'Lato-Regular';
    src: url('../fonts/Lato-Regular.ttf') format('truetype');

} 

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #FFFFFF;
}
ul,h1,h2,h3,h4,h5,h6,p,a,span{
    margin: 0;
    padding: 0;

}
ul {
    list-style: none;
}
a {
    text-decoration: none;
}

svg {
    display: block;
    margin: 0;
    padding: 0;
}
img{
    max-width: 100%;
    border: none;
}
.wrapper {
    width: 100%;
    float: left;
}
header {
    width: 100%;
    float: left;
    background: #376dad;
    position: absolute;
    z-index: 9;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    top:0;
    left: 0;
    right: 0;
}
header.js-fixed{
    position: fixed;
    top:0;
    left: 0;
    right: 0;
}
.header{
    width: 100%;
    padding: 20px 0px;
    
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    max-width: 1200px;
    margin: 0 auto;
}
header.js-fixed .header{
    padding: 15px 0px;
}
.logo {
    float: left;
    width: 36%;

}
header.js-fixed  .logo img {
    width: 150px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
}
.logo img {
   max-width: 100%;

}
.menu{
    float: left;
    width: 53%;
    padding: 20px 0px;
    text-align: right;
}
.menu ul li{display: inline;padding: 10px; display: inline;}
.social-icon{
    float: right;
    width: 9%;
    padding: 20px 0px;

}
.social-icon ul li{text-align: right;
    padding-left: 20px;display: inline;}
    .menu ul li a{
        color: #ffffff;
        font-family: "Lato - Heavy";
        font-size: 14px;
        font-weight: 400;
        line-height: 30px;
        text-transform: uppercase;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
    }
    section{
        width: 100%;
        float: left;
        outline: none;
    }
    .banner-section{
        background-color: #376dad;
        height: 100vh;
        padding: 120px 0px 0px; 
        display: flex;
        text-align: center;
    }
    .top-wrap {
        width: 100%;
        text-align: center;
        padding: 0px 0px;
    }
    .smart-content p{
        color: #ffffff;
        font-family: Lato;
        font-size: 1.5vw;
        font-weight: 700;
        line-height: 30px;
    }
    .animation-image img {
        text-align: center;
        margin: 0 auto;
    }
    .smart-content h1{
        color: #ffffff;
        font-family: 'Lato-Regular', sans-serif;
        font-size: 3.5vw;
        font-weight:bold;
        line-height: 50px;
        width: 100%;
        margin: 0 auto;
        padding-top: 10px;

    }
    .smart-content {
        padding: 20px 0px;
    }
    .inner-section .slick-slide img {
        display: block;
        /* margin: 0; */
    }
    .inner-section .slick-dots{
        bottom: 10px;
    }

    .inner-section {
        width: 100%;
        float: left;
    }

    .inner-section .slick-dots li.slick-active button {
        border-radius: 50%;
        background-color: #ffffff;
        border-color: #ffffff;

    }
    .inner-section .slick-dots li button {
        border-radius: 50%;
        background-color: #22a0f5;
        width: 8px;
        height: 8px;
        border: 1px solid #22a0f5;
    }
    .inner-section .slick-dots {
        position: absolute;
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;


    }
    .inner-section .slick-dots li.slick-active button:before {
        opacity: 0;
        color: black;
        background-color: #ffffff;
    }
    .inner-section .slick-dots li button:before {
        opacity: 0;
        color: black;
    }
    .inner-section .slick-dots li:before{
        background-color: #22a0f5!important;
    }
    .inner-section .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none;
        background-color: transparent;
    }
    .inner-section .slick-dots li:hover button {
        border-radius: 50%;
        background-color: #ffffff;
        border-color: #ffffff;

    }
    .inner-section .slick-dots li{
     width: 8px;
     height: 8px;
     margin: 0 12px;
 }
 .inner-section .slick-dots li{
    margin: 10px;
}
.inner-section .slick-dots li button{
    padding: 3.5px;
}
.slick-initialized .slick-slide {
    display: inline !important;
    outline: none !important;
}

.inner-section.slick-dotted.slick-slider {
    margin-bottom: 30px;
}


.tec-cls h3{
    width: 951px;
    height: 100px;
    color: #376dad;
    font-family: 'Lato-Regular', sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 36px;
    text-align: center;
    margin: 0 auto;
}
.technogy-cls{
    padding: 150px 0px;
    background-color: #f8f4f3;

}

.inner-page {
    width: 1250px;
    margin: 0 auto;
}
.tech-row{
    width: 100%;
    float:left;
    padding: 100px 0px 0px;
}
.icon-cls{
    float: left;
    width: 25%;
    text-align: center;
}
.icon-cls p{
    width: 190px;
    height: 65px;
    color: #484848;
    font-family: Lato-Regular;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    margin: 0 auto;
    padding: 20px 0px;
}
.row{
    width: 100%;

}
.col-1{
    width: 50%;
    float: left;

}
.col-1.blue-cls{
   background-color: #376dad;
   padding: 150px 150px 180px 50px;
}
.col-1.white-cls{
    background-color: #ffffff;
    padding: 160px 120px 150px 170px;
}
.chek-wrap p{
    color: #ffffff;
    font-family: "Lato - Heavy";
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    text-align: right;
}
.chek-wrap {
    width: 350px;
    text-align: right;
    float: right;
}
.inner-row{width: 100%;
    float: left;
    padding-top: 60px
}
.inner-col{width: 33.3%;
    float: left;
    padding: 20px 0px 0px 0px;
    text-align: right;
    position: relative;}
    .inner-col p{color: #ffffff;
        font-family: "Lato - Heavy";
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        position: relative;
    }

    .inner-col:nth-child(1) {
        padding-right: 33px;
    }
    .inner-col.sec-cell:before{
      position: absolute;
      content: "";
      height: 72px;
      padding: 0.5px;
      background: #5c87ba;
      transform: rotate(20deg);
      top: 14px;
      right: -15px;
  }
  .inner-col:before {
    position: absolute;
    content: "";
    height: 72px;
    padding: 0.5px;
    background: #5c87ba;
    transform: rotate(20deg);
    top: 14px;
    right: 10px;
}
.inner-col.thrid-cel:before{
  opacity: 0;
}
.inner-col.thrid-cel {
    padding-left: 20px;
}
.moblie-banner{
    width: 100%;
    float: left;
    width: 201px;
    height: 404px;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    bottom: 0;

}
.moblie-row{
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    width: 202px;
    background: #ffffff;
}
/*.moblie-row{
    width: 253px;
    height: 460px;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    position: absolute;
    top: 110px;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../images/4-layers.png);
    }*/
    .cover-image {
     position: absolute;
     top: 0px;
     left: -4px;
     right: 0;
     width: 253px;
     height: 406px;
 }
 .frame-inner{

 }
 .frame-section{
    position: relative;
}
.frame-content h4{
    color: #484848;
    font-family: "Lato - Heavy";
    font-size: 20px;
    font-weight: 400;
    line-height: 18px;
    padding-bottom: 10px;
} 
.frame-content ul li{
    color: #484848;
    font-family: "Lato - Heavy";
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    padding: 20px 0px;
    width: 245px;
    position: relative;
}
.frame-content ul li:after{
    position: absolute;
    content: "";
    height: 1px;
    padding: 0.5px;
    background: #999a9c;
    bottom: 0px;
    width: 150px;
    left: 0px;
}
.frame-content ul li:before {
    position: absolute;
    content: "";
    height: 10px;
    background:  #71c374;;
    width: 10px;
    border-radius: 50px;
    top: 25px;
    left: -25px;
}
.frame-content ul li span{
   position: relative;
}
.frame-content ul li span:before {
   position: absolute;
   content: "";
   height: 18px;
   width: 18px;
   border-radius: 50px;
   top: 2px;
   left: -29px;
   border-color: #000000;
   border: 1px solid;
}
.frame-content ul li span:after {
   position: absolute;
   content: "";
   height: 1px;
   padding: 0.5px;
   background: #999a9c;
   /* bottom: 0px; */
   width: 37px;
   left: -66px;
   top: 11px;
   bottom: 0;
}

.contect{
    background-color: #376dad;
    padding-top: 150px ;
}
.content-wrap{
    max-width: 1080px;
    margin: 0 auto;
}
.col-sm-4{
    float: left;
    position: relative;
}
.col-sm-4 h5{
   color: #ffffff;
   font-family: "Lato - Heavy";
   font-size: 18px;
   font-weight: 400;
   line-height: 30px;
}
.col-sm-4 p{
  color: #ffffff;
  font-family: Lato;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  position: relative;
}

.col-sm-4:nth-child(3){
  width: 56%;
  padding-left:20px;
}

.col-sm-4:nth-child(2){
   width: 22%
}
.col-sm-4:nth-child(1){
   width: 22%
}
.col-sm-4:before {
    position: absolute;
    content: "";
    height: 130px;
    padding: 0.5px;
    background: #5c87ba;
    /*transform: rotate(20deg);*/
    top: 0px;
    right: 34px;
}
.col-sm-4.last-cls:before{
    opacity: 0;
}
.form-clsw {
    width: 48%;
    float: left;
    padding: 15px 0px;
}
.form-clsw:nth-child(2n+2){
    margin-left: 3%;
}

input[type="text"] {
    width: 100%;
    padding: 18px;
    border: 1px solid #0368ae;
    background: #f4f4f4;
    font-size: 16px;
    font-family:  "Lato-Regular";
    display: block;
    height: 58px;
    outline: none;
}
input:focus {
  background-color: yellow;
}
label {
    width: 50%;
    float: left;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #959595;
  font-family: "Lato-Regular";
  font-size: 16px;
  font-weight: 400;
  line-height: 30px; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #959595;
  font-family: "Lato-Regular";
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #959595;
  font-family: "Lato-Regular";
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
}
input:focus {
  background-color: #ffffff;
  border:none;
}
label.custom_form_label.left_label {
    float: left;
    width: 47%;
    margin-right: 3%;
    padding: 0px 0px;
    height: 80px;
}
label.custom_form_label.right_label {
    width: 47%;
    margin-left: 3%;
    padding: 0px 0px;
    height: 80px;
}

form.contect-from {
    width: 100%;
    float: left;
    padding: 150px 0px 100px;
}
textarea {
    width: 100%;
    padding: 18px;
    border: 1px solid #0368ae;
    background: #f4f4f4;
    font-size: 16px;
    font-family: "Lato-Regular";
    display: block;
    height: 171px;
    color: #000000;
    outline: none;

}
textarea:focus {
  background-color: #ffffff;
  border:none;
}
label.text-area{
    width: 100%;
    padding: 10px 0px;
}
label.button{
   width: 100%;
   float: left;
   text-align: center;
   padding-top: 50px;
}
label.button button{
    color: #ffffff;
    font-family: "Lato - Heavy";
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    text-transform: uppercase;
    padding: 10px 0px;
    border-radius: 33px;
    border: navajowhite;
    width: 200px;
    text-align: center;
    background: #fe706f;
    cursor: pointer;
    outline: none;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
}
form.contect-from {
    width: 100%;
    float: left;
    padding-top: 100px;
}
section.footer{
   width: 100%;
   float: left;
   background: background-color: #2f2e41;
   background-color: #2f2e41;
   padding: 30px; 
}
.footer-inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.footer-inner p{color: #656570;
    font-family: Lato;
    font-size: 13px;
    font-weight: 400;
    line-height: 30px;
    display: inline;
    padding: 10px
}
.footer-inner p:nth-child(3){
    width: 100%;
}
/*----------------->*/

.nav-down {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
}
.header.js-fixed {
    background: #376dad;
    -webkit-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
    -webkit-box-shadow: 0 1px 3px #376dad;
    box-shadow: 0 1px 3px #376dad;
}
.nav-up {
    -webkit-transform: translateY(-120px);
    -ms-transform: translateY(-120px);
    transform: translateY(-120px);
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
}
label.button button:hover{
    background-color: #F44336;
}

.hamburger{
    display: none;
}
.hamburger .line {
    width: 30px;
    height: 3px;
    background-color: #ffffff;
    display: block;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#hamburger-6.is-active .line:nth-child(1) {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);
}
#hamburger-6.is-active .line:nth-child(1), #hamburger-6.is-active .line:nth-child(3) {
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
#hamburger-6.is-active .line:nth-child(2) {
    width: 0px;
}
#hamburger-6.is-active .line:nth-child(3) {
    -webkit-transform: translateY(-10px) rotate(90deg);
    -ms-transform: translateY(-10px) rotate(90deg);
    -o-transform: translateY(-10px) rotate(90deg);
    transform: translateY(-10px) rotate(90deg);
}
#hamburger-6.is-active .line:nth-child(1), #hamburger-6.is-active .line:nth-child(3) {
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
#hamburger-6.is-active {
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
div.input_error {
    position: relative;
    font-size: 13px;
    color: #fa7559;
    text-align: left;
    float: left;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    font-family: 'Lato-Black', sans-serif;
}
div#alertmeassge p {
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    font-family: 'Lato-Regular', serif;
    position: absolute;
    bottom: 47px;
    left: 0;
    right: 0;
}
div#alertmeassge{
    width: 100%;
    float: left;
    position: relative;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.slideInDown {
 -webkit-animation-name: slideInDown; 
 animation-name: slideInDown; 
}
.menu ul li a.re-active{
    color: #fe706f;
}
.menu ul li a:hover{
 color: #fe706f;
}
#solutions{
    background: #f6f4f5;
    padding: 100px 0px; 
}
.group-cls {
    max-width: 1200px;
    margin: 0 auto;
}
.col-sm3 {
    width: 31.6%;
    float: left;
    text-align: center;
    background: #ffffff;
    margin: 15px;
    padding: 20px 20px;
    height: 280px;
}
.col-sm3:nth-child(3n+3){
    margin-right: 0px;
}
.col-sm3:nth-child(1){
    margin-left: 0px;
}
.col-sm3:nth-child(4){
    margin-left: 0px;
}
.col-sm3:nth-child(7){
    margin-left: 0px;
}
.col-sm3 h4 {
    font-size: 18px;
    line-height: 22px;
    color: #376dad;
    font-family: 'Lato-Black', serif;
    text-align: center;
    background: #ffffff;
    width: 300px;
    margin: 0 auto;

}

.col-sm3 p{
    font-size: 16px;
    line-height: 18px;
    font-family: Lato-Regular;
    text-align: center;
    color: #474747;
    width: 320px;
    margin: 0 auto;
    padding:20px 0px;
    font-weight: 400px;
    line-height: 20px;
}

.animation-image img.image2 {
    width: 30vw ;
}
.animation-image img.image1{
    width: 32vw;
}
.animation-image  img.image3 {
    width: 30vw;
}
.clrity-wrap{
    width: 100%;
    float: left;
    background: #f4efec;
    padding: 100px 0px;
}
.inner-clrity{
    max-width: 1120px;
    margin: auto;
    background: #ffffff;
    padding: 50px 100px;
    margin-top: 20px;
}
.inner-clrity h2 {
   color: #484848; font-family: Lato; font-size: 30px; font-weight: 700; line-height: 30px; text-transform: uppercase;
   padding-bottom: 50px;
}
.inner-clrity p {
    color: #484848; font-family: Lato-Regular; font-size: 18px; font-weight: 400; line-height: 30px;
}
.inner-clrity p a{
    color: #484848;
}
.inner-clrity  h4{
  font-size: 18px;
  font-family: Lato-Regular;
  color: #474747;
  margin: 30px 0px;
}
.inner-clrity ul li {
    color: #484848; font-family:Lato-Regular; font-size: 18px; font-weight: 400; line-height: 30px;
    padding-left: 50px;
    position: relative;
    padding-bottom: 10px;
}
.inner-clrity ul li:before{
    position: absolute;
    content: '';
    width: 5px;
    height: 5px;
    background-color:#474747; 
    border-radius: 50%;
    top:12px;
    left: 0px;
}
.footer-inner p a{color: #656570;}

.frame-content li.re-line:after{
  display: none;
}
.col-sm-4 h6 {
    color: #ffffff;
    font-family: "Lato - Heavy";
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
}
.col-sm6{
    width: 50%;
    float: left;
}
.col-sm-4.move-line:before {
    right: 5px;
}
.col-sm6.chennai-cls {
    padding-left: 30px;
}