:root {
    --text-color: #1B1F3BFF;
    --color-blue: #526ed3;
    --color-blue-light: #6c86e2;
    --color-blue-dark: #4262c5;
    --font-size: 16px;
    --font-title: 2.5em;
    --font-title-s: 1.4em;
}
html{
    scroll-behavior: smooth;
}

body{
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: Manrope, -apple-system, "system-ui", system-ui, Roboto, "Segoe UI", "Helvetica Neue", sans-serif !important;
    font-size: var(--font-size);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}
body div {
    box-sizing: border-box;
}
a{
    text-decoration: none !important;
}
.font-title{
    font-size: var(--font-title);
}
.font-title-s{
    font-size: var(--font-title-s) !important;
}
.b4y_btn, .b4y_btn_xs {
    background-color: var(--color-blue) !important;
    color: #ffffff;
    border-radius: 20px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border: none !important;
}
.b4y_btn:hover , .b4y_btn_xs:hover{
    background-color: var(--color-blue-light) !important;
}
.b4y_btn{
    padding: 15px 35px;
    font-size: var(--font-title-s);
}
.b4y_btn_xs{
    padding: 10px 25px;
    font-size: var(--font-size);
}
.body-content{
    width: 100%;
    max-width: 1920px;
    margin-top: 76px;
}
.logo{
    font-weight: 300;
    display: flex;
    align-items: center;
}
.logo-img {
    height: 50px;
    margin-right: 5px;
}
.menu a {
    margin-left: 50px;
}
.lang-select-container{
    width: 110px;
    margin-right: 10px;
}
.headline {
    justify-content: space-between;
    display: flex;
    background-image: url("images/headline1.png");
    background-position-x: center;
    background-repeat: no-repeat;
}
.headline-content{
    position: relative;
}
.headline-image{
    object-fit: none;
    position: relative;
}
.headline-content-title{
    font-size: var(--font-title);
}
.headline-content-description{
    margin-top: 30px;
    font-size: var(--font-title-s);
}


.headline-content-button{
    margin-top: 20px;
}
.help {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-image: url("images/help.png");
    background-position-x: right;
    background-position-y: top;
    background-repeat: no-repeat;
}
.help-content{
    display: flex;
    align-items: center;
    justify-content: center;
}
.help-items-container{
    flex: 1;
    display: flex;
    justify-content: center;
}
.help-items{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.content-block{
    padding: 0px 20px;
    max-width: 450px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    margin-bottom: 80px;
}
.help-item{
    width: 280px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin: 15px;
    box-sizing: border-box;
    border-radius: 50px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px #1B1F3B0F;
    opacity: 0;

}
.help-item-img1, .help-item-img2, .help-item-img3, .help-item-img4{
    padding: 10px;
    border-radius: 10px;
    color: #ffffff;
}
.help-item-img1 i, .help-item-img2 i, .help-item-img3 i, .help-item-img4 i{
    font-size: 60px;
}
.help-item-title{
    font-size: var(--font-title-s);
    width: 200px;
    text-align: center;
    margin-top: 15px;
}
.help-item-desc{
    text-align: center;
    margin-top: 10px;
}
.help-item-img1{
    background-color: #FF007A;
    transition: opacity 0.5s ease;
}
.help-item-img2{
    background-color: var(--color-blue);
}
.help-item-img3{
    background-color: #FF9900;
}
.help-item-img4{
    background-color: #00DA71;
}
.price{
    min-height: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url("images/price.png");
    background-repeat: no-repeat;
    background-position-y: 20px;
    background-position-x: center;
}
.price-title {
    text-align: center;
    font-size: var(--font-title);
}
.price-content{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    margin-top: 50px;
}
footer{
    width: 100%;
    border-top: 1px solid #E1E2E2;
}
.footer{
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
}
.contacts {
    margin-left: 40px;
    height: 100px;
    padding: 20px;
}
.footer-social{
    flex: 1;
    text-align: right;
}
hr {
    /*margin: 50px;*/
    border: none;
    color: #E1E2E2;
    background-color: #E1E2E2;
    height: 1px;
}
.price-content-item{
    padding: 30px;
    max-width: 500px;
}
.v-hr{
    border-right: 1px solid #E1E2E2;
}
.social-round-icon{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: var(--font-title-s);
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
    border-radius: 40px;
    padding: 7px;
    margin: 7px;
}
.social-round-icon:hover{
    background-color: var(--color-blue);
    color: #ffffff;
}
@media (max-width: 770px) {
    body, .navbar-brand, .navbar-toggler {
        font-size: 0.8em !important;
    }
    .body-content{
        margin-top: 56px;
    }
    .logo-img {
        height: 30px;
    }
    .headline-image, .headline-content-description, .price .v-hr{
        display: none;
    }
    .navbar{
        font-size: 1.5em !important;
    }
    .price, .headline, .help{
        background-image: none;
    }
    .headline,.price{
        background-color: #F4F9FF;
    }
    .footer{
        padding: 10px;
    }
    .price-title{
        margin-top: 50px;
    }
}
@media (min-width: 770px) {
    .help-items{
        max-width: 660px;
    }
    .help, .price{
        margin-top: 100px;
    }
    .headline-content, .help-content{
        width: 50%;
    }
    .left-animation{
        position: relative;
        left: -2000px;
        transition: left 0.8s cubic-bezier(.68,.85,.74,1.1);
    }
    .headline-image{
        right: -2000px;
        transition: right 0.8s cubic-bezier(.68,.85,.74,1.1);
    }
    .help-item-1{
        transition: opacity 0.5s ease 0.8s;
    }
    .help-item-2{
        transition: opacity 0.5s ease 1.3s;
    }
    .help-item-3{
        transition: opacity 0.5s ease 1.8s;
    }
    .help-item-4{
        transition: opacity 0.5s ease 2.3s;
    }
}