@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');
@import url("https://unpkg.com/primeflex@latest/primeflex.css");
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url("../fontawesome/css/all.css");
@import url("../css/jquery.sexy-menu.min.css");
@import url("../css/media.scss");

@font-face {
    font-family: 'FontAwesome';
    src: url('fontawesome/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%; position: relative;}
iframe { display: block;}

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

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

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: 7px 0 7px 10px;}
.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; position: relative; background: url("../images/welcome-bg.png") no-repeat right top; background-size: contain;}
.wel-p { width: 50%; float: left; span {display: block; margin-top: 50px;}}
.wel-p h1 { margin-bottom: 15px; font-weight: 400;}
.wel-img { width: 50%; float: right; background: url("../images/wel-img.png") no-repeat center right; height: 600px;}
.demo { background: #1f3864; color: #fff !important; padding: 5px 10px; margin-left: 25px;}
.service { width: 100%; display: flex;  }
.col-25 { width: 25%;}
.elementor-widget-green { background: url("../images/hexagon-bg.png") center bottom no-repeat #92cb00; padding: 6.2em 3.1em 6.2em 3.1em; }
.elementor-widget-blue { background: url("../images/hexagon-bg.png") center bottom no-repeat #143854; padding: 6.2em 3.1em 6.2em 3.1em; }
.elementor-widget-bg { background-image: url("../images/why-us-01.jpg");  background-position: center center; position: relative;
  background-repeat: no-repeat;
  background-size: cover;}
.elementor-widget-bg-2 { background-image: url("../images/why-us-02.jpg");  background-position: center center; position: relative;
  background-repeat: no-repeat;
  background-size: cover;}
.service h1 { text-align: left; margin: 10px 0; color: #e6ffa5; font-weight: 600; font-size: 40px; line-height: 40px;}
.service p { color: #fff; text-align: left;}
.elementor-widget-blue h1 { text-align: left; margin: 10px 0; color: #6592b5; font-weight: 600; font-size: 40px; line-height: 40px;}
.hover-course::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  transition: .4s;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(146, 203, 0, 0.20);
}
.hover-course:not(:hover)::after {  width: 0;}
.wel-h2 {
font-weight: 600; font-style: normal; text-align: left;
font-size: 3em; line-height: 63px;
 background: linear-gradient(to right, #79e591 0%, #d3e45f 40%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; margin: 0;
}
.wel-span {
font-weight: 700; text-align: left;
font-size: 4em; line-height: 75px;
 background: linear-gradient(to right, #b6e46f 0%, #0683cb 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
        position: relative;    
}
#port-ship {
  position: relative;
  animation: linear infinite;
  animation-name: run;
  animation-duration: 5s;
}
@keyframes run {
  0% {
    left: 0;
  }
  48% {
    transform: rotateY(0deg); 
  }
  50% { 
    left: calc(100% - 100px);
    transform: rotateY(180deg); 
  }
  98% {
    transform: rotateY(180deg); 
  }
  100% {
    left: 0;    
     transform: rotateY(0deg);
  }
}

.ser-bg1 { background: #eff5ca; border-radius: 15px; box-shadow: 0 0 10px rgb(0 0 0 / 3%);
	h3 { color: #7f8c26; text-align: left; margin-top: 15px; font-weight: 500;}
	span { padding: 8px; color: #fff; background: #7f8c26; border-radius: 10px; min-width: 40px; display: inline-block; text-align: center;}
}
.ser-bg2 { background: #d6ecdc; border-radius: 15px; box-shadow: 0 0 10px rgb(0 0 0 / 3%);
h3 { color: #5d9f6c; text-align: left; margin-top: 15px; font-weight: 500;}
	span { padding: 8px; color: #fff; background: #5d9f6c; border-radius: 10px; min-width: 40px; display: inline-block; text-align: center;}}
.ser-bg3 { background: #e5eefc; border-radius: 15px; box-shadow: 0 0 10px rgb(0 0 0 / 3%);
h3 { color: #4888e7; text-align: left; margin-top: 15px; font-weight: 500;}
	span { padding: 8px; color: #fff; background: #4888e7; border-radius: 10px; min-width: 40px; display: inline-block; text-align: center;}}
.ser-bg4 { background: #fbebce; border-radius: 15px; box-shadow: 0 0 10px rgb(0 0 0 / 3%);
h3 { color: #9d7d43; text-align: left; margin-top: 15px; font-weight: 500;}
	span { padding: 8px; color: #fff; background: #9d7d43; border-radius: 10px; min-width: 40px; display: inline-block; text-align: center;}}
.box-radius { border-radius: 30px; padding: 10px; box-shadow: 0px 0px 40px 0px rgb(0 0 0 / 8%); display: flex; margin-bottom: 30px; background: url(../images/service-hexa.png) no-repeat right bottom;
	img { border-radius: 20px; }
}
.product-bg { background: url("../images/service-hexa.png") no-repeat right bottom #fff;}

.serv-blue { background: #0c1824; width: 100%; display: flex;}
.serv-white { background: #fff; width: 100%; display: flex;}
.serv-left { width: auto; float: left;}
.serv-right { float: left; padding-right: 3%;}
.serv-img { text-align: center; padding: 3%; position: relative; z-index: 1; display: flex; align-items: center;}
.serv-img::before { width: 52%; height: 96%; position: absolute; border-radius: 20px 0 0 20px; background: #63a074; z-index: -1; left: 10px; content: ""; }
.serv-blue h1 { color: #fff; font-size: 35px; font-family: "Poppins", sans-serif; margin: 40px 0 10px 0;}
.serv-white h1 { color: #e3e3e3; font-size: 55px; 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: #000; font-size: 35px;}
ul {margin: 0;padding: 0;}
ul li {list-style: none; text-align: center;}

.whychoose { text-align: right;}
.light-stand { position: absolute; bottom: 306px; left: 0;}
.service-light-stand { width: 100%; height: 100%; background: url("../images/light-stand.png") no-repeat left bottom; padding: 100px 0;}

.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; }
.service-sec { width: 100%; display: flex; position: relative; background: url("../images/service-bg.png") repeat top right; align-items: center;  justify-content: center;
	p { color: #000; line-height: 22px;}
	h2 { color: #C6CCC7; font-size: 80px; font-weight: 600; line-height: 90px; }
}
.compass { background: url("../images/compass.png") no-repeat center right; }
.col-100 { width: 100%; float: left;}
.service-sec h1 {margin-bottom: 15px; font-size: 40px;}
.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;}

.spee-border { width: 100%; background: url("../images/spee-border.svg") no-repeat; height: 20px;}

.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(31,56,100, 0.3), 0 0 0 10px rgba(31,56,100, 0.3), 0 0 0 20px rgba(31,56,100, 0.3);
        box-shadow: 0 0 0 0 rgba(31,56,100, 0.3), 0 0 0 10px rgba(31,56,100, 0.3), 0 0 0 20px rgba(31,56,100, 0.3)
    }

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

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

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(31,56,100, 0.3), 0 0 0 20px rgba(31,56,100, 0.3), 0 0 0 30px rgba(31,56,100, 0);
        box-shadow: 0 0 0 10px rgba(31,56,100, 0.3), 0 0 0 20px rgba(31,56,100, 0.3), 0 0 0 30px rgba(31,56,100, 0)
    }
}
.newsletter { background: rgba(30, 56, 100, 1); width: 100%; height: 150px;}
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(31, 56, 100, 0.3);
    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: 33%; left: 135px; color: #fff; text-align: left; align-items: center; display: grid; position: relative; z-index: 2; top: 35%; }
.container p { color: #fff; font-size: 20px;}
.typed { color: #fff;}
.typed_cursor { color: #2098D1;}
.container h1 { font-size: 40px; color: #fff}
.footer {width: 100%; display: grid; min-height: 300px; background: url("../images/footer-bg.jpg") repeat-x center top #1f3864; }
.wel-bg { position: absolute;  right: 0;    top: 3px;    z-index: -1;}
.foot-border { border-bottom: 1px solid rgb(200 227 239 / 50%); border-top: 1px solid rgb(200 227 239 / 50%); height: 60px;}
.footer-for-contact {  width: 100%;  height: auto; overflow: hidden;  display: flex; float: left; justify-content: flex-end; }
.footer-for-contact-dtl:nth-child(5){ 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; }
.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 { min-width: 150px; height: 50px; background: url("../images/footer-logo.png") no-repeat left center; float: left;}
.social { margin-left: auto;}
.footer-menu {  margin-right: 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: 32px;  height: 32px;  display: inline-block;  margin: 0 2px 0 2px;  list-style: none;}
#services_touch li div {  width: 32px;  height: 32px;  color: #74d4b3;  text-align: center;  transition: all 0.5s ease;}
#services_touch li div:hover { transform: rotate(360deg);}
.copy { width: 100%; text-align: center; padding: 10px 0; color: #fff; bottom: 0; position: absolute;}
.footer-clear {  width: 100%;  float: left;  align-items: center;  display: flex; margin: 50px 0;}

.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 }
.index .nav-bar { margin-top: 15px; }
.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;   height: 2px;  margin: 6px auto;   transition: all 300ms ease-in-out;}

.content {  position: relative;	margin: 0 auto; width: 100%; 
p { font-family: "Dancing Script"; font-size: 2.5em; color: #fff; }
}
.overlay { background: linear-gradient(rgba(30, 56, 100, 1), rgba(30, 56, 100, 0.0)); position: relative; width: 100%; height: 100%;  display: grid;  justify-items: center;  align-items: center;}
.header-overlay { background: linear-gradient(rgba(30, 56, 100, 1), rgba(30, 56, 100, 0.01)); position: relative; width: 100%; height: 20%;  display: grid;  justify-items: center;  align-items: center;}

.content h2 {  color: #fff;  font-size: 2.5em; }


.about-banner { width:100%; height: 500px; background: url("../images/about.jpg") no-repeat center center; background-size: cover; margin-bottom: 100px;}
.services-banner { width:100%; height: 500px; background: url("../images/services.jpg") no-repeat center center; background-size: cover; margin-bottom: 100px;}
.contact-banner { width:100%; height: 500px; background: url("../images/contact.jpg") no-repeat center center; background-size: cover; margin-bottom: 100px;}
.career-banner { width:100%; height: 500px; 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.jpeg") no-repeat center center; background-size: cover; margin-bottom: 100px;}
.map { height: auto;}
#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%; h1 { color: #dfe0e1; font-size: 6em;}}
.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; line-height: 25px;}
.about-for {  width: 33.33%;  height: auto;  padding: 70px 50px 160px 50px;  position: relative;  float: left;  background-color: #5a9bd5;  overflow: hidden;
  
height: 500px; /* adjust to control the size  */
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(-50% 50%,50% 100%,150% 50%,50% 0);
  background: #5a9bd5;

	h3 { color: #a6caea; font-size: 45px; text-align: center; width: 100%; margin-top: 25px;}
}
.about-for:nth-child(2) { background-color: #4fcdd9; h3 { color: #96f6ff;}}
.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: 60px;  text-align: center;}

.about-for .why-logo img {
  display: inline-block;
  transition: transform 0.4s ease;
  transform-origin: center;
  backface-visibility: hidden; 
  will-change: transform;
}

.about-for:hover .why-logo img,
.about-for:focus .why-logo img {
  transform: scaleX(-1);
}

.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%; h1 { color: #dfe0e1; font-size: 6em; line-height: 85px;}}
.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 { height: auto; background-color: #fff; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }
.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;
    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%; font-size: 15px;   height: 60px;    border-bottom: 1px solid #ccc;    line-height: 24px;    font-weight: normal;    font-style: normal;
    color: #333;       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%;}

.contact-col { border: 1px solid #ccc; width: 25%; box-shadow: 0 2px 5px rgba(0,0,0,0.1);} 
.contact-box {
    padding: 65px 45px 60px 45px;
    border: 1px solid #E4E4E4;
    text-align: center;    min-height: 380px;
    p { text-align: center;}
}
.contact-box .icon {
    text-align: center;
    position: relative;
       width: 90px;
    height: 90px;
    align-items: center;
    justify-content: center;
    display: flex;
    background: #1e3864;
}
.contact-box .icon::after {
    content: '';
    width: 70px;
    height: 70px;
    background-color: #38588c;
    opacity: 0.5;
    position: absolute;
    top: -8px;
    left: 10px;
    transition: 0.5s;
    z-index: -1;
}
.contact-box figure{
    margin: 0 auto 20px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.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 
}



.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: 1px solid #f01c1c;
    text-transform: uppercase;
    padding: 8px;
}

.read_btn a:hover {
    color: #fff;
    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 #ffaa12;
	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; background-size: contain; height: 300px;}
	.social { width: 100%;}
	.footer-menu { display: none;}
	.footer-clear { display: grid;}
	#services_touch {justify-content: center; display: flex;}
	.footer-logo {display: none;}
	.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: flex; flex-direction: column; margin-bottom: 0px;    }
	.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: flex; float: left; margin-top: 0.5em; justify-content: flex-start;  }
	.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;}
  .copy { position: relative;}
  .con-adrs, .con-map { flex-direction: column;}
  .content { width: 70%; p { text-align: center;}}
  .container { width: 75%; left: 75px; top: 22%; p { font-size: 15px;} h1 { font-size: 30px;}}
  .ho-ser { flex-direction: column; gap: 15px;}
  .service .flex { flex-direction: column;}
  .service .col-25 { width: 100%;}
  .elementor-widget-bg-2 { display: none;}
  .service-sec h2 { font-size: 10vw; line-height: 10vw;} 
  .wel-h2 { font-size: 10vw;}
  .wel-span { word-wrap: break-word;}
}


  @media (min-width: 1360px) and (max-width: 1680px) {    
    .about-us h1 { font-size: 5em;} 
    .career { & h1 {font-size: 5em; } }
  }