@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap");

:root {
    --anim: all 200ms ease-in-out;
    --color-blue-dark: #072756;
    --color-blue-hover: #1856B2;
    --color-blue: #226EE0;
    --color-light-blue: #D9E8FF;
    --color-body: #EBF3FF;
    --color-white: #FFFFFF;
    --color-violet: #B9AFE9;
    --color-violet-blue: #5E81FC;
    --color-violet-light: #CED8FB;
    --color-orange: #FFA462;
    --color-orange-light: #FCDFC9;
    --color-coral: #FF8D74;
    --color-coral-light: #FBD2C9;
    --color-red-dark: #BD1735;
    --color-red: #F22F52;
    --color-black: #0B0B0C;
    --color-dark-extra: #292E36;
    --color-dark: #404651;
    --color-semidark: #8A929C;
    --color-grey: #C5CAD1;
    --color-grey-extra-light: #F2F4F7;
    --color-text: #4B5462;
    --ff: "Inter", sans-serif;
    --ff2: "Raleway", sans-serif;
    --fs: 16px;
    --container: 1200px;
    --gap: 32px;
    --gap-sm: 16px;
    --margin-section: 120px;
    --margin-huge: 240px;
    --radius: 24px;
}

/* === Reset === */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    background: var(--color-body);
    margin: 0;
    color: var(--color-text);
    font-family: var(--ff);
    font-size: var(--fs);
    font-weight: 400;
    line-height: 20px;
}

main {
    display: block;
}

img {
    border: 0;
    max-width: 100%;
}

p {
    margin: 0 0 24px;
}

p:last-child {
    margin: 0;
}

