@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Thin.woff2') format('woff2'),
         url('../fonts/Inter/Inter-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

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

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

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

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Bold.woff2') format('woff2'),
         url('../fonts/Inter/Inter-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Black.woff2') format('woff2'),
         url('../fonts/Inter/Inter-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


html {
    font-size: 16px
}

@media (min-width:1280px) {
    html {
        font-size: calc(16px + 15 * (100vw - 1280px) / 1280)
    }
}

:root {
    --c1: #80bcfd;
    --c2: #4ea2fc;
    --c3: #fff;
    --c4: #e6e6e6;
    --c5: #ffe6b8;
    --c6: #fff7d9;
    --g1: #909090;
    --g2: #717171;
    --g3: #676767;
    --g4: #404040;
    --g5: #191919;
    --g6: #000;
    --bg: #fff;
    --bg2: #fafafa;
    --bg3: #191e21;
    --shad: 0 0 3rem .5rem var(--g1);
    --font-header: "Inter", sans-serif;
    --font-text: "Inter", sans-serif;
    --px: .06667rem;
    --pd1: 1rem;
    --pd2: 2rem;
    --pd4: 4rem
}

* {
    font-family: var(--font-text);
    outline: none;
    box-sizing: border-box;
    background-clip: padding-box !important
}

*>p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 160%
}

*>p:last-child {
    margin-bottom: 0
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden
}

a,
button,
input[type=submit] {
    outline: none
}

img {
    vertical-align: middle
}

body {
    background-color: var(--color-bg);
    position: relative;
    display: flex;
    flex-direction: column
}

body>main {
    flex-grow: 1;
    background-color: var(--color-d)
}

.header--dnpi-2 {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%
}

.header--dnpi-2 .cont {
    height: 4rem;
    padding-left: calc(20% + 3rem);
    padding-right: var(--pd4);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.header--dnpi-2 .cont .menu {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    flex-direction: column;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: fixed;
    left: 0;
    top: 0;
    width: 20rem;
    height: 100%;
    z-index: 4;
    background-color: var(--bg);
    transform: translate(-100%);
    transition: transform .2s linear;
    border-right: var(--px) solid var(--g2)
}

.header--dnpi-2 .cont .menu .close {
    display: block;
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 5
}

.header--dnpi-2 .cont .menu .close>svg {
    width: 2rem;
    height: 2rem;
    fill: var(--c1)
}

.header--dnpi-2 .cont .menu .logo2 {
    display: flex;
    column-gap: 2rem;
    align-items: center;
    padding-block: 2rem;
    padding-inline: 2rem
}

.header--dnpi-2 .cont .menu .logo2>a {
    padding-top: .3rem
}

.header--dnpi-2 .cont .menu .logo2>a>img,
.header--dnpi-2 .cont .menu .logo2>a>svg {
    height: 4rem
}

@media (max-width:767px) {
    .header--dnpi-2 .cont .menu .logo2 {
        justify-content: center
    }
}

.header--dnpi-2 .cont .menu nav {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1.5rem;
    flex-grow: 1
}

.header--dnpi-2 .cont .menu nav div a {
    display: block;
    text-decoration: none;
    color: var(--bg);
    transition: color .2s linear
}

.header--dnpi-2 .cont .menu nav div a span {
    font-size: 1.1rem;
    font-family: var(--font-text-cond);
    font-weight: 400;
    line-height: .07rem
}

.header--dnpi-2 .cont .menu nav div a:hover {
    color: var(--c1)
}

.header--dnpi-2 .cont .menu .contacts2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 1rem
}

.header--dnpi-2 .cont .menu .contacts2 div:first-child {
    font-size: .5rem;
    text-align: center;
    font-weight: 300
}

.header--dnpi-2 .cont .menu .contacts2 div:nth-child(2) {
    font-size: 1rem;
    text-align: center;
    padding: .3rem 0 .4rem
}

.header--dnpi-2 .cont .menu .contacts2 div:nth-child(3) {
    display: flex;
    column-gap: 1rem;
    justify-content: center;
    align-items: center
}

.header--dnpi-2 .cont .menu .contacts2 div:nth-child(3) a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 50%;
    width: 1.5rem;
    aspect-ratio: 1/1
}

.header--dnpi-2 .cont .menu .contacts2 div:nth-child(3) a img {
    width: 60%;
    height: 60%;
    object-fit: cover
}

.header--dnpi-2 .cont .menu .contacts2 div:nth-child(3) a svg {
    width: 60%;
    height: 60%;
    fill: var(--bg)
}

.header--dnpi-2 .cont .menu .contacts2 div:nth-child(3) a.whatsapp svg {
    fill: #26d367
}

