@import '/css/root.css';

.logo-1,
.logo-2 {
    margin: 100px auto;
}

.product-background {
    background-color: var(--darkgray);
    height: 600px;
    position: absolute;
    /* width: 95vw; */
    z-index: -1;
}

/* product omschrijfing */
.product-omschrijving {
    margin-top: 50px;
    border-right: 4px solid var(--white);
    height: 500px;
    color: var(--white);
}

.product-omschrijving h3,
.product-omschrijving p {
    color: var(--white);
}

.terug-button img{
    width: 40px;
    margin-top: -50px;
    cursor: pointer;
}

/* bedrijfsomschrijving */
.bedrijf-omschrijving {
    margin-top: 100px;
}

.bedrijf-omschrijving h3 {
    color: var(--yellow);
}

.bedrijf-omschrijving p {
    color: var(--darkgray);
}

.product-image {
    margin-top: 50px;
}

.image-column {
    margin-bottom: 150px;
}

.img-2 {
    margin-top: 50px;
}

@media (max-width: 1800px) {
    .product-background {
        width: 80vw;
    }
}
@media (max-width: 1700px) {
    .product-background {
        width: 85vw;
    }
}
@media (max-width: 1600px) {
    .product-background {
        width: 90vw;
    }
}
@media (max-width: 1500px) {
    .product-background {
        width: 93vw;
    }
}

@media (max-width: 1400px) {
    .img-2 {
        margin-top: 0px;
    }

    .product-background {
        width: 95vw;
    }
    
}

@media (max-width: 768px) {
    .product-omschrijving {
        border-right: 0px solid var(--white);
        border-bottom: 4px solid var(--white);
        height: auto;
        padding-bottom: 50px;
        color: var(--white);
    }

    .product-background {
        width: 100vw;
    }

    .bedrijf-omschrijving {
        display: none;
    }
}