/* smooth anchor scroll */
html {
scroll-behavior: smooth;
}
html,body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;

}

body{
font-family: "Montserrat", sans-serif;
color: #fff;
background: black;
padding: 0;
margin: 0;
}



#fullpage {
position: relative;
z-index: 2; 
}

.video-overlay {
width: 100%;
height: 100%;
position: fixed; 
top: 0;
left: 0;
z-index: 3;
background: linear-gradient(to right, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0) 100%);
}

.layer {
position: relative; 
z-index: 10;       
}

#myVideo {
position: absolute;
z-index: 1; 
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}



h2 {
font-size: 1.8em;
}

/* Hide the admin bar to see if the jump stops */
#wpadminbar { display: none !important; }

.padder {
box-sizing: border-box;
margin: 0 auto;
text-align: left;
padding: 5%
}

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

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

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: 1.8em;
color: white;
letter-spacing: 1px;  
font-weight: 500; 
padding: 0;
margin: 0 0 20px 0;
}
h4 {
font-size: 1em;
color: white;
letter-spacing: 1px;  
font-weight: 400; 
padding: 0;
margin: 0;
}

.yellow {
color: #fce200;
}

.home p {
font-size: 10pt;
}

p {
padding: 0;
margin: 0 0 20px 0;
letter-spacing: 1px;
line-height: 1.4em;
}
.home p:not(.footer p) {
max-width: 500px;
}



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 {
text-align: center;
width: 100%;
padding: 10% 0 5% 0;
}

.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;
}
}
*/

.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);

}
}


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

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


ul {
padding: 0;
margin: 0 0 20px 30px;
}



.text ul {
text-align: left;
}


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

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


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

}

#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 a {
color: white;
}
/* Overlay container */
.menu-items {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
z-index: 998;
padding: 10%;
box-sizing: border-box;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;

background: black url('img/menu-bg.jpg') no-repeat bottom center / cover;
backdrop-filter: blur(5px);

transform: translateX(-100%);
opacity: 0;
visibility: hidden;
pointer-events: none;

transition:
transform 0.3s ease-in-out,
opacity 0.3s ease;
}

/* Open state */
.menu-items.open {
transform: translateX(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}

/* Lists */
.menu-items ul {
text-align: left;
padding: 20px 0 0 0;
margin: 0;
}

/* Links */
.menu-items ul a {
display: block;
width: 100%;
padding-bottom: 7px;
border-bottom: 1px solid #fce200;
font-size: 1.2rem;

}
.menu-items ul a:hover {
color: #fce200;

}

.menu-items ul li:nth-child(2) a {
padding-left: 40px;
}
.menu-items ul li a::before {
content: '';
position: absolute;
top: 6px;
left: 10px;
width: 10px;
height: 10px;
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
}

.menu-items ul li:nth-child(2) a::before {
background-image: url('img/down-arrow.svg');
}

.menu-items ul ul a {
color: white;
border-bottom: none;
font-size: 1rem;
}

.menu-items ul ul li a::before {
content: '';
position: absolute;
top: -5px;
left: 0;
width: 30px;
height: 30px;
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
}

.menu-items ul ul li:nth-child(1) a::before {
background-image: url('img/shield-check-white.svg');
}
.menu-items ul ul li:nth-child(2) a::before {
background-image: url('img/laptop-white.svg');
}
.menu-items ul ul li:nth-child(3) a::before {
background-image: url('img/lock-key-white.svg');
}
.menu-items ul ul li:nth-child(4) a::before {
background-image: url('img/fingerprint-white.svg');
}
.menu-items ul ul li:nth-child(5) a::before {
background-image: url('img/vault-white.svg');
}
.menu-items ul ul li:nth-child(6) a::before {
background-image: url('img/google-chrome-logo-white.svg');
}

/* Menu items base state */
.menu-items li {
font-size: 1.5rem;
font-weight: 500;
padding-bottom: 10px;
margin: 0;

opacity: 0;
transform: translateY(20px);

transition:
opacity 0.4s ease,
transform 0.4s ease;
transition-delay: calc(var(--i) * 0.1s);

will-change: opacity, transform;
}

/* When menu is open */
.menu-items.open li {
opacity: 1;
transform: translateY(0);
}

/* Optional: sub-menu spacing */
.menu-items .sub-menu li {

}





.page-template-page-default,.error404  {
background: white;
color: black;
}
.page-template-page-default,.error404 h1 {
color: black;
}


/* 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;
}

.icon {
width: 100px;
margin-bottom: 20px;
}

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

#services {
padding-top: 5%;
}
#services h2 {
padding: 0;
margin: 0;
}

.portfolio-section {
max-width: 1600px;
margin: 0 auto;
}

.portfolio-title {
text-align: center;
margin: 20px 0;
letter-spacing: 1px;
}

.portfolio-container {
padding: 0 5% 5% 5%;
max-width: 1000px;
margin: 0 auto;
}

.portfolio-item {
position: relative;
overflow: hidden;
display: flex;
padding: 5% 0;
align-items: center;
}
.reveal,
.reveal-staggered {
/* Initial state for animation */
opacity: 0;
transform: translateY(100px); /* Start 100px down */
transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Animation properties */
}

