@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

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

* {box-sizing: border-box; outline: none; margin: 0px; padding: 0px; border: none; text-decoration: none;}	
body { margin: 0; padding: 0; font-size: 15px; font-family: "Poppins", sans-serif; min-height: 100%;}
iframe { display: block;}

a {text-decoration: none;}
h1 { margin: 0; font-size: 30px; font-weight: 600; color: #030d1d;}
h2 { margin: 0; font-size: 20px; font-weight: 450; color: #61CE70;}
h3 { margin: 0; font-size: 25px; font-weight: 450; color: #fff;}
h4 { margin: 0; font-size: 20px; font-weight: 450; color: #61CE70;}
p { font-size: 15px; line-height: 30px; color: #777; text-align: justify; margin-bottom: 15px;}


@keyframes moveBg {
  from { background-position: 0 50%; }
  to { background-position:  -1134px 50%; }
}

.carousel {
  --blur: 6px;
  --contrast: 105%;
  --speed: 23s;
  height: 250px;
  
  width: 100%;
  position: relative;


  .logos {
    animation: moveBg var(--speed) linear infinite;
    position: absolute;
    inset: 0;
    background: url("../images/clients.jpg") 0 50% / 1134px 150px repeat-x;
    
  }
}



video {  width: 100%;  height: auto;  display: block; pointer-events: none; object-fit: cover; position: absolute; top: 50%; 
  left: 50%;  -webkit-transform: translateX(-50%) translateY(-50%);  transform: translateX(-50%) translateY(-50%); }
.wrapper { width: 100%; padding: 0 7%; margin: 0 auto;}
.header { width: 100%; height: auto;  position: fixed; top: 0; z-index: 9;}
.speebee { background: url("../images/speehive-logo.png") no-repeat center left; width: 177px; height: 68px; margin: 7px 0;}
.speebee-white { background: url("../images/speehive-logo-white.png") no-repeat center left; width: 177px; height: 68px; margin: 20px 0 7px 0;}
.menu { margin: 0; padding: 0; align-items: center; height: 100%; display: flex; float: right; text-transform: uppercase; font-size: 16px; font-weight: 400; }
.menu li { display: inline-block; padding: 0 12px;}
.menu li a {color: #fff;}
.banner {  height:100vh; position: relative; overflow: hidden;}
.welcome { padding: 80px 0; display: flex; text-align: justify;}
.wel-p { width: 50%; float: left;}
.wel-p h1 { margin-bottom: 15px;}
.wel-img { width: 50%; float: right; background: url("../images/wel-img.png") no-repeat center right; height: 312px;}
.demo { background: #1f3864; color: #fff !important; padding: 5px 10px; margin-left: 25px;}
.service { width: 100%; background: #fcf7ec; display: flex; padding: 50px 0; }
.service h1 { text-align: center; margin: 10px 0;}

.serv-blue { background: #0c1824; width: 100%; display: flex;}
.serv-white { background: #fff; width: 100%; display: flex;}
.serv-left { width: 50%; float: left;}
.serv-right { width: 50%; float: left;}
.serv-img { text-align: center; padding: 3%;}
.serv-blue h1 { color: #fff; font-size: 35px; font-family: "Poppins", sans-serif; margin: 40px 0 10px 0;}
.serv-white h1 { color: #000; font-size: 35px; font-family: "Poppins", sans-serif; margin: 40px 0 10px 0;}
.w-50{ width: 50%; float: left;}
.w-60{ width: 60%; float: left;}
.w-40{ width: 40%; float: left;}
.sub-title { color: #fff; font-size: 35px;}

.slider-mob { display: none;}
ul {margin: 0;padding: 0;}
ul li {list-style: none; text-align: center;}
.slider-wrap {position: relative;margin: 50px auto;width: 100%;}
.slider {position: relative;width: 95%;margin: auto;}
.slider ul li span { display: inline-block; vertical-align: middle; width: 80%; padding: 5%; min-height: 500px; background: #fff; border-radius: 20px;}
.slider-arrow {position: absolute;top: 48%;width: 40px;height: 40px;background: black;color: #fff;text-align: center;text-decoration: none;border-radius: 50%; align-items: center; display: grid;}
.sa-left {left: -3px;}
.sa-right {right: -3px;}
.slider ul li span a { background: #ffaa12; color: #fff; padding: 10px 15px;}

.slider ul li span img { width: 100%; }
.slider-mob {position: relative;width: 99%;margin: auto;}
.slider-mob ul li span { display: inline-block; vertical-align: middle; width: 80%; padding: 5%; min-height: 500px; background: #fff; border-radius: 20px;}
.slider-mob ul li span a { background: #ffaa12; color: #fff; padding: 10px 15px;}
.slider-mob ul li span img { width: 100%; }
.sa-leftm {left: -4px;}
.sa-rightm {right: -4px;}

.sa-left,.sa-leftm { background: url("../images/left-arrow.png") no-repeat center center;}
.sa-right,.sa-rightm { background: url("../images/right-arrow.png") no-repeat center center;}

.whychoose { text-align: right;}

.serv-content { width: 100%; min-height: 165px; }
.serv-content p { text-align: left; line-height: 25px; letter-spacing: 0.3px; }
.serv-content h1 { font-size: 20px; }
.counter-sec { width: 100%; display: flex; padding: 100px 0; position: relative; background:url("../images/count-bg.png") no-repeat center center #7AABD4; background-size: cover; align-items: center;  justify-content: center;}
.counter-sec h1, .counter-sec p { color: #fff;}
.counter-sec h1 { text-align: center; margin-bottom: 15px;}
.counter-wrap {text-align: left; justify-content: center; display: flex; font-family: "Barlow", sans-serif; margin-top: 50px; gap:20px;}
span.counter {  display: block;  margin: 0px auto;  font-size: 40px;  color: #fff;}
span.counter::after {content: "+";  }
.count {   height: auto;  text-align: center; padding: 10px;}

.mb-15 { margin-bottom: 25px;}
.w-25 { width:25%; border-radius: 15px;}
.count img { margin-bottom: 15px}
.yellow { /*background-color: rgba(250, 173, 25, 0.3);*/}
.yellow .counter { color: #faad19;} 
.yellow p { color: #faad19;}
.green { /*background-color: rgba(19, 205, 59, 0.3);*/}
.green .counter { color: #13cd3b;} 
.green p { color: #13cd3b;}
.blue { /*background-color: rgba(37, 114, 255, 0.3);*/}
.blue .counter { color: #2572ff;} 
.blue p { color: #2572ff;}
.pink { /*background-color: rgba(255, 37, 114, 0.3);*/}
.pink .counter { color: #ff2572;} 
.pink p { color: #ff2572;}


.ripple {
    display: contents;
    position: absolute;    
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.ripple img {
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    -webkit-animation: ripple-white 0.5s linear infinite;
    animation: ripple-blue 0.5s linear infinite;
    -webkit-transition: .5s;  
}

@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0)
    }
}

article {
  margin: 0 auto;
  width: 70%;
	float: right;
  padding: 1em; 
  font-weight: normal;
  font-size: 1em;
  color:#FFC345;
}


.quote {
  background: #0c1824;
  padding: 15px 20px 5px 15px;
  border-radius: 15px;
  margin-bottom: 30px;
}

.quote:after {
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 18px 0 18px;
  border-color: #0c1824 transparent transparent transparent;
  position: relative;
  top: 37px;
  left: 20px;
}

.student {
  margin-left: 25px;
  margin-bottom: 15px;
}

.student .photo {
  background-color: #ccc;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  float: left;
  margin-right: 10px;
	overflow: hidden;
}
.student .photo img { width: 100%;}
.student p {
  position: relative;
  top: 5px;
  text-transform: uppercase;
}

.student p:nth-child(2) {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
	color: #000;
}

.student p:nth-child(3) {
  font-size: 14px;
  color: #777;
}

.count p { text-align: center; font-size: 20px; margin: 0;}
.or-bg { background:#fcf7ec; width: 100%; display: flex; padding: 150px 0; position: relative; overflow: hidden;}
.testmo-left { width: 25%; float: left; position: relative; z-index: 2;}
.testmo-left h1 { color: #fff; margin-bottom: 15px;}
.testmo-left p { color: #fff; text-align: justify;}
.testmo-right { width: 65%; float: right; height: 100%; }
.testimonial { width: 100%; background: #fff; min-height: 150px; float: left; padding: 1%; color: #fff; border-radius: 20px;}
.testimonial:nth-child(2) { float: right;}
.testmo-photo { background: #fff; border-radius: 50%; height: 170px; width: 170px; position: relative; margin: -120px auto;}
.testimonial p { width: 100%;  color: #fff;}
.testmo-photo img { border-radius: 50%;}
.bg-overlay {
    background:rgba(13, 15, 20, 0.6);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.clean { width: 100%; float: left;}

/* Underline From Center */
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}
/* Bounce To Right */
.hvr-bounce-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
  color: white;
}
.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.clients { width: 100%; background: #fff; padding:50px 0 100px 0;}
.clients h1 { text-align: center; margin-bottom: 60px; color: #555555;}

.container {width: 80%;margin: 0 auto;font-size: 30px; color: #fff; text-align: center; align-items: center; display: grid; position: relative; z-index: 2; top: 40%; }
.container p { color: #fff; font-size: 20px; text-align: center;}
.typed { color: #fff;}
.typed_cursor { color: #2098D1;}
.container h1 { font-size: 50px;}
.footer {width: 100%; display: grid; background: url("../images/footer-bg.jpg") no-repeat center center #1f3864; background-size: cover;}
.footer::before {content: '';  display: inline-block;  vertical-align: middle;  height: 100%;}

.footer-for-contact {  width: 100%;  height: auto;  padding-top: 20px;  margin-top: -53px;  padding-bottom: 20px;  display: table;  position: relative;  float: left;  background-color: #4b6582;}
.footer-for-contact-dtl:nth-child(4){ border-right:0px;}
.footer-for-contact-dtl:nth-child(1){ width:30%;}
.footer-for-contact-dtl:nth-child(2){ width:30%;}
.footer-for-contact-dtl {  width: 20%;  height: auto;  display: table-cell;  vertical-align: middle;  text-align: left;  border-right: 1px solid #fff;}
.footer-address-container {  width: 100%;  height: auto;  display: flex;  justify-content: center;}
.footer-address-title {  width: 100%;  height: auto;  text-align: left;  color: #fff;  font-family: inherit;  font-size: 1.35em;  font-weight: 500;  display: block;}
.footer-content {  width: auto;  height: auto;  float: left;  font-family: inherit;  font-size: 0.9em;  line-height: 24px;  color: #fff;  font-weight: normal;}
.footer-icons {  width: auto;  height: auto;  float: left;  text-align: left;  margin-right: 10px;}
.footer-logo { width: 100%; min-width: 251px; height: 100px; background: url("../images/footer-logo.png") no-repeat left center; float: left;}
.social { margin-right: auto; padding: 60px 0;}
.footer-menu {  margin-left: auto;}
.footer-menu ul {margin: 0; padding: 0; text-align: right;}
.footer-menu ul li {display: inline; padding: 0 10px;}
.footer-menu ul li a {display: inline; padding: 0 10px; color: #fff;}
.footer-menu ul li a:hover {color:#ffaa12;}
#services_touch {  text-align: left;  transform: translatez(0);  padding:0; width: 100%; float: left;}
#services_touch li {  width: 48px;  height: 48px;  display: inline-block;  margin: 0 2px 0 2px;  list-style: none;}
#services_touch li div {  width: 48px;  height: 48px;  color: #74d4b3;  text-align: center;  transition: all 0.5s ease;}
#services_touch li div:hover { transform: rotate(360deg);}
.copy { width: 100%; border-top: 1px solid #3a5f75; text-align: center; padding: 10px 0; color: #fff;}
.footer-clear {  width: 100%;  float: left;  align-items: center;  display: flex;}

.ser-container { width: 100%; }

button.accordion {
  width: 100%;
  background-color: whitesmoke;
  border: none;
  outline: none;
  text-align: left;
  padding: 15px 20px;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s linear;
	border-radius: 5px;
	margin-bottom: 10px;
	font-family: "Roboto Flex", sans-serif;
}

button.accordion:after {
  font-family: FontAwesome;
  content: "\f150";
  font-family: "fontawesome";
  font-size: 18px;
  float: right;
}

button.accordion.is-open:after {
  content: "\f151";
}

button.accordion:hover,
button.accordion.is-open {
  background-color: #ddd;
}

.accordion-content {
  background-color: white;
  border-left: 1px solid whitesmoke;
  border-right: 1px solid whitesmoke;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}


.video-icon a {
  width:35px;
  height: 35px;
  line-height:35px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  position: relative;
  color: #333;
  -webkit-animation: ripple-white 1s linear infinite;
  animation: ripple-blue 1s linear infinite;
  -webkit-transition: .5s;
  background: #fff;
  font-size: 0.85em;
  z-index: 44 
}
.slider10 .video-icon a {
  border-radius: 0 
}
@-webkit-keyframes ripple-blue {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
    box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3) 
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0) 
  }
}
@keyframes ripple-blue {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
    box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3) 
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0);
    box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0) 
  }
}




.nav-bar { display: flex; justify-content: space-between;  align-items: center;  padding: 0;}
.nav-menu {  position: fixed;  left: -100%;  top: 80px;  flex-direction: column; width: 100%;  height: 100%;  text-align: center;  transition: 750ms;}
.nav-menu.active {  left: 0;}
.nav-item {  margin: 1em 0;}
.nav-link {  transition: 400ms ease;}
.nav-link:hover, .nav-link:focus {  color: dodgerblue;}
.hamburger {  cursor: pointer;}
.bar {  display: block;  background-color: #2098D1;  width: 24px;
  /* The following 2 properties are essential in creating the "X" when the hamburger is clicked. If you change just 1 of the 2, then you need to find the proper combination for the other one */
  height: 2px;  margin: 6px auto;
  /*    -webkit-transition: all 300ms ease;  */
  transition: all 300ms ease-in-out;}


.content {
  position: relative;
	justify-content: center; margin: 0 auto; width: 100%; display: flex; align-items: center; 
}
.overlay { background: linear-gradient(rgba(30, 56, 100, 1), rgba(30, 56, 100, 0.2)); position: relative; width: 100%; height: 100%;  display: grid;  justify-items: center;  align-items: center;}
.content h2 {
  color: #fff;
  font-size: 6em;
  position: absolute;
}

.content h2:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}

.content h2:nth-child(2) {
  color: #fff;
  animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
  0%,
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }

  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}

.about-banner { width:100%; height: 450px; background: url("../images/about.jpg") no-repeat center center; background-size: cover; margin-bottom: 100px;}
.services-banner { width:100%; height: 450px; background: url("../images/services.jpg") no-repeat center center; background-size: cover; margin-bottom: 100px;}
.contact-banner { width:100%; height: 450px; background: url("../images/contact.jpg") no-repeat center center; background-size: cover; margin-bottom: 100px;}
.career-banner { width:100%; height: 450px; background: url("../images/career.jpg") no-repeat center center; background-size: cover; margin-bottom: 100px;}
.team-banner { width:100%; height: 450px; background: url("../images/team-b.jpg") no-repeat center center; background-size: cover; margin-bottom: 100px;}
.blog-banner { width:100%; height: 450px; background: url("../images/blog.jpg") no-repeat center center; background-size: cover; margin-bottom: 100px;}
.map { width: 100%; height: 350px;}
#map { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%);  -o-filter: grayscale(100%);  filter: grayscale(100%);}
.about-pic {  width: 40%; height: 600px; float: left; justify-content: center; display: grid; }
.about-pic img { width: 90%;}
.about-us {float: right; width: 60%;}
.abt-wrap { width: 85%;  height: auto;  padding-top: 1em; color: #fff;  display: flex;  flex-direction: row;  flex-wrap: nowrap;  justify-content: space-between;  margin: 0 auto; margin-bottom: 200px;}
.abt-wrap p { color: #fff;}
.about-for {  width: 33.33%;  height: auto;  padding: 70px 50px 160px 50px;  position: relative;  float: left;  background-color: #5a9bd5;  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px; }
.about-for:nth-child(2) { background-color: #4fcdd9;}
.about-for:nth-child(3) {  margin-right: 0%;  background-color: #5a9bd5;}
.abt-title-wrap {  width: 100%;  height: auto;  display: flex;}
.why-logo {  width: 100%;  height: auto;  position: absolute;  right: 0;  bottom: 15px;  text-align: center;}

.service-clear { width: 100%; display: flex;}

.career-round{
  animation: animName 20s linear infinite;
  width:500px;
  height:500px;
  background:url("../images/round.png") no-repeat center center;
  margin:20px;
}

@keyframes animName {
 0%{
    transform: rotate(0deg);
   }
100%{
    transform: rotate(360deg);
   }
}

.career-pic {  width: 60%; height: 600px; float: right; justify-content: center; display: grid; }
.career-pic img { width: 90%;}
.career {float: left; width: 40%;}
.career-pic figure { position: relative;}
.career-pic figure::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  z-index:1;
 background:url("../images/round-pic.png") no-repeat 90px 90px;
}

.serv-blue p { color: #fff;}

.row {  position: relative; display: flex;}
.team-col { width:33.33333333%; flex: 0 0 auto;}
.team { max-width:320px; border-radius: 0 40px 0 40px; min-height: 350px; }
.team-profile {  position: relative;  max-width: 320px;  margin: 0 auto;    margin-bottom: 0px;  margin-bottom: 3em;}
.team-profile .pic {  filter: grayscale(1);  min-height: 370px;  background-size: cover;  background-position: top center;  background-repeat: no-repeat;  border-top-left-radius: 50px;  -webkit-transition: all 500ms;  -moz-transition: all 500ms;  -o-transition: all 500ms;  transition: all 500ms; }
.team-profile .pic:hover {  filter: grayscale(0);}
.team-profile .info {  position: relative;  padding: 5px 10px; background:rgba(240,240,240, 0.9); margin: -80px auto auto; width: 97%;}
.team-profile .info a {  position: absolute;  right: 15px;  top: 18px;  color: #3174ad;}
.team-profile .info h4 { color: #000;}
.team-1 { background: url("../images/team.jpg");}
.h-100 { width: 100%; height: 100px; float: left;}


.enquiry {    width: 75%;    height: auto;    background-color: #fff;    padding: 2em 3em;    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: relative;    margin: 0 auto;    margin-top: -95px; margin-bottom: 200px;}
.contact-enquiry-title {    width: 100%;    height: auto;    text-align: center;    font-family: inherit;    font-size: 2em;    color: #333;    font-weight: 500;}
.contact-enquiry-container {    width: 100%;    height: auto;    padding-top: 1em;}
.address-enquiry {    width: 48%;    height: auto;    float: left;    margin-bottom: 20px;    margin-right: 4%;}
.enquiry-box {    width: 100%;    height: 40px;    border-bottom: 1px solid #ccc;    line-height: 40px;    font-weight: normal;    font-style: normal;    color: #333;
    font-size: 1.125em;    background-color: inherit;    font-family: inherit;    margin-bottom: 0.5em;}
.address-enquiry-full {    width: 100%;    height: auto;    float: left;    margin-bottom: 20px;}
.contact-box-area {    width: 100%;    height: 60px;    border-bottom: 1px solid #ccc;    line-height: 24px;    font-weight: normal;    font-style: normal;
    color: #333;    font-size: 1.125em;    padding-top: 1em;    font-family: inherit;    background-color: transparent; resize: vertical;}
.address-enquiry-submit {    width: 100%;    height: auto;    margin-bottom: 20px;    display: flex;    justify-content: center;}
.contact-submit {    color: #fff;    outline: none;    background: #000;    padding-left: 35px;    padding-right: 35px;    line-height: 40px;
    position: relative;    display: inline-block;    cursor: pointer;    text-decoration: none;    overflow: hidden;    transition: all .5s;    z-index: 1;
    font-family: inherit;    font-size: 1em !important;    font-weight: 300;    text-align: center;    margin-top: 1em;}
.address-enquiry:nth-child(2n+2) {    margin-right: 0%;}


.video-icon a {
  width:35px;
  height: 35px;
  line-height:35px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  position: relative;
  color: #333;
  -webkit-animation: ripple-white 1s linear infinite;
  animation: ripple-blue 1s linear infinite;
  -webkit-transition: .5s;
  background: #fff;
  font-size: 0.85em;
  z-index: 44 
}
.slider10 .video-icon a {
  border-radius: 0 
}
@-webkit-keyframes ripple-blue {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
    box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3) 
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0) 
  }
}
@keyframes ripple-blue {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
    box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3) 
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0);
    box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0) 
  }
}


.hamburger.active .bar:nth-child(2) {  opacity: 0}
.hamburger.active .bar:nth-child(1) {  transform: translateY(8px) rotate(45deg);}
.hamburger.active .bar:nth-child(3) {  transform: translateY(-8px) rotate(-45deg);}


.btn-call {
    background: #325bab;
    border: 2px solid #325bab;
    border-radius: 50%;
    cursor: pointer;
    height: 40px;
    width: 40px;
    text-align: center;
    position: fixed;
    left: 7px;
    bottom: 22vh;
    z-index: 77;
    transition: .3s;
    -webkit-animation: hoverWave linear 1s infinite;
    animation: hoverWave linear 1s infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none
}

.btn-call__ico {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: 1200ms ease 0s normal none 1 running shake;
    animation-iteration-count: infinite;
    -webkit-animation: 1200ms ease 0s normal none 1 running shake;
    -webkit-animation-iteration-count: infinite;
    color: white;
    font-size: 20px;
    transition: .3s all
}

.btn-call:hover {
    background-color: #fff
}

.btn-call:hover .btn-call__ico {
    color: #325bab
}

@keyframes shake {
    0% {
        transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg)
    }

    10% {
        transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        -webkit-transform: rotateZ(-30deg)
    }

    20% {
        transform: rotateZ(15deg);
        -ms-transform: rotateZ(15deg);
        -webkit-transform: rotateZ(15deg)
    }

    30% {
        transform: rotateZ(-10deg);
        -ms-transform: rotateZ(-10deg);
        -webkit-transform: rotateZ(-10deg)
    }

    40% {
        transform: rotateZ(7.5deg);
        -ms-transform: rotateZ(7.5deg);
        -webkit-transform: rotateZ(7.5deg)
    }

    50% {
        transform: rotateZ(-6deg);
        -ms-transform: rotateZ(-6deg);
        -webkit-transform: rotateZ(-6deg)
    }

    60% {
        transform: rotateZ(5deg);
        -ms-transform: rotateZ(5deg);
        -webkit-transform: rotateZ(5deg)
    }

    70% {
        transform: rotateZ(-4.28571deg);
        -ms-transform: rotateZ(-4.28571deg);
        -webkit-transform: rotateZ(-4.28571deg)
    }

    80% {
        transform: rotateZ(3.75deg);
        -ms-transform: rotateZ(3.75deg);
        -webkit-transform: rotateZ(3.75deg)
    }

    90% {
        transform: rotateZ(-3.33333deg);
        -ms-transform: rotateZ(-3.33333deg);
        -webkit-transform: rotateZ(-3.33333deg)
    }

    100% {
        transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg)
    }
}

@-webkit-keyframes shake {
    0% {
        transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg)
    }

    10% {
        transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        -webkit-transform: rotateZ(-30deg)
    }

    20% {
        transform: rotateZ(15deg);
        -ms-transform: rotateZ(15deg);
        -webkit-transform: rotateZ(15deg)
    }

    30% {
        transform: rotateZ(-10deg);
        -ms-transform: rotateZ(-10deg);
        -webkit-transform: rotateZ(-10deg)
    }

    40% {
        transform: rotateZ(7.5deg);
        -ms-transform: rotateZ(7.5deg);
        -webkit-transform: rotateZ(7.5deg)
    }

    50% {
        transform: rotateZ(-6deg);
        -ms-transform: rotateZ(-6deg);
        -webkit-transform: rotateZ(-6deg)
    }

    60% {
        transform: rotateZ(5deg);
        -ms-transform: rotateZ(5deg);
        -webkit-transform: rotateZ(5deg)
    }

    70% {
        transform: rotateZ(-4.28571deg);
        -ms-transform: rotateZ(-4.28571deg);
        -webkit-transform: rotateZ(-4.28571deg)
    }

    80% {
        transform: rotateZ(3.75deg);
        -ms-transform: rotateZ(3.75deg);
        -webkit-transform: rotateZ(3.75deg)
    }

    90% {
        transform: rotateZ(-3.33333deg);
        -ms-transform: rotateZ(-3.33333deg);
        -webkit-transform: rotateZ(-3.33333deg)
    }

    100% {
        transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg)
    }
}

.whats-app { position: fixed; bottom: 10vh;  left: 7px;  width: 40px;  z-index: 77;}
.whats-app img {  animation-name: floating;  animation-duration: 3s;  animation-iteration-count: infinite;  animation-timing-function: ease-in-out;  margin-top: 5px;
  opacity: 1;  max-width: 40px;}
.whats-app:hover img{ opacity:1;}
@keyframes floating{
    from{
        transform:translate(0,0)
    }
    65%{
        transform:translate(0,15px)
    }
    to{
        transform:translate(0,0)
    }
}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #43dfb0 50%, #5a9bd5 50%);
  left:-50%;
  opacity:.8;
  position:absolute;
  right:-50%;
  top:0;
  z-index:0;
	height: 100%;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}


@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}


#top {
  display: inline-block;
  background-color: #4fcdd9;
  width: 50px;
  height: 50px;
  text-align: center;  
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 77;
	 -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
#top::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 50px;
  color: #fff;
}
#top:hover {
  cursor: pointer;
  background-color: #32b6c3;
}
#top:active {
  background-color: #32b6c3;
}
#top.show {
  opacity: 1;
  visibility: visible;
}

/**************************blog******************/

.blog_section {
    width: 100%;
    float: left;
}

.blog_section_2 {
    width: 100%;
    float: left;
    padding: 30px 0 100px 0;
}

.blog_box {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 0px 0px 30px 0px;
}

.blog_img {
    width: 100%;
}

.blog_img img { max-width: 100%; height: auto;}

.date_text {
    width: auto;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    padding: 20px 10px;
    background-color: #f01c1c;
    position: absolute;
    top: 0px;
}

.prep_text {
    width: 100%;
    font-size: 20px;
    color: #3b3b3b;
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px 20px 10px 20px;
}

.row-blog {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
 .col-md-6 {
position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.lorem_text {
    width: 100%;
    font-size: 14px;
    color: #3b3b3b;
    margin: 0px;
    padding: 0px 20px;
}

.read_btn {
    width: 150px;
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
    display: flex;
	margin-bottom: 30px;
}

.read_btn a {
    width: 100%;
    float: left;
    font-size: 16px;
    color: #f01c1c;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #f01c1c;
    text-transform: uppercase;
    padding: 8px;
}

.read_btn a:hover {
    color: #3b3b3b;
    border: 1px solid #3b3b3b;
}

.prep_text {
    width: 100%;
    font-size: 17px;
    color: #3b3b3b;
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px 20px 10px 20px;
}

.blog-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}


.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay-pop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
	z-index: 100;
}
.overlay-pop:target {
  visibility: visible;
  opacity: 1;
}
.overlay-pop body:target {
  overflow:hidden; 
}
.popup-open {
    overflow: hidden;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 80%;
  position: relative;
  transition: all 2s ease-in-out;
	overflow: auto;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
}
.popup h1 {
  margin-top: 0;
  color: #030d1d;
	font-size: 20px;
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
}
.popup h2 {
  margin-top: 0;
  color: #333;
	font-size: 18px;
	border-left: 5px solid #ccc;
	padding-left: 5px;
}
.popup .close {
  position: absolute;
  top:10px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content-blog {
  max-height: 30%;
  overflow: auto;
	padding: 10px 10px 0 0;
}
.popup .content-blog img { width: 100%;}
.content-blog ul { margin-bottom: 15px;}
.content-blog ul li { text-align: left;  color: #777; padding-left: 20px;  list-style-position: inside; background: url("../images/blog-pnt.png") no-repeat left 5px; margin-bottom: 10px; }



@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}


@media (min-width: 768px) {
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 400px) {
	.read_btn { margin-bottom: 30px;}
}
@media (min-width: 576px) {
  .blog-container {
    max-width: 540px;
  }
	.read_btn { margin-bottom: 30px;}
}
@media (min-width: 768px) {
  .blog-container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .blog-container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .blog-container {
    max-width: 1140px;
  }
}

/**************************blog******************/




@media (min-width: 768px) {
  .nav-menu {    position: static;    display: flex;    flex-direction: row;    justify-content: space-between;
    align-items: center;    width: auto; /*background-color: #fff;*/  }
  .hamburger {    display: none;  }
}

@media only screen and (max-width: 1920px) and (min-width: 1599px)  {	
	.testmo-left { width: 40%;}
	article { width: 50%;}
}

@media only screen and (max-width: 1600px) and (min-width: 1200px)  {
	.w-60 { width: 55%;}
	.w-40 { float: right;}
	.w-40 img { width: 90%;}
	.abt-wrap { width: 100%;}
	.testmo-left {}
}

@media only screen and (max-width: 1200px) and (min-width: 768px)  {
	body { font-size: 13px;}
	p { font-size: 14px;}
	.slider ul li span {width:90%;}
	.count p { font-size: 20px;}
	span.counter { font-size: 40px;}
	h1 {font-size: 25px}
	.serv-img img { width: 100%;}
	.career-pic { width: 100%;}
	.career { width:100%;}
	.w-60,.w-40 { width: 100%;}
	.w-40 img { width: 100%;}
	.testmo-left { width: 100%;}
	article { width: 100%;}
	.wel-p,.wel-img { width: 100%;}
	.serv-left,.serv-right { width: 100%;}
	.footer { margin-top: 60px;}
	.clients { padding-bottom: 0;}
}

@media only screen and (max-width: 768px) and (min-width: 300px){
	.testmo-left {width: 100%; float: left;}
	.testmo-right {width: 100%; float: left; margin-top: 80px;}
	.wel-p { width: 100%; float: left;}
	.wel-img { width: 100%; float: left;}
	.social { width: 100%;}
	.footer-menu { display: none;}
	.footer-clear { display: grid;}
	#services_touch {justify-content: center; display: flex;}
	.footer-logo {background-position: center;}
	.footer-menu ul { text-align: center;}
	.counter-wrap {display: flow-root list-item; }
	.counter-sec { padding: 75px 0;}
	.count { margin: 0 0 50px 0; float: left; min-height: 200px; width: 50%;}
	.slider-mob { display: block;}
	.slider { display: none;}
	.footer-for-contact {    display: inherit;    margin-bottom: 0px;    background-size: 100% 100%;    padding-left: 5%;  }
	.footer-for-contact-dtl:nth-child(1) {    width: 100%;  }
	.footer-for-contact-dtl:nth-child(2) {    width: 100%;  }
	.footer-for-contact-dtl { display: inherit;    width: 100%;  }
	.footer-address-container { display: inherit; float: left; margin-top: 0.5em;  }
	.about-for {    width: 100%;    margin-bottom: 2px;    padding: 30px 10px 160px 10px;  }
	.abt-wrap {  display: inherit;  width: 100%; }
	.career { width:100%;}
	.serv-img img { width: 100%;}
	.career-pic { width: 100%; overflow: hidden;}
	.w-60,.w-40 { width: 100%;}
	.w-40 img { width: 100%;}
	.testmo-left { width: 100%;}
	article { width: 100%;}
	.wel-p,.wel-img { width: 100%;}
	.footer-menu { display: none;}
	.serv-left,.serv-right { width: 100%;}
	.nav-menu { background: rgba(255,255,255,0.9)}
	.menu li a { color: #000;}
	.about-pic { display: none;}
	.about-us { width: 100%;}
	.address-enquiry { width: 100%;}
	.row { display: block; width: 100%;}
	.team-col { width: auto;}
	.content h2 { font-size: 3.5em; font-weight: 700;}
	.footer { margin-top: 60px;}
	.clients { padding-bottom: 0;}
}