* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito Sans';
    background: var(--bw-900-w, #FFF);
}

html {
    scroll-behavior: smooth;
}


li {
    list-style-type: none;
}

a {
    text-decoration: none;
}


/*HEADER*/

.header {
    width: 1132px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F0F0F0;
}

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

.menu__list {
    display: flex;
    margin-right: 78px;
    gap: 24px;
}


.menu__link {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
}

.header__link {
    color: var(--bw-900-b, #000);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
}


/*MAIN*/

.main {

    margin-top: 40px;
}

.container {
    width: 1132px;
    margin: 0 auto;
}

.container_task {
    width: 940px;
    margin: 0 auto;
}

.banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #DFDFDF;
}


.banner__title {
    color: var(--neutral-600, #0B0B0B);
    font-size: 36px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%;
    margin-bottom: 26px;
}

.banner__text {
    width: 274px;
    color: var(--neutral-400, #5C5C5C);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    margin-bottom: 65px;
}

.banner__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px 12px 16px;
    border-radius: 8px;
    background: var(--primery-500, #2898EC);
    border: none;
    color: var(--bw-900-w, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.banner__btn:hover {
    background: var(--primery-500, #1276c3);
}




.company {
    margin-top: 70px;
}

.company__top_block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}

.title__company_block {
    display: flex;
    align-items: flex-start;
    gap: 82px;
}

.company__title {
    color: var(--blue, #2199CC);
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    text-transform: uppercase;
}

.company__text {
    color: var(--bw-900-b, #000);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    width: 285px;
}

.about__company_common {
    display: flex;
    gap: 20px;
}


.about__company_block {
    border-radius: 12px;
    background: var(--neutral-100, #F9F9F9);
    display: flex;
    width: 364px;
    padding: 24px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    transition: 0.6s;
}

.about__company_block:hover {
    fill: white;
    background: var(--primery-500, #2898EC);
}

.about__company_block:hover .about__block_title1 {
    color: white;
}

.about__company_block:hover .about__block_text {
    color: white;
}

.about__company_block:hover svg {
    fill: white;
}


.about__block_title {
    display: flex;
    gap: 40px;
    margin-bottom: 52px;
}

.about__block_title1 {
    color: var(--bw-900-b, #000);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    width: 216px;
}



.about__block_text {
    color: var(--bw-900-b, #000);
    width: 316px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
}

.company__bottom_block {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;

}

.company__bottom_block1 {
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-radius: 12px;
    border: 1px solid var(--neutral-200, #DFDFDF);
    padding: 20px;
    width: 364px;
}

.company__bottom_block_title {
    color: var(--primery-100, #F2FAFF);
    font-size: 100px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%;
}

.company__bottom_block_text {
    color: var(--neutral-400, #5C5C5C);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}

.company__bottom_block_text1 {
    width: 316px;
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

.company__bottom_block3 {
    border: none;
    border-bottom: 3px solid #2898EC;
    border-radius: 0;
}



.cooperation {
    margin-top: 200px;
    background: var(--primery-500, #2898EC);
}

.cooperation__block {
    display: flex;
    justify-content: center;
    padding: 80px 250px;
    flex-direction: column;
    align-items: flex-start;
    gap: 77px;
}

.cooperation__descript {}

.cooperation__descript_text {
    width: 940px;
    color: var(--bw-900-w, #FFF);
    font-family: Nunito Sans;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
}

.cooperation__sponsor {
    display: flex;
    gap: 60px;
}

.service {
    margin-top: 120px;
    margin-bottom: 120px;
}

.service__top_block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 51px;
}

.service__title {
    color: var(--blue, #2199CC);
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
}

.service__container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.service__left_block {
    display: flex;
    width: 364px;
    height: 599px;
    padding: 24px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--neutral-100, #F9F9F9);
}

.service__container_block {
    display: flex;
    gap: 40px;
}


.service__left_block_title {
    color: var(--bw-900-b, #000);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}

.service__left_block_text {
    color: var(--bw-900-b, #000);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
}



.services_common {
    width: 748px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.services_block {
    display: flex;
    width: 364px;
    padding: 24px;
    gap: 52px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--neutral-100, #F9F9F9);
}

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

.services_title1 {
    width: 216px;
    color: var(--bw-900-b, #000);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    margin-right: 20px;
}

.services_text {
    color: var(--bw-900-b, #000);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
}



.task {
    width: 100%;
    display: inline-flex;
    padding: 78px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    border-top: 1px solid var(--neutral-200, #DFDFDF);
    border-bottom: 1px solid var(--neutral-200, #DFDFDF);
    background: var(--bw-900-w, #FFF);
}


.form {
    display: flex;
    gap: 20px;
}

.task__textarea {
    display: flex;
    height: 188px;
    padding: 16px 245px 152px 16px;
    align-items: center;
    border-radius: 8px;
    background: var(--neutral-100, #F9F9F9);
    border: none;
    color: var(--neutral-400, #5C5C5C);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    outline: none;
    scroll-behavior: none;
    resize: none;
}

.task__name_input {
    width: 100%;
    color: var(--neutral-400, #5C5C5C);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    border: none;
    outline: none;
    background: var(--neutral-100, #F9F9F9);
}

.input__name_block {
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    border-radius: 8px;
    background: var(--neutral-100, #F9F9F9);
    border: none;
}

.input__email_block {
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    border-radius: 8px;
    background: var(--neutral-100, #F9F9F9);
    border: none;
}

.input__email {
    background: var(--neutral-100, #F9F9F9);
    color: var(--neutral-400, #5C5C5C);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    border: none;
    outline: none;
}

.input__number_block {
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    border-radius: 8px;
    background: var(--neutral-100, #F9F9F9);
    border: none;
}

.input__number {
    background: var(--neutral-100, #F9F9F9);
    color: var(--neutral-400, #5C5C5C);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    border: none;
    outline: none;
}

.right__block {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.btn__task_block {
    display: flex;
    justify-content: space-between;
    gap: 32px;
}

.btn_task {
    display: flex;
    height: 48px;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--primery-500, #2898EC);
    border: none;
    color: var(--bw-900-w, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
}


.text__task {
    width: 100%;
    color: var(--neutral-400, #5C5C5C);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}

.right__block_input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task__title {
    margin-bottom: 40px;
}


/*FOOTER*/
.footer {
    background: var(--bw-900-w, #FFF);
    margin-top: 61px;
    margin-bottom: 61px;
}

.footer__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
}

.footer__text {
    color: var(--bw-900-b, #000);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.footer__list {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.team {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
}


.team__left_block {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.team__left_title {
    color: var(--neutral-600, #0B0B0B);
    font-size: 36px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%;
}

.team__left_text {
    color: var(--neutral-400, #5C5C5C);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    width: 274px;
}

.team__middle_block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.team__middle_span {
    color: var(--primery-600, #1384D9);
    font-size: 120px;
    font-style: normal;
    font-weight: 900;
    line-height: 100%;
}

.team__middle_text {
    color: var(--neutral-600, #0B0B0B);
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
}


.team__right_btn {
    display: flex;
    width: 268px;
    height: 48px;
    padding: 12px 20px 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--primery-500, #2898EC);
    border: none;
    color: var(--bw-900-w, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    transition: 0.5s ease-in-out;
}

.team__right_btn:hover {
    background: var(--primery-500, #16619a);
}


.specialist {
    padding-top: 80px;
    padding-bottom: 52px;
    border-top: 1px solid #DFDFDF;
}

.card__container {
    display: flex;
    width: 364px;
    align-items: center;
    gap: 12px;
    margin-bottom: 44px;
}

.employee-photo {
    flex-shrink: 0;
    width: 104px;
    height: 104px;
    border-radius: 12px;
    object-fit: cover;
    object-position: center top;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 14px rgba(22, 97, 154, 0.08);
    background: #f7f7f7;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
}

.card__title {
    color: var(--bw-900-b, #000);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}

.card__text {
    color: var(--neutral-400, #5C5C5C);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
}

.cart {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.front {
    margin-bottom: 80px;
}

.backend {
    margin-bottom: 120px;
}

.task__link {
    color: var(--bw-900-w, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    /* 20px */
}
section#task > div, .container_task > div {
    width: 1132px;
    margin: 0 auto;
}

@media screen and (max-width: 468px){
    header.header {
    width: 100%;
    display: block;
    text-align: center;
}

.menu__block {
    text-align: left;
    justify-content: space-between;
    padding: 15px;
}

ul.menu__list {
    display: block;
}

a.header__link {
    font-size: 14px;
}

a.menu__link {
    font-size: 14px;
}

.container {
    width: 100%;
    padding: 15px;
}

.banner__right {
    display: none;
}

main.main {
    margin-top: 0px;
}

section#company {
    margin-top: 20px;
}

.company__top_block {
    display: block;
}

.title__company_block {
    display: block;
    margin-bottom: 10px;
}

h2.company__title {
    margin-bottom: 10px;
}

.about__company_common {
    display: block;
}

.about__company_block {
    margin-bottom: 15px;
    width: 100%;
}

h3.about__block_title1 {
    width: max-content;
}

.about__block_title svg {
    display: none;
}

p.about__block_text {
    width: 100%;
}

.about__block_title {
    margin-bottom: 20px;
}

.company__bottom_block {
    display: block;
}

.company__bottom_block > div {
    width: 100%;
    margin-bottom: 15px;
}

section.cooperation {
    margin-top: 40px;
}

.cooperation__block {
    display: block;
    padding: 15px;
}

.cooperation__descript p {
    font-size: 14px;
    width: auto;
}

.cooperation__sponsor {
    display: block;
}

.cooperation__sponsor img {
    width: 50%;
    display: block;
    margin: 20px auto;
}

.service__container {
    display: block;
}

.service__left_block {
    display: block;
    width: 100%;
    height: auto;
}

.service__container > div {
    margin-bottom: 15px;
}

.services_block {
    width: 100%;
    margin-bottom: 15px;
}

.services_common {
    width: 100%;
    display: block;
}

h3.services_title1 {
    width: auto;
}

.services_title {
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.services_title svg {
    height: 40px;
}

section#service {
    margin: 20px 0;
}

section#task > div, .container_task > div {
    width: 100%;
    padding: 0 15px;
}

form.form {
    display: block;
}

textarea.task__textarea {
    margin-bottom: 10px;
    width: 100%;
    font-size: 14px;
}

.right__block_input {
    display: block;
}

.right__block_input input > div {margin-bottom: 20px;}

.right__block_input > div {
    margin-bottom: 20px;
}
section.team.container {
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

.team__middle_block {
    margin-bottom: 20px;
}

.team__right_block {
    margin: 0 auto;
    text-align: center;
}

button.team__right_btn {
    margin: auto;
}

h3.card__title {
    font-size: 18px;
}

p.card__text {
    font-size: 14px;
}

.card__container {
    width: 100%;
    margin-bottom: 20px;
}

.employee-photo {
    width: 88px;
    height: 88px;
}

h2.service__title {
    font-size: 20px;
}

.backend .service__top_block {
    margin-bottom: 20px;
}

.backend {
    margin-bottom: 10px;
}
}