/* Custom Font Import - Load Open Sans including bold weight for overlay text */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
/* weights: 400 (regular), 600 (semibold), 700 (bold) */

/* Color variables for quick theming */
:root {
    --nav-hover-color: #f6b0ff; /* change this to set the header/nav hover color */
}

body{
    margin:0px;
}

.modal {
    /* Hidden by default; becomes a fixed overlay when .open is added */
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: auto !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: rgba(0, 0, 0, 0.31) !important;
    z-index: 99999 !important; /* ensure overlay sits above everything */
}

/* When opened, show overlay as flex so content can be centered */
.modal.open {
    display: flex !important;
}

.header {
    /* Use a semi-transparent background instead of global opacity so child text remains fully opaque */
    background-color: rgba(120, 34, 185, 0.229); /* slightly darker, still transparent */
    backdrop-filter: blur(8px);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    
    padding: 0 5%; /* Behoud padding aan de zijkanten */
    height: 60px;
    
    /* BELANGRIJK: Gebruik Flexbox om de inhoud te centreren */
    display: flex;
    
    /* Zorgt ervoor dat de gehele inhoud (de .navbar) horizontaal in het midden staat */
    justify-content: center; 
    
    /* Zorgt ervoor dat de inhoud verticaal in het midden staat */
    align-items: center; 
    
    position: fixed; 
    width: 100%;
    z-index: 100; 

    /* BELANGRIJKE TOEVOEGING: Schaduw aan de onderkant */
    /* De waarden zijn: X-offset Y-offset Blur Spread Kleur */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* De .navbar en .nav-item stijlen blijven verder hetzelfde: */
.navbar {
    display: flex;
    gap: 33px;
    /* Verwijder eventuele 'margin-left: auto;' die we eerder hebben toegevoegd */
}

/* Small global shift: move main wrapper slightly to the left for visual alignment */
.grid-container {
    margin-left: -60px; /* adjust value to taste (positive moves right, negative moves left) */
}

@media (max-width: 700px) {
    .grid-container {
        margin-left: 0; /* don't shift on small screens */
    }
}

.nav-item {
    text-decoration: none;
    color: white; 
    font-weight: bold;
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 0.12em;
    
    /* BELANGRIJKE AANPASSING: Gebruik hier je gekozen font */
    font-family: 'Open Sans', sans-serif; 
    /* Zorg altijd voor een generieke fallback (hier 'sans-serif') */
}

/* Zorg ervoor dat de navigatie links er wit en vet uitzien */
.nav-item {
    text-decoration: none;
    color: white; 
    font-weight: bold;
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 0.9em;
}

/* Zorg dat de navigatielinks wit blijven */
.navbar a {
    color: white;
}



.navbar {
    display: flex;
    gap: 200px;
}

/* Center navbar items horizontally inside the fixed header */
.header .navbar {
    display: flex;
    justify-content: center; /* center items in the header */
    align-items: center;
    gap: 90px; /* keep 60px spacing between nav links as requested */
    width: 100%;
}

.nav-item {
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 0.9em;
    transition: color 0.3s;
}

.nav-item:hover {
    color: var(--nav-hover-color); /* Use variable so color is easy to change */
    transition: color 180ms ease;
}

.active {
    /* Style for the 'Contact' link in the image */
    color: #fff;
    border-bottom: 2px solid #fff; 
}


/* --- 2. Hero Section Styling (Aangepast voor Fullscreen Hoogte) --- */
.hero-section {
    grid-row: 2;
    
    
    
    min-height: calc(100vh - 60px); 
    
    background-image: url('images/homepage/homescreen.gif'); 
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
    
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 

}
.hero-image {
    
    height: 100vh; /* Dit vult de volledige hoogte van de viewport (zichtbaar scherm) */
    
}





.contact-section {
    grid-row: 3;
    
    background: linear-gradient(to right, #7862b0, #9c8fd9, #7782f8, #7782f8);
    
    padding: 40px 0;
    color: white;
    min-height: 100px;
    width: 100%
    

}

.contact-form-container input:focus,
.contact-form-container textarea:focus {
    outline: none; 
    box-shadow: 
        0 0 0 2px rgba(255, 255, 255, 0.5), 
        0 0 20px #E97FFF; 
    border-color: #f27fff; 
}

.contact-content-grid {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    /* Two columns: 1fr for info, 1fr for the form */
    grid-template-columns: 1fr 1fr; 
    gap: 50px;
    align-items: start;
}

/* Contact Info Column Styling */
.contact-info {
    padding-top: 150px; /* Push the list down to align with the form/title area visually */
}

.contact-info ul {
    list-style: none;
    font-size: 1.1em;
}

.contact-info ul li {
    margin-bottom: 10px;
}

.info-label {
    font-weight: 700;
}


/* Contact Form Column Styling */
.contact-form-container {
    padding: 20px;
    text-align: center;
}

.form-title {
    font-size: 2.5em;
    font-weight: 300;
    margin-bottom: 5px;
}

.form-subtitle {
    font-size: 1.1em;
    margin-bottom: 30px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
}

.contact-form input,
.contact-form textarea {
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    background-color: rgba(255, 255, 255, 0.9); /* Slightly translucent white background */
    color: #333;
}

.contact-form textarea {
    resize: none;
    min-height: 150px; /* Matches the visual height of the message box */
}

.send-button {
    align-self: flex-start; /* Align button to the left */
    padding: 10px 30px;
    border: 2px solid #fff;
    border-radius: 20px;
    background-color: transparent;
    color: white;
    font-size: 1em;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 10px;
}

.send-button:hover {
    background-color: white;
    color: #6a5acd;
}


 .contact-section {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 300; 

}

.modal-body h1, 
.modal-body h2, 
.modal-body h3, 
.modal-body h4, 
.modal-body h5, 
.modal-body h6 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 700; 
    color: white;
    margin-top: 15px; 
    margin-bottom: 5px; 

}

.modal-body {
    color: #ffffff;
    line-height: 1.5;
    display: flex;
    flex-direction: column;  
    gap: 20px; 
    padding: 20px;
}

.about-page-content {
    
    background-image: url('images/about-page/mijn-hoofd-2.0.png'); 
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat;
    
    display: flex;
    flex-direction: column; 
    align-items: center;    
    
    padding-top: 60px; 
    
    min-height: calc(100vh - 60px); 
}




/* 3. Container voor Knoppen en Foto (Gebruikt CSS Grid) */
.buttons-layout-grid {
    display: grid;
    /* Drie kolommen: Links (knoppen), Vrije Ruimte (brede kolom voor de persoon), Rechts (knoppen) */
    grid-template-columns: 1fr 1.5fr 1fr; 
    
    gap: 20px;
    width: 100%; 
    max-width: 1200px;
    /* Verplaats de knoppen om ze over de centrale afbeelding te plaatsen */
    margin-top: 150px; 
}

/* Knoppen Groepen (Stapelen de twee knoppen verticaal) */
.button-group-left,
.button-group-right {
    display: flex;
    flex-direction: column; 
    gap: 30px; 
    width: 100%; 
}

.button-group-left {
    align-items: flex-end; /* Knoppen rechts van de linker kolom */
}

.button-group-right {
    align-items: flex-start; /* Knoppen links van de rechter kolom */
}

/* Knoppen Stijl (Frosted Glass) */
.info-button {
    /* ... (Zorg dat deze stijlen de frosted glass look hebben) ... */
    background: rgba(255, 255, 255, 0.879); 
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    /* ... andere stijlen ... */
}

/* 4. Knoppen Groepen (Stapelen de twee knoppen verticaal) */
.button-group-left,
.button-group-right {
    display: flex;
    flex-direction: column; 
    gap: 30px; 
    width: 100%; 
}

.button-group-left {
    align-items: flex-end; /* Lijn de knoppen rechts uit binnen de linker grid-cel */
}

.button-group-right {
    align-items: flex-start; /* Lijn de knoppen links uit binnen de rechter grid-cel */
}

/* 5. Stijl van de Knoppen (Frosted Glass) */
.info-button {
    /* Make this safe to use on <button> elements as well as <a> */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    padding: 15px 50px;
    color: white;
    font-weight: 600;
    display: inline-block;
    min-width: 200px; /* Zorgt dat de knoppen breed genoeg zijn */
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Open Sans', Arial, sans-serif;

    
    /* Frosted Glass look */
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    transition: background 0.3s, box-shadow 0.3s;

    /* subtle default glow */
    box-shadow:
        0 0 5px rgba(233,127,255,0.12),
        0 0 10px rgba(233,127,255,0.08);
}

.info-button:hover {
    background: rgba(255, 255, 255, 0.32);
    box-shadow:
        0 0 10px #ffffff81,
        0 0 10px #ffffff81,
        0 0 10px #ffffff81,
        0 0 10px #ffffff81;
}

/* About page: increase info-button width (only affects buttons inside the about page layout) */
.about-page-content .info-button {
    min-width: 300px; /* change this value to your desired button width */
    padding: 15px 40px; /* adjust padding to keep button proportions */
}

/* --- STIJL VOOR ALLEEN DE CONTACT SECTIE VAN DE ABOUT PAGINA --- */



 



/* --- OVERLAY MODAL STIJL --- */

/* Modal Achtergrond: Bedekt het hele scherm */
.modal {
    /* Start hidden via opacity/pointer-events so animations can play */
    display: flex; /* keep flex so centering works */
    position: fixed;
    /* Make sure the modal is above header/footer and any stacking contexts */
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* lighter overlay so glass effect is visible through the panel */
    background-color: rgba(255, 255, 255, 0.2);

    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none; /* prevent interaction when hidden */
    transition: opacity 220ms ease;

    
}




.modal-body p {
   
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 300; 
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
}

.modal-body h1, 
.modal-body h2, 
.modal-body h3, 
.modal-body h4, 
.modal-body h5, 
.modal-body h6 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 700; 
    color: white;
    margin-top: 15px; 
    margin-bottom: 2px; 

}

