@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');


* {
    font-family: "Roboto", sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

.btn {
    background-color: #ff0000;
    color: #fff;
    font-weight: 500;
    border-radius: 100px;
    padding: 14.5px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title {
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 40px;
    text-align: center;
}

.container {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 40px 40px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    position: fixed;
    background-color: #fff;
    width: 100%;
    top: 0;
    z-index: 1;
}

.header__lang-items {
    display: flex;
    flex-direction: column;
}

.header__lang {
    display: flex;
    align-items: center;
    position: relative;
    font-weight: 500;
    cursor: pointer;
}

.header__lang-selector {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.header__lang-selector:after {
    content: '';
    display: flex;
    background-image: url("data:image/svg+xml,%3Csvg focusable='false' width='13' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3 1L6.5 5.7 1.7 1l-.7.7L6.5 7 12 1.7l-.7-.7z'%3E%3C/path%3E%3C/svg%3E");
    width: 13px;
    height: 8px;
    margin-left: 5px;
}

.header__lang-items {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% - 10px);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 1px rgba(67, 68, 69, 0.3), 0 4px 12px -4px rgba(67, 68, 69, 0.3);
}

.header__lang-item {
    background-color: #fff;
    transition: all .3s;
    padding: 10px 16px;

}

.header__lang-item:hover,
.header__lang-item:focus {
    background-color: #fff1ba;
    transition: all .3s;
}

.header__lang-item_active {
    background-color: #fff1ba;
}

.hero {
    margin-top: 84px;
}

.hero__content {
    display: flex;
}

.hero__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    object-position: top;
}

.hero__offer {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    flex-shrink: 0;
    background-color: #f8f8f8;
    border-radius: 40px;
    padding: 40px 12px 40px 40px;
    margin-right: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.hero__img {
    position: relative;
    width: 100%;
    border-radius: 40px;
    overflow: hidden;
    height: 590px;
}

.hero__container {
    max-width: initial;
    padding: 0 40px;
}

.hero__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
    margin-bottom: 40px;
    margin-left: -20px;
}

.hero__title_az {
    flex-direction: column-reverse;
    margin-bottom: 25px;
}

.hero__title_az .hero__title-first {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    letter-spacing: -7px;
    font-size: 94px;
    font-weight: 800;

}

.hero__title-first {
    font-size: 110px;
}

.hero__title-second {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 94px;
    letter-spacing: -7px;
    font-weight: 800;
    background-color: #FFE033;
    position: relative;
    transform: rotate(-3deg);
    margin-top: -18px;
}

.hero__title-second:after {
    content: "";
    position: absolute;
    display: block;
    right: -29px;
    top: -1px;
    width: 30px;
    height: calc(100% + 2px);
    background-color: #FFE033;
    clip-path: polygon(99.376% 0%, 0% 0%, 0% 99.447%, 99.376% 99.447%, 99.376% 68.612%, 99.376% 68.612%, 99.26% 68.613%, 99.144% 68.614%, 99.029% 68.614%, 98.913% 68.615%, 98.797% 68.616%, 98.681% 68.616%, 98.565% 68.616%, 98.449% 68.617%, 98.333% 68.617%, 98.217% 68.617%, 98.217% 68.617%, 89.767% 68.354%, 81.752% 67.593%, 74.277% 66.376%, 67.452% 64.743%, 61.382% 62.736%, 56.175% 60.397%, 51.939% 57.766%, 48.78% 54.885%, 46.806% 51.796%, 46.125% 48.539%, 46.125% 48.539%, 46.806% 45.283%, 48.78% 42.193%, 51.939% 39.313%, 56.175% 36.682%, 61.382% 34.343%, 67.452% 32.336%, 74.277% 30.703%, 81.752% 29.486%, 89.767% 28.725%, 98.217% 28.462%, 98.217% 28.462%, 98.333% 28.462%, 98.449% 28.462%, 98.565% 28.463%, 98.681% 28.463%, 98.797% 28.463%, 98.913% 28.464%, 99.029% 28.464%, 99.144% 28.465%, 99.26% 28.466%, 99.376% 28.467%, 99.376% 0%);
    box-shadow: 0px 2.1px 2.1px 0px #00000026;
    z-index: -1;
}

.hero__title-second:before {
    content: "";
    position: absolute;
    display: block;
    left: -29px;
    top: -1px;
    width: 30px;
    height: calc(100% + 2px);
    background-color: #FFE033;
    clip-path: polygon(1.54% 0.755%, 99.847% 0.755%, 99.847% 99.177%, 1.54% 99.177%, 1.54% 68.646%, 1.54% 68.646%, 1.902% 68.652%, 2.265% 68.658%, 2.628% 68.663%, 2.992% 68.667%, 3.356% 68.671%, 3.721% 68.674%, 4.087% 68.676%, 4.452% 68.678%, 4.819% 68.679%, 5.186% 68.679%, 5.186% 68.679%, 15.271% 68.419%, 24.838% 67.666%, 33.759% 66.461%, 41.906% 64.845%, 49.15% 62.859%, 55.365% 60.544%, 60.421% 57.94%, 64.191% 55.089%, 66.547% 52.032%, 67.361% 48.809%, 67.361% 48.809%, 66.547% 45.586%, 64.191% 42.528%, 60.421% 39.677%, 55.365% 37.074%, 49.15% 34.758%, 41.906% 32.772%, 33.759% 31.156%, 24.838% 29.952%, 15.271% 29.199%, 5.186% 28.939%, 5.186% 28.939%, 4.819% 28.939%, 4.452% 28.94%, 4.087% 28.942%, 3.721% 28.944%, 3.356% 28.947%, 2.992% 28.951%, 2.628% 28.955%, 2.265% 28.96%, 1.902% 28.966%, 1.54% 28.972%, 1.54% 0.755%);
    box-shadow: 0px 2.1px 2.1px 0px #00000026;
}

.hero__subtitle {
    font-size: 24px;
    font-weight: 500;
}

.hero__btn {
    width: 310px;
    margin-top: 30px;
}

.benefits__items {
    display: flex;
    /*  flex-wrap: wrap;
    justify-content: space-between;*/
    flex-flow: row wrap;
    justify-content: stretch;
}

.benefits__item {
    border-radius: 20px;
    background-color: #f8f8f8;
    padding: 40px;
    width: calc(50% - 10px);
    height: 258px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.benefits__item:nth-child(odd) {
    margin-right: 20px;
}

.benefits__item:nth-child(1),
.benefits__item:nth-child(6) {
    width: calc(50% + 85px - 10px);
}

.benefits__item:nth-child(2),
.benefits__item:nth-child(5) {
    width: calc(50% - 85px - 10px);
}

.benefits__item-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.benefits__item-title {
    font-size: 34px;
    font-weight: 500;
}

.benefits__item-subtitle {
    font-size: 20px;
}

.benefits__item-img {
    flex-shrink: 0;
    margin-left: 10px;
    font-size: 0;
    display: flex;
}

.benefits__item-img img {
    width: 100%;
}

.steps__items {
    display: flex;
    justify-content: space-between;
}

.steps__item {
    width: calc(25% - 20px);
    border-radius: 20px;
    background-color: #f8f8f8;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 213px;
}

.steps__item-title {
    font-size: 20px;
    font-weight: 500;
}

.steps__container {
    max-width: 1520px;
}

.steps__item-num {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #fff;
    font-weight: 600;
    font-size: 36px;
    line-height: 100%;
    text-transform: uppercase;
    color: #f00;
    display: flex;
    align-items: center;
    justify-content: center;
}

.steps__btn {
    margin-top: 40px;
}

.steps__content {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.docs__text {
    padding: 80px;
    background-color: #f8f8f8;
    border-radius: 40px;
}

.docs__title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 24px;
}

.docs__item {
    align-items: center;
    display: flex;
}

.docs__item:not(:last-child) {
    margin-bottom: 15px;
}

.docs__item:before {
    content: '';
    margin-right: 5px;
    display: flex;
    width: 4px;
    height: 4px;
    background: #000;
}

.contacts__content {
    display: flex;
    justify-content: space-between;
}

.contacts_title {
    text-align: initial;
    font-size: 42px;
}

.contacts__text {
    font-size: 20px;
    color: #666;
    max-width: 530px;
}

.contacts__block {
    width: calc(50% - 10px);
    flex-shrink: 0;
}

.contacts__block_right {
    height: 410px;
    border-radius: 20px;
    overflow: hidden;
}

.footer {
    color: #666;
    background-color: #000;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width:1366px) {
    .steps__item-title {
        font-size: 18px;
    }
    .hero__offer {
        max-width: 515px
    }

    .hero__title-second {
        font-size: 80px;
    }

    .hero__subtitle {
        font-size: 18px;
    }

    .hero__img {
        height: 500px;
    }

    .benefits__item-title {
        font-size: 30px;
    }

    .benefits__item-subtitle {
        font-size: 18px;
    }
}

@media (max-width:1200px) {
    .benefits__item-subtitle {
        font-size: 17px;
    }

    .benefits__item {
        height: 228px;
    }
    .docs__text {
        padding: 60px;
    }
}

@media (max-width:980px) {
    .hero__title_az {
        margin-top: 30px;
    }
    .contacts__text {
        font-size: 17px;
    }
    .docs__text {
        padding: 50px;
    }
    .steps__item {
        width: calc(25% - 10px);
    }
    .steps__item-title {
        font-size: 16px;
    }
    .benefits__item {
        padding: 30px;
        height: 200px;
    }

    .benefits__item-img {
        width: 120px;
    }

    .benefits__item-title {
        font-size: 23px;
    }

    .benefits__item-subtitle {
        font-size: 16px;
    }

    .hero__content {
        flex-direction: column-reverse;
    }

    .hero__offer {
        max-width: initial;
        align-items: center;
        margin-right: initial;
        margin-top: 20px;
        padding: 20px 40px 40px;
    }

    .hero__title {
        margin-left: initial;
    }

    .hero__title-first {
        font-size: 90px;
    }

    .hero__subtitle {
        text-align: center;
        max-width: 400px;
    }

    .benefits__item-subtitle br {
        display: none;
    }
    .title {
        font-size: 40px;
    }
    .hero__title_az .hero__title-first {
        font-size: 80px;
        letter-spacing: -5px;
    }
}


@media (max-width:890px) {
    .contacts__text {
        max-width: 460px;
    }
    .title {
        margin-bottom: 30px;
    }
    .contacts__block {
        width: 100%;
    }
    .contacts__block_left {
        margin-bottom: 35px;
    }
    .contacts__content {
        flex-direction: column;
    }
    .steps__item-title br {
        display: initial;
    }
    .steps__item-title {
        font-size: 18px;
        max-width: 250px;
    }
    .steps__btn {
        margin-top: 20px;
    }
    .steps__items {
        flex-wrap: wrap;
    }
    .steps__item {
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }
    .benefits__item-title {
        font-size: 20px;
    }

    .benefits__item:nth-child(1),
    .benefits__item:nth-child(6) {
        width: calc(50% + 85px - 6px);
    }

    .benefits__item:nth-child(2),
    .benefits__item:nth-child(5) {
        width: calc(50% - 85px - 6px);
    }

    .benefits__item {
        width: calc(50% - 6px);
        margin-bottom: 12px;
    }

    .benefits__item:nth-child(odd) {
        margin-right: 12px;
    }
}


@media (max-width:768px) {
    .contacts__block_right {
        height: 320px;
    }
    .title {
        font-size: 35px;
    }
    .benefits__item-img {
        width: 140px;
    }
    .benefits__item-subtitle {
        max-width: 255px;
    }
    .benefits__item-subtitle br {
        display: initial;
    }
    .benefits__item-title {
        max-width: 270px;
        font-size: 25px;
    }

    .benefits__item:nth-child(1),
    .benefits__item:nth-child(6) {
        width: 100%;
    }

    .benefits__item:nth-child(2),
    .benefits__item:nth-child(5) {
        width: 100%;
    }

    .benefits__item {
        padding: 30px 20px 30px 30px;
        width: 100%;
        margin-bottom: 12px;
    }

    .benefits__item:nth-child(odd) {
        margin-right: initial;
    }

    .hero__title-first {
        font-size: 70px;
    }

    .hero__title-second {
        font-size: 60px;
        margin-top: -10px;
        letter-spacing: -5px;
    }

    .container {
        padding: 60px 30px 30px;
    }

    .hero__container {
        padding: 0 30px;
    }

    .header {
        padding: 10px 30px;
    }

    .footer {
        padding: 30px;
    }

    .hero__img {
        height: 320px;
    }
}

@media (max-width:570px) {

    .hero__title_az .hero__title-first {
        font-size: 70px;
        letter-spacing: -3px;
    }
    .docs__text {
        padding: 30px;
    }
    .benefits__item-title {
        font-size: 20px;
    }.benefits__item-img {
        width: 120px;
    }
    .benefits__item {
        height: 180px;
    }
    .steps__item {
        width: 100%;
        height: 180px;
    }
    .steps__item-title {
        max-width: initial;
    }
    .steps__item-title br {
        display: none;
    }
}

@media (max-width:480px) {

    .contacts__block_right {
        height: 250px;
    }
    .hero__title_az .hero__title-first {
        font-size: 50px;
        letter-spacing: -2px;
    }
    .steps__item-title {
        max-width: 250px;
    }
    .steps__item-title br {
        display: initial;
    }
    .title {
        font-size: 30px;
    }
    .benefits__item-title {
        margin-bottom: 15px;
    }
    .benefits__item-img {
        margin-left: auto;
        margin-top: 10px;
    }
    .benefits__item {
        flex-direction: column;
        height: initial;

    }
    .hero__title-first {
        font-size: 55px;
    }

    .hero__title-second {
        font-size: 45px;
        margin-top: -7px;
    }

    .hero__offer {
        padding: 20px 30px 30px;
    }

    .btn {
        width: 100%;
    }

    .header {
        padding: 10px 20px;
    }

    .container {
        padding: 50px 20px 20px;
    }

    .hero__container {
        padding: 0 20px;
    }
}

@media (max-width:375px) {
    .benefits__item-subtitle br {
        display: none;
    }
}