/* KLEUREN - Pas hier je brand kleuren aan */
:root {
    --black: #000000;

    --red: #d93137;
    --red2: #c95555;
    --blue: #1f4d96;
    --blue2: #4b4f89;
    --yellow: #f7cb28;
    --yellow2: #f7ba42;
    --pink: #e895a1;
    --pink2: #f79ca8;
    --green: #2c9473;
    --green2: #2c917e;

    --white: #FFFFFF;
    --brown: #b1876f;
    --brown2: #d6a487;
    --grey1: #1f1f1f;
    --grey2: #1a1a1a;
    --grey3: #333333;
}

/* BASISSTIJLEN - Pas hier de basisstijlen aan */
body {
    font-family: 'Oswald', sans-serif;
    /* Vervang door je eigen lettertype */
    color: var(--white);
    background-color:var(--black);
}

/* Scroll margin for anchor links to account for fixed header */
section[id] {
    scroll-margin-top: 80px;
}

/* LETTERTYPE VARIANTEN - Pas hier de verschillende lettertype stijlen aan */
.font-knockout-31 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

.font-knockout-29 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
}

.font-knockout-51 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.font-knockout-32 {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
}

.font-knockout-50 {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
}

/* ACHTERGRONDKLEUREN - Pas hier de achtergrondkleuren aan */

.bg-brand-brown{
    background-color: var(--brown);
}

.bg-brand-brown2{
    background-color: var(--brown2);
}

.bg-brand-grey1{
    background-color: var(--grey1);
}

.bg-brand-grey2{
    background-color: var(--grey2);
}

.bg-brand-red {
    background-color: var(--red);
}

.bg-brand-blue {
    background-color: var(--blue);
}

.bg-brand-yellow {
    background-color: var(--yellow);
}

.bg-brand-pink {
    background-color: var(--pink);
}

.bg-brand-green {
    background-color: var(--green);
}

/* TEKSTKLEUREN - Pas hier de tekstkleuren aan */
.text-brand-red {
    color: var(--red);
}

.text-brand-blue {
    color: var(--blue);
}

.text-brand-yellow {
    color: var(--yellow);
}

.text-brand-green {
    color: var(--green);
}

.text-brand-pink {
    color: var(--pink);
}

/* RANDKLEUREN - Pas hier de randkleuren aan */
.border-brand-red {
    border-color: var(--red);
}

.border-brand-blue {
    border-color: var(--blue);
}

.border-brand-yellow {
    border-color: var(--yellow);
}

/* ANIMATIES EN INTERACTIES - Pas hier de animaties en interacties aan */
.product-card {
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--red);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* KNOPPEN - Pas hier de knopstijlen aan */
.btn-primary {
    background-color: var(--red);
    color: white;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--red2);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--blue);
    color: white;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #1e2252;
    transform: translateY(-2px);
}

/* BESTELKNOP - Stijl voor de bestelknop */
.btn-order {
    background-color: var(--brown);
    color: var(--black);
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-order:hover {
    background-color:var(--brown2);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* SOLLICITATIEKNOP - Stijl voor de sollicitatieknop */
.btn-apply {
    background-color: var(--green);
    color: white;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-apply:hover {
    background-color: var(--green2);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* ICONEN - Pas hier de icoonkleuren aan */
.meat-icon {
    fill: var(--red);
}

/* AFBEELDINGEN - Stijlen voor afbeeldingen */
.custom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PULSERENDE ANIMATIE - Voor de bestelknop */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--brown2);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 170, 15, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 170, 15, 0);
    }
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* VACATUREKAART - Stijl voor de vacaturekaarten */
.job-card {
    transition: all 0.3s ease;
    border-left: 5px solid transparent;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.job-card-grey {
    border-left-color: var(--grey2);
}

.job-card-red {
    border-left-color: var(--red);
}

.job-card-blue {
    border-left-color: var(--blue);
}

/* Darken background image */
.absolute.inset-0.z-0 img {
    filter: brightness(30%);
}