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

.container {
    max-width: 1250px;
    padding: 0 15px;
    margin: 0 auto;
}

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

body {
    background: linear-gradient(173.52deg, #DDF3FF 5.1%, #FFFFFF 101.43%);
    font-family: 'sf_pro_roundedregular', sans-serif;
    min-height: 100vh;
}

.wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;

}

main {
    flex: 1 0 auto;
}


/*
Header
*/

.header {
    background: rgba(255, 255, 255, 0.52);
    padding: 10px 0;
}

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

.burger {
    position: relative;
    height: 45px;
    width: 35px;
    margin-left: auto;
    cursor: pointer;
    display: none;
    visibility: hidden;
    transition: all .3s ease 0s;
}

.burger__top {
    position: absolute;
    height: 3px;
    width: 100%;
    background: #000000;
    top: 43%;
    transform: translateY(-43%);
}


.burger__bottom {
    position: absolute;
    transition: all .3s ease 0s;
    height: 3px;
    width: 100%;
    background: #000000;
    top: 66%;
    transform: translateY(-63%);
}

.burger::before {
    content: '';
    position: absolute;
    transition: all .3s ease 0s;
    height: 3px;
    width: 100%;
    background: #000000;
    top: 18%;
    transform: translateY(-22%);
}

.header__logo--up {
    font-size: 28px;
    font-weight: bold;
    display: inline-block;
    background-image: url("../assets/logo.svg");
    background-size: contain;
    background-position: center center;
    padding: 5px;
    background-repeat: no-repeat;
    border-radius: 9.35294px;
    color: #FFFFFF;
}

.header__logo--grade {
    font-weight: bold;
    font-size: 22px;
}

.nav {
    flex: 0 0 60%;
}

.nav__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
}

.nav__item {
    margin-right: 41px;
    font-weight: 500;
}

.nav__item:last-child {
    margin-left: 50px;
    margin-right: 0;
    background: #54DCA3;
    border-radius: 8px;
    color: #FFFFFF;
    padding: 6px 14px;
}

/*
Intro
*/

.intro {
    position: relative;
    padding-top: 85px;
}

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

.intro__title {
    font-weight: 700;
    font-size: 117px;
}

.intro__title--green {
    color: #5AF2B2;
}

.intro__text {
    font-weight: 500;
    font-size: 25px;
    margin-top: 17px;
}

.intro__link {
    font-weight: 800;
    font-size: 31px;
    color: #FFFFFF;
    background: linear-gradient(96.02deg, #6899F5 4.28%, #4F81E0 97.77%);
    box-shadow: 5.35099px 6.42119px 21.404px rgba(80, 131, 228, 0.66);
    border-radius: 21.404px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    padding: 11px 0;
    margin: 33px 0;
}

.intro__img {
    flex: 0 0 45%;
}

.intro__img img {
    max-width: 100%;
    height: auto;
}

.intro__form {
    position: absolute;
    left: 0;
    z-index: -1;
}

/*
Directions
*/

.direction {
    margin: 80px 0;
}

.direction__title {
    font-weight: 600;
    font-size: 40px;
    text-transform: uppercase;
    text-align: center;
}

.direction__wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 59px 0 0;
}

.direction__item {
    flex: 0 0 32%;
    padding: 23px 19px;
    transition: all .2s linear;
    background: #FFFFFF;
    border-radius: 25px;
    margin-bottom: 50px;
    position: relative;
}

.direction__round {
    position: absolute;
    bottom: 0;
    right: 0;
}

.direction__item--title {
    font-weight: 600;
    font-size: 40px;
    margin-bottom: 5px;
}

.direction__list {
    list-style: none;
}

.direction__list-item {
    margin-bottom: 2px;
    font-weight: 400;
    font-size: 20px;
}

.direction__round {
    transition: all .2s linear;
}

.green:hover {
    box-shadow: 0px 0px 10px rgba(90, 242, 178, 0.5);
    background: #A4F5D3;
}

.green:hover .direction__round circle {
    fill: #5AF2B2;
}

.light-green:hover {
    background: #92FAE7;
    box-shadow: 0px 0px 30px rgba(81, 237, 209, 0.5);
}

.light-green:hover .direction__round circle {
    fill: #51EDD1;
    stroke: #51EDD1;
}

.red:hover {
    background: #FD7A82;
    box-shadow: 0px 0px 30px rgba(237, 80, 89, 0.5);
}

.red:hover .direction__round circle {
    fill: #ED5059;

}

.blue:hover {
    background: #709FFA;
    box-shadow: 0px 0px 30px rgba(90, 142, 242, 0.5);
}

