body {
	padding:0;
    margin:0;
	overflow-x: hidden;
	overflow-y:scroll;
	position: relative;
	height:100%;
	color: var(--color-dark);
	 font-family: var(--font-family-primary);
    scroll-behavior: smooth;
    -webkit-touch-callout: none;
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none;
}
html {
    scroll-behavior: smooth;
    height:100%;
}
#preloader{
    background:var(--color-primary);
    height:100vh;
    width:100%;
    position:fixed;
    z-index:10000;
}

.arrow {
  
  display: inline-block;
  padding: 30px;
  position:absolute;
  z-index:50;
  animation-name: arrow_down;
  animation-duration: .5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
@keyframes arrow_down {
  from {
    border:solid rgba(255,255,255, 0);
    border-width: 0 3px 3px 0;
    bottom:50px;
  }
  to {
    border:solid  rgba(255,255,255, 1);
    border-width: 0 3px 3px 0;
    bottom:30px;
  }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
::-webkit-scrollbar {
    width: 0 !important 
    
}

  

::-webkit-scrollbar-track {
	background-color: transparent;
}
::-webkit-scrollbar-thumb{
	xborder-radius: 10px;
	background-color: var(--color-primary);
}

.icon {
    width:32px;
    height:32px;
    margin-left:4px;
}
/* below 3 commands make sure aos doesn't cover other elements*/
[data-aos] {
  pointer-events: none;
}
.aos-animate {
  pointer-events: auto;
}
.aos-init[data-aos][data-aos].aos-animate {
  transform: unset;
}
/*Prevents text select*/
.xnoselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none; 
}
#particles {
     background:transparent;
     position: absolute; /* this prevents animation from covering other divs*/
     top:0px;
     z-index:90;
}
@font-face {
	font-family: 'NSYSTfont';
	src:url('../fonts/OpenSans-Regular.ttf');
	src:url('../fonts/OpenSans-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'NSYSTlight';
	src:url('../fonts/OpenSans-Light.ttf');
	src:url('../fonts/OpenSans-Light.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'NSYSTfontCap';
	src:url('../fonts/trama.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Tommy_Light';
	src:url('../fonts/Tommy_Light.otf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Tommy_Medium';
	src:url('../fonts/Tommy_Medium.otf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Tommy_Thin';
	src:url('../fonts/Tommy_Thin.otf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Tommy_Regular';
	src:url('../fonts/Tommy_Regular.otf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Circula';
	src:url('../fonts/circula_medium.otf');
	font-weight: normal;
	font-style: normal;
}
:root {
	 --color-primary: #0099ff /*#0a85d1*/;
	 --color-secondary: #dfe5f2;
	 --color-dark: #282E34;
	 --color-med: 999;
	 --color-light: #fff;
	 --font-family-primary: 'NSYSTfont';
	 --font-family-secondary: 'Rubik Mono One', sans-serif;
	 --td: 200ms;
	 --te: cubic-bezier(0.215, 0.61, 0.355, 1);
}
section2 {
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}
#video1{
    width:100%;
    height:50%;
    position: absolute;
    object-fit: cover;
    pointer-events:none;
	top:0;
	z-index: 40;
	transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}
section2 img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    pointer-events:none;
    transition:all 1s;
    transition-delay: 1s;
}

xsection2:before {
    content:'';
    position:absolute;
    width:100%;
    bottom:0;
    height:100px;
    background: #fff;
    z-index:1000;
}
section2:after {
    content:'';
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    xbackground: #fff;
    z-index:1000;
    xmix-blend-mode:color;
    z-index:51;
}
#textMain {
    position:relative;
    z-index:48;
    text-align:center;
    
}
#main1 {
    z-index:50;
}
#main2 {
    z-index:49;
}
#main3 {
    z-index:47;
}
#main4 {
    z-index:46;
}
#main5 {
    z-index:45;
}
h1 {
	font-size:18px;
	line-height:30px;
	letter-spacing:10px;
	margin-right:-10px;
	font-weight: bold;
	color: var(--color-primary);
}
.alignR {
    text-align:right;
}
.alignC {
    text-align:center;
}
h2 {
    font-size: 38px;
    line-height:80px;
    letter-spacing: 1px;
    color: var(--color-dark);
    font-weight: normal;
	text-align:center;
}
h3 {
    font-size:36px;
    line-height:40px;
    letter-spacing:2px;
    color: var(--color-dark);
    font-weight: normal;
}
h4 {
    font-size: 3vw;
    letter-spacing: .1vw;
    color: #fff;
    font-weight: normal;
    vertical-align: middle;
    text-align:center;
}
h5 {
    font-size:7vw;
    line-height:7.5vw;
    letter-spacing:.4vw;
    color:#fff;
}
h6 {
    font-size:4vw;
    color:#fff;
}
.pad {
    padding:80px;
}
.line {
    border: none;
    background-color: var(--color-dark);
    height: 1px;
}

.header {
    width:100%;
    height:100px;
    background:var(--color-dark);
    transition:all .5s;
    vertical-align:baseline;
    display:flex;
    position:fixed;
    overflow:hidden;
    align-items: center;
    justify-content: flex-start;
    padding-left:20px;
    z-index:100;
}
.flags {
    margin-left: auto; 
    margin-right: 200px;
    height:100%;
    display:flex;
}
.flags img {
    width:30px;
    height:16px;
    align-self:center;
}
.flags a {
    xborder:1px solid white;
    height:16px;
    align-self:center;
}
#slogan {
    max-width:200px;
    font-size:14px;
    line-height:20px;
    color:#999;
    border-left:1px solid #999;
    padding-left:10px;
    letter-spacing:1px;
    height:50%;
    display:flex;
    align-items: center;
    text-align:center;
}    

