.custom-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 300px; /* Vaste breedte voor alle knoppen */
    height: 60px; /* Vaste hoogte voor alle knoppen */
    margin: 5px; /* Ruimte tussen de knoppen */
    font-size: 20px;
    font-weight:;
    font-family: 'Bebas Neue', sans-serif; /* Lettertype Bebas Neue */
    letter-spacing: 2px; /* Ruimte tussen de letters */
    color: #d4c1aa; /* Tekstkleur */
    background: linear-gradient(45deg, #7c8365, #6d6d6d); /* Gradient achtergrond */
    border: none;
    border-radius: 6px; /* Afgeronde hoeken */
    box-shadow: 0 4px 15px rgba(0.2, 0.2, 0.2, 0.2); /* Schaduw */
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Vloeiende overgangen */
}

.custom-button:hover {
    background: linear-gradient(45deg, #7a005f, #56004f); /* Veranderende gradient bij hover */
    transform: translateY(-3px); /* Laat de knop zweven bij hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Grotere schaduw bij hover */
}

.custom-button:active {
    transform: translateY(0); /* Reset transform bij klikken */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Reset schaduw bij klikken */
}


.floating-image {
    display: inline-block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    transition: box-shadow 0.3s ease;
    opacity: 0; /* Start onzichtbaar */
    transform: translateX(-100px); /* Startpositie buiten beeld (van links) */
    animation: slide-in 1s forwards; /* Voert de schuifanimatie uit */
}

.floating-image:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

/* De animatie voor het in beeld schuiven */
@keyframes slide-in {
    to {
        opacity: 1; /* Volledig zichtbaar */
        transform: translateX(0); /* Eindpositie in beeld */
    }
}
.line-flower {
    position: relative; /* Voor het zweef-effect */
    display: block; /* Zorgt ervoor dat de separator goed wordt weergegeven */
    height: 4px; /* Hoogte van de separator */
    background-color: white; /* Kleur van de separator */
    margin: 20px 0; /* Ruimte boven en onder de separator */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Vloeiende overgang voor hover */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Subtiele schaduw */
}

.line-flower:hover {
    transform: translateY(-5px); /* Laat de separator zweven */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Grotere schaduw bij hover */
}