/* When opened, allow interactions and fade overlay in */
.modal.open {
    opacity: 1;
    pointer-events: auto;
}





/* Modal Inhoud: static frosted-glass box (no entrance animation) */
.modal-content {
    /* stronger Apple-like glass panel - actual translucent fill moved to ::after to mask inner glow */
    background: transparent;
    /* keep a mild backdrop-filter on the container in case the browser composites differently */
    backdrop-filter: blur(10px) brightness(120%);
    -webkit-backdrop-filter: blur(10px) brightness(120%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    padding: 28px;
    width: 90%;
    max-width: 700px;
    box-shadow: 0 18px 40px rgba(187, 180, 212, 0.18), inset 0 1px 0 rgba(255,255,255,0.6);
    color: #ffffff; /* light text for readability */
    position: relative;
    z-index: 100000; /* ensure content is above overlay and other elements */
    overflow: visible; /* allow pseudo-element glow to show outside */
}









/* Title and body colors for the glass panels */
.modal-title {
    /* Je kunt de titel kleur geven om deze op te laten vallen */
    color: white; 
    text-align: center;
    margin-bottom: 20px;

    /* PAS DIT AAN: Gebruik hier het lettertype dat je wilt */
    font-family: 'Open Sans', Arial, sans-serif; /* VOORBEELD: Gebruik Open Sans */
    
    /* EN DEZE: Stel de dikte in (bold is vaak 700) */
    font-weight: 700; 
    
    /* ... andere stijlen ... */
}




/* 2. De individuele rij voor één software (bijv. Illustrator) */
.software-item {
    display: flex; 
    flex-direction: row; /* Zorgt dat icoon en tekst NAAST elkaar staan */
    align-items: center; /* Lijn ze netjes uit op de middellijn */
    width: 100%;
}

/* 3. De tekst en puntjes naast het icoon */
.software-info {
    display: flex;
    flex-direction: column; /* Zorgt dat de naam BOVEN de puntjes staat */
    justify-content: center;
    margin-left: 20px; /* Ruimte tussen icoon en tekst */
}

/* 4. De rij met puntjes */
.skill-dots {
    display: flex;
    flex-direction: row; /* Zorgt dat de puntjes NAAST elkaar staan */
    gap: 8px;
    margin-top: 5px;
}

.software-icon {
    width: 80px;  /* Forceer de breedte */
    height: 80px; /* Forceer de hoogte */
    object-fit: contain; /* Zorgt dat de afbeelding niet vervormt */
    border-radius: 15px;
    flex-shrink: 0; /* Voorkomt dat het icoon platgedrukt wordt */
}

/* Zorg dat de modal zelf niet te groot wordt */
.modal-content {
    max-height: 80vh; /* Maximaal 80% van de schermhoogte */
    overflow-y: auto; /* Laat je scrollen als de lijst te lang is */
}

/* Container voor de puntjes */
.skill-dots {
    display: flex;
    flex-direction: row; /* Zorgt dat ze naast elkaar staan */
    gap: 6px;            /* Ruimte tussen de puntjes */
    margin-top: 8px;     /* Ruimte onder de softwarenaam */
}

/* Basis stijl voor elk puntje */
.skill-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;  /* Maakt ze perfect rond */
    display: inline-block;
}

