@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Roboto-Light'),
    url(/fonts/Roboto-Light.ttf) format('ttf'),
    url(/fonts/Roboto-Light.woff) format('woff'),
    url(/fonts/Roboto-Light.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto-Regular'),
    url(/fonts/Roboto-Regular.ttf) format('ttf'),
    url(/fonts/Roboto-Regular.woff) format('woff'),
    url(/fonts/Roboto-Regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Roboto-Medium'),
    url(/fonts/Roboto-Medium.ttf) format('ttf'),
    url(/fonts/Roboto-Medium.woff) format('woff'),
    url(/fonts/Roboto-Medium.woff2) format('woff2');
}


/*resets start*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

body, input, textarea, select, button {
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-rendering: optimizeSpeed;

    overflow-x: hidden;
}

footer {
    margin-top: auto;
}

img,
picture {
    max-width: 100%;
    display: block;
}

input,
button,
textarea,
select {
    font: inherit;
}

/*resets end*/

/*-------common-------*/
a:hover {
    opacity: .8;
}
body {
    font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    line-height: 1.55;
    color: #000000;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
}
h1 {
    font-size: 40px;
    font-weight: 300;
}
.up_btn {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 50px;
    left: 30px;
    cursor: pointer;
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20role%3D%22presentation%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2250px%22%20height%3D%2250px%22%20viewBox%3D%220%200%2048%2048%22%20enable-background%3D%22new%200%200%2048%2048%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20style%3D%22fill%3A%23c4dcff%3B%22%20d%3D%22M47.875%2C24c0%2C13.186-10.689%2C23.875-23.875%2C23.875S0.125%2C37.186%2C0.125%2C24S10.814%2C0.125%2C24%2C0.125%0AS47.875%2C10.814%2C47.875%2C24z%20M25.503%2C16.881l6.994%2C7.049c0.583%2C0.588%2C1.532%2C0.592%2C2.121%2C0.008c0.588-0.583%2C0.592-1.533%2C0.008-2.122%0Al-9.562-9.637c-0.281-0.283-0.664-0.443-1.063-0.443c0%2C0%2C0%2C0-0.001%2C0c-0.399%2C0-0.782%2C0.159-1.063%2C0.442l-9.591%2C9.637%0Ac-0.584%2C0.587-0.583%2C1.537%2C0.005%2C2.121c0.292%2C0.292%2C0.675%2C0.437%2C1.058%2C0.437c0.385%2C0%2C0.77-0.147%2C1.063-0.442L22.5%2C16.87v19.163%0Ac0%2C0.828%2C0.671%2C1.5%2C1.5%2C1.5s1.5-0.672%2C1.5-1.5L25.503%2C16.881z%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E') no-repeat;
    z-index: 900000;
}
.up_btn:hover {
    filter: brightness(0.5);
}
/*-------header-------*/
header {
    background-color: #7daeef;
}
header ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100px;
    padding: 0 100px;
}
header a {
    font-size: 16px;
    color: #fff;
    text-decoration: none;
}

/*-------main-------*/
#main {
    height: calc(100vh - 100px);
    min-height: 837px;
    margin-bottom: 80px;
    background: url("img/bg_landing.png") no-repeat center;
    background-position-y: -41px;
    background-size: contain;
}
#main>.container {
    position: relative;
}
#main img {
    position: absolute;
    right: 0;
    top: 65px;
}
#main span.h1{
    font-size: 40px;
    font-weight: 300;
    display: block;
    text-align: center;
    margin-bottom: 50px;
}
#main h1 {
    font-size: 43px;
    margin-bottom: 40px;
}
.main__txt {
    font-size: 17px;
    line-height: 1.65;
    margin-right: 50px;
    margin-bottom: 40px;
}
.main__link {
    background-color: #7ab1ff;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.55;

    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-family: 'Arial',Arial,sans-serif;
}
.main__content {
    margin-top: 80px;
    width: 526px;
}
.main__linkWrap {
    position: relative;
    width: 240px;
}
.main__arrow {
    position: absolute;
    color: #8fb2ff;
    font-size: 14px;
    width: 380px;
    text-align: center;
    left: 100%;
    top: 115px;
}
.main__arrow::before {
    content: '';
    position: absolute;
    bottom: 100%;
    width: 142px;
    height: 100px;
    background: url("img/arrow.png") no-repeat;
    background-size: contain;
}
/*-------aboutus-------*/
#aboutus {
    margin-bottom: 85px;
}
.aboutus__block {
    padding: 80px;
    border-radius: 50px;
    background-color: #7ab1ff;
    color: #ffffff;
    font-size: 21px;
    line-height: 2;
    position: relative;
    width: 976px;
    text-align: center;
    margin: 0 auto 40px;
}
.aboutus__block a {
    color: rgb(54, 112, 186);
    text-decoration: none;
}
.aboutus__block::before, .aboutus__block::after {
    content: '';
    position: absolute;
    z-index: -1;
}
.aboutus__block::before {
    background: url("img/Rectangle_21.png") no-repeat center;
    background-size: contain;
    width: 679px;
    height: 677px;
    left: -221px;
    bottom: -157px;
}
.aboutus__block::after {
    background: url("img/Rectangle_11.webp") no-repeat center;
    background-size: contain;
    width: 324px;
    height: 323px;
    right: -108px;
    top: -71px;
}

