body {
    font-size: calc(15px + 0.390625vw);
}

/* hier stylen we onze hoofding */
.header{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)), url(../images/bg-banner.avif);
    background-position: center;
    background-size: cover;
    position: relative;
}

.sub-header{
    height: 30lvh;
    width: 100%;background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),
    url(../images/bg-banner.avif);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}

.sub-header h1{
    margin-top: 4rem;
}

/* hier stylen we de tekstbox die verwerkt is in onze hoofding */
.text-box{
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.text-box h1{
    font-size: 1rem;
    padding: 2.5rem;
}

.text-box h2{
    font-size: 0.75rem;
    padding: 1.5rem;
}

.text-box p{
    margin: 1rem 0 3rem;
    font-size: .325rem;
    color: #fff;
}


@media (min-width: 475px){
    .text-box h1{
        font-size: 1.25rem;
    }
    .text-box h2{
        font-size: 0.75rem;
    }
    .text-box p{
        font-size: 0.5rem;
    }
}

@media (min-width: 640px){
    .text-box h1{
        font-size: 1.5rem;
    }
    .text-box h2{
        font-size: 1.25rem;
    }
    .text-box p{
        font-size: 0.75rem;
    }

}

@media (min-width: 767px){
    .text-box h1{
        font-size: 2rem;
    }
    .text-box h2{
        font-size: 1.5rem;
    }
    .text-box p{
        font-size: 1rem;
    }

}

@media (min-width: 1024px){
    .text-box h1{
        font-size: 2.5rem;
    }
    .text-box h2{
        font-size: 1.75rem;
    }
    .text-box p{
        font-size: 1.25rem;
    }

    .sub-header{
        height: 50lvh;
    }

}



/* xs */
/*@media (min-width: 475px) {}*/

/* sm */
/*@media (min-width: 640px) {}*/

/* md */
/*@media (min-width: 768px) {}*/

/* lg */
/*@media (min-width: 1024px) {}*/

/* xl */
/*@media (min-width: 1280px) {}*/

/* 2xl */
/*@media (min-width: 1536px) {}*/