body{
  font-family: 'Raleway', sans-serif;
  background: #fafafa;
}
@media (max-width:700px) {
    .header{
      display: none !important;
    }
    .header-mobile{
      display: flex !important;
    }
    .banner-details{
      margin-top: 5rem !important;
    }
}
@media (max-width:600px) {
    #digital{
      display: inherit !important;
    }
    #digital_desk{
      display: none !important;
    }
}
.section{
  background: #FFFFFF;
  height: 5rem;
}
.section1{
  background: #d50000;

}
.textq{
  font-size: 1.2rem;
  line-height: 110%;
  margin: 2.1rem 0 1.68rem 0;
  margin-top: 0rem;
  color: #000000;

}
.text{
  font-size: 4.2rem;
  line-height: 110%;
  margin: 2.1rem 0 1.68rem 0;
  margin-top: 0rem;
color: #d50000;
  font-size: 54px;
}
.text2{
  font-size: 4.2rem;
  line-height: 110%;
  margin: 2.1rem 0 1.68rem 0;
  margin-top: 25rem;
  color: #ffffff;
  font-size: 25px;
}
.text3{
  font-size: 4.2rem;
  line-height: 110%;
  margin: 2.1rem 0 1.68rem 0;
  margin-top: -1rem;
  color: #ffffff;
  font-size: 12px;
}
.text4{
  font-size: 4.2rem;
  line-height: 110%;
  margin: 2.1rem 0 1.68rem 0;
  margin-top: 0rem;
  color: #FFFFFF;
  font-size: 30px;
}
.image{
  height: 20rem;
  margin-bottom: -24rem;
}
.imagel{
  height: 16rem;
  margin-bottom: -1rem;
  margin-top: -18rem;
  opacity: 0.2;
}
.imagef{
      height: 16rem;
    margin-bottom: -17rem;
    opacity: 0.5;
}
.images {
     height: 9rem;
    margin-bottom: 3rem;
    opacity: 0.1;
    margin-top: -10rem;
    margin-left: 0rem;
}

.effect.effect-5 {
  transition: all 0.2s linear 0s;

&:before {
   content: "\f054";
   font-family: FontAwesome;
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0px;
   height: 100%;
   width: 30px;
   background-color: rgba($overlay-color,0.3);
   border-radius: 0 50% 50% 0;
   transform: scale(0,1);
   transform-origin: left center;
   transition: all 0.2s linear 0s;
 }

&:hover {
   text-indent: 30px;

&:before {
   transform: scale(1,1);
   text-indent: 0;
 }
}


#digital{
  display: none;
}
.header-mobile{
  display: none;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0.4rem;
  box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.2);
}
.banner-main{
  background: url('./banner.jpg') center no-repeat;
  background-size: cover;
  height: 80vh;
}
.banner-contact{
  background: url('./banner-contact.jpg') center no-repeat;
  background-size: cover;
  height: 80vh;
}
.header{
  display: flex;
  text-align: center;
  padding: 2rem;
}
.header-logo-mobile{
  height: 50px;
  margin-top: 0rem;
}
.header-menu{
  color: #214b62;
  padding: 1.2rem;
  font-size: 20px !important;
  font-weight: 500;
}
.header-logo{
  height: 70px;
  margin-top: -1.6rem;
}

.header-space{
  flex-grow: 9;
}
.header-logo-name{
  flex-grow: 2;
  color: #214b62;
  padding: 0.8rem;
  font-size: 20px;
  font-weight: 500;
}
.header-links{
  flex-grow: 1;
  color: #fff;
  transition: all .3s ease;
}
.header-links.active{
  flex-grow: 1;
  color: #fff;
  transition: all .3s ease;
  border-bottom: 1.5px solid #fff;
}