ul, ol {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

a, input, textarea {
    outline: none;
}

a {
    color: var(--color-blue);
    text-decoration: none;
    cursor: pointer;
}

th {
    font-weight: normal;
    text-align: left;
}

fieldset {
    padding: 0;
    border: 0;
    margin: 0;
}

blockquote {
    margin: 0;
    padding: 0;
}

textarea {
    resize: none;
    overflow: auto;
}

input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.clear {
    clear: both;
    display: block;
}

/* grid */
.container {
    max-width: var(--container);
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.grid {
    display: grid;
    grid-column-gap: var(--gap);
    grid-row-gap: var(--gap-sm);
    grid-template-columns: repeat(3, 1fr);
}

.grid-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* pagetitle */
.pagetitle {
    text-align: center;
    margin: 0 0 96px;
}

.pagetitle-head {
    color: var(--color-dark-extra);
    font-family: var(--ff2);
    font-size: 64px;
    line-height: 70px;
    font-weight: 700;
    margin: 0 0 32px;
}

.pagetitle-head span {
    color: var(--color-violet-blue);
}

.pagetitle-head:last-child {
    margin: 0;
}

.pagetitle-text {
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
}

.pagetitle-text small {
    display: block;
    font-size: 16px;
    line-height: 20px;
}

/* headers */
h1, h2, .h1, .h2 {
    color: var(--color-dark-extra);
    font-family: var(--ff2);
    font-weight: 700;
}

h1, .h1 {
    font-size: 80px;
    line-height: 80px;
    margin: 0 0 40px;
}

h2, .h2 {
    font-size: 32px;
    line-height: 35px;
    margin: 0 0 24px;
}

h2 span, .h2 span {
    color: var(--color-violet-blue);
}

/* btn */
.btn {
    background: 0;
    border: 1px solid var(--color-blue);
    border-radius: 8px;
    color: var(--color-blue);
    cursor: pointer;
    display: inline-block;
    font-family: var(--ff);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    outline: none;
    padding: 18px 24px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.btn-sm {
    padding: 10px 16px;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn:hover {
    background: var(--color-light-blue);
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
}

.btn-primary {
    background: var(--color-blue);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-blue-hover);
    color: var(--color-white);
}

.btn-white {
    background: var(--color-body);
    border-color: transparent;
    color: var(--color-blue);
}

.btn-white:hover {
    background: var(--color-light-blue);
    border-color: transparent;
    color: var(--color-blue);
}

.btn-more span {
    padding-right: 32px;
    position: relative;
}

.btn-more span::before {
    content: "";
    position: absolute;
    display: block;
    background-image: url("../images/svg/rarr.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    right: 0;
    top: 50%;
    margin-top: -12px;
}

.btn-play span {
    padding-left: 32px;
    position: relative;
}

.btn-play span::before {
    content: "";
    position: absolute;
    display: block;
    background-image: url("../images/svg/play-outline.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    left: 0;
    top: 50%;
    margin-top: -12px;
}

.btn-top span {
    padding-right: 32px;
    position: relative;
}

.btn-top span::before {
    content: "";
    position: absolute;
    display: block;
    background-image: url("../images/svg/rarr-up-white.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    right: 0;
    top: 50%;
    margin-top: -12px;
}

.btn-select span {
    padding-right: 24px;
    position: relative;
}

.btn-select span::before {
    content: "";
    position: absolute;
    display: block;
    background-image: url("../images/svg/chevron-down.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    right: 0;
    top: 50%;
    margin-top: -8px;
}

/* tagcloud */
.tagcloud {
    display: flex;
    flex-wrap: wrap;
}

.tagcloud-btn {
    border: 1px solid var(--color-violet-blue);
    border-radius: 30px;
    color: var(--color-dark-extra);
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    padding: 8px 16px;
    text-decoration: none;
    margin: 0 8px 8px 0;
    transition: var(--anim);
}

.tagcloud-btn:hover {
    background: var(--color-violet-blue);
    color: var(--color-white);
}

/* tabsbox */
.tabsbox {
    border: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 68px;
    padding: 0;
}

.tabsbox li {
    font-size: 14px;
    line-height: 18px;
    margin: 0 12px 12px 0;
    text-align: center;
}

.tabsbox li:last-child {
    margin-right: 0;
}

.tabsbox li a {
    border: 1px solid var(--color-violet-blue);
    border-radius: 40px;
    color: var(--color-dark-extra);
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}

.tabsbox li a.active {
    background: var(--color-violet-blue);
    color: var(--color-white);
}

/* icon_check / icon_close */
.iconbox {
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.iconbox_check {
    background-color: var(--color-violet-blue);
    background-image: url("../images/svg/check.svg");
}

.iconbox_check-light {
    background-color: var(--color-violet-light);
    background-image: url("../images/svg/check-blue.svg");
}

.iconbox_close {
    background-image: url("../images/svg/times.svg");
}

/* social_icon */
.social_icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 24px;
    width: 24px;
}

.social_icon-vk {
    background-image: url("../images/svg/vk.svg");
}

.social_icon-ok {
    background-image: url("../images/svg/ok.svg");
}

/* dropdown */
.dropdown-menu {
    border: 0;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.dropdown-menu li {
    font-weight: 500;
    border-bottom: 1px solid var(--color-grey-extra-light);
}

.dropdown-menu li:last-child {
    border-bottom: 0;
}

.dropdown-menu li a {
    color: var(--color-dark);
    display: block;
    text-decoration: none;
    padding: 12px var(--gap-sm);
    transition: var(--anim);
}

.dropdown-menu li a:hover {
    background: var(--color-grey-extra-light);
    color: var(--color-violet-blue);
}

/* ion range slider */
.irs--flat {
    height: 30px !important;
    margin: 0 0 40px;
}

.irs--flat .irs-line {
    background: 0;
    height: 16px;
    top: 0;
}

.irs--flat .irs-line::after {
    content: "";
    position: absolute;
    display: block;
    background: #ccc;
    height: 2px;
    left: 8px;
    right: 8px;
    top: 7px;
}

.irs--flat .irs-bar {
    background: var(--color-blue);
    height: 2px;
    top: 7px;
    left: 8px !important;
}

.irs--flat .irs-handle {
    background: var(--color-white);
    border: 2px solid var(--color-blue);
    border-radius: 50%;
    cursor: pointer;
    width: 16px;
    height: 16px;
    top: 0;
    z-index: 300;
}

.irs--flat .irs-handle i {
    display: none !important;
}

.irs--flat .irs-min, .irs--flat .irs-max {
    display: none;
}

.irs--flat .irs-single {
    background: var(--color-blue);
    top: -20px;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
}

.irs--flat .irs-single::before {
    border-top-color: var(--color-blue);
}

.irs--flat .irs-grid-text {
    color: var(--color-dark-extra);
    font-weight: 700;
    font-size: 10px;
    line-height: 12px;
    font-family: var(--ff);
}

.irs--flat .irs-grid-pol {
    background: var(--color-white);
    border: 2px solid var(--color-blue);
    border-radius: 50%;
    left: 50%;
    margin-left: -4px;
    width: 8px;
    height: 8px;
    top: -6px;
    z-index: 200;
}

.irs--flat .irs-grid-pol.small {
    display: none;
}

/* header */
.header {
    padding: 22px 32px 18px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: fixed;
}

.header .container {
    align-items: center;
    display: flex;
}

.header-logo img {
    display: block;
}

.header-nav {
    align-items: center;
    display: flex;
    margin-left: auto;
}

.header-nav__list {
    display: flex;
}

.header-nav__list li {
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    text-transform: uppercase;
    margin: 0 40px 0 0;
}

.header-nav__list li a {
    color: var(--color-dark-extra);
    text-decoration: none;
    transition: var(--anim);
}

.header-nav__list li a:hover {
    color: var(--color-violet-blue);
}

.header-navbar {
    background: url("../images/svg/navbar.svg") center no-repeat;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: none;
    padding: 0;
    margin: 0 0 0 auto;
    outline: none;
    width: 24px;
    height: 24px;
}

/* firstscreen */
.firstscreen {
    background: url("../images/circle.png") calc(50% + var(--container) / 4) center no-repeat;
}

.firstscreen .container {
    min-height: 768px;
    display: flex;
    align-items: center;
}

.firstscreen-details {
    max-width: 536px;
}

.firstscreen-text {
    font-size: 20px;
    line-height: 25px;
    margin: 0 0 32px;
}

.firstscreen-buttons {
    display: flex;
    margin: 0 0 64px;
}

.firstscreen-buttons .btn {
    margin: 0 16px 0 0;
}

.firstscreen-partners {
    display: flex;
    align-items: center;
}

.firstscreen-partners span {
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 5px;
}

.firstscreen-partners .social_icon {
    margin: 0 4px 0 0;
}

.firstscreen-play {
    background: url("../images/svg/play.svg") 0 0/cover no-repeat;
    border: 0;
    border-radius: 50%;
    box-shadow: 4px 10px 40px rgba(0, 0, 0, 0.4);
    display: inline-block;
    outline: none;
    width: 96px;
    opacity: 0.8;
    height: 96px;
    margin: 0;
    padding: 0;
    transition: var(--anim);
    position: absolute;
    left: calc(50% + var(--container) / 4.5);
}

.firstscreen-play:hover {
    opacity: 1;
    transform: scale(1.04);
}

/* questionbox */
.questionbox {
    background: linear-gradient(90deg, #226EE0 0%, #7B61FF 100%);
    border-radius: 24px;
    color: var(--color-white);
    margin: 0 0 var(--margin-huge);
    padding: 48px 64px;
}

.questionbox-title {
    font-size: 48px;
    font-family: var(--ff2);
    font-weight: 700;
    line-height: 53px;
    margin: 0 0 var(--gap-sm);
}

.questionbox-details {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
}

.questionbox-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 25px;
    margin: 0 64px 0 0;
}

/* whitebox */
.whitebox {
    background: #F7FAFF;
    border-radius: var(--radius);
    padding: 48px 40px;
    position: relative;
}

.whitebox-sm {
    font-size: 14px;
    line-height: 18px;
}

.whitebox .pagetitle-head {
    font-size: 24px;
    line-height: 26px;
    margin: 0 0 var(--gap-sm);
}

.whitebox-tag {
    background: #7359F5;
    border-radius: var(--radius) 0px var(--radius) 0px;
    color: var(--color-white);
    padding: 12px 16px;
    position: absolute;
    font-size: 14px;
    line-height: 18px;
    left: 0;
    top: 0;
}

.whitebox-coral {
    background: var(--color-coral);
}

.whitebox-orange {
    background: #FFA462;
}

.whitebox-blue {
    background: var(--color-blue);
}

.whitebox-purple {
    background: #5E81FC;
}

/* solutions */
.solutions {
    margin-bottom: var(--margin-section);
}

.soultion {
    padding-bottom: 150px;
}

.solution-img {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
}

/* benefits */
.benefits {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: var(--gap);
    grid-row-gap: var(--gap);
    margin: 0 0 var(--margin-section);
}

.benefits div:nth-child(1) {
    grid-area: 1/1/2/4;
}

.benefits div:nth-child(2) {
    grid-area: 1/4/2/7;
}

.benefits div:nth-child(3) {
    grid-area: 2/1/3/3;
}

.benefits div:nth-child(4) {
    grid-area: 2/3/3/5;
}

.benefits div:nth-child(5) {
    grid-area: 2/5/3/7;
}

/* benefit */
.benefit {
    padding-top: 74px;
    padding-bottom: 30px;
}

/* numbers_section */
.numbers_section {
    color: var(--color-text);
    margin: 0 0 80px;
    text-align: center;
}

.numbers_section-item {
    background: url("../images/shadow.png") center 0 no-repeat;
    padding: 64px 0;
    position: relative;
}

.numbers_section-title {
    color: var(--color-dark-extra);
    font-size: 48px;
    font-weight: 700;
    line-height: 53px;
    margin: 0 0 24px;
}

.numbers_section-text {
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
}

.numbers_section-large .numbers_section-title {
    font-family: var(--ff2);
    font-size: 96px;
    font-weight: 700;
    line-height: 106px;
}

/* knowledges */
.knowledges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: var(--gap);
    grid-row-gap: 24px;
    margin: 0 0 var(--margin-section);
}

.knowledges div:nth-child(1) {
    grid-area: 1/1/2/2;
}

.knowledges div:nth-child(2) {
    grid-area: 1/2/2/3;
}

.knowledges div:nth-child(3) {
    grid-area: 2/1/3/3;
}

.knowledge {
    display: flex;
    padding: 0;
    padding-top: 58px;
}

.knowledge-dark {
    background: #D4DCF8;
    display: block;
}

.knowledge-details {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
}

.knowledge .pagetitle-head.large {
    font-size: 48px;
    line-height: 53px;
    max-width: 500px;
}

.knowledge .tagcloud {
    margin: 16px 0 8px;
}

.knowledge-img {
    border-radius: var(--radius) 0px;
    display: block;
    object-fit: cover;
}

.projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(12, 1fr);
    grid-column-gap: var(--gap);
    grid-row-gap: var(--gap-sm);
    max-height: 604px;
    margin: 0 0 var(--margin-huge);
}

.projects .knowledge {
    padding-top: 48px;
}

.projects .knowledge-img {
    max-width: 200px;
    min-width: 200px;
}

.projects .whitebox-text {
    font-size: 14px;
    line-height: 18px;
}

.projects div:nth-child(1) {
    grid-area: 1/1/9/2;
}

.projects div:nth-child(2) {
    grid-area: 9/1/13/2;
}

.projects div:nth-child(3) {
    grid-area: 1/2/6/3;
}

.projects div:nth-child(4) {
    grid-area: 6/2/13/3;
}

/* read_wherever / service_card */
.read_wherever {
    grid-column-gap: var(--gap-sm);
    margin-bottom: 112px;
}

.service_card {
    background: var(--color-white);
    border-radius: var(--radius);
    color: var(--color-dark-extra);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
    padding: 24px;
    position: relative;
    text-decoration: none;
}

.service_card::after {
    content: "";
    position: absolute;
    display: block;
    background-image: url("../images/svg/rarr-up.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 12px;
    top: 12px;
}

.service_card span {
    display: block;
}

.service_card-icon {
    margin: 0 0 4px;
}

.service_card-icon img {
    display: block;
}

.service_card-title {
    font-family: var(--ff2);
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
}

.service_card-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    margin: 14px 0 0;
}

.service_card-large {
    padding: 48px 40px;
}

.service_card-large::after {
    width: 32px;
    height: 32px;
    right: 16px;
    top: 16px;
}

.service_card-large .service_card-title {
    font-size: 20px;
    line-height: 22px;
    display: flex;
    align-items: center;
}

.service_card-large .service_card-title img {
    display: block;
    margin: 0 12px 0 0;
    min-width: 24px;
    max-width: 24px;
}

/* chats_wrapper */
.chats_wrapper {
    align-items: center;
    display: flex;
    margin: 0 0 var(--margin-section);
}

.chats_wrapper .h2 {
    margin: 0 var(--gap) 0 0;
    max-width: 276px;
}

.chats_wrapper .grid {
    grid-column-gap: var(--gap-sm);
}

/* about_section */
.about_section {
    background: #D4DCF8 url("../images/svg/about-star.svg") right 0 no-repeat;
    border-radius: var(--radius);
    position: relative;
    margin: 0 0 var(--gap);
    padding: 48px;
}

.about_section-text {
    color: var(--color-dark-extra);
    margin: 0 0 48px;
    max-width: 591px;
}

.about_section-copy {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

/* tariffs */
.tariffs {
    color: var(--color-dark-extra);
    font-weight: 700;
    margin: 0 0 var(--margin-section);
    grid-column-gap: 0;
}

.tariffs-first {
    grid-area: 1/1/2/2;
}

.tariffs-slider {
    grid-area: 1/2/2/5;
}

.tariffs .swiper {
    margin-bottom: 32px;
}

.tariffs-note {
    color: var(--color-semidark);
    font-weight: 400;
}

.tariffs-col {
    background: var(--color-white);
    border-radius: var(--radius);
    margin-top: 32px;
}

.tariffs-col.first {
    border-radius: var(--radius) 0 0 var(--radius);
}

.tariffs-col.last {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.tariffs-header {
    line-height: 20px;
    margin: 0 0 16px;
    padding: 32px;
    text-align: center;
}

.tariffs-item {
    align-items: center;
    border-bottom: 1px solid var(--color-light-blue);
    display: flex;
    font-size: 14px;
    line-height: 18px;
    justify-content: center;
    text-align: center;
    min-height: 48px;
}

.tariffs-item.last {
    border-bottom-color: transparent !important;
}

.tariffs-item_key {
    font-weight: 400;
    display: none;
    margin: 0 8px 0 0;
}

.tariffs-first {
    padding-top: 132px;
}

.tariffs-first .tariffs-item {
    justify-content: flex-start;
    text-align: left;
}

.tariffs-footer {
    padding: 32px;
    text-align: center;
}

.tariffs-price {
    font-family: var(--ff2);
    font-size: 24px;
    font-weight: 700;
    line-height: 26px;
    margin: 0 0 24px;
}

.tariffs-price small {
    color: var(--color-semidark);
    font-size: 16px;
    font-family: var(--ff);
    font-weight: 400;
    line-height: 20px;
}

.tariffs-pro {
    background: var(--color-violet-blue);
    color: var(--color-white);
    margin: 0;
}

.tariffs-pro .tariffs-item {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.tariffs-pro .tariffs-header {
    padding-top: 64px;
}

.tariffs-pro .tariffs-footer {
    padding-bottom: 64px;
}

.tariffs-pro .tariffs-price small {
    color: #E8EAED;
}

.tariffs .swiper-pagination {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    margin: 40px 0 0;
}

.tariffs .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: 0;
    margin: 0 6px !important;
    opacity: 1 !important;
}

.tariffs .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    display: block;
    background: #65A2FE;
    transition: var(--anim);
    transform: scale(0.7);
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.tariffs .swiper-pagination-bullet-active::after {
    transform: none;
    background: var(--color-blue);
}

/* reviews */
.review {
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius);
    padding: 40px 32px;
    font-size: 14px;
    line-height: 18px;
}

.review-card {
    align-items: center;
    display: flex;
    margin: 0 0 70px;
}

.review-card_img {
    min-width: 64px;
    max-width: 64px;
    height: 64px;
    object-fit: cover;
    display: block;
    margin: 0 12px 0 0;
}

.review-card_name {
    color: var(--color-dark);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin: 0 0 4px;
}

.review-card_role {
    color: var(--color-semidark);
    font-size: 12px;
    line-height: 15px;
}

.review-text {
    margin: 0 0 70px;
}

.review-text p {
    margin: 0 0 16px;
}

.review-more {
    font-weight: 600;
}

.reviews {
    margin: 0 0 var(--margin-huge);
    overflow: hidden;
}

.reviews .swiper {
    overflow: visible;
}

.reviews .swiper-slide {
    width: 373px;
    height: auto;
    display: flex;
    align-items: center;
    user-select: none;
}

.reviews .swiper-slide .review {
    width: 100%;
}

.reviews .swiper-slide .review {
    font-size: 16px;
    line-height: 20px;
    transform: scale(0.87);
    transition: var(--anim);
}

.reviews .swiper-slide .review-card {
    margin: 0 0 20px;
}

.reviews .swiper-slide .review-card_img {
    min-width: 70px;
    max-width: 70px;
    height: 70px;
    margin: 0 24px 0 0;
    border-radius: 50%;
}

.reviews .swiper-slide .review-card_name {
    font-size: 20px;
    line-height: 25px;
}

.reviews .swiper-slide .review-card_role {
    font-size: 14px;
    line-height: 18px;
}

.reviews .swiper-slide .review-text {
    margin: 0 0 20px;
}

.reviews .swiper-slide-active .review {
    transform: scale(1);
}

/* brands_wrapper */
.brands_wrapper {
    background: var(--color-violet-light);
    margin: 0 0 var(--margin-huge);
    padding: 112px 0;
}

.brands_wrapper .container {
    display: flex;
    align-items: center;
}

.brands_wrapper .h2 {
    margin: 0 var(--gap) 0 0;
    min-width: 280px;
}

.brands_wrapper-slider {
    min-width: 0;
    flex-grow: 1;
    position: relative;
}

.brands_wrapper-slider::after, .brands_wrapper-slider::before {
    background: red;
    width: 100px;
    top: 0;
    bottom: 0;
    content: "";
    position: absolute;
    display: block;
    z-index: 100;
}

.brands_wrapper-slider::before {
    background: linear-gradient(90deg, #CED8FB 50%, rgba(206, 216, 251, 0) 100%);
    left: 0;
}

.brands_wrapper-slider::after {
    background: linear-gradient(-90deg, #CED8FB 50%, rgba(206, 216, 251, 0) 100%);
    right: 0;
}

/* chart_wrapper */
.chart_wrapper {
    grid-row-gap: var(--gap);
    margin: 0 0 var(--margin-section);
}

.chart_wrapper > div {
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}

.chart_wrapper > div:nth-child(1) {
    grid-area: 1/1/2/3;
}

.chart_wrapper > div:nth-child(2) {
    grid-area: 1/3/2/4;
}

.chartbox {
    background: var(--color-white);
    border-radius: var(--radius);
    padding: 40px;
    text-align: center;
}

.chartbox-title {
    color: var(--color-semidark);
    font-weight: 500;
    margin: 0 0 40px;
}

.chartbox-title b {
    color: var(--color-dark-extra);
    font-family: var(--ff2);
    font-size: 40px;
    font-weight: 700;
    line-height: 44px;
    display: block;
    margin: 0 0 8px;
}

.chartbox .tariffs-price {
    margin: 0 0 40px;
}

.chartform {
    background: var(--color-violet-blue);
    border-radius: var(--radius);
    color: var(--color-white);
    padding: 40px;
}

.chartform .h2 {
    color: inherit;
    line-height: 38px;
    margin: 0 0 44px;
}

.chartform .h2 span {
    background: #FF764A;
    border-radius: 8px;
    color: inherit;
    padding: 0 4px;
}

.chartform .tariffs-price {
    font-size: 32px;
    line-height: 36px;
    margin: 0 0 24px;
}

.chartform .tariffs-price small {
    color: #E8EAED;
}

/* chartline */
.chartline {
    display: flex;
    justify-content: space-between;
    height: 8px;
    margin: 0 0 60px;
    position: relative;
}

.chartline::after {
    background: var(--color-blue);
    height: 2px;
    content: "";
    position: absolute;
    display: block;
    top: 7px;
    left: 8px;
    right: 8px;
}

.chartline-item {
    display: flex;
    justify-content: center;
    position: relative;
}

.chartline-point {
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 10;
}

.chartline-point::after {
    background: var(--color-white);
    border: 2px solid var(--color-blue);
    border-radius: 8px;
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
}

.chartline-point.active::after {
    width: 16px;
    height: 16px;
}

.chartline-num {
    color: var(--color-dark);
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    position: absolute;
    left: 50%;
    top: 17px;
    transform: translateX(-50%);
}

/* footer */
.footer {
    color: var(--color-dark-extra);
    font-size: 14px;
    line-height: 18px;
    padding: 112px 0 0;
}

.footer .grid {
    grid-row-gap: 0;
}

.footer-logo {
    margin: 0 0 40px;
}

.footer-logo img {
    display: block;
}

.footer-title {
    color: var(--color-violet-blue);
    font-weight: 500;
    margin: 0 0 20px;
}

.footer-nav {
    margin: 0 0 32px;
}

.footer-nav li {
    margin: 0 0 12px;
}

.footer-nav li a {
    color: inherit;
    text-decoration: none;
}

.footer-nav li a:hover {
    color: var(--color-violet-blue) !important;
    text-decoration: underline !important;
}

.footer-text {
    margin: 0 0 40px;
}

.footer-text a:not(.btn) {
    color: var(--color-blue);
    text-decoration: none;
}

.footer-text a:not(.btn):hover {
    text-decoration: underline;
}

.footer-text p {
    margin: 0 0 16px;
}

.footer-phone {
    font-family: var(--ff2);
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    margin: 0 0 13px;
}

.footer-phone a {
    color: inherit;
    text-decoration: none;
}

/* copyright */
.copyright {
    align-items: center;
    border-top: 1px solid var(--color-violet-light);
    display: flex;
    font-size: 12px;
    line-height: 15px;
    justify-content: space-between;
    padding: 24px 0;
}

.copyright-nav {
    align-items: center;
    display: flex;
}

.footicons {
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    margin: 0 32px 0 0;
}

.footicons:last-child {
    margin-right: 0;
}

.footicons li {
    margin: 0 12px 0 0;
}

.footicons li:last-child {
    margin: 0;
}

.footicons_icon {
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 24px;
    height: 24px;
}

.footicons_icon-vk {
    background-image: url("../images/svg/icon-vk.svg");
}

.footicons_icon-tme {
    background-image: url("../images/svg/icon-tme.svg");
}

.footicons_icon-pen {
    background-image: url("../images/svg/icon-pen.svg");
}

.footicons_icon-youtube {
    background-image: url("../images/svg/icon-youtube.svg");
}

.footicons_icon-dzen {
    background-image: url("../images/svg/icon-dzen.svg");
}

/* Modal */
.modal-content {
    background: var(--color-white);
    border: 0;
    border-radius: var(--radius);
    padding: 32px;
}

.modal .btn-close {
    position: absolute;
    right: 20px;
    top: 20px;
    outline: none;
}

/* middle */
@media screen and (max-width: 1240px) {
    :root {
        --container: 992px;
    }
}

/* tablet */
@media screen and (max-width: 1020px) {
    :root {
        --container: 720px;
        --margin-section: 64px;
        --margin-huge: 80px;
        --gap: 16px;
    }

    h1, .h1 {
        font-size: 50px;
        line-height: 50px;
        margin-bottom: 20px;
    }

    .grid-tb-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-tb-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-tb-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-tb-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-tb-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-tb-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    /* header */
    .header-nav {
        max-width: 300px;
        display: block;
    }

    .header-nav__list {
        display: block;
    }

    .header-nav__list li {
        border-bottom: 1px solid var(--color-grey-extra-light);
        margin: 0;
    }

    .header-nav__list li a {
        display: block;
        padding: 16px 24px;
    }

    .offcanvas .header-btn {
        padding: 16px 24px;
    }

    .firstscreen-details {
        max-width: 480px;
    }

    .firstscreen-buttons {
        display: flex;
        flex-direction: column;
    }

    .firstscreen-buttons .btn {
        margin: 4px;
        width: 100%;
    }

    .firstscreen-text {
        font-size: 16px;
        padding-right: 30px;
    }

    .header-btn {
        width: 100%;
    }

    .header-btn .btn {
        width: 100%;
    }

    .header-navbar {
        display: block;
    }

    /* firstscreen */
    .firstscreen {
        background-size: 600px;
        background-position: calc(50% + var(--container) / 2.5) center;
    }

    .firstscreen-play {
        left: calc(50% + var(--container) / 2.9);
    }

    /* pagetitle */
    .pagetitle {
        margin: 0 0 40px;
    }

    .pagetitle-head {
        font-size: 32px;
        line-height: 36px;
        margin: 0 0 16px;
    }

    .pagetitle-text {
        font-size: 16px;
        line-height: 20px;
    }

    /* questionbox */
    .questionbox {
        padding: 40px;
    }

    .questionbox-title {
        font-size: 32px;
        line-height: 36px;
    }

    .questionbox-details {
        display: block;
    }

    .questionbox-text {
        font-size: 16px;
        line-height: 20px;
        margin: 0 0 40px;
    }

    .questionbox .btn {
        width: 100%;
    }

    /* whitebox */
    .whitebox {
        font-size: 14px;
        line-height: 18px;
    }

    .whitebox .pagetitle-head {
        font-size: 20px;
        line-height: 22px;
    }

    /* soultion */
    .soultion {
        padding-bottom: 120px;
    }

    /* numbers_section */
    .numbers_section {
        margin: 0 0 50px;
    }

    .numbers_section-item {
        background-size: 180px;
    }

    .numbers_section-title {
        font-size: 32px;
        line-height: 36px;
        margin: 0 0 16px;
    }

    .numbers_section-text {
        font-size: 16px;
        line-height: 20px;
    }

    .numbers_section-large .numbers_section-title {
        font-size: 32px;
        line-height: 36px;
    }

    /* knowledges */
    .knowledges {
        grid-row-gap: var(--gap);
    }

    .knowledges div:nth-child(1), .knowledges div:nth-child(2), .knowledges div:nth-child(3) {
        grid-area: auto;
    }

    .knowledge {
        padding-top: 32px;
    }

    .knowledge img {
        height: 240px;
    }

    .knowledge-details {
        padding: 32px;
    }

    .knowledge .pagetitle-head, .knowledge .pagetitle-head.large {
        font-size: 32px;
        line-height: 36px;
        max-width: none;
    }

    .projects {
        max-height: none;
        grid-template-rows: auto;
    }

    .projects .knowledge {
        padding-top: 0;
    }

    .projects div:nth-child(1), .projects div:nth-child(2), .projects div:nth-child(3), .projects div:nth-child(4) {
        grid-area: auto;
    }

    .projects .pagetitle-head {
        font-size: 20px;
        line-height: 22px;
    }

    /* brands_wrapper */
    .brands_wrapper {
        padding: 40px 0;
    }

    .brands_wrapper .container {
        display: block;
    }

    .brands_wrapper .h2 {
        text-align: center;
        min-width: unset;
    }

    /* tabsbox */
    .tabsbox {
        margin: 0 0 32px;
    }

    /* chats_wrapper */
    .chats_wrapper {
        display: block;
    }

    .chats_wrapper .h2 {
        font-size: 24px;
        line-height: 26px;
        margin: 0 0 16px;
        max-width: none;
        text-align: center;
    }

    /* chartform */
    .chartform {
        padding: 32px;
    }

    .chartform .h2 {
        font-size: 24px;
        line-height: 26px;
        margin: 0 0 32px;
    }

    /* about_section */
    .about_section {
        background: #D4DCF8;
        padding: 32px;
    }

    .about_section-text {
        font-size: 14px;
        line-height: 18px;
        margin: 0 0 32px;
        max-width: none;
    }

    /* copyright */
    .copyright {
        display: block;
    }

    .copyright-text {
        margin-bottom: var(--gap);
    }

    /* tariffs */
    .tariffs-first {
        display: none;
        grid-area: auto;
    }

    .tariffs-slider {
        grid-area: auto;
        min-width: 0;
        padding: 0;
    }
}

/* mobile */
@media screen and (max-width: 750px) {
    :root {
        --container: "auto";
    }

    body {
        font-size: 14px;
        line-height: 18px;
    }

    .btn-mb-block {
        display: block;
        width: 100%;
    }

    h1, .h1 {
        font-size: 40px;
        line-height: 40px;
        margin: 0 0 var(--gap);
    }

    .container {
        padding: 0 20px;
    }

    header .container {
        padding: 0;
    }

    .grid-mb-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-mb-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-mb-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-mb-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-mb-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-mb-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    /* header */
    .header {
        padding: 16px 20px;
    }

    /* firstscreen */
    .firstscreen {
        background: url("../images/circle.png") center 0/400px no-repeat;
        margin: 0 0 var(--margin-section);
        padding-top: 300px;
    }

    .firstscreen .container {
        min-height: 0;
        display: block;
    }

    .firstscreen-details {
        max-width: none;
    }

    .firstscreen-text {
        font-size: inherit;
        line-height: inherit;
    }

    .firstscreen-buttons {
        display: block;
        margin: 0 0 32px;
    }

    .firstscreen-buttons .btn {
        margin: 0 0 var(--gap);
        display: block;
        width: 100%;
    }

    .firstscreen-partners {
        justify-content: center;
    }

    .firstscreen-play {
        width: 70px;
        height: 70px;
        left: 50%;
        margin-left: -30px;
        top: 165px;
    }

    .btn-play {
        white-space: normal;
    }

    /* benefits */
    .benefits div:nth-child(1), .benefits div:nth-child(2), .benefits div:nth-child(3), .benefits div:nth-child(4), .benefits div:nth-child(5) {
        grid-area: auto;
    }

    /* numbers_section */
    .numbers_section {
        margin: 0 0 40px;
    }

    .numbers_section-item {
        background-position: 70% center;
        padding: 43px 0;
    }

    .numbers_section-item:nth-child(even) {
        background-position: 30% center;
    }

    /* tabsbox */
    .tabsbox {
        display: block;
    }

    .tabsbox li {
        margin: 0 0 8px;
    }

    /* knowledges */
    .knowledge {
        display: block;
    }

    .knowledge img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    /* projects */
    .projects .knowledge-img {
        max-width: none;
        min-width: 0;
    }

    /* brands_wrapper */
    .brands_wrapper-slider::after, .brands_wrapper-slider::before {
        content: none;
        display: none;
    }

    /* footer */
    .footer {
        padding: 68px 0 0;
    }

    .footer_section-contacts {
        grid-area: 1/1/2/2;
    }

    .copyright {
        padding-bottom: 8px;
    }

    .copyright-nav {
        flex-wrap: wrap;
    }

    .copyright-nav ul {
        display: inline-flex;
        margin: 0 var(--gap) var(--gap) 0;
    }

    /* read_wherever / service_card */
    .read_wherever {
        grid-column-gap: 8px;
        grid-row-gap: 8px;
        margin: 0 0 40px;
    }

    .service_card-title {
        font-size: 12px;
        line-height: 13px;
    }

    /* tariffs */
    .tariffs-header {
        padding: 32px var(--gap) var(--gap);
        margin: 0;
    }

    .tariffs-col {
        border-radius: var(--radius);
        margin-top: 0;
    }

    .tariffs-col.first, .tariffs-col.last {
        border-radius: var(--radius);
    }

    .tariffs-pro .tariffs-header {
        padding-top: 32px;
    }

    .tariffs-pro .tariffs-footer {
        padding-bottom: 32px;
    }

    .tariffs-item_key {
        display: block;
    }

    /* chart_wrapper */
    .chart_wrapper > div {
        display: block;
    }

    .chart_wrapper > div:nth-child(1), .chart_wrapper > div:nth-child(2) {
        grid-area: auto;
    }
}

.modal-dialog {
    max-width: 800px;
}

.modal-dialog p {
    margin: 0;
}

.modal-dialog p + p {
    margin-top: 8px;
}

.modal-dialog ul {
    padding: 0 15px;
    margin: unset;
}

.modal-dialog li {
    list-style: unset;
}

.error-text {
    color: red;
    font-size: 13px;
}

.tel-info {
    font-weight: 400;
    font-size: 13px;
    color: var(--color-text);
}

.response-content {
    padding: 12px 16px;
    font-size: 13px;
    border-radius: 16px;
    background: #eee;
}

.service-icon-sm {
    height: 16px;
    margin-top: -4px;
}

#hello-video-player {
    max-height: 414px; /* safari криво отображает иначе */
}