/* For old browsers */
@supports (not(--css: variables))
{
    .supports-error
    {
        display: flex !important;
    }
}

/* For IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
    .supports-error
    {
        display: flex !important;
    }
}



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

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

html
{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
}

body
{
    margin: 0;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
    text-decoration-skip: objects;
    text-rendering: optimizeLegibility;
}

img
{
    border-style: none;
}

textarea
{
    overflow: auto;
}

input,
textarea,
input:active,
textarea:active,
button
{
    margin: 0;

    -webkit-border-radius: 0;
            border-radius: 0;
         outline: none transparent !important;
    box-shadow: none;

    -webkit-appearance: none;
            appearance: none;
    -moz-outline: none !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
{
    margin: 0;

    -webkit-appearance: none;
}

input[type=number]
{
    -moz-appearance: textfield;
}

:focus
{
    outline: 0;
}

:hover,
:active
{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}


::-ms-clear
{
    display: none;
}



/*-------------------
    Global styles
-------------------*/
:root
{
    --font_family: "Manrope", sans-serif;
    --scroll_width: 17px;
}


.clear
{
    clear: both;
}


.left
{
    float: left;
}


.right
{
    float: right;
}


html
{
    height: 100%;
    min-height: -moz-available;
    min-height: -webkit-fill-available;
    min-height:         fill-available;
}


@media (min-width: 1025px)
{
    html.custom_scroll ::-webkit-scrollbar
    {
        width: 10px;
        height: 10px;

        background-color: #1B1C20;
    }

    html.custom_scroll ::-webkit-scrollbar-thumb
    {
        background-color: #EEE;
    }

    html.custom_scroll
    {
        scrollbar-color: #EEE #1B1C20;
        scrollbar-width: thin;
    }
}


body
{
    color: #EEE;
    font: 500 24px/1.4 var(--font_family);

    height: 100%;
    min-height: -moz-available;
    min-height: -webkit-fill-available;
    min-height:         fill-available;

    background: #0C0C0E;
}

button
{
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;

    display: inline-block;

    cursor: pointer;
    vertical-align: top;

    border: none;
    background: none;
}


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

    min-height: 100%;

    background: #0C0C0E;
}