/* Active state when the default element is in view */
.reveal.is-revealed {
opacity: 1;
transform: translateY(0);
}

/* Active state when the staggered element is in view */
.reveal-staggered.is-revealed-staggered { /* <--- THIS IS THE CRUCIAL CHANGE */
opacity: 1;
transform: translateY(0);
}

/* Add your staggering delays here */
/* Assuming your quotes are direct children within .flex-top and have both classes */
.flex-top .quote.reveal-staggered:nth-child(1).is-revealed-staggered {
transition-delay: 0.2s; /* Example delay for the first quote */
}

.flex-top .quote.reveal-staggered:nth-child(2).is-revealed-staggered {
transition-delay: 0.4s; /* Example delay for the second quote */
}



.portfolio-title {
font-size: 2em;
}

/* flex reverse even items */
.portfolio-item:nth-child(even) {
flex-direction: row-reverse;
}

.portfolio-item img {
max-width: 250px;
max-height: 250px;
border-radius: 9999px;
transition: transform 0.6s ease;
margin: 20px;
}

.portfolio-item img:hover {
transform: scale(1.1);
}
.portfolio-item:has(.more:hover) img {
transform: scale(1.1);
}

.portfolio-text {
max-width: 500px;
}

.portfolio-item:nth-child(odd) .portfolio-text {
padding-left: 40px;
text-align: left;
}
.portfolio-item:nth-child(even) .portfolio-text {
padding-right: 40px;
text-align: right;
}


.img-wrapper {
position: relative; /* needed for positioning pseudo-element */
display: inline-block; /* optional */
}

.img-wrapper::after {
content: ''; /* required for pseudo-elements to appear */
position: absolute;
top: 90px;  /* adjust as needed */
left: 85px; /* adjust as needed */
width: 120px; /* size of your icon */
height: 120px;
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
}

.portfolio-item:nth-child(1) .img-wrapper::after {
background-image: url('img/shield-check-white.svg');
}
.portfolio-item:nth-child(2) .img-wrapper::after {
background-image: url('img/laptop-white.svg');
}
.portfolio-item:nth-child(3) .img-wrapper::after {
background-image: url('img/lock-key-white.svg');
}
.portfolio-item:nth-child(4) .img-wrapper::after {
background-image: url('img/fingerprint-white.svg');
}
.portfolio-item:nth-child(5) .img-wrapper::after {
background-image: url('img/vault-white.svg');
}
.portfolio-item:nth-child(6) .img-wrapper::after {
background-image: url('img/google-chrome-logo-white.svg');
}

.more {
background-color: #fce200;
padding: 5px 15px;
margin-top: 20px;
border-radius: 5px;
color: black;
font-weight: 500;
display: inline-block;
}
.more:hover {
background-color: white;
color: black;
}

.footer {
background: #000;
text-align: center;
padding: 5% 5% 150px 5%;
color: white;
font-size: 0.8em;
}
.cybaverse {
margin-top: 40px;
}


/* Responsive adjustments */
@media (max-width: 768px) {
.portfolio-item {
  display: block;
  text-align: center;
}
.portfolio-item:nth-child(odd) .portfolio-text {
padding-left: 0;
text-align: center;
margin: 0 auto;
}
.portfolio-item:nth-child(even) .portfolio-text {
padding-right: 0;
text-align: center;
margin: 0 auto;
}

}

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

}

@media (max-width: 480px) {


}