/* --- VARIABELEN --- */

:root {

--color-body-bg: #FAF7F1;

/* De "gaten" tussen de kaarten (iets donkerder beige) */

--color-card-bg: #FFFFFF;

/* Wit voor de kaarten */

--color-text: #06421f;

/* OMNOMYCO Groen */

--color-accent: #f08113;

/* OMNOMYCO Oranje */

--color-dark: #0D2618;

/* Donkerdere variant groen voor contact footer */



--radius-card: 17px;

/* Hoe rond de hoeken zijn */

--card-padding: 4rem;

/* Ruimte binnenin de kaarten */

--container-width: 90%;

/* container breedte */



--font-heading: 'Space Grotesk', sans-serif;

--font-body: 'Space Grotesk', sans-serif;

}



/* --- BASIS --- */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}



html {

scroll-behavior: smooth;

}



body {

background-color: var(--color-body-bg);

color: var(--color-text);

font-family: var(--font-body);

line-height: 1.6;

/* Zorgt voor wat ruimte aan de zijkanten op mobiel */

padding: 0 1rem;

}



h1,

h2,

h3 {

font-family: var(--font-heading);

margin-bottom: 1rem;

line-height: 1.2;

}



h1 {

font-size: 3.5rem;

}



h2 {

font-size: 2.5rem;

}



h3 {

font-size: 1.5rem;

}



img {

max-width: 100%;

display: block;

border-radius: 8px;

}



a {

text-decoration: none;

color: inherit;

transition: 0.3s;

}



/* --- CONTAINERS & CARDS --- */



/* De wrapper om elke sectie heen, zorgt voor afstand tussen kaarten */

.page-section {

width: 100%;

display: flex;

justify-content: center;

padding-bottom: 2rem;

/* Ruimte tussen de kaarten */

}



/* De algemene kaart stijl */

.content-card {

width: var(--container-width);

max-width: 100%;

border-radius: var(--radius-card);

overflow: hidden;

/* Zorgt dat afbeeldingen niet buiten de ronding komen */

position: relative;

/* Optioneel: subtiele schaduw voor diepte */

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);

}



.bg-white {

background-color: var(--color-card-bg);

padding: var(--card-padding);

}



.bg-dark {

background-color: var(--color-dark);

color: white;

padding: var(--card-padding);

}



/* --- NAVIGATIE --- */

header {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

transition: transform 0.3s ease;

padding: 1rem 0;

}



header.nav-hidden {

transform: translateY(-100%);

}



.nav-wrapper {

width: var(--container-width);

max-width: 100%;



margin: 0 auto;

/* Dit zorgt voor het centreren (de 15% links/rechts) */

background: rgba(90, 89, 89, 0.566);

/* Licht transparant wit */

backdrop-filter: blur(10px);

border-radius: 50px;

/* Pil-vorm navigatie */

padding: 0.8rem 2rem;

display: flex;

justify-content: space-between;

align-items: center;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

}



.logo {

font-family: var(--font-heading);

font-weight: bold;

font-size: 1.2rem;

}



.nav-logo-img {

height: 80px;

width: auto;

display: block;

}



/* Voor als je een logo uploadt */



nav ul {

list-style: none;

display: flex;

gap: 2rem;

}



nav a {

font-size: 1.1rem;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 1px;

}



nav a:hover {

color: var(--color-accent);

}



.menu-spacer {

height: 100px;

}



/* Ruimte voor de fixed header */

.hero-section-wrapper {

padding-bottom: 2rem;



/* BELANGRIJK: Zorgt dat hij helemaal bovenaan begint */

margin-top: 20px;

padding-top: 0;

}



/* --- HERO CARD (Specifieke styling) --- */

.hero-card {

height: 95vh;

/* Hoogte van de hero kaart */

background-image: url('../assets/images/COWPlateIII.png');

/* VERWIJZING NAAR JE FOTO */

background-size: cover;

background-position: center;

display: flex;

align-items: center;

justify-content: flex-start;

/* Tekst links, of 'center' voor midden */

}



/* Een donkere laag over de foto zodat tekst leesbaar is */

.hero-overlay {

width: 100%;

height: 100%;

background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));

display: flex;

align-items: center;

padding: 0 var(--card-padding);

}