.main
{
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.cont
{
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 20px;
}


.lazyload
{
    opacity: 0;

    transition: opacity .5s linear;
}

.lazyload.loaded
{
    opacity: 1;
}


.flex
{
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}



.overlay
{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;

    display: none;

    width: 100%;
    height: 100%;

    opacity: .6;
    background: #000;
}



.supports-error
{
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;

    font-family: "Arial", sans-serif;
    font-size: 20px;
    line-height: 30px;

    display: none;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;

    width: 100%;
    height: 100%;
    padding: 20px;

    text-align: center;

    background: #FFF;
}

.supports-error.show
{
    display: flex;
}



/*--------------
    Fancybox
--------------*/
.compensate-for-scrollbar
{
    padding-right: var(--scroll_width) !important;
}

.fancybox__backdrop
{
    background: rgba(0,0,0,.6);
}

.fancybox__content
{
    color: #EEE;
}

.fancybox__slide
{
    padding: 16px;
}

.fancybox__content > .carousel__button.is-close
{
    top: 20px;
    right: 20px;

    color: #0C0C0E;

    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;

    width: 25px;
    height: 25px;

    border: none;
    border-radius: 0;

    transition: color .2s linear;
}

.fancybox__content > .carousel__button.is-close:hover
{
    color: #4419BD;
}

.fancybox__content > .carousel__button.is-close svg
{
    width: 100%;
    height: 100%;

    fill: currentColor;
    filter: none;
    stroke: none;
}

.fancybox__button--thumbs,
.fancybox__button--zoom
{
    display: none;
}

.fancybox__thumbs
{
    display: none;
}



/*------------
    Header
------------*/
.header
{
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;

    width: 100%;
    padding: 16px 0 10px;

    transition: padding-top .2s linear, background .2s linear;
}

.compensate-for-scrollbar .header
{
    width: calc(100% - var(--scroll_width));
}

.header.fixed
{
    padding-top: 10px;

    background: #1B1C20;
}

.header .cont
{
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

.header-logo
{
    flex-shrink: 0;

    margin-right: 48px;
}

.header-logo img
{
    display: block;

    max-width: 100%;
}


.header-wrap
{
    justify-content: space-between;
    align-content: center;
    align-items: center;

    width: 100%;
}

.header-menu__item + .header-menu__item
{
    margin-left: 40px;
}

.header-menu__link
{
    color: #FFF;
    font-size: 14px;
    line-height: 1.3;

    display: block;
}

.header .btn-bord
{
    height: 42px;
    padding: 0 15px;

    border-radius: 4px;
}

.header .btn-violet
{
    height: 42px;
    margin-left: 16px;
    padding: 0 15px;

    border-radius: 4px;
}


.mob-menu-btn
{
    position: relative;

    color: #FFF;

    display: none;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;

    width: 32px;
    height: 32px;
    padding: 7px 4px;
}

.mob-menu-btn span
{
    position: relative;

    display: block;

    width: 100%;
    height: 2px;

    background: #FFF;

    transition: .2s linear;
}

.mob-menu-btn span + span
{
    margin-top: 6px;
}

.mob-menu-btn span:nth-child(3)
{
    width: calc(100% - 4px);
    margin-left: auto;
}

.mob-menu-btn.active span:nth-child(2)
{
    opacity: 0;
}

.mob-menu-btn.active span:nth-child(1)
{
    top: 8px;

    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

.mob-menu-btn.active span:nth-child(3)
{
    top: -8px;

    width: 100%;

    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}



/*------------------
    Form elements
------------------*/
::-webkit-input-placeholder
{
    color: rgba(0, 0, 0, .4);
}

:-moz-placeholder
{
    color: rgba(0, 0, 0, .4);
}

:-ms-input-placeholder
{
    color: rgba(0, 0, 0, .4);
}


.form .line_flex
{
    justify-content: space-between;
}

.form .line_form
{
    margin-bottom: 32px;
}

.form .line_flex .line_form
{
    width: calc(50% - 15px);
}

.form .label
{
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;

    margin-bottom: 8px;
}

.form .input
{
    color: #000;
    font: 16px var(--font_family);

    display: block;

    width: 100%;
    height: 48px;
    padding: 0 15px;

    border: 1px solid transparent;
    border-radius: 4px;
    background: rgba(0, 0, 0, .06);

    transition: .2s linear;
}

.form textarea
{
    color: #000;
    font: 16px/22px var(--font_family);

    display: block;

    width: 100%;
    height: 144px;
    padding: 13px 15px;

    resize: none;

    border: 1px solid transparent;
    border-radius: 4px;
    background: rgba(0, 0, 0, .06);

    transition: .2s linear;
}

.form .input:focus,
.form textarea:focus
{
    border-color: rgba(0, 0, 0, .25);
    background: #FFF;
}

.form .submit
{
    text-align: right;
}

.form .submit_btn
{
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;

    display: inline-block;

    min-width: 150px;
    height: 58px;
    padding: 0 32px;

    vertical-align: top;

    border: 1px solid #4419BD;
    border-radius: 8px;
    background: #4419BD;

    transition: background .2s linear, color .2s linear;
}

.form .submit_btn:hover
{
    color: #4419BD;

    background: #FFF;
}

.form .error
{
    border-color: #F00;
}

.form .error_text
{
    color: #F00;
    font-size: 14px;
    line-height: 20px;

    padding-top: 8px;
}

.form .cols
{
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.form .cols .col
{
    width: calc(50% - 15px);
}

.form .info_call
{
    color: rgba(0, 0, 0, .6);
    font-size: 14px;
    line-height: 20px;
}

.flex_check
{
    justify-content: space-between;

    margin-top: -8px;
}

.checkbox
{
    margin-top: 16px;
}

.flex_check .checkbox
{
    width: calc(50% - 15px);
}

.checkbox input[type=checkbox]
{
    display: none;
}

.checkbox .label_check
{
    display: table-cell;

    height: 22px;

    cursor: pointer;
    vertical-align: middle;
}

.checkbox .label_check .check_text
{
    position: relative;

    color: #000;
    font-size: 16px;
    line-height: 22px;

    display: block;

    padding-left: 32px;
}

.checkbox .label_check .check_text:before
{
    content: "";

    position: absolute;
    top: -1px;
    left: 0;

    width: 24px;
    height: 24px;

    border: 1px solid transparent;
    border-radius: 4px;
    background: rgba(0, 0, 0, .06);
}

.checkbox .label_check input[type=checkbox]:checked + .check_text:before
{
    border-color: #4419BD;
    background: #4419BD;
}

.checkbox .label_check .check_text:after
{
    content: "";

    position: absolute;
    top: -1px;
    left: 0;

    width: 24px;
    height: 24px;

    opacity: 0;
    background: url(../images/ic_check.svg) 50% no-repeat;
}

.checkbox .label_check input[type=checkbox]:checked + .check_text:after
{
    opacity: 1;
}



/*---------------
	Page head
---------------*/
.main-title
{
    color: #FFF;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .02em;
    text-transform: uppercase;
}



/*-----------------
    Main section
-----------------*/
.btn-bord
{
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;

    display: inline-block;

    height: 58px;
    padding: 0 31px;

    vertical-align: top;

    border: 1px solid #FFF;
    border-radius: 8px;

    transition: background .2s linear, color .2s linear;
}

.btn-bord:hover
{
    color: #4419BD;

    background: #FFF;
}


.btn-violet
{
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;

    display: inline-block;

    height: 58px;
    padding: 0 31px;

    vertical-align: top;

    border: 1px solid #4419BD;
    border-radius: 8px;
    background: #4419BD;

    transition: background .2s linear, color .2s linear;
}

.btn-violet:hover
{
    color: #4419BD;

    background: #FFF;
}


.first-section
{
    position: relative;

    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;

    min-height: 800px;
    padding: 149px 0 125px;

    background: url(../images/main-bg.jpg) 50%/cover no-repeat;
}

.first-section__info
{
    position: relative;
    z-index: 1;

    max-width: 552px;
}

.first-section__title
{
    color: #FFF;
    font-size: 80px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .02em;
    text-transform: uppercase;
}

.first-section__desc
{
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;

    margin-top: 24px;
}

.first-section__btn-violet
{
    margin-top: 32px;
}

.first-section__img
{
    position: absolute;
    bottom: -48px;
    left: 50%;

    display: block;

    width: 594px;
    margin-left: 39px;

    pointer-events: none;
}




.about
{
    position: relative;

    padding: 258px 0 359px;
}

.about__info
{
    position: relative;
    z-index: 1;

    max-width: 780px;
    margin-left: auto;
}

.about__title
{
    color: #FFF;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;

    margin-bottom: 39px;

    letter-spacing: .02em;
    text-transform: uppercase;
}

.about__img
{
    position: absolute;
    top: 48px;
    right: 50%;

    display: block;

    width: 733px;
    margin-right: 181px;

    pointer-events: none;
}



.services__grid
{
    align-content: stretch;
    align-items: stretch;

    margin: 60px 0 0 -20px;
}

.service
{
    position: relative;

    display: flex;
    overflow: hidden;
    flex-direction: column;

    width: calc(100%/4 - 20px);
    min-height: 330px;
    margin: 20px 0 0 20px;
    padding: 32px 24px;

    border-radius: 8px;
    background: #1B1C20;
}

.service::after
{
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    background: #1B1C20;

    transition: opacity .2s linear;
}

.service:hover::after
{
    opacity: .8;
}

.service__info
{
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    height: 100%;
}

.service__name
{
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;

    width: 100%;
}

.service__price
{
    color: #B9B9B9;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;

    width: 100%;
    margin: 8px 0 auto;
}

.service__desc
{
    color: #FFF;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;

    width: 100%;
    margin-top: 30px;

    opacity: 0;

    transition: opacity .5s linear;
}

.service:hover .service__desc
{
    opacity: 1;
}

.service__img
{
    position: absolute;
    right: 0;
    bottom: 0;

    display: block;

    width: 150px;
    height: 200px;

    transition: width .5s linear, height .5s linear;
}

.service:hover .service__img
{
    width: 200px;
    height: 267px;
}

.service__more
{
    position: absolute;
    bottom: 0;
    left: 0;

    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;

    transition: opacity .2s linear;
}

.service:hover .service__more
{
    opacity: 0;
}

.service__more span
{
    position: relative;

    display: inline-block;

    padding-right: 15px;

    vertical-align: top;
}

.service__more span::after
{
    content: "";

    position: absolute;
    top: 50%;
    right: 0;

    width: 12px;
    height: 8px;
    margin-top: -4px;

    background: url(../images/arrow.svg) 50% no-repeat;
}



.advantages
{
    padding: 258px 0 160px;
}

.advantages__grid
{
    margin: 16px 0 0 -20px;
}

.advantages__item
{
    width: calc(100%/3 - 20px);
    margin: 64px 0 0 20px;
}

.advantages__icon
{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;

    width: 80px;
    height: 80px;
}

.advantages__icon img
{
    display: block;

    max-width: 100%;
    max-height: 100%;

    border-radius: 8px;
}

.advantages__desc
{
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;

    margin-top: 16px;
}



.strategy
{
    position: relative;

    min-height: 640px;
    padding: 99px 0;
}

.strategy__bg
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.strategy::after
{
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: url(../images/bg_shadow.png) 50%/cover no-repeat;
}

.strategy__img
{
    position: absolute;
    z-index: 1;
    right: 50%;
    bottom: 30px;

    display: block;

    width: 516px;
    margin-right: 372px;
}

.strategy .cont
{
    position: relative;
    z-index: 2;

    justify-content: space-between;
}

.strategy__coll
{
    width: calc(50% - 10px);
}

.strategy__colr
{
    width: calc(50% - 10px);
    padding-top: 64px;
}

.strategy__list
{
    list-style-type: none;

    counter-reset: list1;
}

.strategy__list li
{
    position: relative;

    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;

    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;

    min-height: 48px;
    padding-left: 72px;

    counter-increment: list1;
}

.strategy__list li + li
{
    margin-top: 32px;
}

.strategy__list li:before
{
    content: counter(list1);

    position: absolute;
    top: 0;
    left: 0;

    line-height: 48px;

    width: 48px;

    text-align: center;

    border-radius: 50%;
    background: #4419BD;
}



.clients
{
    padding-top: 240px;
}

.clients__grid
{
    justify-content: space-between;
    flex-wrap: nowrap;

    margin-top: 80px;
}

.client
{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;

    width: 128px;
    height: 128px;
}

.client + .client
{
    margin-left: 30px;
}

.client img
{
    display: block;

    max-width: 100%;
    max-height: 100%;
}



/*-----------------
    Team
-----------------*/
.team-section
{
    margin-top: 240px;
}

.team-section .cont
{
    justify-content: space-between;
}

.team-section__colr
{
    width: calc(100% - 400px);
}

.team
{
    width: calc(125.65% + 20px);
    margin: -40px 0 0 calc((25.65% + 20px)*-1);
}

.team__item
{
    position: relative;

    width: calc(100%/5 - 20px);
    margin: 40px 0 0 20px;
}

.team__item:first-child
{
    margin-left: calc(20% + 20px);
}


.team__photo
{
    position: relative;

    padding-bottom: 100%;
}

.team__photo img
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    border-radius: 8px;

    transition: filter .2s linear;

    filter: grayscale(100%);
    object-fit: cover;
}

.team__item:hover .team__photo img
{
    filter: grayscale(0);
}

.team__name
{
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;

    margin-top: 16px;
}

.team__position
{
    color: #959699;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;

    margin-top: 4px;
}



.info-section
{
    margin-top: 120px;
}

.info-section__bg
{
    position: relative;

    overflow: hidden;

    padding: 64px;

    border-radius: 8px;
    background: #1B1C20;
}

.info-section__info
{
    position: relative;
    z-index: 1;

    max-width: 488px;
}

.info-section__title
{
    color: #FFF;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .02em;
    text-transform: uppercase;
}

.info-section__desc
{
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;

    margin-top: 32px;
}

.info-section__btn-violet
{
    margin-top: 40px;
}

.info-section__img
{
    position: absolute;
    right: -278px;
    bottom: -234px;

    display: block;

    width: 883px;
}



/*------------
    Footer
------------*/
.footer
{
    margin-top: 240px;
    padding: 120px 0 80px;

    background: #1B1C20;
}

.footer__info
{
    justify-content: space-between;

    margin-top: 43px;
}

.footer__contact
{
    width: calc(50% - 10px);
}

.footer__adres
{
    position: relative;

    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;

    padding-left: 40px;
}

.footer__adres::before
{
    content: "";

    position: absolute;
    top: -3px;
    left: 0;

    width: 32px;
    height: 32px;

    background: url(../images/ic_adres.svg) 50%/contain no-repeat;
}

.socials
{
    margin-top: 38px;
}

.social-link
{
    position: relative;

    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;

    display: inline-block;

    padding: 0 24px 0 40px;

    vertical-align: top;
    text-decoration: none;
}

.social-link__icon
{
    position: absolute;
    top: -3px;
    left: 0;

    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;

    width: 32px;
    height: 32px;
}

.social-link__icon img
{
    display: block;

    max-width: 100%;
    max-height: 100%;
}

.social-link::after
{
    content: "";

    position: absolute;
    top: 50%;
    right: 0;

    width: 16px;
    height: 16px;
    margin-top: -8px;

    background: url(../images/ic_link.svg) 50% no-repeat;
}


.footer__title
{
    color: #959699;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;

    margin-bottom: 8px;
}

* + .footer__title
{
    margin-top: 35px;
}


.footer__mail
{
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.footer__mail a
{
    color: #FFF;

    text-decoration: none;
}


.footer__colr
{
    width: calc(50% - 10px);
}

.footer__desc
{
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

.footer__btn-violet
{
    margin-top: 24px;
}

.footer__bot
{
    justify-content: space-between;
    align-content: flex-end;
    align-items: flex-end;

    margin-top: 80px;
}

.footer__copy
{
    color: #959699;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

.footer__legaladres
{
    color: #959699;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;

    margin-top: 8px;
}

.footer__policy
{
    color: #959699;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

.footer__policy a
{
    color: #959699;

    text-decoration: none;
}



/*------------
    Modal
------------*/
.modal
{
    position: relative;

    display: none;
    visibility: visible !important;

    width: 688px;
    max-width: 100%;
    padding: 48px;

    border-radius: 4px;
    background: #FFF;
}

.modal .modal_title
{
    color: #000;
    font-size: 36px;
    font-weight: 700;
    line-height: normal;
}

.modal .modal_text
{
    color: #000;
    font-size: 16px;
    line-height: 22px;

    margin-top: 24px;
}

.modal .modal_text b
{
    display: inline-block;
}

.modal .modal_suBtitle
{
    color: rgba(0, 0, 0, .6);
    font-size: 14px;
    line-height: 19px;

    margin-top: 5px;
}

.modal .form
{
    margin-top: 40px;
}