.header--dnpi-2 .cont .menu .contacts2 div:nth-child(3) a.telegram svg {
    fill: #597ba0
}

.header--dnpi-2 .cont .menu .contacts2 div:nth-child(3) a.call svg {
    fill: #7c529d
}

.header--dnpi-2 .cont .menu.opened {
    transform: translate(0)
}

.header--dnpi-2 .cont .menu nav {
    flex-direction: column;
    padding: 0 2rem;
    row-gap: 2rem
}

.header--dnpi-2 .cont .menu nav div a {
    color: var(--g6)
}

.header--dnpi-2 .cont .menu nav div a span {
    line-height: 100%;
    font-size: 1.5rem
}

.header--dnpi-2 .cont .l,
.header--dnpi-2 .cont .r {
    display: flex;
    gap: 2rem;
    align-items: center
}

.header--dnpi-2 .cont .msg {
    display: flex;
    gap: 1rem;
    align-items: center
}

.header--dnpi-2 .cont .msg a {
    background: linear-gradient(180deg, var(--c1), var(--c2));
    border-radius: .5rem;
    display: flex;
    width: 2rem;
    height: 2rem;
    justify-content: center;
    transition: all .4s ease-in-out;
    align-items: center
}

.header--dnpi-2 .cont .msg a svg {
    fill: var(--bg);
    width: 50%
}

.header--dnpi-2 .cont .msg a svg #tlgrm {
    fill: var(--bg)
}

.header--dnpi-2 .cont .msg a:hover {
    background: linear-gradient(0deg, var(--c1), var(--c2))
}

.header--dnpi-2 .cont .msg a:hover svg {
    fill: #fff;
    width: 50%
}

.header--dnpi-2 .cont .msg a:hover svg #tlgrm {
    fill: #fff
}

.header--dnpi-2 .cont .msg span {
    font-size: .6rem;
    color: var(--g3)
}

.header--dnpi-2 .cont .lng {
    display: flex
}

.header--dnpi-2 .cont .lng div a {
    text-decoration: none;
    color: var(--g5);
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .25rem
}

.header--dnpi-2 .cont .lng div.active a {
    color: #fff;
    background: linear-gradient(0deg, var(--c1), var(--c2));
    pointer-events: none
}

.header--dnpi-2 .cont .contacts a {
    text-decoration: none;
    font-size: .9rem;
    transition: all .25s ease-in-out;
    font-weight: 700;
    color: var(--g5)
}

.header--dnpi-2 .cont .contacts a:hover {
    color: var(--c1)
}

.header--dnpi-2 .cont .menu-btn a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    width: 1.5rem
}

.header--dnpi-2 .cont .menu-btn a span {
    width: 100%;
    height: calc(var(--px) * 2);
    background-color: var(--g5);
    transition: all .25s ease-in-out
}

.header--dnpi-2 .cont .menu-btn a span:last-child {
    width: 50%
}

.header--dnpi-2 .cont .menu-btn a:hover span {
    background-color: var(--c1)
}

.header--dnpi-2 .cont .menu-btn a:hover span:last-child {
    width: 100%
}

@media (max-width:767px) {
    .header--dnpi-2 .cont {
        padding-right: var(--pd2);
        justify-content: flex-end;
        gap: 2rem
    }

    .header--dnpi-2 .cont .contacts,
    .header--dnpi-2 .cont .lng,
    .header--dnpi-2 .cont .msg span {
        display: none
    }
}

.collages--dnpi-2 {
    position: relative;
    z-index: 1;
    display: flex;
    padding-top: 1rem;
    padding-bottom: 3rem;
    background-color: var(--bg)
}

.collages--dnpi-2 .l {
    padding-inline: var(--pd4);
    z-index: 3;
    width: 100%;
    row-gap: 2rem
}

.collages--dnpi-2 .l,
.collages--dnpi-2 .l .logo {
    position: relative;
    display: flex;
    flex-direction: column
}

.collages--dnpi-2 .l .logo {
    width: 25%;
    row-gap: 1rem
}

.collages--dnpi-2 .l .logo .img {
    width: 50%;
    display: flex
}

.collages--dnpi-2 .l .logo .img img,
.collages--dnpi-2 .l .logo .img svg {
    width: 100%
}

.collages--dnpi-2 .l .logo .slogan {
    text-align: center;
    width: 50%;
    margin-block: auto;
    font-size: .65rem;
    color: var(--g1)
}

.collages--dnpi-2 .l .header {
    margin: 0;
    width: 50%;
    font-size: 2.4rem;
    line-height: 110%;
    font-weight: 500;
    color: var(--g5);
    letter-spacing: .1rem
}

