* {
    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: 100vh;
    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;
}

.text-middle {
    position: absolute;
    top: 430px;
    left: 1250px;
    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 */
}
.top-text {
    color: #FFAE00;
    font-size: 35px;
    font-family: 'Yellow-Tail';
    margin-bottom: 0px;
}
.name-text {
    color: #F6F6F6;
    font-size: 70px;
    font-family: 'Poppins-ExtraBold';
    margin-bottom: 0px;
}
.surname-text {
    color: #F6F6F6;
    font-size: 70px;
    font-family: 'Poppins-ExtraBold';
    margin-bottom: 0;
}
.name-text, .surname-text {
    line-height: 1; /* Increase for more space */
}



/* 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:25%;
    top:-50px;
}
body>.overlapping-container:nth-child(2){
    right:0px;
    top:60vh;
    rotate:90deg;
}
body>.overlapping-container:nth-child(1) img{
    top: -50px;
    left: -50px;
}
body>.overlapping-container:nth-child(2) img{
    right:-315px;
    top: -230px;
    rotate:-90deg;
}
body>.overlapping-container:nth-child(3){
    left:405px;
    top:250px;
}
body>.overlapping-container:nth-child(3) img{
    right:0px;
    top: 0px;
}
body>.overlapping-container:nth-child(4){
    right:1300px;
    top:103vh;
    rotate:90deg;
}
body>.overlapping-container:nth-child(4) .glass {
    height: 350px;
}
body>.overlapping-container:nth-child(4) img{
    right:-545px;
    top: -320px;
    rotate: -90deg;
}
/* GLAS BIJ OVER MIJ */
body>.overlapping-container:nth-child(5){
    left: 30vw;
    top:210vh;
    rotate:80deg;
    z-index: 1000;
}
body>.overlapping-container:nth-child(5) .glass {
    height: 215px;
    width: 85px;
}

.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: 1430px;
    left: 160px;    
    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;
}


.line-first {
    position: absolute;
    background-color: #FFAE00;
    height: 500px;
    width: 1px;
    left: 75%;
    top:950px;
}

.line-left {
    position: absolute;
    background-color: #FFAE00;
    height: 500px;
    width: 1px;
    left: 5%;
    top: 1750px;
}

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

.name-card img {
    transform: scale(1); /* Increase size (adjust as needed) */
    position: absolute;
    z-index: 1;
}

.orange-line {
    position: absolute;
    top: 185vh; /* Centered vertically */
    left: 45vw; /* Positioned 10% from the left */
    width: 1px; /* Stretches 80% of viewport width */
    height: 175px; /* Thin line */
    background-color: #FFAE00; /* Orange color */
    z-index: 10; /* Keeps it above other elements */
}

.wie-ben-ik-container {
    position: absolute;
    top: 180vh;
    left: 50vw;
    z-index: 20;
    width: 700px;
}
.wie-ben-ik {
    color: #FFAE00;
    font-size: 26px;
    font-family: 'Poppins-Bold';
    margin-bottom: 0px;
}
.text-paragraph {
    color: #ffffff;
    font-size: 13.5px;
    font-family: 'Poppins-Regular';
    margin-bottom: 0px;
    margin-top: 15px;
}

#footer {
    position: absolute;
    margin-top: 120%;
    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);
}

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

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