html{scroll-behavior:smooth}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Verdana";
}

p{
    font-size: 1.5rem;
}

h2{
    font-size: 1.9rem;
}


nav{
    position: sticky;
    top: 0;
    display: flex;
    background: #84A98C;
    height: 7vh;
    justify-content: left;
    z-index: 99;
    font-weight: bolder;

}
.navLinks{
    display: flex;
    width: 30%;
    display: flex;
    justify-content: left;
    align-items: center;
}

.navContact{
    left: 0;
    display: flex;
    width: 68%;
    display: flex;
    justify-content: left;
    align-items: center;
}

.navLink{
    text-decoration: none;
    color: black;
    margin: 0 2%;
    font-size: 180%;
    width: 35%;
}

#navBarMailLink{
    width: 65%;
}

#headerSection{
    width: 100%;
    height: 10vh;
    background-color: #84A98C;
    display: flex;
    justify-content: center;
    align-items: center;
}
#headerSection h1{
    text-align: center;
}



#advantageSection{
    background-color: #CAD2C5;
    width: 90%;
    margin: auto;
    border-radius: 20px;
    padding: 1%;
    box-shadow: 4px 4px 11px -5px rgba(0,0,0,0.46);
}

#takeSection{
    background-color: #CAD2C5;
    width: 90%;
    margin: 5vh auto;
    border-radius: 20px;
    padding: 1%;
    box-shadow: 4px 4px 11px -5px rgba(0,0,0,0.46);
}
.advantageIcon{
    width: 20%;
}

#advantagesBox{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: 0% 3%;
}

#takeBox{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: 0% 3%;
}

#takeBox, #priceText, #advantagesBox{
    margin-bottom: 2.5vh;
}

#iOfferHeader, #takeHeader, #priceHeader{
    margin-top: 2.5vh;
    margin-bottom: 2.5vh;
}

#takeHeader{
    text-align: center;
    width: 100%;
    color: white;
    font-size: 400%;
}
.advantage{
    width: 30%;
    background-color: #ffffff;
    border-radius: 20px;
    text-align: center;
    padding: 1% 2% 2% 2%;
}
.advantage h2{
    margin-bottom: 2vh;
}
#iOfferHeader{
    text-align: center;
    width: 100%;
    color: white;
    font-size: 400%;
}


#priceSection{
    background-color: #CAD2C5;
    width: 90%;
    margin: auto;
    border-radius: 20px;
    padding: 1%;
    box-shadow: 4px 4px 11px -5px rgba(0,0,0,0.46);
}

#pricesBox{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: 3%;
}
.price{
    width: 20%;
    background-color: #ffffff;
    border-radius: 20px;
    text-align: center;
    padding: 2%;
}
.price h2{
    margin-bottom: 2vh;
    font-size: 200%;
}
.price h3{
    font-size: 205%;
}
#priceHeader{
    text-align: center;
    font-size: 400%;
    width: 100%;
    color: white;
}
#priceText{
    width: 80%;
    background-color: #ffffff;
    border-radius: 20px;
    text-align: center;
    padding: 2%;
    margin: auto auto 5vh;
    font-size: 1.5rem;
}


#quoteSection{
    background-color: #52796F;
    width: 70%;
    margin: 5vh auto;
    border-radius: 20px;
    padding: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 4px 4px 11px -5px rgba(0,0,0,0.46);
}

#quoteImageBox img{
    border-radius: 100%;
    width: 100%;
}

#quoteImageBox{
    width: 30%;
}
#quoteText {
    width: 80%;
    font-size: 170%;
    text-align: center;
    margin-top: 1vh;
    color: white;
    font-weight: bold;
}

strong{
    color: #52796f;
    font-weight: 800;
}

.imprintHeader{
    font-size: 200%;
    color: #52796F;
}

.imprintHeader2{
    font-size: 150%;
    color: #52796F;
}

#footerBox{
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
}
.footerSection{
    height: auto;
    width: 15%;
}

#footerContact{
    width: 40%;
}

footer{
    background-color: #52796f;
    padding: 2.5%;
    box-shadow: 0px -4px 11px -5px rgba(0,0,0,0.46);
    margin-top: 15vh;
    color: #cad2c5;
    font-size: 1.4rem;
}

.footerLine{
    width: 100%;
    display: flex;
    margin: 2% 0%;
    align-items: center;
}

.footerLine img{
    width: 7.5%;
    margin-right: 3%;
}

.mapsBox{
    display: flex;
    justify-content: right;
    width: 20vw;
    height: 15vw;
    margin: auto 0;
}

.footerText, .footerLink{
    width: 100%;
    font-size: 1.2rem;
    font-weight: bolder;
    color: white;
}

