/* Algemeen stijl */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Lichtgrijze achtergrond */
}

/* Header styling */
header {
    background-image: url(images/bb5.jpg);
    background-color: #d9c49e; /* Lichter bruin */
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schaduw voor diepte */
}

/* Logo styling */
header img {
    max-width: 200px;
}

/* Navigatie styling */
nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: #302c2c;
    padding: 10px 20px;
    background-color: #f1f1f1; /* Lichte kleur voor knoppen */
    border-radius: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transitie effect */
}

/* Hover-effect voor navigatie */
nav ul li a:hover {
    background-color: #e6b38a; /* Donkerder bij hover */
    transform: scale(1.05); /* Vergroot bij hover */
}

/* Header-info styling */
.header-info {
    display: flex;
    align-items: left;
    gap: 40px;
    font-size: 15px;
    color: #eeeeee;
    margin-left: 25px;
}

.header-info a {
    color: #550e37;
    text-decoration: none;
}

.header-info a:hover {
    text-decoration: underline;
}

/* Telefoon icoon styling */
.phone-icon {
    width: 30px;
    height: 30px;
    color: #bdb5b5;
}

/* Hoofdcontainer styling */
.container {
    display: flex;
    margin: 10px;
    align-items: stretch;
}

/* Sidebar styling */
.sidebar {
    flex: 1;
    margin-right: 15px;
}

.sidebar img {
    width: 100%;
    margin-top: 10px;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schaduw */
}

/* Hover-effect voor sidebar afbeeldingen */
.sidebar img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Meer schaduw bij hover */
}

/* Hoofdinhoud styling */
.main-content {
    flex: 3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-left:5px;
}

/* Afbeeldingen in hoofdinhoud */
.main-content img {
    width: 100%;
    border-radius: 5px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Titel styling voor aanbiedingen */
.offer-title {
    grid-column: span 2; /* Zorgt ervoor dat de titel over beide kolommen staat */
    text-align: center;
    background-color: #444240; /* Donkerder bruin */
    padding: 24px;
    font-size: 30px; /* Iets groter voor meer impact */
    font-family: 'Montserrat', sans-serif; /* Andere font voor titels */
    color: #f80e0e; /* Witte tekst voor contrast */
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    overflow: hidden; /* Zorgt ervoor dat de tekst niet buiten de box gaat */
    position: relative; /* Voor de animatie positionering */
    height: 80px; /* Maak de hoogte van de titel vast */
}

/* Container voor bewegende tekst */
.moving-text {
    display: inline-block; /* Zorgt ervoor dat de tekst zich naast elkaar gedraagt */
    animation: moveUpDown 0.6s ease-in-out infinite; /* Voeg de bewegingsanimatie toe */
    position: absolute; /* Positioneert de tekst absoluut binnen de container */
    top: 50%; /* Beginpositie van de tekst */
    left: 50%; /* Beginpositie van de tekst */
    transform: translate(-50%, -50%); /* Centreert de tekst */
}

/* Animatie voor de bewegende tekst van boven naar beneden */
@keyframes moveUpDown {
    0% {
        transform: translate(-50%, -50%); /* Beginpositie */
    }
    50% {
        transform: translate(-50%, -60%); /* Beweeg omhoog */
    }
    100% {
        transform: translate(-50%, -50%); /* Terug naar beginpositie */
    }
}

/* Hover-effect voor de aanbiedingen */
.main-content img:hover {
    transform: scale(1.05); /* Vergroot de afbeelding iets bij hover */
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Voeg schaduw toe bij hover */
}

/* Styling voor de interactietekst */
.offer-text {
    grid-column: span 2; /* Zorgt ervoor dat de tekst over beide kolommen staat */
    text-align: center;
    font-size: 20px;
    color: #333;
    margin: 10px 0;
}

/* Call-to-action knop styling */
.cta-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #e0c9b0; /* Lichte kleur voor de knop */
    color: #333;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transitie effect */
}

/* Hover-effect voor call-to-action knop */
.cta-button:hover {
    background-color: #d5b59b; /* Verander kleur bij hover */
    transform: scale(1.05); /* Vergroot bij hover */
}