/* De paarse (ingevulde) puntjes */
.skill-dot.filled {
    background-color: #f27fff; /* De paarse kleur uit je Figma design */
}

/* De grijze (lege) puntjes */
.skill-dot.empty {
    background-color: #d1d1d1; /* Lichtgrijs voor de resterende punten */
}

.projects-body {
    /* Jouw paarse gradient */
    background: linear-gradient(180deg, #b099f0 0%, #6b5fb5 50%, #201a4b 100% );
    background-attachment: fixed; /* De gradient blijft staan terwijl je scrollt */
    color: white;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    flex-direction: column;
}

.projects-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 20px;
    text-align: center;
}



.projects-title {
    font-size: 160px;          /* Veel groter, passend bij je ontwerp */
    font-weight: 900;
    text-align: center;        /* Zet de tekst in het midden */
    margin-top: -20px;         /* Trekt de tekst verder naar boven richting de nav */
    margin-bottom: 10px;       /* Minder ruimte onder de grote letters */
    color: white;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6); /* De witte gloed */
    width: 100%;
}

.projects-intro {
    max-width: 900px;          
    margin: 0 auto 50px auto;  
    text-align: center;        
    font-size: 16px;
    line-height: 1.6;
    font-weight: 600;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Forceert 2 kolommen */
    gap: 40px;
    margin-top: -30px;
}