/*-------skills-------*/
#skills {
    margin-bottom: 20px;
}
.skills__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
}

#skills p {
    text-align: center;
    font-size: 25px;
    line-height: 1.55;
    font-weight: 300;
    margin-bottom: 40px;
}

.skills__item {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 40px;
    text-align: center;
}

.skills__header {

    line-height: 1.5;
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 100px;
    text-align: center;
    padding: 0 2%;
}

.skills__item-pic {
    margin-bottom: 20px;
    height: 120px;
}

/*.skills__item-pic img {*/
/*    height: 100%;*/
/*}*/

.skills__item-txt {
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    margin: 0 10px;
}
/*-------vacancies -------*/
#vacancies {
    margin-bottom: 60px;
}

#vacancies h2 {
    font-weight: 300;
    font-size: 40px;
    display: block;
    position: relative;
    padding-left: 108px;
    margin-left: -108px;
    margin-bottom: 45px;
}
.h2_wrap {
    display: flex;
    justify-content: center;
}
#vacancies h2::before {
    content: '';
    position: absolute;
    width: 78px;
    height: 62px;
    display: block;
    left: 0;
    background: url("img/Group_2.png") no-repeat;
    background-size: contain;
}


.vacancies__list {
    width: 760px;
    margin: 0 auto;
}

.vacancies__item-header {
    font-size: 20px;
    line-height: 27px;
    padding: 28px 46px 28px 0;
    cursor: pointer;
}

.vacancies__item {
    position: relative;
    border-bottom: 1px solid #eee;
}
.vacancies__item:last-child {
    border-bottom: 0;
}

.vacancies__item-header::after {
    content: '';
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 22px;
    right: 0;
    transition: transform .3s;
    background: #c7c7ff url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%09%09%09%09%09%09%09%09%09%09%09%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221px%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22square%22%3E%0A%09%09%09%09%09%09%09%09%09%09%09%09%3Cg%20transform%3D%22translate(1.000000%2C%201.000000)%22%20stroke%3D%22%23ffffff%22%3E%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%3Cpath%20d%3D%22M0%2C11%20L22%2C11%22%3E%3C%2Fpath%3E%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%3Cpath%20d%3D%22M11%2C0%20L11%2C22%22%3E%3C%2Fpath%3E%0A%09%09%09%09%09%09%09%09%09%09%09%09%3C%2Fg%3E%0A%09%09%09%09%09%09%09%09%09%09%09%3C%2Fg%3E%0A%09%09%09%09%09%09%09%09%09%09%3C%2Fsvg%3E') no-repeat center center;
}

.vacancies__item-txt {
    margin: 0 auto;
    display: none;
}

.vacancies__item:first-child {
    border-top: 1px solid #eee;
}

.vacancies__item-txt {
    font-size: 18px;
    font-weight: 300;
}

.vacancies__item-txt ul {
    list-style: disc;
    padding-left: 18px;
}

.vacancies__item-txt span, .vacancies__item-txt ul {
    margin-bottom: 23px;
    display: block;
}

.vacancies__item-txt .bold {
    font-weight: 500;
}

