#landing-header {
    width: 100vw;
    height: 400px;
    background-image: url("../images/homepage-final.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#landing-header-section {
    padding-left: 8%;
    padding-top: 4%;
    padding-bottom: 4%;
    width: 60%;
    height: 100%;
    background-image: linear-gradient(to left, rgba(255,0,0,0), rgb(0, 0, 0));
}

#landing-header-titel {
    color: white;
    font-size: 2.8em;
    padding-bottom: 6%
}

.landing-header-p {
    font-size: 20px;
    color: rgb(214, 214, 214);
    padding-bottom: 2%;
    width: 60%;
}




/* info section */
.landing-info-section {
    padding-left: 8%;
    padding-right: 8%;
    padding-top: 4%;
    padding-bottom: 4%;
}

.landing-info-text {
    width: 100%;
}

.landing-info-titel {
    font-size: 2em;
    padding-bottom: 2%;
    color: #3f3f3f;
}

.landing-info-bold-p {
    font-size: 20px;
    padding-bottom: 2%;
    color: #646464;
}

.landing-info-p {
    font-size: 18px;
    padding-bottom: 2%;
    color: #646464;
}




/* icons section */
#landing-icon-section-mobile {
    display: none;
}

.landing-icons-section {
    padding-left: 8%;
    padding-right: 8%;
    padding-top: 0;
    padding-bottom: 4%;
}

.landing-icons-row {
    display: flex;
    padding: 2%;
}

.icon-box {
    display: flex;
    width: 33%;
    padding: 2%;
}

.icons i {
    color: #449ea9;
    z-index: 100;
    position: relative;
    top: -10%;
    left: -20%;
}

.icon-text {
    z-index: 150;
}

.icon-text-titel {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 1%;
    color: #3f3f3f;
}

.icon-text-p {
    font-size: 18px;
    padding-bottom: 2%;
    color: #646464;
}





@media only screen and (max-width: 1024px) {
    #landing-header {
        width: 100vw;
        height: 400px;
    }
    
    #landing-header-section {
        padding-left: 10%;
        padding-top: 5%;
        padding-bottom: 5%;
        width: 80%;
    }
    
    #landing-header-h1 {
        font-size: 2em;
        padding-bottom: 6%
    }
    
    #landing-header-p {
        font-size: 18px;
        padding-bottom: 2%;
        width: 60%;
    }

    .landing-info-section {
        padding-left: 10%;
        padding-right: 8%;
        padding-top: 5%;
        padding-bottom: 5%;
    }

    .landing-info-titel {
        font-size: 1.5em;
    padding-bottom: 2%;
    }

    .landing-info-bold-p {
        font-size: 16px;
        padding-bottom: 5%;
    }
    

    .landing-info-p {
        font-size: 16px;
        padding-bottom: 5%;
    }

    .icon-text-titel {
        font-size: 16px;
    }

    .icon-text-p {
        font-size: 16px;
    }

    .icons i {
        font-size: 2.5em;
        position: relative;
        top: -5%;
        left: -30%;
    }
}


@media only screen and (max-width: 740px) {
    #landing-header {
        height: 450px;
    }

    #landing-header-section {
        width: 95%;
    }
    
    #landing-header-p {
        width: 100%;
    }
    /* icons */
    .landing-icons-section {
        display: none;
    }

    #landing-icon-section-mobile {
        display: block;
        padding-left: 10%;
        padding-right: 8%;
        padding-top: 5%;
        padding-bottom: 5%;
    }

    .landing-icons-row {
        display: flex;
        padding: 2%;
    }
    
    .icon-box {
        display: flex;
        width: 50%;
        padding: 3%;
    }
    
    .icons i {
        color: #449ea9;
        z-index: 100;
        position: relative;
        top: -3%;
        left: -20%;
        font-size: 2em;
    }
    
    .icon-text {
        z-index: 150;
    }
    
    .icon-text-titel {
        font-size: 14px;
        font-weight: bold;
        padding-bottom: 1%;
        color: #3f3f3f;
    }
    
    .icon-text-p {
        font-size: 14px;
        padding-bottom: 2%;
        color: #646464;
    }
}











/* Mobile */
@media only screen and (max-width: 480px) {
    #landing-header {
        width: 100vw;
        height: 400px;
    }
    
    #landing-header-section {
        padding-left: 10%;
        padding-top: 5%;
        padding-bottom: 5%;
        width: 100%;
    }
    
    #landing-header-titel {
        font-size: 2.8em;
        padding-bottom: 6%
    }
    
    .landing-header-p {
        font-size: 18px;
        padding-bottom: 2%;
        width: 70%;
    }

    /* info */
    .landing-info-section {
        padding-left: 10%;
        padding-right: 8%;
        padding-top: 5%;
        padding-bottom: 5%;
    }
    
    .landing-info-text {
        width: 100%;
    }
    
    .landing-info-titel {
        font-size: 2em;
        padding-bottom: 2%;
    }
    
    .landing-info-bold-p {
        font-size: 18px;
        padding-bottom: 5%;  
    }
    
    .landing-info-p {
        font-size: 16px;
        padding-bottom: 5%;
    }
}







@media only screen and (max-width: 390px) {
    #landing-header {
        height: 425px;
    }

    .landing-icons-row {
        flex-direction: column;
    }

    .icon-box {
        width: 100%;
    }

    .icons {
        padding-right: 2%;
    }

}