/* Resets */
body,html,ul,ol,li,h1,h2,h3,h4,table,form,p{margin:0;padding:0;}img{border:0;}
textarea {font-family: inherit;font-size: inherit;}
*:focus {outline: 0;}

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

/*------------------------------------------------------------------*/
/* Default Styles													*/
/*------------------------------------------------------------------*/

:root {
  --primary-color: #2c3e50;
  --secondary-color: #2c3e50;
  --third-color: #2c3e50;
}

.inv {height: 0;opacity: 0;overflow: hidden;transition: height 0.5s ease-out, opacity 0.5s ease-out;}
.visible {height: auto;opacity: 1;overflow: hidden;transition: height 0.5s ease-out, opacity 0.5s ease-out;}


html {scroll-behavior: smooth;}

body {font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;font-size: 16px;color: var(--primary-color);margin: 0px;padding: 0px;}

#grip {display:none;}

/*------------------------------------------------------------------*/
/* Layout Styles													*/
/*------------------------------------------------------------------*/

.wrap {width: 1150px;margin: auto;box-sizing:border-box;position:relative;}

nav {position:absolute;height:80px;width:100%;box-sizing:border-box;padding:40px 0 0 0;z-index:1;}

nav #logo {width:180px;height:44px;}
nav #logo a {display:block;height:100%;width:100%;background:url(../images/logo-on.svg) no-repeat;text-indent:-1000em;}

nav #mainnav {position:absolute;right:0;top:8px;}
nav #mainnav ul {}
nav #mainnav ul li {display:inline-block;margin:0 14px;}
nav #mainnav ul li:last-child {}
nav #mainnav ul li:last-child a {color:#07518a;background:#fff;padding:10px 20px;border-radius:20px;}
nav #mainnav ul li a {color:#fff;text-decoration:none;opacity: 1;transition: opacity .25s ease-in-out;-moz-transition: opacity .25s ease-in-out;-webkit-transition: opacity .25s ease-in-out;}
nav #mainnav ul li a:hover {opacity:0.7;}

header {overflow:hidden;position:relative;color:#fff;background:url('../images/blobanimation.svg') no-repeat, linear-gradient(to bottom, #0c0d19, #007196);xheight: 100vh;height: 600px;box-sizing:border-box;padding:0 0 0 0;margin:0;}

header article {position: absolute;top: 300px;width: 100%;height: 200px;}
header article h2 {font-size:45px;font-weight:normal;margin:0 0 8px 0;letter-spacing:-1px;}
header article h1 {font-size:30px;font-weight:normal;margin:0 0 12px 0;}
header article p {font-size:18px;margin:10px 0 10px 0;}
header article .blob {opacity:0.1;}
header #curve {position:absolute;bottom:0;z-index:2;width:100%;border:0;padding:0;margin-bottom:-4px;}
header #curve img {border:0;padding:0;margin:0;}

#orbit .circle-cont canvas {
  max-width: 100%;
  opacity:0.2;
  width:60%;
   
}

main {box-sizing:border-box;padding:60px 0 0 0;}
main h1 {}
main h2 {}
main p {line-height:22px;margin:0 0 14px 0;}

#experience {content: "";display: table;clear: both;padding:0 0 60px 0;}
#experience div {width:46%;float:left;box-sizing:border-box;padding-top:150px;}
#experience div h2 {opacity:0.8;margin:0 0 16px 0;font-size:28px;font-weight:normal;color:#0395b4;}
#experience div p {line-height:24px;opacity:0.7;}

#experience figure {width:46%;float:right;position:relative;}
#experience figure #years {font-weight:bold;opacity:1;width:100%;position:absolute;color:#fff;font-size:170px;text-align:center;box-sizing:border-box;padding:160px 0 0 0;}
#experience figure img {}

#services {background:#eef1f4;padding:60px 0 60px 0;font-size:14px;}
#services h2 {opacity:0.7;text-align:center;font-size:24px;margin:30px 0 60px 0;font-weight:normal;position:relative;padding-bottom:20px;}
#services h2::after {
  content: "";
  display: block;
  width: 30px; /* Adjust the width of the line */
  height: 2px; /* Adjust the thickness of the line */
  background-color: #0395b4; /* Adjust the color of the line */
  position: absolute;
  bottom: -5px; /* Adjust the distance of the line from the text */
  left: 50%; /* Center the line horizontally */
  transform: translateX(-50%); /* Adjust for half the width of the line */
}