.hero-text {

color: white;

max-width: 600px;

font-weight: 250;

}



.hero-text h1 {

color: white;

font-weight: 380;

}



.accent-text {

color: var(--color-accent);

font-style: italic;

}



/* --- SECTIES --- */

.label {

display: block;

font-size: 0.85rem;

text-transform: uppercase;

letter-spacing: 2px;

color: var(--color-accent);

margin-bottom: 0.5rem;

font-weight: 400;

}



.centered-header {

text-align: center;

margin-bottom: 3rem;

}



/* Split Layout (Tekst + Foto) */

.split-layout {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;

}



.btn-outline {

display: inline-block;

margin-top: 1.5rem;

padding: 0.8rem 2rem;

border: 1px solid var(--color-text);

border-radius: 50px;

}



.btn-outline:hover {

background: var(--color-text);

color: white;

}



/* Team Grid */

.team-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 2rem;

}



.team-member img {

height: 500px;

width: 100%;

object-fit: cover;

margin-bottom: 1rem;

}



.role {

display: block;

color: var(--color-accent);

font-size: 0.9rem;

font-weight: bold;

margin-bottom: 0.5rem;

}



/* Timeline */

.timeline-scroll-container {

width: 100%;

overflow-x: auto;

padding: 1rem 0;

scrollbar-width: thin;

scrollbar-color: var(--color-accent) transparent;

}



.timeline-track {

display: flex;

gap: 2rem;

padding: 0 1rem;

position: relative;

min-width: max-content;

}



.timeline-track::before {

content: '';

position: absolute;

top: 2rem;

left: 0;

width: 100%;

height: 1px;

background: #ddd;

z-index: 0;

}



.timeline-item {

text-align: center;

position: relative;

z-index: 1;

/* AANPASSINGEN VOOR VERTICALE TEKST: */

width: 200px;

/* Geeft elk item een standaard breedte */

max-width: 220px;

/* De tekst mag nooit breder dan dit worden */

white-space: normal;

/* Forceert de browser om tekst af te breken naar een nieuwe regel */



/* Zorg dat de tekst bovenin begint (optioneel, staat vaak al goed) */

vertical-align: top;

}



.timeline-item .date {

font-weight: bold;

margin-bottom: 0.5rem;

display: block;

}



.timeline-item .dot {

width: 12px;

height: 12px;

background: white;

border: 3px solid var(--color-accent);

border-radius: 50%;

margin: 0 auto 1rem auto;

}



/* Contact Inputs */

.input-field {

width: 100%;

padding: 1rem;

border-radius: 4px;

border: none;

margin-bottom: 10px;

}



.btn-solid {

background: var(--color-accent);

color: white;

border: none;

padding: 0.8rem 2rem;

border-radius: 4px;

cursor: pointer;

font-weight: bold;

}



/* Footer */

footer {

padding: 2rem 0;

text-align: center;

font-size: 0.9rem;

opacity: 0.6;

}



/* --- MOBIEL --- */

@media (max-width: 768px) {

:root {

--card-padding: 2rem;



/* OP MOBIEL: Maak hem breder (bijv 92%) anders wordt alles te klein */

--container-width: 92%;

}



/* Minder padding op mobiel */



h1 {

font-size: 2.5rem;

}



h2 {

font-size: 2rem;

}



.split-layout,

.team-grid {

grid-template-columns: 1fr;

gap: 2rem;

}



.hero-card {

height: 70vh;

}



.nav-wrapper {

flex-direction: column;

gap: 1rem;

}



nav ul {

gap: 1rem;

flex-wrap: wrap;

justify-content: center;

}

}

/* --- SOCIAL MEDIA BUTTONS --- */

.social-links {

display: flex;

gap: 12px;

margin-top: 24px; /* Space above the icons */

}



.social-links a {

display: flex;

align-items: center;

justify-content: center;

width: 44px;

height: 44px;

background-color: rgba(255, 255, 255, 0.1); /* Subtle dark-transparent circle */

border: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 50%;

color: white;

font-size: 1.2rem;

transition: all 0.3s ease;

}



.social-links a:hover {

background-color: var(--color-accent); /* Your OMNOMYCO Oranje */

border-color: var(--color-accent);

transform: translateY(-3px); /* Gentle lift effect */

color: white;

}