.project-card {
    text-decoration: none;
    color: white;
    transition: transform 0.3s ease;
}

.image-container {
    width: 100%;
    max-width: 450px; /* Zorgt dat ze niet reusachtig worden */
    aspect-ratio: 1 / 1;
    border-radius: 40px;
    overflow: hidden;
    margin: 0 auto 15px auto;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.image-container img {
    width: 100%;
    height: 130%;
    object-fit: cover; /* Voorkomt uitrekken of vervormen */
}

.project-card h3 {
    font-size: 18px;
    font-weight: 700;
}

.horse-project:hover .image-container {
    box-shadow: 0 0 30px #ff00ff; /* Roze gloed */
    border-color: #ff00ff;
    transform: scale(1.03);
}

.magazine-project:hover .image-container {
    box-shadow: 0 0 30px #ff00ff; /* Roze gloed */
    border-color: #ff00ff;
    transform: scale(1.03);
}




.instagram-page {
    background-color: white; /* De bovenkant is wit in het design */
    margin: 0;
    overflow-x: hidden;
}

.instagram-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Verdeelt de pagina in twee helften */
    min-height: 80vh;
    align-items: center;
    padding: 0 10%;
    position: relative;
    /* De paarse schuine vorm op de achtergrond */
    background: linear-gradient(110deg, #fff 60%, #6b5fb5 60%, #A355B2 105%);
}

/* Linkerkolom tekst */
.content-left {
    max-width: 500px;
    z-index: 2;
}

.content-left h1 {
    font-size: 70px;
    color: #313A86;
    line-height: 1.1;
    margin-bottom: 20px;
    text-align: left;
}

.content-left p {
    color: #313A86;
    line-height: 1.6;
    margin-bottom: 30px;
}

.btn-instagram {
    display: inline-block;
    background-color: black;
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
}

/* Rechterkolom: Foto stack */
.photo-stack {
    position: relative;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.insta-img {
    position: absolute;
    border-radius: 20px;
    box-shadow: 0 10px rgba(28, 8, 71, 0.271);
    object-fit: cover;
}

/* De posities van de 3 foto's overlappend */
.img-1 { width: 270px; height: 450px; left: 40px; z-index: 1; }
.img-2 { width: 350px; height: 580px; left: 200px; z-index: 2; }
.img-3 { width: 480px; height: 600px; left: 300px; z-index: 3; }

/* Article sectie met de notebooks */
.notebooks-section {
    background: linear-gradient(505deg, #6b5fb5 20%, #A355B2 100%);
    padding: 100px 0;
    display: flex;
    justify-content: center;
}

.notebooks-container {
    width: 500%;
    max-width: 500px;
    text-align: center;
}

.products-img {
    width: 100%;
    height: 800px;
    max-width: 2000px;

     margin-top: -200px;    /* Trekt de foto over de witte sectie heen */
    position: relative;
    z-index: 20;           /* Zorgt dat ze BOVENOP de vorige sectie liggen */

    
    
}

.center-img {
    width: 80%;
    height: 300px;
    max-width: 800px;
    transform: translateY(-50px); /* Trekt de afbeelding een beetje omhoog in de overgang */
}

.image-container {
    display: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.full-screen-gallery {
    width: 100vw;           /* 100% van de breedte van het browservenster */
    margin-left: calc(-50vw + 50%); /* Negeert marges van een eventuele container */
    margin-right: calc(-50vw + 50%);
    overflow: hidden;
    line-height: 0;         /* Verwijder witruimte onder de afbeelding */
}

.full-screen-gallery img {
    width: 100%;            /* Rek de afbeelding uit over de hele breedte */
    height: auto;           /* Behoud de verhoudingen zodat het niet blurry wordt */
    display: block;
    
    /* Maak de afbeelding extra scherp */
    image-rendering: -webkit-optimize-contrast;
    
}




.fan-creations-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* De split background: wit links, paarse gradient rechts */
    background: linear-gradient(to right,#fff 60%, #312774 60%, #A355B2 105%); 
    padding: 50px 0;
    overflow: hidden;
}

.fan-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Links iets breder voor de tekst */
    max-width: 1200px;
    width: 90%;
    gap: 60px;
    align-items: center;
}

/* Tekst Styling */
.fan-title {
    font-size: 52px;
    color: #1a1a4b;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 40px;
}

.fan-description p {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a6a;
    margin-bottom: 20px;
    max-width: 500px;
}

/* Tags Styling */
.tags-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
}

.tag {
    background-color: #1a1a4b;
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
}

.dot {
    color: #1a1a4b;
    font-weight: bold;
}

/* Afbeeldingen stapelen */
.fan-image-side {
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
}

.image-stack-container {
    position: relative;
    width: 100%;
}

.horse-img-bg {
    width: 580px;
    height: 750px;
    top: 20%;
    left: 10%;
    object-fit: cover;
    border-radius: 60px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.478);
    position: relative;
    z-index: 1;
}

.horse-img-fg {
    width: 950px; /* Het PNG paard is groter */
    position: absolute;
    top: 40%;
    left: 40%; /* Laat hem over de andere foto heen vallen */
    transform: translateY(-50%);
    z-index: 2;
    filter: drop-shadow(20px 20px 40px rgba(0,0,0,0.4));
}

.artwork-contact {
    grid-row: 4;
    
    background: linear-gradient(to right,#312774 60%, #A355B2 105%);
    
    padding: 40px 0;
    color: white;
    min-height: 100px;
    width: 100%
    

}