.collages--dnpi-2 .l .sum {
    width: 50%;
    position: relative;
    font-size: 2rem;
    padding-left: 4rem;
    color: var(--g5)
}

.collages--dnpi-2 .l .sum span {
    color: var(--c2);
    font-weight: 700
}

.collages--dnpi-2 .l .sum:before {
    content: "";
    position: absolute;
    height: .16rem;
    width: 3rem;
    background-color: var(--c2);
    z-index: 1;
    left: 0;
    top: 1.4rem
}

.collages--dnpi-2 .l .txt {
    width: 50%;
    font-size: 1.2rem;
    color: var(--g3);
    line-height: 120%
}

.collages--dnpi-2 .l .cta {
    display: flex;
    gap: 2rem
}

.collages--dnpi-2 .l .cta .btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: .8rem 1.2rem;
    color: #fff;
    background: linear-gradient(180deg, var(--c1), var(--c2));
    font-size: .9rem;
    gap: .8rem;
    border-radius: 1.5rem
}

.collages--dnpi-2 .l .cta .btn svg {
    height: 1.5rem
}

.collages--dnpi-2 .l .cta .btn:hover {
    background: linear-gradient(0deg, var(--c1), var(--c2))
}

.collages--dnpi-2 .l .cta .btn2 {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: .8rem 1.2rem;
    color: var(--g5);
    background: linear-gradient(180deg, var(--c3), var(--c4));
    font-size: .9rem;
    gap: .8rem;
    border-radius: 1.5rem
}

.collages--dnpi-2 .l .cta .btn2 svg {
    height: 1.5rem
}

.collages--dnpi-2 .l .cta .btn2:hover {
    background: linear-gradient(0deg, var(--c1), var(--c2));
    color: #fff
}

.collages--dnpi-2 .l .bullets {
    display: flex;
    justify-content: space-between;
    padding-top: var(--pd2)
}

.collages--dnpi-2 .l .bullets>div {
    flex: 0 0 calc(25% - 1.5rem);
    display: flex;
    position: relative
}

.collages--dnpi-2 .l .bullets>div div:first-child {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    background: linear-gradient(180deg, var(--c1), var(--c2));
    border-radius: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1
}

.collages--dnpi-2 .l .bullets>div div:first-child svg {
    color: var(--c3);
    width: 60%
}

.collages--dnpi-2 .l .bullets>div div:first-child svg path,
.collages--dnpi-2 .l .bullets>div div:first-child svg polyline {
    stroke: var(--bg)
}

.collages--dnpi-2 .l .bullets>div div:nth-child(2) {
    width: 100%;
    font-size: .9rem;
    padding: 1rem;
    border-radius: 1rem;
    background-color: #fff
}

.collages--dnpi-2 .l .bullets>div div:nth-child(2) strong {
    color: var(--c1)
}

.collages--dnpi-2 .r {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.collages--dnpi-2 .r .img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.collages--dnpi-2 .r .img .ovr {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.collages--dnpi-2 .r .img img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1
}

@media (max-width:767px) {
    .collages--dnpi-2 .l {
        padding-inline: var(--pd2)
    }

    .collages--dnpi-2 .l .logo {
        order: 1;
        width: 100%
    }

    .collages--dnpi-2 .l .logo .img {
        width: 40%
    }

    .collages--dnpi-2 .l .logo .slogan {
        width: 100%;
        font-size: 1rem;
        text-align: left;
        color: var(--g5);
        padding-top: 3rem
    }

    .collages--dnpi-2 .l .header {
        order: 2;
        font-size: 2.5rem;
        width: 100%;
        line-height: 140%
    }

    .collages--dnpi-2 .l .sum {
        order: 3;
        width: 100%
    }

    .collages--dnpi-2 .l .txt {
        order: 4;
        width: 100%;
        color: var(--g6)
    }

    .collages--dnpi-2 .l .cta {
        order: 6;
        padding-top: 2rem;
        flex-direction: column;
        gap: 0
    }

    .collages--dnpi-2 .l .cta>a {
        justify-content: center
    }

    .collages--dnpi-2 .l .cta .btn2 {
        background: none;
        color: var(--g6);
        padding: 1rem 1.2rem;
        font-weight: 700;
        text-decoration: underline
    }

    .collages--dnpi-2 .l .cta .btn2:hover {
        background: none;
        color: var(--c1)
    }

    .collages--dnpi-2 .l .bullets {
        order: 5;
        flex-wrap: wrap;
        gap: 2rem
    }

    .collages--dnpi-2 .l .bullets>div {
        flex: 0 0 calc(50% - 1rem)
    }

    .collages--dnpi-2 .r .img img {
        opacity: .5
    }
}