.blue:hover .direction__round circle {
    fill: #5A8EF2;
}

/*
About
*/

.about {
    margin: 60px 0;
    position: relative;
}

.about__ellipse {
    position: absolute;
    left: 0;
    z-index: -1;
}

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

.about__img {
    flex: 0 0 50%;
}

.about__info {
    flex: 0 0 40%;
}

.about__img img {
    max-width: 100%;
    height: auto;
}

.about__title {
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 27px;
}

.about__text {
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 25px;
}

/*
Process
*/

.process {
    margin: 60px 0;
}

.process__title {
    font-weight: 600;
    font-size: 40px;
    margin-bottom: 55px;
    text-align: center;
}

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

.process__item {
    flex: 0 0 45%;
    position: relative;
    margin-bottom: 90px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0 50px;
    background-size: contain;
    height: 400px;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.first {
    background-image: url("../assets/process/first.png");

}

.second {
    background-image: url("../assets/process/second.png");
}

.third {
    background-image: url("../assets/process/second.png");
    background-position: left;
    padding-left: 100px;
}

.fourth {
    background-image: url("../assets/process/first.png");
    background-position: left;
}

.process__item--number {
    position: absolute;
    left: -75px;
    top: -50px;
    font-weight: 800;
    font-size: 144.905px;
}

.process__sub-title {
    font-weight: 800;
    font-size: 47.0412px;
    margin-bottom: 15px;
    color: #FFFFFF;
}

.process__sub-text {
    font-weight: 500;
    font-size: 18.8165px;
    color: #FFFFFF;
    width: 90%;
}

/*
start
*/
.start {
    margin: 60px 0;
}

.swiper {
    padding: 75px 0;
}

.start__item {
    background: #FFFFFF;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 50.3051px;
    text-align: center;
    padding: 60px 0;
    transition: all .2s linear;

}

.swiper-slide-active {
    transform: translateY(-40px) !important;
}

.start__title {
    font-weight: 700;
    font-size: 57.9035px;
    margin-bottom: 18px;
}

.start__text {
    font-weight: 500;
    font-size: 36.1897px;

}

.start__btn {
    background: linear-gradient(96.02deg, #6899F5 4.28%, #4F81E0 97.77%);
    box-shadow: 5px 6px 21px rgba(80, 131, 228, 0.66);
    border-radius: 21px;
    font-weight: 800;
    font-size: 31px;
    border: none;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 20%;
    padding: 12px 0;
}

/*
Team
*/

.team {
    margin: 80px 0;
}

.team__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.team__title {
    font-weight: 600;
    font-size: 50px;
    flex: 0 0 50%;
}

.team__title span {
    color: #1954EE;
}

.team__text {
    flex: 0 0 45%;
    font-weight: 500;
    font-size: 30px;
}

.team__img {
    margin-top: 70px;
}

.team__img img {
    max-width: 100%;
    height: auto;
}

/*
offices
*/

.offices {
    margin: 80px 0;
}

.offices-first, .offices-second {
    position: relative;
    margin: 50px 0;
}

.offices-second__ellipse {
    right: 0;
    left: unset;
}

.offices-second__img {
    order: 1;
}

.start__ellipse {
    top: 55%;
    transform: translateY(-50%);
}

/*
Footer
*/

.footer {
    margin-top: 150px;
    background: #000000;
    padding: 45px 0;
}

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

.footer__item {
    flex: 0 0 23%;
}

.footer__list {
    flex: 0 0 23%;
    list-style: none;
    color: #FFFFFF;
}

.footer__list-item:first-child {
    font-size: 20px;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.footer__list-item {
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 10px;
    color: #B6B6B6;
}

.footer__logo--up {
    background-image: url(../assets/logoWhite.svg);
    color: #000000;
}

.footer__logo--grade {
    color: #FFFFFF;
}

.footer__socials {
    margin: 30px 0 30px;
}

.footer__socials svg {
    margin-right: 30px;
}

.footer__address {
    font-size: 20px;
    margin: 30px 0;
    color: #FFFFFF;
}

.footer__address a {
    display: block;
}

.footer__contact {
    color: #B6B6B6;
    margin-top: 5px;
}

.footer__copyright {
    font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
}


@media (max-width: 1199px) {
    .container {
        max-width: calc(100% - 16px);
    }

    .nav {
        flex: 0 0 80%;
    }

    .intro__title {
        font-size: 76px;
    }

    .intro__text {
        font-size: 16px;
    }

    .intro__link {
        font-size: 20px;
    }

    .intro__form {
        max-width: 330px;
    }

    .about__ellipse {
        max-width: 450px;
        top: 13%;
    }

    .process__item {
        background-size: 100% 100%;
    }

    .process__item--number {
        font-size: 88px;
        left: -15px;
        top: -35px;
    }

    .process__sub-title {
        font-size: 28px;
    }

    .process__sub-text {
        font-size: 15px;
    }

    .team__title {
        font-weight: 600;
        font-size: 30px;
    }

    .team__text {
        font-size: 22px;
    }

    .about__ellipse {
        top: unset;
        transform: unset;
    }

    .offices-second__ellipse {
        max-width: 350px;
    }
}

@media (max-width: 991px) {
    .nav__list {
        position: fixed;
        top: 0;
        bottom: 0;
        right: -100%;
        transition: all .2s ease-in-out;
        z-index: 5;
        min-width: 295px;
        flex-direction: column;
        justify-content: flex-start;
        background: linear-gradient(177.3deg, #F9F9F9 2.25%, #FFFFFF 82.34%);
        border-radius: 16.4804px 0px 0px 16.4804px;
        padding-top: 75px;
        padding-left: 16px;
        align-items: flex-start;
    }

    .nav__item {
        font-weight: 500;
        font-size: 26.3687px;
        margin-bottom: 32px;
    }

    .nav__item:last-child {
        margin-left: 0;
    }

    .burger {
        display: block;
        visibility: visible;
        z-index: 25;
        transition: all .2s linear;
    }

    .burger__active {
        transition: all .2s linear;
    }

    .backdrop__active {
        background: rgba(217, 217, 217, 0.2);
        backdrop-filter: blur(50px);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .burger__active:before {
        top: 20px;
        transform: rotate(45deg);
        content: '';
        position: absolute;
        transition: all .4s linear;
        height: 2px;
        width: 100%;
        background: #000000;
    }

    .burger__active .burger__top {
        display: none;
        visibility: hidden;
    }


    .burger__active .burger__bottom {
        transform: rotate(-45deg);
        content: '';
        position: absolute;
        transition: all .4s linear;
        height: 2px;
        width: 100%;
        background: #000000;
        top: 20px;
    }

    .nav__list--active {
        right: 0;

        transition: all .2s ease-in-out;
    }

    .direction__item {
        flex: 0 0 45%;
    }

    .about__title {
        font-size: 29px;
    }

    .about__text {
        font-size: 14px;
    }

    .about__ellipse {
        max-width: 370px;
    }

    .process__item {
        padding: 0 25px;
    }

    .third {
        padding-left: 25px;
    }

    .start__title {
        font-size: 39px;
    }

    .start__text {
        font-size: 24px;
    }

    .process__title {
        font-size: 25px;
    }

    .offices-second__ellipse {
        max-width: 290px;
    }

    .footer__socials svg {
        margin-right: 12px;
    }
}

@media (max-width: 767px) {
    .intro {
        padding-top: 35px;
    }

    .intro__form {
        display: none;
        visibility: hidden;
    }

    .intro__wrapper {
        flex-wrap: wrap;
    }

    .intro__info, .intro__img {
        flex: 0 0 100%;
        text-align: center;
    }

    .header__logo {
        flex: 0 0 30%;
    }

    .nav {
        flex: 1 0 auto;
    }

    .intro__title {
        font-size: 40px;
    }

    .intro__link {
        width: 50%;
        margin: 17px auto;
    }

    .intro__img {
        order: -1;
    }

    .direction__item {
        flex: 0 0 100%;
    }

    .about__wrapper {
        flex-wrap: wrap;
    }

    .about__img {
        flex: 0 0 100%;
    }

    .about__info {
        flex: 0 0 100%;
    }

    .about__ellipse {
        display: none;
        visibility: hidden;
    }

    .process__item {
        flex: 0 0 100%;
    }

    .team__top {
        flex-wrap: wrap;
    }

    .team__title {
        flex: 0 0 100%;
        margin-bottom: 17px;
    }

    .team__text {
        flex: 0 0 100%;
    }

    .offices-second__img {
        order: 0;
    }

    .footer__wrapper {
        flex-wrap: wrap;
    }
    .footer__item, .footer__list{
        flex: 0 0 45%;
        margin-bottom: 25px;
    }
}

@media (max-width: 575px) {
    .header__logo{
        flex: 0 0 50%;
    }
    .direction__title{
        font-size: 25px;
    }
    .direction__item--title{
        font-size: 21px;
    }
    .direction__list-item{
        font-size: 12px;
    }
    .swiper{
        padding: 45px 15px;
    }
    .start__item{
        padding: 35px 10px;
    }
    .footer__list, .footer__item{
        flex: 0 0 100%;
    }
}