.header-links:hover{
  flex-grow: 1;
  color: #ccc;
  transition: all .3s ease;
}
.header-links:focus{
  flex-grow: 1;
  color: #fff;
  transition: all .3s ease;
}
.banner-sub-title{
  color: #fff;
  margin-top: -1rem;
}
.dateholder,
.inputholder,
.holder {
  position: relative;
  width: 420px;
  margin: 0 auto;
}
.datepicker {
  border: 1px solid #666;
}
.datepicker {
  width: 100%;
  font-size: 1.5em;
}

.banner-title{
  color: #FFF;
  font-weight: 500;
  text-align: center;
}
.banner-details{
  width: 100% !important;
  height: 40vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column;
}
.banner-details-contact{
  width: 100% !important;
  height: 70vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column;
}
.contact-form{
  background: #eaeaea;
  padding: 2rem;
  margin-bottom: -1rem;
}
.main-three-details{
  width: 90%;
  background: #FFF;
  padding: 3.5rem;
  margin: 0 auto;
  box-shadow: 0px 5px 42px -2px rgba(0,0,0,0.09);
  border-radius: 6px;
  height: auto;
  margin-top: -9rem;
  margin-bottom: 3rem;
}
.main-strategy{
  text-align: left;
}
.icons-1{
  color: #2b4162;
  font-size: 150px !important;
  cursor: pointer;
  transition: all .3s ease;
}
.main-strategy .icons{
  color: #2b4162;
  font-size: 80px;
  cursor: pointer;
  transition: all .3s ease;
}
.main-strategy .title{
  font-weight: 500;
}
.main-strategy .title:hover{
  font-weight: 500;
}
.main-strategy .details{
  color: #2b4162;
  text-align: justify;
}
.butt{

margin-bottom: -87rem
  display: inline-block;
  margin: 0.3em;
  padding: 1.2em 5em;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 3px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  border: none;
  font-size: 15px;
  text-align: center;
}
.butt1{

  margin-bottom: -87rem
  display: inline-block;
  margin: 0.3em;
  padding: 1.2em 5em;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 3px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  border: none;
  font-size: 15px;
  text-align: center;
}