#services p {color:#908ba4;}

#services figure {text-align:center;}
#services ul {list-style: none;padding: 0;display: flex;justify-content: space-between;}
#services ul li {padding:30px 26px;box-sizing:border-box;margin:0 10px 0 10px;background:#fff;width:30%;border-radius:6px;}

#services ul li h3 {font-size:18px;margin:36px 0 16px 0;line-height:24px;color:#555;}

#clients {padding:60px 0 60px 0;}
#clients h2 {opacity:0.5;text-align:center;font-size:24px;margin:30px 0 30px 0;font-weight:normal;position:relative;padding-bottom:20px;}

#clients h2::after {
  content: "";
  display: block;
  width: 30px; /* Adjust the width of the line */
  height: 2px; /* Adjust the thickness of the line */
  background-color: #0395b4; /* Adjust the color of the line */
  position: absolute;
  bottom: -5px; /* Adjust the distance of the line from the text */
  left: 50%; /* Center the line horizontally */
  transform: translateX(-50%); /* Adjust for half the width of the line */
}

#clients div {padding:20px 0 20px 0;margin:0 auto 0 auto;box-sizing:border-box;display:flex;justify-content:center;align-items:center;}
#clients ul {list-style:none;}
#clients ul li {display:inline-block;text-align:center;}
#clients ul li img {-webkit-filter: grayscale(100%);filter: grayscale(100%) brightness(70%) contrast(150%) sepia(100%) hue-rotate(160deg);opacity:0.4;transition: filter 0.5s;}
#clients ul li img:hover {opacity:1;-webkit-filter: grayscale(0%);filter: grayscale(0%);}

footer {background:#2c3e50;color:#969fa8;box-sizing:border-box;padding:80px 0 120px 0;}
footer a {color:#969fa8;text-decoration:none;}

footer figure {margin:0;padding:0;float:left;}
footer figure img {opacity:0.4;}

footer #copy {float:right;}
footer #copy p {font-size:12px;}

footer hr {border: none;height: 1px;background-color:#394b5c;margin: 20px 0;}

/*------------------------------------------------------------------*/
/* media queries													*/
/*------------------------------------------------------------------*/

@media screen and (max-width: 1000px) {

.wrap {width: 100%;padding:30px;}

nav #mainnav {display:none;}

#grip {
  display:block;
  float:right;
  width: 60px;
  height: 45px;
  position: relative;
  margin: -41px 0 0 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#grip span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 0;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#grip span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#grip span:nth-child(2) {
  top: 14px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#grip span:nth-child(3) {
  top: 28px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#grip.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#grip.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#grip.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}

header {}
header article h2 {font-size:35px;margin:0 0 6px 0;}
header article h1 {font-size:20px;margin:0 0 8px 0;}
header article p {font-size:14px;margin:12px 0 6px 0;}

header #curve {margin-bottom:-6px;}

#services ul {display:block;}
#services ul li  {width: 100%;margin-bottom:20px;}

#clients {box-sizing:border-box;padding:30px;}
#clients div {margin:0 auto 0 auto;padding:0;}
#clients div ul {width:100%;}
#clients div ul li {width:48%;}

#experience div {width:100%;float:none;padding:50px 30px 50px 30px;}
#experience figure {width:100%;float:none;position:static;margin:0!important;}
#experience figure img {}

nav #mobilemenu {box-sizing:border-box;position:absolute;top:-40px;right:0;left:0;width:100%!important;background: rgba(44, 62, 80, .9);z-index:0;height:auto;padding:200px 0 90px 0;margin:auto;}
nav #mobilemenu a {color:#fff;text-decoration:none;display:inline;float:none;}
nav #mobilemenu a:hover {color:#b8d3f5}
nav #mobilemenu ul {margin:0 0 0 44px;font-size:24px;color:#fff;}
nav #mobilemenu ul li {list-style:none;padding:10px 0;float:none;}

footer {padding:40px 0 20px 0;}
footer #cinfo {padding:0 0 40px 0;}
footer figure {float:none!important;}
footer #copy {float:none!important;margin-top:20px;}

}