.shown .vacancies__item-header {
    border-bottom: 0;
}

.shown .vacancies__item-header::after {
    transform: rotate(45deg);
}

#vacancies .skills__header {
    text-align: left;
    margin-bottom: 0;
}

#vacancies .skills__header ul {
    list-style: disc;
    padding-left: 19px;
    line-height: 1.4;
}

/*-------footer -------*/
footer {
    background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(240,240,240,0.2)), to(rgba(122,177,255,0.2)) );
    background-image: -webkit-linear-gradient(top, rgba(240,240,240,0.2), rgba(122,177,255,0.2));
    background-image: linear-gradient(to bottom, rgba(240,240,240,0.2), rgba(122,177,255,0.2));
    height: 300px;
}
footer .container {
    position: relative;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
footer span {
    color: #626262;
    font-size: 18px;
    margin-bottom: -15px;
}
footer a {
    color: #7dadf0;
    font-size: 43px;
    font-weight: 500;
    text-decoration: none;
    display: block;
    align-self: baseline;
}
footer img {
    position: absolute;
    right: -100px;
    top: 38px;
}


/*-------media -------*/
@media all and (min-width: 1200px) {
    .vacancies__item-header:hover::after {
        background: #fff url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%09%09%09%09%09%09%09%09%09%09%09%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221px%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22square%22%3E%0A%09%09%09%09%09%09%09%09%09%09%09%09%3Cg%20transform%3D%22translate(1.000000%2C%201.000000)%22%20stroke%3D%22%23B71C1C%22%3E%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%3Cpath%20d%3D%22M0%2C11%20L22%2C11%22%3E%3C%2Fpath%3E%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%3Cpath%20d%3D%22M11%2C0%20L11%2C22%22%3E%3C%2Fpath%3E%0A%09%09%09%09%09%09%09%09%09%09%09%09%3C%2Fg%3E%0A%09%09%09%09%09%09%09%09%09%09%09%3C%2Fg%3E%0A%09%09%09%09%09%09%09%09%09%09%3C%2Fsvg%3E') no-repeat center center;
        opacity: .5;
    }
}
@media all and (max-width: 1270px) {
 .container {
     margin-left: 30px;
     margin-right: 30px;
    }
    .aboutus__block {
        width: 70%;
    }
    footer {
        display: flex;
        justify-content: center;
    }
    footer .container {
        flex-grow: 1;
    }
}
@media all and (max-width: 1199px)  {
    #main {
        background: url("img/bg_mob_landing.png") no-repeat right top;
        background-size: contain;
        height: auto;
    }
    .main__content {
        width: 100%;
    }
    #main img {
        position: static;
        margin-bottom: 20px;
    }
    .main__content {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #main span.h1{
        margin-bottom: 20px;
    }
    .main__txt {
        width: 620px;
        text-align: center;
        font-size: 18px;
        margin: 0 0 40px;
    }
    .main__arrow {
        position: relative;
        left: auto;
        top: auto;
        font-size: 20px;
        text-align: center;
        display: block;
        margin: 0;
        width: auto;
    }
    .main__linkWrap {
        width: 450px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .main__link {
        width: 240px;
        margin-bottom: 20px;
    }
    .main__arrow::before {
        width: 72px;
        height: 50px;
        right: 20px;
    }
    .aboutus__block {
        width: 83%;
        padding: 20px 30px;
    }
    #skills p {
        max-width: 690px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media all and (max-width: 959px) {
    header {
        height: 64px;
        background-color: #111;
    }
    .mobile_menu {
        height: 26px;
        width: 35px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        right: 30px;
        top: 18px;
    }

    .mobile_menu span {
        background-color: #fff;
        height: 3px;
        width: 100%;
        display: block;
        transition: .3s;
    }

    .mobile_menu::after {
        top: auto;
        bottom: 0;
    }

    .mobile_menu ul {
        display: none;
        position: absolute;
        width: 276px;
        background-color: #7daeef;
        height: 210px;
        top: 46px;
        right: 0;
        flex-direction: column;
        justify-content: space-around;
        z-index: 90;
        padding: 20px;
    }
    .logo_wrapper {
        order: -1;
    }
    .mobile_menu_list img {
        width: 150px;
        margin-bottom: 0;
    }
    .mobile_menu li{
        margin-bottom: 9px;
    }

    .mobile_menu.shown span:first-child {
        transform: rotate(43deg) translateY(16px);
    }

    .mobile_menu.shown span:nth-child(2) {
        opacity: 0;
    }

    .mobile_menu.shown span:nth-child(3) {
        transform: rotate(138deg) translateY(15px);
    }

    .mobile_menu.shown ul {
        display: flex;
    }


    .aboutus__block {
        width: auto;
        max-width: 515px;
        font-size: 16px;
    }
    .aboutus__block::before {
        width: 329px;
        height: 329px;
        left: -149px;
        bottom: -62px;
    }
    #skills p {
        font-size: 22px;
    }

    footer {
        height: auto;
        padding-top: 40px;
        padding-bottom: 20px;
    }
    footer .container {
        align-items: center;
    }
    footer img {
        position: static;
        width: 330px;
        height: 197px;
    }
    footer a {
        margin-bottom: 20px;
        align-self: unset;
    }

    #skills p {
        max-width: 570px;
    }
    .vacancies__list {
        width: auto;
    }
    .skills__item {
        width: 34%;
    }
    #vacancies h2 {
        font-size: 30px;
    }
    .main__txt {
        width: 70%;}
}
@media all and (max-width: 959px) {
    .skills__item {
        width: 48%;
    }
}
@media all and (max-width: 650px) {
    .aboutus__block {
        max-width: 411px;
    }
    #aboutus {
        margin-bottom: 45px;
    }
    .main__txt {
        width: 70%;
    }
    .skills__item {
        width: 50%;
    }
}
@media all and (max-width: 639px)  {
    #main h1, #main span.h1 {
        font-size: 30px;
    }
    #main img {
        width: 100%;
        height: auto;
    }
    .skills__item {
        width: 80%;
        flex-direction: row;
    }
    .skills__item-pic {
        flex-shrink: 0;
    }
    .skills__item-txt {
        text-align: left;
        margin-left: 40px;
        margin-right: 0;
    }
}
@media all and (max-width: 489px) {
    .container {
        margin-left: 10px;
        margin-right: 10px;
    }
    #main h1, #main span.h1 {
        font-size: 23px;
    }
    .main__txt {
        font-size: 16px;
    }
    .main__arrow {
        font-size: 16px;
    }
    .main__arrow::before {
        width: 46px;
        height: 40px;
        right: 47px;
    }
    .skills__list {
        width: 328px;
        margin: 0 auto;
    }
    .skills__item {
        width: auto;
    }
    .skills__item:nth-child(even) {
        flex-direction: row-reverse;
    }
    .skills__item-txt {
        margin-left: 30px;
    }
    .skills__item:nth-child(even) .skills__item-txt {
        margin-left: 0;
        margin-right: 30px;
    }
    .skills__item-pic {
        position: relative;
        margin-bottom: 0;
    }
    .skills__item-pic img {
        position: relative;
    }
    .skills__item:not(:last-child) .skills__item-pic::before {
        content: '';
        position: absolute;
        opacity: 0.4;
        background-color: #f1d143;
        width: 250px;
        height: 5px;
        left: 22px;
        bottom: -17px;
        transform: rotate(45deg);
    }
    .skills__item:nth-child(even) .skills__item-pic::before {
        transform: translateX(-200px) rotate(135deg);
        left: 67px;
    }
    footer span {
        font-size: 16px;
        margin-bottom: 0;
    }
    footer a {
        font-size: 30px;
    }
}
@media all and (max-width: 360px) {
    .skills__item-txt {
        font-size: 14px;
    }
    .main__txt {
        width: auto;
    }
    .skills__list {
        width: auto;
    }
    .skills__item-pic img {
        height: 80%;
    }
    .skills__item:nth-child(even) .skills__item-pic::before {
        width: 300px;
        left: 15px;
    }
    .skills__item:nth-child(4) .skills__item-pic::before {
        left: -10px;
    }
    .main__arrow {
        width: 297px;
    }
    .main__arrow::before {
        right: -20px;
    }
    .aboutus__block {
        padding: 20px 10px ;
    }
    .aboutus__block {
        line-height: 1.6;
    }
}