.footerLink{
    text-decoration: none;
    color: white;
    margin: 2% 0%;
    width: 100%;
}
.footerLinkBox{
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: flex-start;
    flex-direction: column;
    margin-left: 15%;
    height: 100%;
}

.footerHeader{
    font-size: 150%;
    border-bottom: solid black 2px;
    width: 100%;
    margin: 2vh 0%;
    color: white;
}

.problemItem, .offerItem, .experienceItem{
    border-radius: 20px;
    text-align: center;
    margin: 1%;
    height: 6vh;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 4px 4px 11px -5px rgba(0,0,0,0.46);
    background-color: #52796f;
    padding: 3.5%;
}


.experienceItem{
    width: 80%;
    margin: 1% auto;
    font-size: 120%;
}

.experienceItem h2{
    font-weight: normal;
}
#experienceItemColor1{
    background-color: #52796f;
}
#experienceItemColor2{
    background-color: #618479;
}
#experienceItemColor3{
background-color: #6e8e83;
}
#experienceItemColor4{
background-color: #809b90;
}
#experienceItemColor5{
background-color: #8da599;
}
#experienceItemColor6{
background-color: #9cb1a4;
}
#experienceItemColor7{
background-color: #adbdb0;
}


.infoHeaderBox{
    border-radius: 20px;
    width: 60%;
    text-align: center;
    padding: 5%;
    margin: 12% auto 5% auto;
    height: 6vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #52796f;
    color: white;
    box-shadow: 4px 4px 11px -5px rgba(0,0,0,0.46);
}

.problemHeader{
    font-weight: 400;
    font-size: 200%;
}

.problemItem{
    width: 23%;

}

.offerItem{
    width: 31.3%;
}
.problemItemColorOne{
    background-color: #84A98C;
}

.problemItemColorTwo{
    background-color: #cad2c5;
}

.problemItemColorThree{
    background-color: #52796f;
    color: white;
}

#problems, #offers{
    display: flex;
    flex-wrap: wrap;
}
#problems h2{
    font-weight: normal;
    font-size: 1.3rem;

}

#offers h2{
    font-weight: normal;
    font-size: 1.3rem;
}

/*
#arrowContainer{
    width: 5%;
    height: auto;
    position: absolute;
    top: 80%;
    left: 47.5%;
    transition: transform 1s;
}
#arrowContainer img{
    width: 100%;
}

#arrowContainer a{
    color: #84A98C;
    font-size: 500%;
    user-select: none;
    text-decoration: none;
    position: absolute;
}
#arrowContainer:hover{
    cursor: pointer;
    transform: scale(1.5);
    transition: transform 1s;
}*/

@media only screen and (max-width: 1000px) {

    nav{
        font-size: 110%;
    }
    #advantagesBox{
        flex-direction: column;
        align-items: center;
    }
    .advantage{
        width: 80%;
        margin: 2%;
    }
    #takeBox{
        flex-direction: column;
        align-items: center;
    }
    h1{
        font-size: 2.5rem;
    }

    h2{
        font-size: 250%;
    }
    .advantage{
        width: 90%;
    }
    .advantageIcon{
        width: 10%;
    }
    #quoteSection{
        width: 90%;
    }
    #quoteSection p{
        width: 100%;
        font-weight: normal;
        font-size: 120%;
    }
    #quoteImageBox{
        width: 40%;
    }
    #quoteText{
        width: 90%;
    }
    #footerBox{
        flex-direction: column;
    }
    .footerLine img{
        width: 4%;
        margin-right: 3%;
    }
    .footerLinkBox{
        margin: 0%;
    }
    .footerLink{
        margin: 1% 0%;
    }
    .problemItem, .offerItem{
        width: 48%;
        font-size: 120%;
    }
    .experienceItem h2{
        font-size: 160%;
    }
    #problems h2{
        font-weight: normal;
        font-size: 1.75rem;
    }

    #offers h2{
        font-weight: normal;
        font-size: 1.6rem;
    }

    .footerSection, #footerContact{
        width: 100%;
    }

    .mapsBox{
        margin-top: 2vh;
        width: 100%;
        height: 20vh;
    }

    .footerText, .footerLink{
        font-size: 1.4rem;
    }
    p, #priceText{
        font-size: 2rem;
    }




}

@media only screen and (max-width: 1200px) {
    #navBarMailLink{
        display: none;
    }
    .navContact{
        width: 40%;
    }
    .navContact .navLink{
        width: 100%;
    }

    .navLinks{
        width: 60%;
        justify-content: flex-end;
    }
    .navLink{
        width: auto;
        margin: 0 5%;
    }

}