* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    list-style: none;
    outline: none;
}
@font-face {
    font-family: 'SF-Pro';
    src: url('../fonts/SF-Pro.ttf');
}
@font-face {
    font-family: 'Yellow-Tail';
    src: url('../fonts/YellowTail-Regular.ttf'); 
}
@font-face { font-family: Poppins-Regular; src: url('../fonts/Poppins-Regular.ttf'); }
@font-face { font-family: Poppins-Medium; src: url('../fonts/Poppins-Medium.ttf'); }
@font-face { font-family: Poppins-SemiBold; src: url('../fonts/Poppins-SemiBold.ttf'); }
@font-face { font-family: Poppins-Bold; src: url('../fonts/Poppins-Bold.ttf'); }
@font-face { font-family: Poppins-ExtraBold; src: url('../fonts/Poppins-ExtraBold.ttf'); }

::-webkit-scrollbar {
    width: 4px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0d0b34;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #FFAE00;
}

::-webkit-scrollbar-thumb:hover {
    background: #ffd782;
}


body {
    position: relative;
    margin: 0;
    padding: 0;
    height: 1150vh;
    overflow-x: hidden;
    background-color: #29283F; /* Set a consistent background color */
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px; /* Adjust as needed */
    background-color: transparent;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 50;
    transition: background-color 0.3s ease; /* Smooth transition */
    text-wrap: nowrap;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    user-select: none;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 100px; /* Adjust spacing as needed */
    margin-left: 55%;
    margin-top: 30px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: #F6F6F6;
    font-size: 16px;
    transition: color 0.3s ease;
    font-family: Poppins-Regular;
}

nav ul li a:hover {
    color: #FFAE00; /* Highlight color */
}

nav ul li a.active {
    color: #FFAE00; /* Active color */
    font-family: Poppins-Bold;
    font-size: 18px;
}

nav ul li a.active:hover {
    color: #ffdf9b;
}


/* GLASS MORPHS!!! */
.overlapping-container {
    position: absolute; /* Needed for absolute positioning */
    width: 200px; /* Increase width to fit both elements */
    height: 250px; /* Increase height if needed */
    overflow: visible; /* Ensures content is not cropped */
}

body>.overlapping-container:nth-child(1){
    left:2%;
    top:-50px;
}
body>.overlapping-container:nth-child(1) img{
    top: -50px;
    left: 110px;
}
body>.overlapping-container:nth-child(2){
    right:100px;
    top:35vh;
    rotate:90deg;
}

body>.overlapping-container:nth-child(2) img{
    right:-315px;
    top: -230px;
    rotate:-90deg;
}
body>.overlapping-container:nth-child(3){
    left:100px;
    top:1000px;
    rotate: 90deg;}
body>.overlapping-container:nth-child(3) .glass {
    height: 340px;
}
body>.overlapping-container:nth-child(3) img{
    right:-450px;
    top: -265px;
    rotate: -90deg;
}

.no-underline {
  text-decoration: none;
}



.glass {
    position: absolute; /* Allows overlap */
    width: 113px;
    height: 195px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.7px);
    -webkit-backdrop-filter: blur(8.7px);
    border: 1px solid rgba(255, 255, 255, 0.37);
    z-index: 2; /* Higher z-index ensures it's on top */
}

.shape-container {
    position: absolute;
    top: 90px; /* Adjust position if needed */
    left: -150px; /* Move outside the glass box */
    z-index: 1; /* Ensures it stays behind the glass */
}

.shape-container img {
    transform: scale(1); /* Increase size (adjust as needed) */
    position: absolute;
    z-index: 1;
}
.chevrons-down {
    position: absolute; /* Needed for absolute positioning */
    width: 30px; /* Increase width to fit both elements */
    height: 30px; /* Increase height if needed */
    overflow: visible; /* Ensures content is not cropped */
    color: white;
    left: 50%;
    top: 93vh;
    transform: translate(-50%, -50%);
}
.chevrons-down img {
    width: 30px;
    height: 30px;
}



.over-mij-container {
    position: absolute;
    top: 210px;
    left: 180px;    
    font-size:50px;
    font-family: 'Poppins-ExtraBold';
    z-index: 20; /* Ensure it is above the background elements */
    color: white; /* Set text color */
}
.over-mij-container>span>span{
    position:absolute;    
    color: transparent;
    left:50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-family: 'Poppins-Bold';
    white-space: nowrap;
}