.highlight1 {
    color: var(--color-primary);
}

.bgimg {
    will-change: transform;
    background-attachment: scroll;
    background-position: center top 100px;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
	flex-direction: column;
	min-height: 100vh;
	z-index:100;
	

}
#home {
  background:var(--color-primary);
  min-height: 100%;
  z-index:30;
}

#bgimg2 {
  background-image: url("../images/bg2.png");
  min-height: 400px;
  background-attachment: fixed;
}
.videoPar {
    height: 400px;
	padding-bottom: 50px;
    padding-top: 50px; 
    position:relative;
}
.videoPar video {
    min-height: 100%;
    width:100%;
    position: fixed;
    object-fit: cover;
	top:0;
	z-index: -99999;
}
.xvideoPar:before {
  content:"";
  position: absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  z-index:1;
  background:rgba(10, 133, 209, 0.2);
}
#footer {
    background: var(--color-dark);
    padding:60px;
    color: #999;
}
.page {
    font-size:18px;
    letter-spacing:1px;
    line-height:40px;
    background: #fff;
    scroll-margin-top:100px;
    text-align:center;
    z-index:-1;
}
#about {
    text-align:right;
    
}
#aboutL {
    width:35%;
    height:calc(100% - 100px);
    min-height:800px;
    float:left;
    position: sticky;
    top: 100px;
    width:35%;
    background: var(--color-secondary);
    z-index:5;
}
#aboutR {
    padding-top:80px;
    padding-bottom:80px;
    padding-left:8vw;
    padding-right:8vw;
    display:inline-block;
    width:65%;
    text-align:left;
    background: #fff;
    top: 100px;
    overflow:hidden;
}
.profiles {
    width:100%;
    padding:0;
    text-align: justify;
}
.profile {
    margin-right:15px;
    margin-top:15px;
    width:173px;
    height:250px;
    border:2px solid var(--color-primary);
    justify-content:flex-end;
    float:left;
    overflow:hidden;
}
.profiles:after {
  content: "";
  width: 100%;
  display: inline-block;
}
.proLabel {
    height:60px;
    color:var(--color-light);
    background:var(--color-primary);
    margin-top:189px;
    padding:8px;
    text-align:center;
    justify-content:center;
    font-size:16px;
    line-height:20px;
    letter-spacing:2px;
    font-weight:bold;
    vertical-align: middle;
}
.proLabel p{
    font-size:12px;
    font-weight:normal;
    font-style: italic;
}
.leftWrap {
    padding-top:80px;
    padding-bottom:80px;
    padding-right:8vw;
    padding-left:5vw;
}
.rightWrap {
    padding-top:80px;
    padding-bottom:80px;
    padding-left:8vw;
    padding-right:5vw;
    overflow-x:hidden;
    z-index:6;
    
}
#contact {
    background: var(--color-secondary);
    text-align:right;
    height:100%;
    min-height:700px;
    z-index:1;
}
#contactR {
    width:35%;
    height:calc(100% - 100px);
    float:left;
    text-align:left;
    position: sticky;
    top: 100px;
    min-height:700px;
    font-size:18px;
    line-height:30px;
    letter-spacing:2px;
    background: var(--color-secondary);
    z-index:10;
}
#contactL {
    width:65%;
    height:100%;
    text-align:left;
    background: #000;
    float:left;
    padding-top:80px;
    padding-bottom:80px;
    padding-left:8vw;
    padding-right:8vw;
    transition: all 1s;
}

.about_item {
    margin-bottom:80px;
    scroll-margin-top:180px;
}

.title {
    font-size:26px;
    color:rgba(10,133,209, .5);
}

#bgimg3 {
  background-image: url("../images/Map.png");
  background-size: cover; /* Ensures image covers the div's area, not full viewport */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat;
  background-attachment: fixed; /* Still fixed to viewport for parallax */
  height: 300px; /* Strict height instead of max-height for reliability */
  /* Or keep max-height but add: min-height: 200px; to see capping in action */
  /* max-height: 300px; min-height: 200px; */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8vw;
  overflow: hidden; /* Clips any overflowing content or background bleed */
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}
.legalbtn {
    font-size:18px;
    line-height:20px;
    letter-spacing:1px;
} 
.legalbtn a{
    transition:all 1s;
}
.legalbtn a:link {
  text-decoration: none;
  color:var(--color-primary);
}
.legalbtn a:visited {
  text-decoration: none;
  color:var(--color-primary);
}
.legalbtn a:hover {
  color:#fff;
}

.legalbtn a:active {
  color:var(--color-primary);
}
#recap2 {
      display:none;
  }

@media screen and (max-width: 800px) {
    
  #contactR {
      width:100%;
  }
  #contactL {
      width:100%;
      
  }
  #aboutL {
      display:none;
  }
  #aboutR {
      width:100%;
  }

  #particles {
      display:none;
  }
  
}

@media screen and (max-width: 700px) {
    #slogan {
        display:none;
    }
   
  h2 {
      font-size:24px;
      line-height:40px;
  }
  .pad {
      padding:20px;
  }
  #explore {
      display:none;
  }
  #recap2 {
      display:block;
  }
  #recap {
      display:none;
  }

  h4 {
    font-size: 30px;
    letter-spacing: 1px;
  }
  .page {
    font-size:18px;
    letter-spacing:1px;
    line-height:30px;
}
#myMap {
    display:none;
}
#footer {
    padding:40px;
    min-height:400px;
}
#contact {
    height:50%;
    min-height:400px;
}
.flags {
display:none;
}
}