/* * */
* {
    font-family: 'Exo', sans-serif;
}

body {
    background: #101010 !important;
}

.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-title-section {
    background-color: #101010;
    padding: 50px 0px;
}

.box-title-section {
    text-align: center;
    background-color: #B1FF00;
    padding: 10px 20px;
}

.title-section {
    color: #101010;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* navbar */
.navbar {
    background-color: #101010;
}

.nav-link {
    color: #EDEDED !important;
    font-weight: 700;
}

.nav-link:hover {
    color: #B1FF00 !important;
}

.active {
    color: #B1FF00 !important;
    font-weight: 700;
}

span > i {
    color: #B1FF00;
}

/* header */
.header {
    width: 100vw;
    height: 90vh;
    background-image: url("img/Stadsverwarming-2.JPG");
    background-size: cover;
    background-position: 32% 58%;
    background-repeat: no-repeat;
}

.header-logo {
    width: 100%;
}

/* diensten */
.diensten {
    background-color: #101010;
}

.dienst-1 {
    width: 100%;
    height: 300px;
    background-image: url("img/");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dienst-2 {
    width: 100%;
    height: 300px;
    background-image: url("img/");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.title-dienst {
    text-align: center;
    color: #EDEDED;
    font-size: 1.5rem;
    font-weight: 700;
}

.box-btn-dienst {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-dienst {
    color: #B1FF00;
    text-align: center;
    width: 20%;
    font-size: 1rem;
    font-weight: 700;
    padding: 10px 20px;
    border: 2px solid #B1FF00;
    border-radius: 5px;
    text-decoration: none;
    transition: .5s;
}

.btn-dienst:hover {
    color: #101010;
    background-color: #B1FF00;
    text-align: center;
    width: 30%;
}

/* over mij */
.over-mij {
    width: 100%;
    height: 500px;
    background-image: url("img/Farmaceutische-industrie-1.JPG");
    background-size: cover;
    background-position: 68% 32%;
    background-repeat: no-repeat;
}

.box-btn-over-mij, .box-text-over-mij {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-over-mij {
    color: #B1FF00;
    text-align: center;
    width: 40%;
    font-size: 1rem;
    font-weight: 700;
    padding: 10px 20px;
    border: 2px solid #B1FF00;
    border-radius: 5px;
    text-decoration: none;
    transition: .5s;
}

.btn-over-mij:hover {
    color: #101010;
    background-color: #B1FF00;
    text-align: center;
    width: 50%;
}

.text-over-mij {
    color: #EDEDED;
    font-size: 1rem;
    font-weight: 400;
}

/* sectoren */
.sectoren {
    background-color: #101010;
}

.sector-1 {
    width: 100%;
    height: 300px;
    background-image: url("img/Installatietechniek-2.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.sector-2 {
    width: 100%;
    height: 300px;
    background-image: url("img/Voedingsindustrie-2.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.sector-3 {
    width: 100%;
    height: 300px;
    background-image: url("img/Farmaceutische-industrie-1.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.sector-4 {
    width: 100%;
    height: 300px;
    background-image: url("img/Stadsverwarming-2.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.title-sector {
    text-align: center;
    color: #EDEDED;
    font-size: 1.5rem;
    font-weight: 700;
}

.box-btn-sector {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-sector {
    color: #B1FF00;
    text-align: center;
    width: 20%;
    font-size: 1rem;
    font-weight: 700;
    padding: 10px 20px;
    border: 2px solid #B1FF00;
    border-radius: 5px;
    text-decoration: none;
    transition: .5s;
}

.btn-sector:hover {
    color: #101010;
    background-color: #B1FF00;
    text-align: center;
    width: 30%;
}

/* contact */
.box-contact-middle {
    background-color: #262626;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.box-contact-right {
    background-color: #EDEDED;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.icon-contact-light {
    font-size: 3rem;
    color: #EDEDED;
}

.hr-light {
    width: 70%;
    height: 5px;
    margin: 4% 15%;
    background-color: #EDEDED;
}

.info-contact-light {
    font-size: 1.5rem;
    color: #EDEDED;
    font-weight: 700;
    text-transform: uppercase;
}

.icon-contact-dark {
    font-size: 3rem;
    color: #262626;
}

.hr-dark {
    width: 70%;
    height: 5px;
    margin: 4% 15%;
    background-color: #262626;
}

.info-contact-dark {
    font-size: 1.5rem;
    color: #262626;
    font-weight: 700;
    text-transform: uppercase;
}

/* footer */
.footer {
    background-color: #202020;
    padding: 50px 0px;
}

.title-footer {
    text-align: left;
    color: #EDEDED;
    font-size: 2.5rem;
    font-weight: 700;
}

.link-footer {
    display: flex;
    list-style-type: none;
}

.link-footer > li > a {
    color: #606060;
    text-decoration: none;
    padding: 0px 10px;
    transition: .5s;
}

.link-footer > li > a:hover {
    color: #B1FF00;
}

.link-footer-social {
    display: flex;
    list-style-type: none;
}

.link-footer-social > li > a {
    color: #606060;
    text-decoration: none;
    padding: 0px 10px;
    transition: .5s;
}

.link-footer-social > li > a:hover {
    color: #B1FF00;
}

.copyright {
    text-align: center;
    background-color: #202020;
    color: #EDEDED;
    margin: 0px;
    padding: 0px;
}

.copyright > a {
    color: #EDEDED;
    text-decoration: none;
    transition: .5s;
}

.copyright > a:hover {
    color: #B1FF00;
}

/* diensten pagina */
.diensten-page {
    background-color: #101010;
    padding: 100px 0px;
}

.text-dienst-page {
    color: #EDEDED;
    font-size: 1rem;
    font-weight: 400;
}

.sub-title-page {
    color: #EDEDED;
    font-size: 1.5rem;
    font-weight: 700;
}

.dienst-title {
    color: #EDEDED;
    font-size: 1rem;
    font-weight: 700;
}

/* over mij pagina */
.header-over-mij-page {
    width: 100vw;
    height: 40vh;
    background-image: url("img/Stadsverwarming-2.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.over-mij-page {
    background-color: #101010;
    padding: 100px 0px;
}

.title-section-page {
    background-color: #B1FF00;
    padding: 10px 20px;
    color: #101010;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.text-over-mij-page {
    color: #EDEDED;
    font-size: 1rem;
    font-weight: 400;
}

.img-over-mij-page {
    width: 100%;
}

/* sectoren pagina */
.sectoren-page {
    background-color: #101010;
    padding: 100px 0px;
}

.text-sector-page {
    color: #EDEDED;
    font-size: 1rem;
    font-weight: 400;
}

.sector-box-1 {
    width: 100%;
    height: 300px;
    background-image: url("img/Installatietechniek-2.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
}
.sector-box-2 {
    width: 100%;
    height: 300px;
    background-image: url("img/Voedingsindustrie-2.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
}
.sector-box-3 {
    width: 100%;
    height: 300px;
    background-image: url("img/Farmaceutische-industrie-1.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
}
.sector-box-4 {
    width: 100%;
    height: 300px;
    background-image: url("img/Stadsverwarming-2.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
}
.sector-box-5 {
    width: 100%;
    height: 300px;
    background-image: url("img/Gecertificeerd-laswerk-3.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
}
.sector-box-6 {
    width: 100%;
    height: 300px;
    background-image: url("img/Apparatenbouw-1.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
}

.sector-title {
    color: #EDEDED;
    font-size: 1.5rem;
    font-weight: 700;
}

/* contact pagina */
.header-contact-page {
    width: 100vw;
    height: 40vh;
    background-image: url("img/Stadsverwarming-2.JPG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.contact-page {
    background-color: #101010;
    padding: 100px 0px;
}

.list-contact {
    list-style-type: none;
}

.list-item-contact {
    color: #EDEDED;
    font-size: 1rem;
}

.list-item-contact > a {
    color: #EDEDED;
    transition: .5s;
}

.list-item-contact > a:hover {
    color: #B1FF00
}

li > strong {
    color: #B1FF00;
}

/* algemene voorwaarden */
.algemene-voorwaarden {
    padding: 100px 0px;
    height: 80vh;
}

/* tablet */
@media screen and (max-width: 992px) {
    
}
  
/* mobiel */
@media (max-width: 550px) {
    .btn-dienst {
        color: #B1FF00;
        text-align: center;
        width: 80%;
        font-size: 1rem;
        font-weight: 700;
        padding: 10px 20px;
        border: 2px solid #B1FF00;
        border-radius: 5px;
        text-decoration: none;
        transition: .5s;
    }
    
    .btn-dienst:hover {
        color: #101010;
        background-color: #B1FF00;
        text-align: center;
        width: 100%;
    }

    .btn-over-mij {
        color: #B1FF00;
        text-align: center;
        width: 80%;
        font-size: 1rem;
        font-weight: 700;
        padding: 10px 20px;
        border: 2px solid #B1FF00;
        border-radius: 5px;
        text-decoration: none;
        transition: .5s;
    }

    .btn-over-mij:hover {
        color: #101010;
        background-color: #B1FF00;
        text-align: center;
        width: 100%;
    }

    .btn-sector {
        color: #B1FF00;
        text-align: center;
        width: 80%;
        font-size: 1rem;
        font-weight: 700;
        padding: 10px 20px;
        border: 2px solid #B1FF00;
        border-radius: 5px;
        text-decoration: none;
        transition: .5s;
    }
    
    .btn-sector:hover {
        color: #101010;
        background-color: #B1FF00;
        text-align: center;
        width: 100%;
    }

    .box-contact-middle {
        background-color: #262626;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    .box-contact-right {
        background-color: #EDEDED;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .info-contact-dark {
        font-size: 1rem;
    }

    .info-contact-light {
        font-size: 1rem;
    }

    .title-footer {
        text-align: center;
        color: #EDEDED;
        font-size: 2rem;
        font-weight: 700;
    }

    .link-footer {
        padding: 0px;
        display: unset;
        list-style-type: none;
    }

    .link-footer-social {
        padding: 0px;
        display: flex;
        list-style-type: none;
    }
}