/* ================================
   PARALLAX SECTIES (SCHALEND)
   ================================ */
.aprilia-parallax,
.berini-parallax,
.jamathi-parallax,
.magneet-parallax {
    min-height: 100vh;
    background-attachment: fixed; /* desktop */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallex-content {
    background-color: #e0dddd;
    padding: 50px;
    text-align: center;
}

/* Achtergrond afbeeldingen per merk */
.aprilia-parallax {
    background-image: url('../images/merken/aprilia/apriliaWallpaper.png');
}
.berini-parallax {
    background-image: url('../images/merken/berini/beriniWallpaper.png');
}
.jamathi-parallax {
    background-image: url('../images/merken/jamathi/jamathiWallpaper.png');
}
.magneet-parallax {
    background-image: url('../images/merken/magneet/magneetWallpaper.png');
}


/* ================================
   MERK CONTAINER (SCHALEND)
   ================================ */
.merk-container {
    display: flex;
    flex-wrap: wrap;
    width: 76%;
    padding: 15px;
    margin: 0 auto;
    justify-content: space-between;
}

.merk-container div {
    background-color: #fff;
    flex: 0 0 48%; /* 2 naast elkaar op desktop */
    margin-bottom: 2%;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.merk-container img {
    width: 100%; /* altijd containerbreedte */
    max-width: 350px; /* voorkom te grote afbeeldingen */
    border-radius: 8px;
    margin: 5% auto 0 auto;
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* ================================
   MERK INFO SECTIE
   ================================ */
.merk-info-container {
    display: flex;
    flex-direction: column;
    width: 82.25%;
    margin: 0 auto;
}

.merk-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* zorgt dat content op mobiel netjes onder elkaar gaat */
}

.merk-text-container {
    flex: 1 1 300px; /* minimaal 300px op mobiel, meeschalend */
    padding: 20px;
    text-align: left;
}

.merk-image-container {
    flex: 1 1 300px; /* minimaal 300px */
    padding: 20px;
    text-align: center;
}

.merk-image-container img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: auto;
    display: block;
}


/* ================================
   RESPONSIVE OVERRIDES
   ================================ */
@media (max-width: 768px) {

    /* Parallax secties voor mobiel */
    .aprilia-parallax,
    .berini-parallax,
    .jamathi-parallax,
    .magneet-parallax {
        background-attachment: scroll; /* fixed werkt niet op mobiel */
        min-height: 50vh;
    }

    /* Merk container op mobiel: 1 kolom */
    .merk-container {
        width: 90%;
        margin: 0 auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .merk-container div {
        flex: 0 0 100%; /* één merk per rij */
        margin-bottom: 15px;
    }

    .merk-container img {
        max-width: 90%;
        margin: 10px auto;
    }

    /* Merk info items stapelen */
    .merk-info-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .merk-text-container,
    .merk-image-container {
        flex: 1 1 100%;
        padding: 10px;
    }

    .merk-image-container img {
        max-width: 80%;
    }
}