/* font-family: 'Montserrat', sans-serif; */
body{ font-family: 'Montserrat', sans-serif; font-size: 16px;}
*,ul,li{ margin: 0px; padding: 0px; list-style: none;} 
.clr:after{ content: ''; clear: both; display: block;}

.right{ float: right;}
.left{ float: left;}
.d-block{ display: block;}
.d-inline{ display: inline;}
.d-inline-block{ display: inline-block;}

.p-0{ padding: 0px;}
.mr-10{ margin-right: 10px;}
.mb-40{ margin-bottom: 40px;}

/* btn */
.btn{ display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 5px 30px; border-radius: 0px; font-size: 14px; font-weight: 500; color: #fff; text-transform: uppercase; font-weight: 500;}
.btn-primary{ background: #20aae1; border-color: #20aae1;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{ background: #1d99ca; border-color: #1d99ca;}
.btn-primary.outline{ background-color: transparent; border: 1px solid #fff;}
#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
  }
/* header */
header{}
header .navbar-toggler{ display: none;}
header .top{ padding: 20px 0;}
header .container{ display: flex; justify-content: space-between; align-items: flex-end;}
header .top .right-panel{ float: right;}
header .info-holder{ text-align: right;}
header .info-holder li{ text-align: left; display: inline-block; padding-left: 50px;}
header .info-holder li:first-child{ padding-left: 0px;}
header .info-holder h5{ font-size: 14px; font-weight: 700; color: #000; margin-bottom: 0px;}
header .info-holder p{ margin-bottom: 0px; font-size: 14px; font-weight: 400; color: #666;}
header .logo{ display: inline-block; width: 150px;}
header .logo img{ width: 100%;}
header .nav{ background: #253f92; padding: 15px;}
header .nav .container{ align-items: center;}
header .menu{}
header .menu li{ display: inline-block; margin-right: 50px;}
header .menu li:last-child{ margin-right: 0px;}
header .menu a{ font-size: 14px; font-weight: 500; color: #fff; text-transform: uppercase; text-decoration: none;}
header .menu a:hover{ text-decoration: underline; color: rgba(255, 255, 255, .75);}
header .social{  }
header .social li{ display: inline-block; margin-left: 10px;}
header .social li:first-child{ margin-left: 0px;}
@media only screen and (min-width: 320px) and (max-width: 767px) {
    header .container{ align-items: center;}
    header .info-holder{ display: none;}
    header .navbar-toggler{ display: block;}

    header .nav{ position: fixed; width: 300px; height: 100vh; overflow-y: auto; padding: 50px; top: 0px; left: -330px; z-index: 9999; transition: all linear 0.25s;}
    header .nav.active{ left: 0px;}
    header .nav .container{ flex-direction: column; text-align: center;}
    header .menu li{ padding: 15px; margin: 0px;}
}
@media only screen and (min-width: 768px) and (max-width: 1180px) {
    header .container{ align-items: center;}
    header .info-holder{ display: none;}
    header .navbar-toggler{ display: block;}

    header .nav{ position: fixed; width: 300px; height: 100vh; overflow-y: auto; padding: 50px; top: 0px; left: -330px; z-index: 9999; transition: all linear 0.25s;}
    header .nav.active{ left: 0px;}
    header .nav .container{ flex-direction: column; text-align: center;}
    header .menu li{ padding: 15px; margin: 0px;}
}

/* banner */
.banner{ position: relative; min-height: 800px;}
.banner .bg{ width: 100%; height: 100%; object-fit: cover; object-position: bottom center; position: absolute; left: 0px; top: 0px; z-index: 1;}
.banner .carousel{ position: absolute; bottom: 75px; width: 100%;}
.banner .carousel .txt{ width: 100%; max-width: 530px; margin: auto; text-align: center; padding: 0 15px; }
.banner .carousel h1{ font-size: 36px; font-weight: 700; color: #fff; text-transform: uppercase;}
.banner .carousel p{ font-size: 18px; font-weight: 400; color: #fff; text-transform: uppercase; }
.banner .carousel .btn{ margin: 0 7.5px;}
.banner .carousel .carousel-control-next, .banner .carousel .carousel-control-prev{ width: 70px; height: 70px;}
.banner .carousel .carousel-control-next span, .banner .carousel .carousel-control-prev span{ background: none;}
.banner .carousel .carousel-control-next{ background: url(../imgs/carousel-arrow-right.png) no-repeat;}
.banner .carousel .carousel-control-prev{ background: url(../imgs/carousel-arrow-left.png) no-repeat;}
@media only screen and (min-width: 320px) and (max-width: 767px) {
    .banner .carousel h1{ font-size: 32px; }
    .banner .carousel p{ font-size: 16px; }
}
@media only screen and (min-width: 768px) and (max-width: 1180px) {

}

/* section */
section{ padding: 100px 0;}
section .title{ font-size: 50px; font-weight: 700; color: #000; margin: 0 auto 35px}
section p{ color: #ababab; font-size: 16px; margin-bottom: 30px;}

.whyUsSection{ background-color: #eee;}
.whyUsSection.enquiry{ background-color: #fafafa;}


.whyUsSection .container-fluid, .whyUsSection .row{ padding: 0px; margin: 0px;}
.whyUsSection .txt-holder{ width: 100%; max-width: 645px; float: right; padding: 15px 115px 15px 15px;}
.enquiry .txt-holder{ padding: 15px 45px 15px 15px;}
.whyUsSection .txt-holder h5{ color: #0775bb; font-weight: 600; font-size: 18px;}
.whyUsSection .txt-holder p{ font-size: 16px; color: #969696;}
.whyUsSection .img-holder{ width: 50%; height: 325px; position: relative; float: left;}
.whyUsSection .img-holder:before{ position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.5); content: ''; display: block;}
.whyUsSection .img-holder:hover:before { display: none; }
.whyUsSection .img-holder img{ width: 100%; height: 100%; object-fit: cover; object-position: center center;}
@media only screen and (min-width: 320px) and (max-width: 767px) {
    .whyUsSection .txt-holder{ padding: 15px;}
    .whyUsSection .img-holder{ width: 100%;}
}
@media only screen and (min-width: 768px) and (max-width: 1180px) {
    .whyUsSection .txt-holder{ max-width: 100%; padding: 15px;}
}

/* clients */
.section-header h3 {
    font-size: 36px;
    color: #283d50;
    text-align: center;
    font-weight: 500;
    position: relative;
}

.section-header p {
    text-align: center;
    margin: auto;
    font-size: 15px;
    padding-bottom: 60px;
    color: #556877;
    width: 50%;
}

#clients {
    padding: 60px 0;
    
}
#clients .clients-wrap {
    border-top: 1px solid #d6eaff;
    border-left: 1px solid #d6eaff;
    margin-bottom: 30px;
}

#clients .client-logo {
    padding: 64px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-right: 1px solid #d6eaff;
    border-bottom: 1px solid #d6eaff;
    overflow: hidden;
    background: #fff;
    height: 160px;
}

#clients img {
    transition: all 0.4s ease-in-out;
}
 

/* services-listing */
.services-listing{}
.services-listing li{ width: 100%; max-width: 848px; border: 1px solid #20aae1; margin-bottom: 20px; display: flex; align-items: center; padding: 20px 0;}
.services-listing li:last-child{ margin-bottom: 0px;}
.services-listing li .img-holder{ position: relative; width: 165px; float: left; display: flex;}
.services-listing li .img-holder img{ width: 237px; height: 163px; position: relative;}
.services-listing li .txt{ padding: 20px 15px; width: calc(100% - 165px);}
.services-listing li h5{ font-weight: 700; font-size: 18px; color: #333333; margin-bottom: 6px;}
.services-listing li p{ font-size: 14px; color: #666666; margin-bottom: 15px; margin-bottom: 0px;}
.services-listing li:nth-child(odd){ float: left;}
.services-listing li:nth-child(odd) .img-holder img{ left: -90px;}
.services-listing li:nth-child(even){ float: right;   }
.services-listing li:nth-child(even) .img-holder{ float: right; justify-content: flex-end;}
.services-listing li:nth-child(even) .txt{ float: right; text-align: right;}
.services-listing li:nth-child(even) .img-holder img{ right: -90px;}
@media only screen and (min-width: 320px) and (max-width: 767px) {
    .services-listing li{ flex-direction: column;}
    .services-listing li .img-holder, .services-listing li .txt{ width: 100%; text-align: center; justify-content: center;}
    .services-listing li:nth-child(even){ flex-direction: column-reverse;}
    .services-listing li:nth-child(even) .img-holder{ justify-content: center;}
    .services-listing li:nth-child(even) .txt{ text-align: center;}
    .services-listing li .img-holder img{ max-width: 90%; max-height: 90%; width: auto; height: auto;}
    .services-listing li:nth-child(odd) .img-holder img{ left: -15px;}
    .services-listing li:nth-child(even) .img-holder img{ right: -15px;}
}
@media only screen and (min-width: 768px) and (max-width: 1180px) {
    .services-listing li .img-holder img{ max-width: 90%; max-height: 90%; width: auto; height: auto;}
    .services-listing li:nth-child(odd) .img-holder img{ left: -15px;}
    .services-listing li:nth-child(even) .img-holder img{ right: -15px;}
}
@media only screen and (min-width: 1181px) and (max-width: 1600px) {
    .services-listing li .img-holder img{ max-width: 90%; max-height: 90%; width: auto; height: auto;}
    .services-listing li:nth-child(odd) .img-holder img{ left: -15px;}
    .services-listing li:nth-child(even) .img-holder img{ right: -15px;}
}

/* map */
.map{ width: 100%;}


.swatch {
  display: block;
  text-align: center;
  position: relative;
  margin: 100px;
}
.swatch div {
  width: 100px;
  height: 325px;
  position: absolute;
  top: 0px;
  border-radius: 5px;
  border-top: solid 2px rgba(0, 0, 0, 0.2);
  border-left: solid 3px rgba(255, 255, 255, 0.2);
  border-bottom: solid 3px rgba(0, 0, 0, 0.2);
  text-align: center;
  box-sizing: border-box;
  transform-origin: center 90%;
  display: inline-block;
  backface-visibility: hidden;
  margin-left: -35px;
  transform: rotate(0deg);
}
.swatch div:before {
  width: 16px;
  height: 16px;
  content: "";
  background-color: #FFFFFF;
  display: inline-block;
  border-radius: 8px;
  bottom: 10px;
  position: absolute;
  margin-left: -8px;
}
.swatch div p{color: #fff; rotate: 90deg;}
.swatch div:nth-child(1) {
  background-color: #815A8F;
  animation: swatch-purple-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  content: 'ram avtar';
  color: #fff;
}
.swatch div:nth-child(1) p{margin-top: 40%; width: 100%;}
.swatch div:nth-child(2) {
  background-color: #6730EC;
  animation: swatch-blue-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.swatch div:nth-child(2) p{margin-top: 40%;}
.swatch div:nth-child(3) {
  background-color: #9ED763;
  animation: swatch-green-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.swatch div:nth-child(3) p{margin-top: 40%;}
.swatch div:nth-child(4) {
  background-color: #FBD400;
  animation: swatch-yellow-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.swatch div:nth-child(4) p{margin-top: 40%;}
.swatch div:nth-child(5) {
  background-color: #FF9000;
  animation: swatch-orange-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.swatch div:nth-child(5) p{margin-top: 40%;}
.swatch div:nth-child(6) {
  background-color: #F73F52;
  animation: swatch-red-motion 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.swatch div:nth-child(6) p{margin-top: 40%;}
@keyframes swatch-purple-motion {
  0% {
    transform: rotate(0deg);
  }
  30%,
  70% {
    transform: rotate(-65deg);
  }
  90%,
  10% {
    transform: rotate(0deg);
  }
}
@keyframes swatch-blue-motion {
  0% {
    transform: rotate(0deg);
  }
  30%,
  70% {
    transform: rotate(-40deg);
  }
  90%,
  10% {
    transform: rotate(0deg);
  }
}
@keyframes swatch-green-motion {
  0% {
    transform: rotate(0deg);
  }
  30%,
  70% {
    transform: rotate(-15deg);
  }
  90%,
  10% {
    transform: rotate(0deg);
  }
}
@keyframes swatch-yellow-motion {
  0% {
    transform: rotate(0deg);
  }
  30%,
  70% {
    transform: rotate(15deg);
  }
  90%,
  10% {
    transform: rotate(0deg);
  }
}
@keyframes swatch-orange-motion {
  0% {
    transform: rotate(0deg);
  }
  30%,
  70% {
    transform: rotate(40deg);
  }
  90%,
  10% {
    transform: rotate(0deg);
  }
}
@keyframes swatch-red-motion {
  0% {
    transform: rotate(0deg);
  }
  30%,
  70% {
    transform: rotate(65deg);
  }
  90%,
  10% {
    transform: rotate(0deg);
  }
}


.type-effect {
    display: flex;
    justify-content: center;
    font-family: monospace;
  }
  
  .type-effect > .text {
    max-width: 0;
    animation: typing 3s steps(var(--characters)) infinite;
    white-space: nowrap;
    overflow: hidden;
    font-size:20px;
  }
  
  .type-effect:after {
    content: " |";
    animation: blink 1s infinite;
    animation-timing-function: step-end;
    font-size:20px;
  }
  
  @keyframes typing {
    75%,
    100% {
      max-width: calc(var(--characters) * 1ch);
    }
  }
  
  @keyframes blink {
    0%,
    75%,
    100% {
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
  }
  /* Meet our team */
  .name {
    color: blue;
  }
  
  .work {
    font-weight: bold;
    font-size: 15px;
  }
  
  .about span {
    font-size: 13px;
  }
  
  .v-profile {
    color: blue;
    cursor: pointer;
  }
  
  .box {
    -webkit-box-shadow: 13px 12px 5px -10px rgba(196,194,196,0.72);
    -moz-box-shadow: 13px 12px 5px -10px rgba(196,194,196,0.72);
    box-shadow: 13px 12px 5px -10px rgba(196,194,196,0.72);
  }
  
  .col-md-3 {
    margin-top: 10px;
  }
/* Team */
.team-member, .team-member .team-img {
    position: relative;
}
.team-member {
    overflow: hidden;
}
.team-member, .team-member .team-img {
    position: relative;
}

.team-hover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    border: 20px solid rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.90);
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.team-member:hover .team-hover .desk {
    top: 35%;
}
.team-member:hover .team-hover, .team-member:hover .team-hover .desk, .team-member:hover .team-hover .s-link {
    opacity: 1;
}
.team-hover .desk {
    position: absolute;
    top: 0%;
    width: 100%;
    opacity: 0;
    -webkit-transform: translateY(-55%);
    -ms-transform: translateY(-55%);
    transform: translateY(-55%);
    -webkit-transition: all 0.3s 0.2s;
    transition: all 0.3s 0.2s;
    padding: 0 20px;
}
.desk, .desk h4, .team-hover .s-link a {
    text-align: center;
    color: #222;
}
.team-member:hover .team-hover .s-link {
    bottom: 10%;
}
.team-member:hover .team-hover, .team-member:hover .team-hover .desk, .team-member:hover .team-hover .s-link {
    opacity: 1;
}
.team-hover .s-link {
    position: absolute;
    bottom: 0;
    width: 100%;
    opacity: 0;
    text-align: center;
    -webkit-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
    -webkit-transition: all 0.3s 0.2s;
    transition: all 0.3s 0.2s;
    font-size: 35px;
}
.desk, .desk h4, .team-hover .s-link a {
    text-align: center;
    color: #222;
}
.team-member .s-link a {
    margin: 0 10px;
    color: #333;
    font-size: 16px;
}
.team-title {
    position: static;
    padding: 20px 0;
    display: inline-block;
    letter-spacing: 2px;
    width: 100%;
}
.team-title h5 {
    margin-bottom: 0px;
    display: block;
    text-transform: uppercase;
}
.team-title span {
    font-size: 26px;
    text-transform: uppercase;
    color: #050505;
    letter-spacing: 1px;
}
/*CEO*/

.card {
    border-radius: 10px;
    border: none;
    background-color: #2596be;
    padding-bottom: 0px;
    padding-top: 20px;
    margin-top: 80px;
    margin-bottom: 80px;
}

.left-side {
    height: 100%;
}

.btn-pink {
    background: #FF5252;
    font-size: 16px;
    color: #fff;
    width: 150px;
    height: 40px;
    border: 1px solid #FF5252;
    text-transform: uppercase;
    margin-top: 20px;
}

.btn-pink:hover {
    background: #F44336;
    color: #fff;
}

.fit-image {
    width: 100%;
    object-fit: cover;
}
/* .boy-img { height: 320px; width: 360px;} */
/* footer */
footer{ color: #fff;}
footer .top{ background: #000e39; padding: 100px 0 50px; }
footer .top .logo{ display: inline-block; margin-bottom: 20px;}
footer .top .col{ width: 100%; max-width: 280px; padding-bottom: 50px;}
footer .top h5{ font-size: 18px; color: #fff; text-transform: uppercase; font-weight: 700; margin-bottom: 50px;}
footer .top p, footer .top a{ color: #fff; font-size: 14px;}
footer .top li{ margin-bottom: 20px;}
footer .top .page-links li a{ background: url(../imgs/links-arrow.png) no-repeat left center; display: inline-block; padding-left: 20px; text-decoration: none;}
footer .top .page-links li a:hover{ text-decoration: underline;}
footer .bottom{ background: #000b2d; padding: 15px; text-align: center; font-size: 12px; text-transform: uppercase;}