/*----------------------------------------------------------*/
/* PRESETS */
/*----------------------------------------------------------*/
header {
    position: relative;
    z-index: 5;
    overflow: hidden;
}

header .bg-img-container {
    position: absolute;
    overflow: hidden;
    right: -50px;
    bottom: 25px;
}

header .bg-img-container img {
    height: 400px;
    opacity: 0.25;
}

header .header-body {
    padding: 15% 10% 10% 10%;
    width: 70%;
}

header .header-body h1 {
    color: var(--main-text-color);
}

header .header-body p {
    width: 90%;
}



/*----------------------------------------------------------*/
/* SERVICE LIST */
/*----------------------------------------------------------*/
.service-list {
    position: relative;
    background-color: var(--main-global-color);
    padding: 5% 10% 5% 10%;
    z-index: 10;
}

.service-list .topic-list-container {
    padding: 7% 0;
}

.service-list .list-title h3 {
    color: var(--white-text-color);
    font-size: 2em;
}

.service-list .list-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.service-list .list-content .list-content-items {
    padding: 0;
    margin: 0;
}

.service-list .list-content .list-content-items li {
    display: block;
    color: var(--white-text-color);
    font-family: var(--regular-title-font);
    padding: 8px 0;
    margin: 0;
}

.service-list .list-content .list-content-items li img {
    margin-top: -3px;
    padding-right: 5px;
}

.service-list .topic-divider {
    position: relative;
    width: 100%;
    height: 1px;
    opacity: .3;
    background-color: white;
}



/*----------------------------------------------------------*/
/* MOBILE SETTINGS */
/*----------------------------------------------------------*/
@media (max-width: 500px) {
    header {
        padding-bottom: 10%;
    }

    header .bg-img-container {
        position: relative;
        margin-top: 40%;
        right: 0;
    }

    header .bg-img-container img {
        height: 300px;
        opacity: 0.25;
    }

    header .header-body {
        padding: 10% 5%;
        width: 100%;
    }
    
    header .header-body p {
        width: 100%;
    }

    .service-list .list-content {
        display: block;
    }

    .service-list .list-content .list-content-items {
        padding-top: 20px;
    }

    .service-list .list-content .list-content-items li {
        padding: 2px 0;
    }
}