.over-mij-container>span:nth-child(1)>span{
    bottom:-50px;
    -webkit-text-stroke: 0.7px #ffffff;
}
.over-mij-container>span:nth-child(2)>span{
    top:-7px;
    -webkit-text-stroke: 0.7px #FFAE00;
}
.over-mij-container>span:nth-child(1) {
    color: #FFAE00; 
    position:relative;
}
.over-mij-container>span:nth-child(2) {
    color: white; 
    position:relative;
}

/* TEKST BOVEN ELK SECTION */
/* TEKST BOVEN ELK SECTION */
/* TEKST BOVEN ELK SECTION */
/* TEKST BOVEN ELK SECTION */

.text-mijn-projecten {
    position: absolute;
    top: 430px;
    left: 350px;
    transform: translate(-50%, -50%);
    gap: 0px; /* Adjust spacing between elements */
    z-index: 20; /* Ensure it is above the background elements */
    text-align: left; /* Center the text */
    text-wrap: nowrap;
    color: white; /* Set text color */
}
.top-text-projecten {
    color: #FFAE00;
    font-size: 19.5px;
    font-family: 'Yellow-Tail';
    margin-bottom: -14px;
    text-wrap: nowrap;
}
.two-text-projecten, .three-text-projecten {
    color: #F6F6F6;
    font-size: 32px;
    font-family: 'Poppins-ExtraBold';
    margin-bottom: 0px;
    line-height: 0.5 !important;
    text-wrap: nowrap;
}



/* 5 BOXEN MET PROJECTEN */
/* 5 BOXEN MET PROJECTEN */
/* 5 BOXEN MET PROJECTEN */

.project-box-container {
    display: grid;
    position: absolute;
    top: 630px;
    left: 50%;
    transform: translate(-50%, -50%);
    grid-template-columns: repeat(4, 1fr); /* 3 equal columns */
    gap: 40px;
    z-index: 20; /* Ensure it is above the background elements */
    text-align: left; /* Center the text */
    color: white; /* Set text color */
    background-color: transparent;
}
.project-box {
    width: 150px;
    height: 150px;
    border: 0px;
    border-radius: 20px;
    background-color: #11112a;
    font-family: Poppins-Regular;
    font-size: 12px;

    display: flex; /* Enables flexbox */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */

    text-align: center; /* Ensures text alignment inside */
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Smooth transition */
}
.project-box:hover {
    background-color: #1b1b3d;
    color: #ffffff; /* Change text color on hover */
    scale: 1.02; /* Slightly enlarge the box on hover */
}
.line-left-box {
    position: absolute;
    background-color: #FFAE00;
    height: 500px;
    width: 1px;
    left: 60px;
    top:300px;
}

.line-right-box {
    position: absolute;
    background-color: #FFAE00;
    height: 500px;
    width: 1px;
    right: 10%;
    top:725px;
}
.line-right-owen {
    position: absolute;
    background-color: #FFAE00;
    height: 500px;
    width: 1px;
    right: 15%;
    top: 1800px;
}

/* OWEN OWEN OWEN BRYCE BRYCE BRYCE */
/* OWEN OWEN OWEN BRYCE BRYCE BRYCE */
/* OWEN OWEN OWEN BRYCE BRYCE BRYCE */
/* OWEN OWEN OWEN BRYCE BRYCE BRYCE */

.text-owen-bryce {
    position: absolute;
    top: 1330px;
    left: 350px;
    transform: translate(-50%, -50%);
    gap: 0px; /* Adjust spacing between elements */
    z-index: 20; /* Ensure it is above the background elements */
    text-align: left; /* Center the text */
    color: white; /* Set text color */
}

.owen-bryce-section {
    position: absolute;
    max-width: 1150px;
    top: 1430px;
    left: 375px;
}

h2 {
    color: #FFAE00; /* Bright orange */
    margin-bottom: -12px;
    font-size: 26px;
    font-family: Poppins-Bold;
}
h3 {
    color: #FFAE00; /* Bright orange */
    margin-top: 23px;
    margin-bottom: 12px;
    font-size: 14px;
    font-family: Poppins-Bold;
}
p {
    font-size: 13.5px;
    font-family: Poppins-Regular;
    color: white;
    margin-bottom: 35px;
    margin-top: 20px;
    text-align: left;
    max-width: 80%;
}
.hyperlink {
    color: #FFAE00;
    text-decoration: none;
}
.hyperlink:hover {
    color: #ffcd62;
}
#toggle-span {
    color: #FFAE00;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}
