html {scroll-behavior: smooth; }
body {scroll-behavior: smooth; margin: 0px; padding: 0px;width: 100%; height: 100%;}
:root {
    --primary: #052f5f;
    --primaryLight: #2c3bd9; 
    --magenta: #E00067;
    --darkMagenta: #A11C59;
    --red: red;
    --white: #ffffff;
    --backGroundOffWhite: #f7fafc;
    --lightGrey: #E3EAF2;
    --backGroundGrey: #e1e7ef;
    --grey: #666;
    --footerBg: #0e0f20;
    --footerText: #9f9fa6;
    
    --graphLabel: #4D648D;
    --graphLastLabel: #48CADA;
    --graphGradiant: linear-gradient(134.2deg, #977BF0 0%, #5A90F4 100%);
    --graphLastGradiant: linear-gradient(0deg, #72D3DB 0%, #72A0DB 100%);
    --gradiantGrowingSection: linear-gradient(270deg, #6927c1 0%, #2575f2 100%);  

}
:target:before {content: "";display: block;height: 60px;/* margin: -60px 0 0; */}
.row::after {content: "";clear: both;display: table;}
[class*="col-"] {float: left;padding: 15px;}
[class*="col-"] {width: 100%;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {  -webkit-appearance: none;  margin: 0;}
input[type=number] {  -moz-appearance: textfield;}
section{min-width: 100%; transition: all 0.3s ease, background-position 1ms; padding: 30px 0px;overflow: auto;  
    -ms-overflow-style: none;  scrollbar-width: none; 
}
section::-webkit-scrollbar {display: none;}
.sectionTitle{padding: 0px 0px 30px; margin: 0px;text-align: left;    font: normal normal bold 32px/44px Butler;    letter-spacing: 0px;color: #3F454D;opacity: 1;}
.container{ width: 80%;margin: 0 auto;}
.container .row{width: 100%;}
.container .row .col{width: 100%;}

button:hover,button:focus{outline:none; box-shadow: none; cursor: pointer;} 
button::-moz-focus-inner { border: 0; }
button, div {-webkit-tap-highlight-color: transparent;}
::-webkit-scrollbar { width: 6px; padding-left: 0px;}    
::-webkit-scrollbar-track { width:6px; background:var(--backGroundGrey); }  
::-webkit-scrollbar-thumb { width: 6px; background:var(--primary) }  
::-webkit-scrollbar-thumb:hover {background:var(--primary) }
.hide{ display: none;}

/* header */
.header{padding: 0px; border-bottom: 1px solid #ddd; height: 62px; background: #ffffff;position: fixed;top: 0px;width: 100%;z-index: 9; }
.header .topHeader{ display: flex; justify-content: space-between; align-items: center; width: 100%;height: 62px;}
.header .topHeader .brand{}
.header .topHeader .brand img{height: auto;}
.header .topHeader .navigation{min-width: 40%; }
.header .topHeader .navigation .nav{ padding: 0px;margin: 0px;list-style: none;display: flex; align-items: center; justify-content: space-between;}
.header .topHeader .navigation .nav .navList{border: 1px solid #ffffff;  padding: 8px 20px; }
/* .header .topHeader .navigation .nav .navList:hover,
.header .topHeader .navigation .nav .navList:active,
.header .topHeader .navigation .nav .navList:focus{border-color:#58d7be; font-weight: 600; cursor: pointer;  border-radius: 18px; } */
.header .topHeader .navigation .nav .navList:last-child{background: transparent linear-gradient(90deg, #E4E1A1 0%, #8EE0CA 100%) 0% 0% no-repeat padding-box; border-radius: 18px;opacity: 1;}
.header .topHeader .navigation .nav .navList:last-child:hover{border-color:#58d7be;  background: transparent linear-gradient(90deg, #58d7be 0%, #58d7be 100%) 0% 0% no-repeat padding-box;color: #ffffff;}
.header .topHeader .navigation .nav .navList a{ text-decoration: none; font: 600 14px/17px Open Sans;letter-spacing: 0px;color: #3F454D;opacity: 1;}
.header .topHeader .navigation .nav .navList a:hover{color: #080808;  transform: scale(1.1);}

.hamburger { position: fixed; top: 10px; right: 16px; z-index: 999; display: none; align-items: flex-end;flex-direction: column;cursor: pointer;}  
.hamburger .bar1, 
.hamburger .bar2, 
.hamburger .bar3 { width: 40px;height: 3px;background-color: #333;margin: 5px 0;transition: 0.4s;}  
.hamburger .bar2{width: 28px;}

/* banner */
.banner{margin-top:57px;background-position: left bottom; background-repeat: no-repeat;background-color: #f6f7f9; width: 100%;min-height:425px;background-size: contain; background-image: url("../images/banner/banner.svg"); position: relative;}
.banner .container{width: 100%;}
.banner .bannerWrapper{ display: flex;  justify-content: space-between; }
.banner .bannerWrapper .imageContainer{width: 60%; }
.banner .bannerWrapper .bannerContaint{width: 55%;  display: flex;  flex-direction: column;  justify-content: flex-start;  align-items: flex-start;}
.banner .bannerWrapper .bannerContaint .bannerTitle{margin-bottom: 0px; text-align: left;  font: normal normal bold 40px/56px Butler;  letter-spacing: 0px;  color: #3F454D;  opacity: 1;}
.banner .bannerWrapper .bannerContaint .bannerSubTitle{text-align: left;  font: normal normal 600 18px/24px Open Sans;  letter-spacing: 0px;  color: #9D9D9D;  opacity: 1;}
.banner .bannerWrapper .bannerContaint .bannerButton{padding: 8px 21px;color: #3F454D; text-decoration: none;font: normal normal 600 14px/17px Open Sans; background: transparent linear-gradient(90deg, #E4E1A1 0%, #8EE0CA 100%) 0% 0% no-repeat padding-box; border-radius: 18px;opacity: 1;}
.banner .bannerWrapper .bannerContaint .bannerButton:hover{border-color:#58d7be;  background: transparent linear-gradient(90deg, #58d7be 0%, #58d7be 100%) 0% 0% no-repeat padding-box;}

/* clients */
.clients{padding:0px; background: #ffffff; position: relative;}
.clients .lineBar{height: 10px; background: transparent linear-gradient(90deg, #E4E1A1 0%, #8EE0CA 100%) 0% 0% no-repeat padding-box;width: 100%;opacity: 1;}
.clients .clientList{-ms-overflow-style: none;  scrollbar-width: none;overflow: auto; justify-content: space-between;list-style: none;padding:0px; display: flex;}
.clients .clientList::-webkit-scrollbar {display: none;}
.clients .clientList li{}
.clients .clientList li img{ width: auto; height: 60px;}


/* ourServices */
.ourServices{background: #F5F4F0; padding-bottom: 16px;}
.ourServices .title{}    
.ourServices .serviceList{ display: flex; flex-wrap: wrap;}
.ourServices .serviceList .serviceBox{word-wrap: break-word; width:calc(29% - 16px); min-height: 150px; margin:0px 16px 16px 0px; box-shadow: 0px 6px 12px #0000000A;  border-radius: 6px;padding: 20px; background-color: #ffffff; }
.ourServices .serviceList .serviceBox .title{word-wrap: break-word; margin: 0px;text-align: left;font: normal normal bold 20px/28px Butler;letter-spacing: 0px;color: #3F454D;}
.ourServices .serviceList .serviceBox .infotext{ margin: 0px; padding:0px; font: normal normal normal 12px/20px Open Sans; color: #3F454D;}
.ourServices .serviceList .serviceBox  a:after{content:" Enquir now";overflow:visible;  color: #58D7BE; font: normal normal 600 12px/28px Open Sans;   cursor: pointer;}
.ourServices .serviceList .serviceBox  a{ text-decoration:none;}

@keyframes slideIn {
    100% {
      transform: translateY(0px);
      opacity: 1;
    }
  }

/* whyUs */
.whyUs{ background: #ffffff;}
.whyUs .whyUsList{overflow: auto; margin: 0px; justify-content: space-between;list-style: none;padding:0px; display: flex;-ms-overflow-style: none;  scrollbar-width: none; }
.whyUs .whyUsList::-webkit-scrollbar {display: none;}
.whyUs .whyUsList li{  min-width: 125px;padding: 0px 10px;white-space: nowrap;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.whyUs .whyUsList li img{ width: auto; height: 60px;margin-bottom: 10px;}
.whyUs .whyUsList li span{ font:  600 14px/20px Open Sans;color: #3F454D;opacity: 1;}



/* aboutUs */
.aboutUs{ background: #C0CBCC;  }
.aboutUs .sectionTitle{text-align: center;}
.aboutUs .aboutUsDetails{width: 100%; display:  flex; align-items: flex-start; justify-content: flex-start;}
.aboutUs .aboutUsDetails .aboutImages{ }
.aboutUs .aboutUsDetails .aboutImages img{transform: rotateY(180deg); width: 222px; height:  auto; box-shadow: 0px 3px 10px #00000029;  border-radius: 21px;}
.aboutUs .aboutUsDetails .aboutContaint{ margin-left: 16px; text-align: justify;}
.aboutUs .aboutUsDetails .aboutContaint .aboutText{margin-bottom: 16px;font: normal normal bold 20px/28px Butler;letter-spacing: 0px;color: #3F454D;opacity: 1;}
.aboutUs .aboutUsDetails .aboutContaint .aboutInfoText{font: normal normal normal 12px/20px Open Sans;letter-spacing: 0px;color: #3F454D;opacity: 1;}


/* letsTalk */
.letsTalk{background: #1B222C; /*background: #1B222C url(../images/footer/pattern-xv.png)!important; */ padding: 30px 0px;}
.letsTalk .sectionTitle{ color: #ffffff;  padding-top: 0px; padding-bottom: 0px;}
.letsTalk .letsTalkContainter{display: flex;align-items: flex-start;justify-content: space-between;width: 100%;}
.letsTalk .letsTalkContainter .letsTalkInfo{margin-right: 10%;}
.letsTalk .letsTalkContainter .letsTalkInfo .letsTalkInfoText{text-align: left; font: normal normal normal 12px/20px Open Sans;letter-spacing: 0px;color: #FFFFFF;opacity: 1;}
.letsTalk .letsTalkContainter .letsTalkInfo ul{ list-style: none; padding: 0px; margin: 0px;}
.letsTalk .letsTalkContainter .letsTalkInfo ul li{display: flex;align-items: center; margin-bottom: 10px;}
.letsTalk .letsTalkContainter .letsTalkInfo ul li img{height: 24px; width: 24px; margin-right: 10px;}
.letsTalk .letsTalkContainter .letsTalkInfo ul li a{text-decoration: none; text-align: left;font: normal normal normal 12px/20px Open Sans;letter-spacing: 0px;color: #FFFFFF;opacity: 1;}

.letsTalk .letsTalkContainter .letsTalkForm{ min-width: 50%;}
.letsTalk .letsTalkContainter .letsTalkForm .formControl{display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup{width:48%; margin-bottom: 16px; position: relative; }
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup .errorMsg{display: none; margin:0px; color:#3F454D; font: normal normal normal 12px/20px Open Sans;
  position: absolute;  bottom: -50px;  left: 0px; z-index: 9; background: #fff;  width: 100%;  border: 0px; border-radius: 4px;  min-height: 40px;  padding: 5px;  box-sizing: border-box;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup .errorMsg:after {content: "";  position:absolute;border:10px solid #FFF;  border-color: transparent transparent #fff transparent; top:-20%;  transform:translateY(-50%);}
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup .errorMsg.show{display: flex; align-items: center;}
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup .labelControl{text-align: left;font: normal normal normal 12px/20px Open Sans;letter-spacing: 0px;color: #FFFFFF;opacity: 1;}
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup .inputControl{box-sizing: border-box; padding: 0px 15px;margin-top: 5px; color: #ffffff;  text-align: left;font: normal normal normal 14px/20px Open Sans; background: transparent; width: 100%;height: 45px;border: 1px solid #FFFFFF;border-radius: 4px;opacity: 1;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup .inputControl:focus{border-color: #58D7BE;outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);}
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup.textarea{ width: 100%;box-sizing: border-box; }
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup.textarea textarea{ height: auto; resize: none;}
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup .submit{color: #ffffff; background: transparent; border: 1px solid #58D7BE;border-radius: 18px;opacity: 1;width: 116px;height: 36px;}
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup .submit:hover,
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup .submit:focus,
.letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup .submit:active{cursor: pointer; border: 1px solid transparent; background: transparent linear-gradient(90deg, #58d7be 0%, #58d7be 100%) 0% 0% no-repeat padding-box;}



/* footer */
.footer{ background: #3F454D; min-height: 125px; padding: 16px 0px;}
.footer .topFooter{margin-bottom: 16px; border-bottom: 1px solid #777B81; display: flex; justify-content: space-between; align-items: center;}
.footer .topFooter .socialLink{min-width: 100px; padding:0px; list-style: none; display: flex; justify-content: space-between; align-items: center;}
.footer .topFooter .socialLink .links{}
.footer .topFooter .socialLink .links img{ height: 24px; width: 24px;}
.footer .copyright{margin: 0px; text-align: left;font: normal normal normal 12px/20px Open Sans;letter-spacing: 0px;color: #FFFFFF;opacity: 1;}
.footer .disclaimer{text-align: justify;font: normal normal normal 10px/14px Open Sans;letter-spacing: 0px;color: #777B81;opacity: 1;}

/* custom-select */
.custom-select {position: relative; font: normal normal normal 14px/18px Open Sans;}
.custom-select select {  display: none; /*hide original SELECT element:*/}
.select-selected {background-color: transparent; transition: border ease-in-out .15s,}
/*style the arrow inside the select element:*/
.select-selected:after {  position: absolute;  content: "";  top: 21px;  right: 10px;  width: 0;  height: 0;  border: 6px solid transparent;  border-color: #fff transparent transparent transparent;}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {  border-color: transparent transparent #fff transparent;  top: 14px;}
/*style the items (options), including the selected item:*/
.select-items div { display: flex; align-items: center;  color: #3F454D;  padding: 0px 16px; margin-top:0px; height: 43px; border-radius:0px; border-bottom: 1px solid #ddd;   cursor: pointer;  user-select: none;}
.select-selected { display: flex; align-items: center;  color: #ffffff;  padding: 0px 16px; margin-top: 5px; height: 43px; border-radius: 4px; border: 1px solid #FFFFFF;   cursor: pointer;  user-select: none;}
/*style items (options):*/
.select-items {max-height: 200px;overflow-x: auto; border-radius: 0px 0px 6px 6px;  position: absolute;  background-color: #ffffff;  top: 100%;  left: 0;  right: 0;  z-index: 99;}
/*hide the items when the select box is closed:*/
.select-hide {  display: none;}
.select-items div:hover {background-color:#58D7BE; color: #ffffff;}
.same-as-selected {background-color: rgba(0, 0, 0, 0.1);}


@media only screen and (max-width: 767px) {
    .container{ width: 100%;}
    .header{}
    .header .topHeader{flex-direction: column;justify-content: flex-start;align-items: flex-start;}
    .header .topHeader .brand{padding: 16px;}
    /* .header .topHeader{margin: 0 auto; width: 100%;padding:16px;} */
    .header .topHeader .navigation {display: none; }
    .header.headerShow{height: 100vh; }
    .header .topHeader .navigation.mobileMenu{transform: translateX(0%);transition:.65s;width:100vw; height:100vh; background: #ffffff; display:flex; z-index: 999;}
    .header .topHeader .navigation.mobileMenu .nav{width: 100vw; flex-direction: column; justify-content: start;padding: 10px 16px;}
    .header .topHeader .navigation.mobileMenu .nav .navList{padding: 10px 20px;text-align: right;width: 100%;border: 0px; border-bottom:0px solid #ddd ;}
    .header .topHeader .navigation.mobileMenu .nav .navList a{width: 100%; color: #3F454D; font: normal normal bold 32px/44px Butler;}
    .header .topHeader .navigation.mobileMenu .nav .navList:last-child{ border-radius: 0px; background: none;}
    .hamburger {display: flex;} 
    .hamburger.change { /* background: #1B222C url(../images/footer/pattern-xv.png)!important; */ }
    .hamburger.change .bar1 {background-color: #3F454D; -webkit-transform: rotate(-45deg) translate(-9px, 6px);transform: rotate(-45deg) translate(-9px, 6px);}
    .hamburger.change .bar2 {opacity: 0;}  
    .hamburger.change .bar3 {background-color: #3F454D; -webkit-transform: rotate(45deg) translate(-12px, -10px);transform: rotate(45deg) translate(-12px, -10px);}

    .banner{background-color: #f6f7f9; background-image:none;margin-top: 40px;}
    .banner .container{width: 100%;}
    .banner .bannerWrapper{ display: flex;  justify-content: space-between; }
    .banner .bannerWrapper .imageContainer{display: none; }
    .banner .bannerWrapper .bannerContaint{width: 100%;padding: 16px; justify-content: flex-start;align-items: flex-start; }
    .banner .bannerWrapper .bannerContaint .bannerTitle{text-align: left; margin-bottom: 0px; font: normal normal bold 28px/36px Butler; }
    .banner .bannerWrapper .bannerContaint .bannerSubTitle{text-align: left; font: normal normal 600 16px/24px Open Sans;  }
    .banner .bannerWrapper .bannerContaint .bannerButton{}
    
    .sectionTitle {padding: 0px 16px 16px;}
   
    .ourServices .serviceList .serviceBox{width: calc(49% - 16px);text-align: left;}
    .ourServices .serviceList .serviceBox:nth-child(3n){margin-right: 16px; }
    .ourServices .serviceList .serviceBox:first-child{margin-left: 16px; }
    .aboutUs .aboutUsDetails {align-items: center;justify-content: flex-start;flex-direction: column;}
    .aboutUs .aboutUsDetails .aboutContaint {margin-left: auto;padding: 0 16px;}
    .letsTalk .letsTalkContainter{flex-direction: column;padding: 0px 16px;width: auto;}
    .letsTalk .letsTalkContainter .letsTalkInfo{ margin-right: auto; margin-bottom: 20px;}
    .footer  .container{ width: 90%;}
    /* custom-select */
.custom-select {position: relative; font: normal normal normal 14px/18px Open Sans;}
.custom-select select {  display: none; /*hide original SELECT element:*/}
.select-selected {background-color: transparent; transition: border ease-in-out .15s,}
/*style the arrow inside the select element:*/
.select-selected:after {  position: absolute;  content: "";  top: 21px;  right: 10px;  width: 0;  height: 0;  border: 6px solid transparent;  border-color: #fff transparent transparent transparent;}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {  border-color: transparent transparent #fff transparent;  top: 14px;}
/*style the items (options), including the selected item:*/
.select-items div { display: flex; align-items: center;  color: #3F454D;  padding: 0px 16px; margin-top:0px; height: 43px; border-radius:0px; border-bottom: 1px solid #ddd;   cursor: pointer;  user-select: none;}
.select-selected { display: flex; align-items: center;  color: #ffffff;  padding: 0px 16px; margin-top: 5px; height: 43px; border-radius: 4px; border: 1px solid #FFFFFF;   cursor: pointer;  user-select: none;}
/*style items (options):*/
.select-items {max-height: 200px;overflow-x: auto; border-radius: 0px 0px 6px 6px;  position: absolute;  background-color: #ffffff;  top: 100%;  left: 0;  right: 0;  z-index: 99;}
/*hide the items when the select box is closed:*/
.select-hide {  display: none;}
.select-items div:hover {background-color:#58D7BE; color: #ffffff;}
.same-as-selected {background-color: rgba(0, 0, 0, 0.1);}
}


@media only screen and (max-width: 640px) {   
    .banner{min-height: 108px;}
    section{padding: 16px 0px;}
    .clients{padding: 0px;}
    .clients .clientList{padding: 0px 0px 0px 16px;}
    .clients .clientList li{padding-right: 16px;}
    .clients .clientList li img{ width: auto; height: 50px;}
    .ourServices .serviceList{flex-wrap: nowrap;}
    .ourServices .serviceList .serviceBox{min-width: calc(80% - 16px);margin: 0px 16px 16px 0px;}
    .whyUs .whyUsList{padding: 16px 0;}
    .letsTalk .sectionTitle {padding: 0px 0px 16px;}
    .letsTalk .letsTalkContainter .letsTalkForm .formControl .formGroup{width: 100%;}
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
  }
  @media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
  }