html,body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

body{
font-family: "Montserrat", sans-serif;
color: #fff;
background: black;
}
body.home {
text-align:center;
}

.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: black;
z-index: 999;
}
.padder {
padding: 2% 5%;
box-sizing: border-box;
max-width: 900px;
margin: 0 auto;
text-align: center;
}

h1,h2,h3,p {
user-select: none;
}

h1 {
color: white;
font-size: 2em;
letter-spacing: 1px;
font-weight: 500;
line-height: 1.3em;
padding: 0;
margin: 0 0 20px 0;
}

h2 {
font-size: 1.4em;
letter-spacing: 1px;
font-weight: 500;
line-height: 1.3em;
padding: 0;
margin: 0 0 20px 0;
}

h3 {
font-size: 1em;
color: #fce200;
letter-spacing: 1px;  
font-weight: 300; 
padding: 0;
margin: 0;
}

p {
padding: 0;
margin: 0 0 20px 0;
letter-spacing: 1px;
line-height: 1.4em;
}

.page-template-page-default a {
color: black;
text-decoration: underline;
}
.page-template-page-default a:hover {
color: #535353;
text-decoration: none;;
}

a,.menu a,.service-icon a {
color: #fce200 ;
text-decoration: none;
}
a:hover {
color: silver;
}
.service-icon a:hover,.menu a:hover {
color: white;
}
.footer a {
color: #fce200;
}


.base {
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
padding: 0 5%;
}

.pipe {
opacity: 0.5;
}
.service-icon,.service-icon p {
max-width: 200px;
text-align: center;
}

.service-icon img {
width: 100px;
height: 100px;
border-radius: 9999px;
}

#section0 .logo, #section0 h1, #section0 h2, #section0 .nav-down {
opacity: 0;
animation: show 2s forwards;
animation-delay: 3s;
}
@keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.base {
opacity: 0;
animation: showdelay 2s forwards;
animation-delay: 5s;
}
@keyframes showdelay {
0% {
opacity: 0;
}
100% {
opacity: 1;
} 
}

.down-arrow {
display: block;
margin: 20px auto;
max-width: 50px;
opacity: 0;
animation: bob 2s alternate infinite;
animation-delay: 3s;
}
@keyframes bob {
0% {
opacity: 0.4;
transform: translateY(0);

}
100% {
opacity: 0.8;
transform: translateY(10px);

}
}

/* Base setup: section background container */
.section {
position: relative;
overflow: hidden; /* important to hide zoomed edges */
}

/* Pseudo-element for background image */
.section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
z-index: -1; /* behind content */
transform: scale(1);
animation: kenburns 13s ease-in-out infinite alternate;
}

#section0 {
background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6));
background-position: center;
}
#section1{
background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6));
background-position: center;
}

#section0::before {
background-image: url(img/AdobeStock_540655898.jpeg);
filter: grayscale(100%);
}
#section1::before {
background-image: url(img/AdobeStock_1098769494.jpeg);
filter: grayscale(100%);
}

/* Ken Burns keyframes (zoom in, stay centered) */
@keyframes kenburns {
0% {
transform: scale(1.05); /* slight zoom in */
}
100% {
transform: scale(1.2); /* zoom further */
}
}

.logo {
max-width: 400px;
margin: 0 auto;
text-align: center;
}

.nav-down {
margin: 20px 0;
display: inline-block;
}

ul {
padding: 0;
margin: 0 0 40px 40px;
}

.text ul {
text-align: left;
}


.nobull {
list-style: none;
margin: 0;
}

li {
padding: 0;
margin: 0 0 10px 0
}

.navbar .nav-container li:first-child {
padding-bottom: 20px;
}
.navbar .nav-container li:last-child {
padding-top: 20px;
}
.contact {
padding-top: 20px;
}

/* nav */
#fp-nav ul li a span, .fp-slidesNav ul li a span {
background: silver;
}
#fp-nav.right {
right: 26px;
}
.nav-container {
padding: 0;
margin: 0;
}
.navbar .menu-items {
display: flex;
}
.navbar .nav-container li {
list-style: none;
}
.navbar .nav-container a {
text-decoration: none;
font-weight: 500;
font-size: 1.2rem;
padding: 0.7rem;
}

#nav-icon {
width: 40px;
height: 44px;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
border: 0;
background: none;
position: fixed;
z-index: 999;
top: 20px;
right: 20px;
box-sizing: border-box;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 25px;
background: #fff;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 14px;
left: 8px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 21px;
left: 8px
}
#nav-icon span:nth-child(4) {
top: 28px;
left: 8px;
}
#nav-icon.open span:nth-child(1) {
top: 21px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu-items {
height: 100vh;
width: 100%;
transform: translateX(-100%); 
transition: transform 0.3s ease-in-out; 
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
position: fixed;
top: 0;
z-index: 998;
}
.menu-items ul {
padding: 0;
margin: 0;
}
.menu-items li {
font-size: 1.5rem;
font-weight: 500;
padding: 0;
margin: 0;
}
.menu-items.open {
transform: translateX(0); 
}

/* default page */
.cyber-top {
position: relative;
height: auto;
padding: 5%;
background-position: center;
background-size: cover;
background-image: url("img/AdobeStock_759824091.jpeg");
filter: grayscale(100%);
z-index: 0;
}

.cyber-top::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
z-index: 1;
}

.cyber-top .logo {
position: relative;
z-index: 2;
max-width: 200px;
}

.default,.default h1 {
background: white;
color: black;
}
.default .padder {
padding: 10%;

}

.flex-container {
display: flex;
gap: 40px;
flex-wrap: wrap;
justify-items: center;
align-content: center;
align-self: center;
justify-content: center;
align-items: center;
}
.icon {
width: 100px;
}

.cyber-logo {
max-width: 160px;
height: auto;
}
.cyber-logo:nth-child(2) {
max-width: 150px;
height: 130px;
margin-top: 5px;
}

.other {
color: white;
padding: 5%;
background: #343434;
text-align: center;
line-height: 1.4em;

background-size: cover;
background-repeat: no-repeat;
}


.footer {
background: #000;
text-align: center;
padding: 5%;
color: white;
font-size: 0.8em;
}



@media (max-width: 600px) {
.flex-container {
margin: 0 auto;
}
}