#toggle-span:hover {
    color: #ffcd62;
}
.website-full-text {
    margin-top: 50px;
    margin-left: 400px;
}

/* IMAGES  */
/* IMAGES  */
/* IMAGES  */
/* IMAGES  */

.owen-bryce-section > .content.slide-up > img {
    margin-bottom: 30px;
    margin-top: 30px;
    margin-left: 10px;
    margin-right: 10px;
}
.owen-bryce-section > .content.slide-up > img {
    margin-bottom: 10px;
}
.picoo-section > .content.slide-up > img {
    margin-bottom: 30px;
    margin-top: 30px;
    margin-left: 10px;
    margin-right: 10px;
}
.picoo-section > .content.slide-up > img {
    margin-bottom: 10px;
}

.development-section > .content.slide-up > img {
    margin-bottom: 30px;
    margin-top: 30px;
    margin-left: 10px;
    margin-right: 10px;
}
.development-section > .content.slide-up > img {
    margin-bottom: 10px;
}
.website-full {
    display: none;
    position: absolute;
}

.section-containers {
  display: flex;
  flex-direction: column;
  gap: 8100px; 
  align-items: flex-start;
}

/* PICOO PICOOO PICOOO */
/* PICOO PICOOO PICOOO */
/* PICOO PICOOO PICOOO */
/* PICOO PICOOO PICOOO */
/* PICOO PICOOO PICOOO */

.text-picoo {
    position: absolute;
    top: 5600px;
    left: 350px;
    transform: translate(-50%, -50%);
    gap: 0px; /* Adjust spacing between elements */
    z-index: 20; /* Ensure it is above the background elements */
    text-align: left; /* Center the text */
    color: white; /* Set text color */
}

.picoo-section {
    position: absolute;
    max-width: 1150px;
    top: 5700px;
    left: 375px;
}
.picoo-section>img {
    margin-bottom: 30px;
    margin-top: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

/* DEVELOPENT SECTION */
/* DEVELOPENT SECTION */
/* DEVELOPENT SECTION */
/* DEVELOPENT SECTION */

.text-development {
    position: absolute;
    top: 10530px;
    left: 350px;
    transform: translate(-50%, -50%);
    gap: 0px; /* Adjust spacing between elements */
    z-index: 30; /* Ensure it is above the background elements */
    text-align: left; /* Center the text */
    color: white; /* Set text color */
}

.development-section {
    position: absolute;
    max-width: 1150px;
    top: 10630px;
    left: 375px;
    z-index: 30; /* Ensure it is above the background elements */
}

/* PROJECT X SECTION */
/* PROJECT X SECTION */
/* PROJECT X SECTION */
/* PROJECT X SECTION */

.text-projectx {
    position: absolute;
    top: 12530px;
    left: 350px;
    transform: translate(-50%, -50%);
    gap: 0px; /* Adjust spacing between elements */
    z-index: 30; /* Ensure it is above the background elements */
    text-align: left; /* Center the text */
    color: white; /* Set text color */
}

.projectx-section {
    position: absolute;
    max-width: 1150px;
    top: 12630px;
    left: 375px;
    z-index: 30; /* Ensure it is above the background elements */
}

#footer {
    position: absolute;
    margin-top: 150%;
    width: 100%;
    height: 90px;
    background: rgba(12, 12, 50, 0.9); /* Dark background */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px); /* Blurred effect */
    font-size: 18px;
}

.home-background {
    width: 100%;
    height: 1080px;
    background: linear-gradient(to bottom, #09082E, #030318);
    z-index: 1;
}

.line-between {
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.15);
    opacity: 0.15;
}

.home-background-bottom {
    width: 100%;
    height: 160%;
    background: linear-gradient(to bottom, #0C0A25, #09091F);
    z-index: 1;
}

footer {
    display: flex;  /* Enables Flexbox */
    justify-content: center;  /* Centers content horizontally */
    align-items: center;  /* Centers content vertically */
    height: 90px;
    text-decoration: none;
    font-family: 'Poppins-Regular';
    font-size: 13px;
    color: white;
    background-color: #09081A;
    text-align: center; /* Ensures text inside is centered */
}



.slide-up {
    opacity: 0;
    transform: translateY(100px);
    transition: all .9s ease-in-out;
    transition-delay: 0.25s;
}
.slide-up.show {
    opacity: 1;
    transform: translateY(0);
}