@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-bold-webfont.eot');
    src: url('../fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-bold-webfont.woff2') format('woff2'),
         url('../fonts/montserrat-bold-webfont.woff') format('woff'),
         url('../fonts/montserrat-bold-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-bold-webfont.svg#montserratbold') format('svg');
    font-weight: 700;
    font-style: normal;

}

@font-face {
    font-family: 'PT Sans Caption';
    src: url('../fonts/ptsanscaption-regular-webfont.eot');
    src: url('../fonts/ptsanscaption-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ptsanscaption-regular-webfont.woff2') format('woff2'),
         url('../fonts/ptsanscaption-regular-webfont.woff') format('woff'),
         url('../fonts/ptsanscaption-regular-webfont.ttf') format('truetype'),
         url('../fonts/ptsanscaption-regular-webfont.svg#pt_sans_captionregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Rocks';
    src: url('../fonts/rockspersonaluse-4b7jw-webfont.eot');
    src: url('../fonts/rockspersonaluse-4b7jw-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rockspersonaluse-4b7jw-webfont.woff2') format('woff2'),
         url('../fonts/rockspersonaluse-4b7jw-webfont.woff') format('woff'),
         url('../fonts/rockspersonaluse-4b7jw-webfont.ttf') format('truetype'),
         url('../fonts/rockspersonaluse-4b7jw-webfont.svg#rocks_personal_useregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* Resets */
html, body { position: relative; height: 100%; width: 100%; font: 14px/1.715 "PT Sans Caption", sans-serif; color: #212121; }
body { background:/*url(../images/body-bg1.png) no-repeat top -117px right */#fff; }
img { max-width: 100%; border: none; }

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6, p, ul, ol, li { margin: 0px; padding: 0px; list-style: none; }
h2 {font-size: 50px; line-height: 1.11;  background: -o-linear-gradient(286.69deg,#0f2889 27.89%,#00afd7 72.11%); background: linear-gradient(163.31deg,#0f2889 27.89%,#00afd7 72.11%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;display: inline-block;}
h1, h2, h3, h4 {font-family:  "Montserrat", sans-serif; font-weight: 700; letter-spacing: 0.3px; color: #0f2889;}

a { outline: none; text-decoration: none; color: #000; }
a:hover, a:focus { text-decoration: none; color: #000; }
input:focus, button:focus { outline: none; }
input { -webkit-appearance: none; appearance: none; border-radius: 0; }
button, button:hover, button:focus{ outline: none;}
.clearfix:after, .careers:after, .tech:after { content: "";  clear: both;  display: block; }

.navbar-toggler-icon {background: url(../images/ham-menu.png) no-repeat; width: 26px; height: 26px;}

.border-txt { font: bold 60px/1 Montserrat,sans-serif; white-space: nowrap;  text-transform: uppercase; color: rgba(52,138,199,0.3); -webkit-text-stroke: 1px #0f2889;  -webkit-text-fill-color: transparent;  background: none; }

.about-desc:before, .about-desc:after, .abt-txt:before, .abt-txt:after, .staffing .container:before, .staffing .container:after, .staff-desc:before, .staff-desc:after, .hero-banner:before, .hero-banner:after, .why-us-con:before  {content:""; position: absolute;}
.section-gap {padding: 50px 0;}
#loader { display: block;position: absolute;top: 50%; left: 50%;  height: 50px;width: 50px; margin: -25px 0 0 -25px;
  border: 4px #00afd7 solid; border-top: 4px #0f2889 solid; border-right: 4px #00afd7 solid; border-bottom: 4px #0f2889	solid; border-radius: 50%; -webkit-animation: spin5 1s infinite linear; animation: spin5 1s infinite linear;}

@-webkit-keyframes spin5 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@keyframes spin5 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
.spn_hol { position: fixed; top: 0; left: 0; right: 0; bottom: 0;  background: #fff;  z-index: 50000;  opacity: 1; -webkit-transition: all 1s;  -moz-transition: all 1s;  -o-transition: all 1s;  transition: all 1s;}
.b-arrow {    position: absolute;  bottom: 50px;   left: 50%;   transform: translateX(-50%); width: 40px; -webkit-animation: bounce 2s infinite;  animation: bounce 2s infinite; z-index: 3}
.b-arrow a { margin-left: -25px;}
.b-arrow img {width: 100%;}


@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);	  
  }
  40% {
    transform: translateY(-30px);	  
  }
  60% {
    transform: translateY(-15px);	  
  }
}

#particles-js {position: absolute; z-index: -1; left:0;top:0;  width: 100%; height:100vh; }
footer {background: #0f2889; padding: 25px 0; color: #fff;}

.sec-ttl {text-align: center; padding: 0 0 25px;}
.sec-ttl h2 {position: relative; font-size: 40px; margin-bottom: 15px; text-transform: uppercase; padding-bottom: 7px;}
.sec-ttl h2:after {content:""; width: 30px; height: 5px; position: absolute; left: 50%; bottom: 0; background: #00afd7; margin-left: -15px;}

header {position: fixed; width: 100%;  transition: all ease 0.5s; background: #fff; z-index: 99; height: 85px; box-shadow: 0px 1px 3px #0f2889; }
header .navbar-brand {max-width: 225px;}
.navbar-expand-lg .navbar-nav .nav-item a.nav-link {text-transform: uppercase; color: #0f2889; padding-left: 15px; padding-right: 15px; font-weight: 600; letter-spacing: .5px;}
.navbar-expand-lg .navbar-nav .nav-item a.nav-link.current {color: #00afd7;}
.navbar-expand-lg .navbar-nav .nav-item:last-child a.nav-link {padding-right: 0;}
/* .nav-down { transform: none; } */

.hero-banner {position: relative; padding: 0; background: #0f2889; color: #fff; /*background: url(../images/dots.png) no-repeat 50% 50%;*/}
.hero-banner h4 {font: 35px "Montserrat"; text-transform: uppercase; padding: 20px 0 15px; color: #fff;}
.box-headline {background: #00afd7; display: inline-block; padding: 10px 25px 5px; text-transform: uppercase; font: 50px "Montserrat"; color: #fff; margin-top: 20px;}
.home-container > img {max-width: 150px; filter: brightness(0) invert(1);}
.c-tech {padding: 25px 0 0;}
.c-tech li { display: inline-block; font: 600 24px/1.25 "Montserrat"; padding: 10px; color: #00afd7; border-left: 1px solid #00afd7; margin: 0 0 15px;}
.c-tech li:first-child {border: none;}
.c-tech li:nth-child(odd) {color: #fff; }

.bnx-txt {padding: 0 0 50px; position: relative;}
.bnx-txt h1, .bnx-txt h3, .bnr-tech h3 {font-family: "Rocks";  text-transform: uppercase;  letter-spacing: 3px; }
.bnx-txt h1 {font-size: 200px; line-height: 150px; }
.bnx-txt h1 span {color: #00afd7;}
.bnx-txt h3 { font-size: 80px; line-height: 50px; }
.bnr-tech h3 {font-size: 150px; line-height: 50px;color: #777;}

/* About */
.about-desc {margin-top: 15px; position: relative; color: #fff;}
.about-desc p {padding: 0 0 10px;}
.about-desc:before {top: 0px; right: 0%; bottom:0; left:0; background: #0f2889;}
.about-desc:after {top: 30px; right: -30px; bottom:-30px; left:30px; background: #00afd7; z-index: -1;}
.abt-item {padding: 0 0 10px}
.abt-item h4 {color: #fff; text-transform: capitalize;}
.abt-mng {padding: 40px 50px;}
.abt-txt {padding: 40px 60px;}
.abt-txt:before {right: 4px; top: 45px; bottom: 60px; background: #00afd7; z-index: 3; width: 4px;}
.abt-txt:after {top: 43px; right: 0; background: #00afd7; z-index: 3; width: 12px; height: 12px; border-radius: 25px;}

/* services */
.services { counter-reset: countblock; position: relative;}
.service-item { position: relative; z-index: 5; padding: 15px 0 30px 38px;}
.service-item:before {content: counter(countblock); counter-increment: countblock; position: absolute; top: 0; left: 0; z-index: -1; font: 700 60px/1 "Montserrat", sans-serif; letter-spacing: 0.5px; color: transparent; text-transform: uppercase; -webkit-text-stroke: 1px #cceff7; -webkit-text-fill-color: transparent;}
.services .service-item:nth-child(1):before {    content: "0" counter(countblock);}
.service-item h4 {font-size:25px; letter-spacing: 1px; text-transform: uppercase; padding: 0 0 25px; color: #0f2889;}

/* Staffing */
#staffing {padding-top: 0; padding-bottom: 20px;}
.staffing {position: relative;}
.staffing:before {content:""; position: absolute; left: 0; right: 50%; top:0; bottom: 0; background: #00afd7; z-index: -3}
.staffing .container {position: relative;}
.staffing .container:before {left: 15px; right: 15px; top:0; bottom: 0; background: #00afd7; z-index: -2}
.staffing .container:after {left: 15px; right: -15px; top: 30px; bottom: 30px; background: #0f2889; z-index: -1}
.staff-desc {padding: 75px 60px 85px 60px; color: #fff;}
.staff-desc h4 {color: #fff; padding: 0 0 10px; font-size: 25px; text-transform: uppercase;}
.staff-desc .border-txt {color: rgba(255,255,255,0.3); -webkit-text-stroke: 1px #fff;}
.staff-sldr {padding: 80px 50px 55px; color: #fff;}
.staff-sldr-inner {padding: 0 0 40px; min-height: 230px;}
.staff-sldr-inner .carousel-item h4 {color: #fff;padding: 0 0 10px; }
.staff-desc:before {right: 4px; top: 87px; bottom: 77px; background: #00afd7; z-index: 3; width: 4px;}
.staff-desc:after {top: 85px; right: 0; background: #00afd7; z-index: 3; width: 12px; height: 12px; border-radius: 25px;}

/* Careers */
.careers p {padding: 0 0 10px;}
.open-position {padding: 30px 0;}
.open-position .border-txt {white-space: normal; font-size:40px;}
.current-openings h3 {white-space: normal; font-size: 20px; text-transform: uppercase; color: #0f2889;}
span.opening { bottom: 0; position: absolute; right: 0; padding: 5px; background: #00afd7; color: #fff; font-size: 11px; text-transform: uppercase;}

/* Why us */
.why-us {padding-top: 15px;}
.why-us-con { background: #0f2889; position: relative; padding: 50px 200px; color: #fff;}
.why-us-con:before {top: 30px; right: 30px; bottom: -30px; left: -30px; z-index: -1; background:#00afd7;
  -webkit-animation: move 3s ease alternate infinite;
  -moz-animation: move 3s ease alternate infinite;
  -ms-animation: move 3s ease alternate infinite;
  -o-animation: move 3s ease alternate infinite;
  animation: move 3s ease alternate infinite;	
}

@keyframes move {
 0% { right: 30px; left: -30px; }
	 50% { right: 30px; left: -30px; }
 75% { right: -30px; left: 30px; }
	100% { right: -30px; left: 30px; }
}
.why-us-con h4 {text-transform: uppercase; font-size: 25px; padding: 0 0 25px; color: #fff;}
.why-us-con p {font-size: 17px; color: #fff;}

/* Get In Touch */
.address-con {margin: 0 0 50px; padding: 25px 0; position: relative; }
.address {font-size: 15px; color: #333; padding: 25px 0 0;}
.address strong {color: #0f2889; font-size: 20px;}
.address span {font-weight:  bold;}
.address a {color: inherit;}
.address-con .form-control {border:none; border-bottom: 1px solid #CFDEE6; padding-left: 0; padding-right: 0; }
.address-con .form-control:focus {box-shadow: none; outline: none;}

/* Responsive Styles */

@media screen and (max-width: 1169px) {
	.home-container img {max-width: 100px;}
	.box-headline {font-size: 35px;}
	.why-us-con {padding: 50px 150px;}
	
}

@media screen and (max-width: 991px) {	
	.sec-ttl h2 {font-size: 35px;}
	.navbar-expand-lg > .container {padding-left:15px; padding-right: 15px;}
	header {height: auto;}
	.navbar {padding: 5px 0;}
	.navbar-toggler {padding: 0;}
	.abt-txt {padding: 40px;}
	.abt-txt:before, .staff-desc:before {right: 55px; top: inherit; bottom: 6px; left: 55px; width: auto; height: 4px;}
	.abt-txt:after, .staff-desc:after { top: inherit; right: 50%;  bottom: 2px; width: 12px;  height: 12px;  border-radius: 25px;}
	.abt-mng {padding: 38px;}
	.staff-desc {padding: 65px 10px 50px 38px;}
	.staff-sldr {padding: 40px 10px 55px 38px;}
	.staff-sldr-inner {min-height: 150px;}
	.why-us-con { padding: 50px;}	
}

@media screen and (max-width: 767px) {
	header .navbar-brand { max-width: 180px;}	
	.section-gap { padding: 30px 0;}
	.hero-banner { padding: 0;}
	.sec-ttl h2, .hero-banner h4, .box-headline {font-size: 25px;}
	.sec-ttl h2:after {height: 3px;}
	.sec-ttl br {display: none;}
	.home-container img {max-width: 65px;}	
	.box-headline {font-size: 25px; padding: 10px 15px 7px; }
	.b-arrow {width: 30px; bottom: 15px;}
	.b-arrow a {margin-left: -15px;}
	.about-desc {margin-top: 0;}
	.about-desc:after { top: 15px; right: -15px; bottom: -15px; left: 15px;}
	.service-item h4 {font-size: 20px;}
	.staff-sldr-inner { min-height: 200px;}
	.careers p:last-child {padding-bottom: 30px;}
	.address {text-align: center; padding-top: 20px;}
	.staffing .container:after {right: 0;}
	.why-us { padding-top: 15px;}
	.why-us-con { padding: 40px 10px;}
	.why-us-con:before {top: 15px; right: 15px; bottom: -15px; left: -15px; animation: none;}
	.why-us-con h4 {font-size: 20px;}
	.why-us-con p { font-size: 15px;}
	
}

@media screen and (max-width: 576px) {
	header {box-shadow: none; border-bottom: 1px solid #0f2889;}
	ul.navbar-nav.ml-auto.mt-2.mt-lg-0 {margin-top: 0!important;}
	.navbar { padding: 0;}
	.navbar-collapse {margin-left: -15px; margin-right: -15px;}
	.nav-item a.nav-link {padding-left: 15px; padding-right: 15px; border-top: 1px solid #0f2889;}
	.navbar-expand-lg .navbar-nav .nav-item a.nav-link.current {background: #0f2889; color: #fff;}
	.sec-ttl h2, .hero-banner h4, .box-headline, .staff-desc h4, .staff-sldr-inner .carousel-item h4, .abt-item h4, .service-item h4 {font-size: 20px;}
	.abt-txt { padding: 35px 20px 35px;}
	.abt-txt:before, .staff-desc:before {left: 35px; right: 35px;}
	.abt-mng {  padding: 30px 20px 20px;}
	.service-item:before {font-size: 50px;}
	.service-item {padding-top: 11px;}
	.staff-desc {padding: 65px 10px 40px 20px;}
	.staff-sldr {padding: 30px 10px 65px 20px;}
	.careers p:last-child { padding-bottom: 35px;}
	.address strong {font-size: 18px;}
	.address-con {margin: 0;}
	footer {text-align: center;	padding: 15px 0;}
	footer p {line-height: 18px;}
	footer span {display: block;}
	.why-us {padding-top: 0;}
	.why-us-con { padding: 30px 10px;}
	.why-us-con h4 {padding:0 0 15px;}
	
}