.button:hover {
  box-shadow: 1px 6px 15px rgba(0,0,0,0.5);
}
.button-1{
  background: #fff;
  color: #2b4162;
  padding: 1rem;
  box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 5px;
  font-size: 13px;
  transition: .3s all ease;
  font-weight: 500;
  text-transform: uppercase;
}
.main-three-details .heading{
  text-align: center;
  margin-bottom: 3rem;
}
.solutions-text{
  text-align: center;
  margin-bottom: 3rem;
}
.button-1:hover{
  background: #fff;
  color: #2b4162;
  padding: 1rem;
  transition: .3s all ease;
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.15);
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}
.about-kollara{
  text-align: center;
  margin-top: 9rem;
  margin-bottom: 8rem;
}
.about-kollara .left{
  text-align: left;
}
.about-kollara .left-bottom{
  color: #ccc;
  font-weight: 100;
}
.icon-quote{
  position: absolute;
  right: 5%;
  font-size: 200px !important;
  opacity: 0.1;
  color: #000;
  margin-top: -6rem;
}
.services{
  padding: 3rem;
  background: #fafafa;
}
.services-content{
  text-align: center;
}
.services-icons-bg{
  background: #fff;
  width: 100px;
  margin: 0 auto;
  height: 100px;
  border-radius: 60px;
  padding: 1rem;
  transition: .3s all ease;
  cursor: pointer;
  box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.2);
}
.services-icons-bg:hover{
  background: #fff;
  width: 100px;
  margin: 0 auto;
  height: 100px;
  border-radius: 60px;
  padding: 1rem;
  transition: .3s all ease;
  cursor: pointer;
  box-shadow: 0px 10px 35px -2px rgba(0,0,0,0.2);
}
.services-icons{
  font-size: 50px;
  background: -webkit-linear-gradient(#214b62,#2685b9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 0.8rem;
}
.services-title{
  background: -webkit-linear-gradient(#214b62,#2685b9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.services-all{
  color: #2685b9;
  font-weight: 500;
  text-align: center;
  margin-top: 2rem;
  transition: .3s all ease;
  margin-bottom: 5rem;
}
.services-all:hover{
  color: #214b62;
  font-weight: 500;
  text-align: center;
  margin-top: 2rem;
  font-size: 15px;
  transition: .3s all ease;
  margin-bottom: 5rem;
}
.services-icon-main{
  position: absolute;
  left: 80px;
  color: #000;
  opacity: 0.1;
  margin-top: -12rem;
  font-size: 200px;
  margin-left: -1rem999;
}
.contact-us-shortcut{
  background:#2685b9;
  transition: .3s all ease;
  padding: 2rem;
  text-align: center;
}
.contact-us-shortcut:hover{
  background:#48ace2;
  transition: .3s all ease;
  padding: 2rem;
  text-align: center;
}
.working{
  color: #fff;
  font-weight: 400;
}
.footer-1{
  padding: 3rem;
  background: #272727;
  margin-bottom: -1rem;
}
.footer-2-links{
  flex-grow:1;
  margin-left:3rem;
  margin-top:0.5rem;
  font-size:16px;
  color:#626262;
  transition: .3s all ease;
}
.footer-1-links{
  flex-grow:1;
  margin-left:3rem;
  margin-top:0.5rem;
  font-size:16px;
  color:#626262;
  transition: .3s all ease;
}
.footer-1-links:hover{
  flex-grow:1;
  margin-left:3rem;
  margin-top:0.5rem;
  font-size:16px;
  color:#ccc;
  transition: .3s all ease;
}
.sidenav{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  background: #fafafa;
  bottom: 0;
  z-index: 99999;
  display: none;
}
.sidenav-elements{
  width: 100% !important;
  height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
}
.sidenav-links{
  flex-grow: 1;
  font-size: 40px;
  color: #424242;
  font-weight: 600;
  transition: .3s all ease;
  letter-spacing: 3px;
  margin-bottom: 1rem;
}
.sidenav-links:hover{
  flex-grow: 1;
  font-size: 40px;
  color: #626262;
  transition: .3s all ease;
  font-weight: 600;
  letter-spacing: 3px;
  margin-bottom: 1rem;
}
.sidenav-links.active{
  background: #bbb;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* icon prefix focus color */
   .input-field .prefix.active {
     color: #2b4162;
   }

   /* label color */
 .input-field label {
   color: #2b4162;
 }
 /* label focus color */
 .input-field input#email:focus + label {
   color: #2b4162;
 }
 /* label underline focus color */
 .input-field input#email:focus {
   border-bottom: 1px solid #2b4162;
   box-shadow: 0 1px 0 0 #2b4162;
 }
 .input-field input#company:focus + label {
   color: #2b4162;
 }
 /* label underline focus color */
 .input-field input#company:focus {
   border-bottom: 1px solid #2b4162;
   box-shadow: 0 1px 0 0 #2b4162;
 }
 .input-field input#name:focus + label {
   color: #2b4162;
 }
 /* label underline focus color */
 .input-field input#name:focus {
   border-bottom: 1px solid #2b4162;
   box-shadow: 0 1px 0 0 #2b4162;
 }
 .input-field textarea.materialize-textarea:focus + label {
   color: #2b4162;
 }
 /* label underline focus color */
 .input-field textarea.materialize-textarea:focus {
   border-bottom: 1px solid #2b4162;
   box-shadow: 0 1px 0 0 #2b4162;
 }
.about{
  padding: 3rem !important;
}
.about-img{
  background: url('./banner-about-side.jpg') center no-repeat;
  background-size: cover;
  padding: 156.5px !important;
}
.vision{
  background: url('./banner-vision.jpg') center no-repeat;
  background-size: cover;
  height: 200px;
}
.mission{
  background: url('./banner-mission.jpg') center no-repeat;
  background-size: cover;
  height: 200px;
}