@charset "UTF-8";

@font-face {
    font-family: "Poppins main";
    src: url(../fonts/Poppins-Regular.ttf) format("truetype");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: "Poppins main";
    src: url(../fonts/Poppins-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal
}

body {
    font-family: "Poppins main", sans-serif
}

html {
    scroll-behavior: smooth
}

p {
    font-size: 16px;
    font-family: "Poppins main", sans-serif;
    font-weight: lighter
}

button,
span {
    font-family: "Poppins main", sans-serif
}

.main-btn {
    font-family: "Poppins main", sans-serif;
    background: #4E5EE6;
    padding: 20px 48px;
    color: #fff;
    font-weight: 600;
    transition: all .5s ease;
    display: inline-block;
    text-align: center;
    max-width: max-content
}

.main-btn:hover {
    background: #1a73e8;
    color: #fff;
    transform: scale(.9)
}

.form-send {
    padding: 32px;
    background: #25282ACC;
    color: #000;
    max-width: 486px;
    width: 100%
}

.form-send h6 {
    text-align: center;
    font-size: 22px;
    color: #fff
}

.form-send .input-block {
    position: relative
}

.form-send input {
    border-radius: 8px;
    padding: 14px;
    width: 100%;
    display: block;
    border: none;
    outline: 0;
    font-size: 16px;
    font-weight: 300;
    color: #000
}

.form-send input::placeholder {
    font-size: 16px;
    font-weight: 300;
    color: #666
}

.form-send input:focus {
    border: none;
    outline: 0
}

.form-send .input-label {
    position: absolute;
    font-size: 12px;
    font-weight: 300;
    color: #3d3d3d !important;
    z-index: 20;
    top: 6px;
    left: 12px
}

.form-send .input-label-phone {
    left: 94px
}

.form-send .main-btn {
    display: block;
    max-width: 100%;
    width: 100%;
    font-weight: 500
}

.form-send .form-footer-label {
    font-size: 12px;
    font-weight: 300;
    color: #fff
}

.form-send .form-footer-label a {
    color: #1a73e8
}

.header {
    position: relative;
    background: #fff
}

.header nav a {
    color: #3d3d3d
}

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

.header .main-btn {
    padding: 12px 32px;
    color: #fff
}

.header .main-btn:hover {
    background: #fff;
    color: #1a73e8
}

.burger {
    display: none;
    background: 0 0;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 40px
}

.burger .burger__icon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.burger .burger__icon--close {
    display: none
}

.burger.active .burger__icon--open {
    display: none
}

.burger.active .burger__icon--close {
    display: block
}

.hero {
    position: relative;
    background: url(../img/hero-bg.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 48px 0
}

.hero .container {
    z-index: 2;
    position: relative
}

.hero h1 {
    line-height: 110%;
    font-weight: 600;
    color: #fff
}

.hero .hero-title {
    max-width: 666px;
    width: 100%;
    justify-content: center
}

.hero .hero-title p {
    color: #fff !important;
    font-weight: 100
}

.hero .hero-block {
    gap: 1rem
}

.hero .hero-block .hero-form {
    max-width: 480px;
    width: 100%
}

.what-is {
    padding: 100px 0
}

.what-is.dark {
    background: #E8EAED;
}

.what-is h2 {
    margin: 0 auto;
    font-weight: 600
}

.what-is .title-box {
    text-align: center;
    margin-bottom: 45px;

    h2 {
        font-size: 36px;
        margin-bottom: 24px;
    }
}

.what-is .grid-nest .grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.what-is .grid-nest .grid .grid-col-1,
.what-is .grid-nest .grid .grid-col-2 {
    display: grid;
    gap: 1.5rem
}

.what-is .grid-nest .grid .grid-col-1 p,
.what-is .grid-nest .grid .grid-col-2 p {
    background: #E8EAED;
    color: #252b37 !important;
    /* border-radius: 16px; */
    padding: 1.5rem;
    font-weight: 600
}

.what-is .grid-nest .grid .grid-col-1 {
    grid-template-columns: 1fr 1fr
}

.what-is .grid-nest .grid .grid-col-2 {
    grid-template-columns: 1fr 1fr 1fr
}

.what-is .main-btn {
    display: inline-block;
    max-width: max-content;
    padding: 20px 48px
}

.what-is .what-is-text {
    font-size: 16px;
    font-weight: 300;
    gap: 1rem
}

.what-is .what-is-text p {
    color: #3d3d3d
}

.what-is .what-is-bottom-container {
    background: #E8EAED;
    padding: 1.5rem;
    /* border-radius: 16px; */
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.what-is .what-is-bottom-container p {
    font-weight: bold;
    color: #25282A;
}

.what-is .what-is-info {
    border-radius: 1rem
}

.what-is .what-is-info iframe {
    /* border-radius: 16px; */
    object-fit: cover;
    height: 100%;
    width: 100%
}

.durations-title {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.durations-title p {
    color: #3d3d3d
}

.durations {
    background: #E8EAED;
    padding: 80px 0
}

.durations .main-btn {
    display: inline-block;
    max-width: max-content;
    padding: 20px 48px
}

.durations .durations-items {
    width: 100%;
    max-width: none
}

.durations .durations-items .image-container {
    display: flex;
    justify-content: center
}

.durations .item {
    overflow: hidden;
    box-shadow: 0 4px 8px 3px rgba(60, 64, 67, .1490196078);
    width: 100%;
    max-width: 370px;
    height: 132px;
    align-items: center;
    background: #25282A;
    gap: 2rem
}

.durations .item .durations-payback-period {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 120px;
    height: 100%;
    background: #fff;
}

.durations .item .durations-payback-period p {
    color: #252b37 !important;
    font-weight: 600
}

.durations .item .durations-payback-period span {
    color: #252b37;
    font-size: 16px;
    font-weight: lighter;
    font-weight: 600
}

.durations .item .durations-info span {
    color: #3d3d3d
}

.durations .item .durations-info p {
    color: #fff !important
}

.durations .item .durations-info .caption {
    color: #109c35;
    font-size: 16px
}

.durations .item p {
    font-weight: 500;
    font-size: 24px
}

.durations .item span {
    font-size: 14px;
    color: #fff;
    font-weight: 300
}

.durations .duration-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem
}

.durations .duration-card ul {
    padding: 0;
    color: #3d3d3d;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.durations .durations-payback-period {
    background: #fff;
    padding: 17px;
    color: #252b37;
    text-align: center;
    max-width: 124px;
    width: 100%
}

.durations .durations-payback-period p {
    color: #252b37
}

.durations .durations-payback-period span {
    color: #252b37
}

.durations .durations-info p {
    white-space: nowrap;
    font-weight: 600;
    color: #fff
}

.durations .durations-info span {
    color: #fff !important;
    font-weight: lighter
}

.digital {
    padding-top: 80px
}

.digital .image-card {
    position: relative
}

.digital .image-card .digital-item {
    position: absolute;
    bottom: 0;
    border-radius: 0 0 2rem 2rem
}

.digital .digital-list {
    background: 0 0 !important;
    color: #fff
}

.digital .digital-list .highlight {
    background: #25282A;
    padding: 32px;
    border-radius: 8px;
    margin: 0
}

.digital .digital-list ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: disc
}

.digital .digital-list .digital-item img {
    height: 100%
}

.digital .cards-caption {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.digital .cards-caption b {
    width: 100%;
    display: block;
    text-align: center
}

.digital .digital-info {
    background: #E8EAED;
    color: #fff;
    padding: 32px;
    border-radius: 16px
}

.digital .digital-info p {
    font-size: 16px;
    font-weight: 500
}

.digital .digital-info ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    height: 100%
}

.digital .digital-info li {
    font-weight: 300
}

.digital .image {
    display: flex;
    flex-direction: row;
    gap: 20px;
    background: #e6f4ea;
    padding: 32px;
    border-radius: 16px
}

.digital .image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.digital .max-width div {
    width: 100%
}

.digital .max-width .quote-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.digital .max-width .quote-container p {
    color: #3d3d3d
}

.digital .max-width .quote-container .caption {
    color: #000
}

.digital .digital-item {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.digital .digital-item p,
.digital .digital-item ul {
    color: #3d3d3d
}

.digital .digital-item ul {
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem
}

.digital .digital-item.yellow {
    background: #fef7e0
}

.digital .digital-item.green {
    background: #e6f4ea
}

.digital .full-height {
    height: 100%
}

.calculate {
    padding: 100px 0;
    background: #E8EAED
}

.calculate .main-btn {
    display: inline-block;
    max-width: max-content;
    padding: 20px 48px
}

.calculate .calculate-info {
    max-width: 588px
}

.calculate .only-mobile-btn {
    display: none;
    background: #1a73e8;
    border-radius: 8px;
    color: #fff;
    font-weight: 500;
    transition: all .5s ease;
    padding: 20px 48px
}

.calculate .calc {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    max-width: 588px;
    max-height: 500px
}

.calculate .calc__box {
    padding: 40px;
    background: #25282A;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around
}

.calculate .calc__row {
    margin-bottom: 22px
}

.calculate .calc__row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px
}

.calculate .calc__label {
    font-weight: 600;
    font-size: 16px;
    opacity: .95;
    color: #fff
}

.calculate .calc__pill {
    min-width: 120px;
    text-align: center;
    padding: 9px 14px;
    border-radius: 6px;
    background: #fff;
    font-weight: 600;
    font-size: 16px
}

.calculate .calc__pill.green {
    color: #000
}

.calculate .calc__pill.blue {
    color: #000
}

.calculate .calc__slider input[type=range] {
    width: 100%;
    appearance: none;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    outline: 0
}

.calculate .calc__slider input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    cursor: pointer
}

.calculate .calc__slider .green::-webkit-slider-thumb {
    border: 5px solid #4E5EE6
}

.calculate .calc__slider .blue::-webkit-slider-thumb {
    border: 5px solid #4E5EE6
}

.calculate .calc__slider input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    cursor: pointer
}

.calculate .calc__slider .green::-moz-range-thumb {
    border: 5px solid #4E5EE6
}

.calculate .calc__slider .blue::-moz-range-thumb {
    border: 5px solid #4E5EE6
}

.calculate .calc__slider input[type=range].green {
    background: linear-gradient(90deg, #4E5EE6 var(--fill, 0), #fff var(--fill, 0))
}

.calculate .calc__slider input[type=range].blue {
    background: linear-gradient(90deg, #1a73e8 var(--fill, 0), #fff var(--fill, 0))
}

.calculate .calc__ticks {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 14px;
    opacity: .82
}

.calculate .calc__ticks span {
    text-align: center;
    white-space: nowrap;
    color: #fff;
    font-weight: lighter
}

.calculate .number-left-1 {
    padding-left: 28px
}

.calculate .number-left-2 {
    padding-left: 23px
}

.calculate .number-left-3 {
    padding-left: 20px
}

.calculate .number-left-4 {
    padding-left: 20px
}

.calculate .time-left-1 {
    padding-left: 13px
}

.calculate .time-left-2 {
    padding-left: 12px
}

.calculate .time-left-3 {
    padding-left: 4px
}

.calculate .time-left-4 {
    padding-left: 4px
}

.calculate .calc__result {
    margin-top: 8px;
    border-radius: 6px;
    background: #fff;
    padding: 14px 16px 16px;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04)
}

.calculate .calc__result-title {
    color: #000;
    font-weight: 600;
    font-size: 16px
}

.calculate .calc__result-value {
    color: #4E5EE6;
    font-weight: 600;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: .4px
}

.manual-advantages {
    padding: 100px 0;
    background: #fff
}

.manual-advantages__head {
    max-width: 980px;
    margin: 0 auto 36px
}

.manual-advantages__head h2 {
    margin-bottom: 14px
}

.manual-advantages__head p {
    color: #b4bac4;
    margin: 0
}

.manual-advantages__title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: #25282A
}

.manual-advantages__top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 20px
}

.manual-advantages__list {
    display: grid;
    gap: 20px
}

.manual-advantages__item {
    background: #f0f1f4;
    color: #25282A;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
    padding: 24px;
    padding-left: 60px;
    position: relative;
    display: flex;
    align-items: center
}

.manual-advantages__item::before {
    content: "✓";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4E5EE6;
    color: #fff;
    font-size: 12px;
    font-weight: 700
}

.manual-advantages__image {
    min-height: 436px;
    position: relative;
    overflow: hidden;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
}

.manual-advantages__bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.manual-advantages__note {
    margin: 28px 0 0;
    color: #b4bac4;
    font-size: 16px;
    line-height: 1.45
}

.secure-control {
    padding: 100px 0;
    background: #E8EAED
}

.secure-control__heading {
    margin-bottom: 36px;
    color: #25282A
}

.secure-control__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.secure-control__card {
    background: #fff;
    padding: 24px;
}

.secure-control__card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.secure-control__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25282A;
    font-size: 22px;
    line-height: 1
}

.secure-control__card h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    color: #25282A
}

.secure-control__card p {
    margin: 0;
    color: #52565d;
    line-height: 1.45;
    font-size: 16px
}

.investments {
    padding: 80px 0
}

.investments h2 {
    max-width: 85%;
    width: 100%
}

.approved {
    padding: 100px 0;
    /* border-radius: 16px; */
    background: #E8EAED;
}

.approved .approved-blocks {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 1.5rem
}

.approved .approved-blocks .approved-block {
    display: flex;
    flex-direction: column;
    width: 100%
}

.approved .durations-title {
    margin-bottom: 3rem
}

.approved .subtitle {
    margin-bottom: 48px
}

.approved .approved-title h2 {
    font-size: 22px
}

.approved .approved-title h2 span {
    color: #4E5EE6
}

.approved .approved-title ul {
    list-style-type: disc
}

.approved .approved-title ul li {
    font-weight: 300;
    font-size: 16px
}

.approved .step-title {
    font-weight: 600
}

.approved .approved-block {
    gap: 1.5rem
}

.approved .approved-block .approved-title {
    font-size: 24px;
    font-weight: 600;
    justify-content: center
}

.approved .approved-block ul {
    margin: 0
}

.approved .approved-info .approved-image {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.approved .approved-info .approved-image img {
    object-fit: cover;
    height: 100%;
    width: 100%
}

.divider {
    width: 100%;
    height: 1px;
    background: #dadce0
}

.faq-section {
    padding: 100px 0
}

.faq-section .faq-container {
    max-width: 1000px;
    margin: 0 auto
}

.faq-section .faq-title {
    text-align: center;
    line-height: 1.2;
    margin-bottom: 34px
}

.faq-section .faq-item {
    background: #E8EAED;
    margin-bottom: 18px;
    overflow: hidden;
    transition: box-shadow .3s ease
}

.faq-section .faq-item.active {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
}

.faq-section .faq-question {
    width: 100%;
    border: none;
    background: 0 0;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
    cursor: pointer;
    color: #000
}

.faq-section .faq-question span {
    font-weight: 600;
    font-size: 24px
}

.faq-section .faq-question .faq-icon {
    font-size: 32px;
    font-weight: lighter
}

.faq-section .faq-question span:first-child {
    flex: 1
}

.faq-section .faq-icon {
    flex-shrink: 0;
    font-size: 34px;
    line-height: 1;
    font-weight: 300;
    color: #2f8cff;
    transition: transform .25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px
}

.faq-section .faq-item.active .faq-icon {
    transform: rotate(180deg)
}

.faq-section .faq-answer-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease
}

.faq-section .faq-answer {
    padding: 0 24px 24px;
    font-size: 16px;
    line-height: 1.55;
    color: #4a4a4a;
    max-width: 95%;
    font-weight: lighter
}

@media (max-width:768px) {
    .faq-section {
        padding: 30px 16px 40px
    }

    .faq-title {
        margin-bottom: 24px
    }

    .faq-question {
        padding: 22px 18px;
        font-size: 16px
    }

    .faq-question span {
        font-size: 20px !important
    }

    .faq-answer {
        padding: 0 18px 20px;
        font-size: 15px
    }

    .faq-icon {
        font-size: 30px
    }
}

.expert {
    padding-top: 80px
}

.expert .expert-block {
    display: flex;
    align-items: center;
    background: #E8EAED;
    color: #fff;
    /* border-radius: 16px; */
    overflow: hidden;
    height: auto;
    gap: 24px;
    margin: 48px 0
}

.expert .expert-block .expert__image-container {
    max-width: 42%;
    width: 100%;
    height: -webkit-fill-available
}

.expert .expert-block .expert__image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right
}

.expert .expert-block .expert__text-content {
    max-width: 700px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem 2rem 2rem 0;
    gap: 24px;
    justify-content: center
}

.expert .expert-block .expert__text-content .expert__title {
    font-style: italic;
    font-size: 24px
}

.invert .expert__title {
    font-style: normal !important;
    font-size: 16px !important;
    font-weight: 400 !important
}

.invert .expert__text {
    font-size: 24px;
    font-weight: 600
}

.invert .expert-block {
    flex-direction: row-reverse !important
}

.invert .expert__text-content {
    padding-left: 2rem !important
}

.invert .expert__image-container {
    max-width: 46% !important
}

.action {
    position: relative;
    background: url(../img/hero-bg2.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat
}

.action .container {
    padding: 80px 30px;
    position: relative;
    z-index: 1
}

.action .action-title {
    max-width: 588px;
    width: 100%;
    justify-content: center
}

.action .action-title h2,
.action .action-title p {
    color: #fff !important
}

.action .action-title .action-position p {
    color: #000
}

.companies {
    padding: 40px 0;
    background: #E8EAED;
}

.companies .logo-ticker {
    --gap: 18px;
    --speed: 18s;
    padding: 10px 0;
    background: #fff
}

.companies .logo-ticker__viewport {
    position: relative;
    overflow: hidden;
    isolation: isolate
}

.companies .logo-ticker__viewport::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
    left: 0;
    background: linear-gradient(90deg, #fff 0, rgba(255, 255, 255, 0) 100%)
}

.companies .logo-ticker__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
    right: 0;
    background: linear-gradient(270deg, #fff 0, rgba(255, 255, 255, 0) 100%)
}

.companies .logo-ticker__track {
    display: flex;
    align-items: center;
    gap: var(--gap);
    width: max-content;
    will-change: transform;
    animation: logo-marquee var(--speed) linear infinite
}

@media (prefers-reduced-motion:reduce) {
    .companies .logo-ticker__track {
        animation: none
    }
}

.companies .logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto
}

.companies .logo img {
    max-width: 192px;
    width: auto;
    display: block
}

.companies .logo span {
    color: #fff;
    font-size: 14px;
    letter-spacing: .3px
}

@keyframes logo-marquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(var(--shift, -50%))
    }
}

.feedback {
    padding: 80px 0;
    margin-top: 48px;
}

.feedback .container {
    position: relative
}

.feedback .feedback__inner {
    max-width: 980px;
    margin: 0 auto
}

.feedback .feedback__title {
    margin: 0 0 24px;
    text-align: center;
    font-size: clamp(26px, 3vw, 34px);
    color: #0d0d22
}

.feedback .feedback__viewport {
    overflow: hidden;
    position: relative
}

.feedback .feedback__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 48px)/ 2);
    gap: 24px;
    will-change: transform;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1)
}

.feedback .fb-card {
    background: linear-gradient(90deg, #232930 0%, #21262d 100%);
    padding: 26px 24px;
    min-height: 268px;
    display: flex;
    justify-content: space-between
}

.feedback .fb-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.feedback .fb-card__meta {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.feedback .fb-card__stars {
    color: #f6c24e;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 2px
}

.feedback .fb-card__name {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    color: #fff;
    margin: 0
}

.feedback .fb-card__city {
    color: #d7dbe2!important;
    margin: 0;
    font-size: 16px;
    line-height: 1.3
}

.feedback .fb-card__avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .18);
    flex: 0 0 auto
}

.feedback .fb-card__text {
    color: #d8dce4!important;
    margin: 0;
    font-size: 16px;
    line-height: 1.48
}

.feedback p {
    color: #3d3d3d;
    font-weight: lighter;
    font-size: 16px
}

.feedback .feedback__nav {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 12px
}

.feedback .fb-btn {
    width: 48px;
    height: 48px;
    border: 0;
    color: #fff;
    background: #4E5EE6;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, opacity .15s ease
}

.feedback .fb-btn:hover {
    transform: translateY(-1px)
}

.feedback .fb-btn:active {
    transform: translateY(0);
    opacity: .9
}

.feedback .fb-btn span {
    color: #fff;
    font-size: 30px;
    line-height: 1
}

@media (prefers-reduced-motion:reduce) {
    .feedback .feedback__track {
        transition: none
    }
}

.feedback .feedback__viewport {
    overflow: hidden;
    position: relative;
    touch-action: pan-y
}

.feedback .feedback__track {
    cursor: grab
}

.feedback .feedback__track.is-dragging {
    cursor: grabbing
}

.feedback .feedback__dots {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 8px
}

.feedback .feedback__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    opacity: .35;
    background: #4E5EE6;
    transition: opacity .15s ease, transform .15s ease
}

.feedback .feedback__dot.is-active {
    opacity: 1;
    width: 20px
}

.how {
    padding: 40px 0
}

.how .howto__inner {
    margin: 0 auto
}

.how .howto__title {
    text-align: center;
    margin: 0 0 18px;
    font-size: clamp(24px, 3vw, 36px);
    color: #0d0d22
}

.how .steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 0;
    margin: 10px auto 26px;
    max-width: 900px;
    padding-top: 12px
}

.how .steps__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    height: 2px;
    background: rgba(85, 80, 255, .2)
}

.how .steps__track::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 100%;
    background: rgba(85, 80, 255, .9)
}

.how .steps__item {
    text-align: center;
    position: relative
}

.how .steps__label {
    font-size: 24px;
    font-weight: 600;
    color: rgba(85, 80, 255, .6);
    padding-bottom: 10px;
    margin-bottom: 14px
}

.how .steps__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(85, 80, 255, .25);
    margin: 0 auto;
    position: relative;
    top: -11px
}

.how .steps__item.is-done .steps__label {
    color: rgba(85, 80, 255, .65)
}

.how .steps__item.is-done .steps__dot {
    background: rgba(85, 80, 255, .9)
}

.how .steps__item.is-active .steps__label {
    color: #5550ff
}

.how .steps__item.is-active .steps__dot {
    background: #5550ff
}

.how .howto__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px;
    align-items: start
}

.how .howto-card {
    text-align: center;
    padding: 24px;
    background: #412c01;
    color: #fff;
    gap: 1rem;
    /* border-radius: 16px; */
    height: 100%
}

.how .howto-card h5 {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 20px
}

.how .howto-card__media {
    display: grid;
    place-items: center;
    margin-bottom: 18px
}

.how .howto-card__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .18))
}

.how .mobile-step {
    display: block;
    color: #1a73e8
}

.how .mobile-step p {
    font-size: 24px;
    font-weight: 600
}

.how .poster {
    padding: 32px;
    border-radius: 30px
}

.how .poster p {
    font-weight: 500
}

.login {
    position: relative;
    padding: 48px 0;
    background: url(../img/hero-bg.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat
}

.login .container {
    z-index: 2;
    position: relative
}

.login .bottom-image-container {
    margin-top: 2rem
}

.login .login-title {
    max-width: 540px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem
}

.login .login-title h1 {
    color: #fff
}

.login .login-title p {
    font-size: 22px;
    color: #fff !important
}

h7 {
    font-size: 22px;
    font-weight: 600
}

.item-bg {
    overflow: hidden
}

.about {
    padding: 48px 0
}

.about .about-title {
    line-height: 1.1;
    text-align: center;
    width: 100%
}

.about .about-title h1 {
    font-size: 48px
}

.about .about-title h7 {
    color: #3d3d3d;
    line-height: 1.5;
}

.about .about-image {
    max-width: 486px;
    width: 100%
}

.about .about-image img {
    border-radius: 2rem
}

.about-info {
    padding: 40px 0
}

.about a,
.about-advantages a,
.about-poster a {
    font-weight: 600
}

.about-advantages {
    padding: 40px 0
}

.about-advantages .notes-container {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: #E8EAED;
    padding: 1.5rem 1.5rem 1.5rem 3rem
}

.about-advantages .advantages-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.about-advantages .advantages-grid .subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem
}

.about-advantages .advantages-grid .subgrid .item {
    padding: 1.5rem;
    background: #E8EAED;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.about-advantages .advantages-grid .subgrid .item img {
    width: fit-content
}

.about-advantages .advantages-grid .bottom-grid-note {
    
}

.about-advantages .about-advantages-block {
    /* border-radius: 16px; */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 3rem
}

.about-advantages .about-advantages-block p {
    color: #3d3d3d
}

.about-advantages .advantages-items {
    /* border-radius: 1rem; */
    overflow: hidden
}

.about-advantages .advantages-items .item-info {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.about-advantages .advantages-items .item-info ul {
    color: #3d3d3d
}

.about-advantages .advantages-items .item-info p {
    color: #3d3d3d
}

.about-advantages .advantages-items.blue {
    background: #E8EAED
}

.about-advantages .advantages-items.green {
    background: #e6f4ea
}

.about-advantages .item-info {
    padding: 0 32px
}

.about-advantages .first {
    background: url(../img/bg2.webp);
    background-size: cover;
    background-position: center
}

.about-advantages .second {
}

.about-advantages li {
    list-style-type: disc;
    font-weight: 300
}

.about-advantages .advantages-bottom {
    padding: 32px;
    border-radius: 0 0 30px 30px
}

.about-advantages .advantages-bottom p {
    font-weight: 500
}

.about-poster {
    padding: 0 0 80px
}

.about-poster .about-poster-block {
    background: #25282A;
    padding: 1.5rem
}

.about-poster .about-poster-block p {
    color: #fff !important
}

.about-poster .about-poster-block b {
    color: #fff !important
}

.about-poster .main-btn {
    padding: 20px 48px
}

.documentation {
    padding: 48px 0
}

.documentation li,
.documentation p {
    color: #3d3d3d
}

.documentation a {
    font-weight: 600
}

.documentation h1,
.documentation h5 {
    font-weight: 600
}

.documentation li {
    list-style: disc;
    font-size: 18px;
    font-weight: 300
}

.documentation .strong {
    font-weight: 500
}

.footer {
    background: #fff;
    padding: 80px 0;
    color: #fff
}

.footer .logo {
    max-width: 270px
}

.footer .footer-block {
    gap: 48px
}

.footer .item {
    max-width: 130px
}

.footer .info {
    gap: 48px
}

.footer .info-text {
    font-size: 14px;
    font-weight: 300;
    color: #3d3d3d
}

.footer .info-text p {
    font-size: 14px
}

.footer .info-menu {
    gap: 32px;
    max-width: 204px;
    width: 100%
}

.footer .info-menu h6 {
    font-size: 22px;
    color: #252b37
}

.footer .info-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-weight: 500
}

.footer .info-nav a {
    color: #252b37
}

.footer .info-social {
    color: #000
}

.footer .info-social i {
    font-size: 20px
}

.funds {
    margin-top: 64px;
    padding: 0
}

.funds .info {
    width: 100%;
    gap: 0 !important;
}

.funds .info .person-main {
    flex-direction: column;
    gap: 5px;
    padding: 6px 12px;
}

.funds .info .person-main .person-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center
}

.funds .info .person-main .person-info i {
    color: #109c35
}

.funds .info .person-main .person-profit {
    gap: 5px;
    align-items: center
}

.funds .info .person-main .person-profit p {
    width: 100%;
    white-space: nowrap;
    opacity: 1
}

.funds .info .person-main .person-profit .green-container {
    background: 0 0;
    color: #00c414 !important;
    width: fit-content;
    text-align: center;
    padding: 0 5px;
    border-radius: 8px;
    font-weight: 600
}

.funds .info .person-main .person-profit .blue-container {
    background: 0 0;
    color: #fff !important;
    width: fit-content;
    text-align: center;
    padding: 0 5px;
    border-radius: 8px;
    font-weight: 600
}

.funds .live-ticker__viewport {
    padding: 1rem 0
}

.funds .item {
    border-right: 1px solid #fff;
    color: #000 !important;
    width: 100%;
    max-width: 355px;
    height: 100px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #25282A;
    /* border-radius: 16px; */
    /* padding: 12px */
}

.funds .item .profile-container {
    width: 100%;
    max-width: 100px;
    height: 100px;
    /* border-rad   ius: 50%; */
    overflow: hidden
}

.funds .item .profile-container img {
    width: 100px;
    height: 100px;
    object-fit: cover
}

.funds .item h6,
.funds .item p {
    font-size: 16px;
    color: #fff !important
}

.funds .item .person-profit {
    align-items: end
}

.funds p {
    opacity: .6
}

.funds .green {
    color: #2f2;
    font-weight: 500;
    opacity: 1
}

.funds .info img {
    width: 42px;
    height: 42px
}

.funds .person-main {
    width: 100%
}

.funds i {
    color: #2f2
}

.funds .balance p {
    width: 100%;
    display: flex;
    justify-content: space-between;
    width: 100%;
    opacity: 1;
    color: rgba(222, 222, 222, .6549019608)
}

.funds .balance span {
    color: #2f2;
    font-weight: 500;
    opacity: 1
}

.page-404,
.success {
    position: relative;
    height: 100vh;
    background-color: #2f3242
}

.page-404 svg,
.success svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -400px
}

.page-404 .message-box,
.success .message-box {
    height: 300px;
    max-width: 580px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: 50px;
    color: #fff;
    font-weight: 300
}

.page-404 h3,
.success h3 {
    color: #3d3d3d
}

.page-404 .buttons-con .action-link-wrap,
.success .buttons-con .action-link-wrap {
    margin-top: 40px
}

.page-404 .buttons-con .action-link-wrap a,
.success .buttons-con .action-link-wrap a {
    background: #68c950;
    padding: 8px 25px;
    /* border-radius: 16px; */
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    transition: all .3s linear;
    cursor: pointer;
    text-decoration: none;
    margin-right: 10px
}

.page-404 .buttons-con .action-link-wrap a:hover,
.success .buttons-con .action-link-wrap a:hover {
    background: #5a5c6c;
    color: #fff
}

.page-404 #Polygon-1,
.page-404 #Polygon-2,
.page-404 #Polygon-3,
.page-404 #Polygon-4,
.page-404 #Polygon-5,
.success #Polygon-1,
.success #Polygon-2,
.success #Polygon-3,
.success #Polygon-4,
.success #Polygon-5 {
    animation: float 1s infinite ease-in-out alternate
}

.page-404 #Polygon-2,
.success #Polygon-2 {
    animation-delay: .2s
}

.page-404 #Polygon-3,
.success #Polygon-3 {
    animation-delay: .4s
}

.page-404 #Polygon-4,
.success #Polygon-4 {
    animation-delay: .6s
}

.page-404 #Polygon-5,
.success #Polygon-5 {
    animation-delay: .8s
}

@keyframes float {
    100% {
        transform: translateY(20px)
    }
}

.beats-manual {
    padding: 100px 0;
}

.beats-manual .container {
    max-width: 1160px
}

.beats-manual__head {
    margin: 0 auto 36px
}

.beats-manual__head h2 {
    margin-bottom: 16px;
    font-size: 36px;
    line-height: 1.16;
    font-weight: 600;
    color: #25282A
}

.beats-manual__head p {
    color: #666c73;
    line-height: 1.6;
    margin: 0
}

.beats-manual__table-wrap {
    overflow-x: auto
}

.beats-manual__table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    background: #fff
}

.beats-manual__table th,
.beats-manual__table td {
    border: 1px solid #d9dbe0;
    padding: 16px 22px;
    vertical-align: top;
    text-align: left;
    font-size: 16px;
    line-height: 1.45;
    color: #4e5258;
    font-weight: 400
}

.beats-manual__table thead th {
    background: #e1e3e8;
    color: #25282A;
    font-weight: 600
}

.beats-manual__table tbody th {
    width: 33%;
    color: #25282A;
    font-weight: 600
}

.beats-manual__table tbody th span {
    margin-right: 4px
}

.beats-manual__note {
    margin-top: 36px;
    margin-bottom: 0;
    text-align: center;
    font-size: 28px;
    line-height: 1.35;
    color: #25282A;
    font-weight: 600
}

.digital {
    padding: 100px 0
}

.digital .digital-block {
    flex-direction: row
}

.digital .digital-block .durations-title {
    text-align: start;
    width: 100%
}

.digital .digital-block .image {
    width: 100%;
    padding: 0;
    height: 590px
}

.digital .digital-block .image .digital-item {
    height: 100%
}

.digital .digital-block .image .digital-item img {
    height: 100%
}

.digital .digital-footer-container {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.digital .digital-footer-container .subtitle {
    font-size: 22px;
    font-weight: 600
}

.digital .digital-footer-container .digital-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
}

.digital .digital-footer-container .digital-grid .subitem {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #E8EAED;
}

.digital .digital-footer-container .digital-grid .subitem h5 {
    font-size: 16px;
    font-weight: 600
}

.digital.dark {
    background: #E8EAED
}

.digital.dark .digital-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 1.5rem 0;
    gap: 1.5rem
}

.digital.dark .digital-grid .item {
    background: #fff;
    padding: 1.5rem;
    border-radius: 16px
}

.digital.dark .digital-block .image {
    background: 0 0;
    height: auto
}

.digital.dark .digital-block .image .digital-item {
    height: auto
}

.digital.dark .digital-block .image .digital-item img {
    height: auto
}

.digital.dark .digital-block .durations-title {
    justify-content: center
}

.digital.dark .note-container {
    background: #fff;
    padding: 1.5rem;
    /* border-radius: 16px; */
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.digital.dark .note-container p {
    font-weight: lighter
}

.digital.dark p {
    color: #000
}

.digital.dark .digital-footer-container {
    background: #fff;
    font-weight: lighter;
    text-align: center;
    padding: 1.5rem;
    /* border-radius: 16px; */
    gap: 0
}

.what-is.steps-section .what-is-text .note-container {
    background: #FFFFFF;
    padding: 1.5rem;
    color: #51555f !important
}

.what-is.steps-section .what-is-text .note-container ul {
    display: flex;
    flex-direction: column;
    list-style: disc !important;
    font-size: 16px;
    gap: 1rem
}

.what-is.steps-section .image-container {
    height: 100%;
    overflow: hidden
}

.what-is.steps-section .image-container img {
    height: 100%;
    object-fit: cover
}

.what-is.steps-section .grid-nest .grid .grid-col-1 div,
.what-is.steps-section .grid-nest .grid .grid-col-2 div {
    background: #fff;
    color: #252b37 !important;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-direction: column
}

.what-is.steps-section .grid-nest .grid .grid-col-1 div img,
.what-is.steps-section .grid-nest .grid .grid-col-2 div img {
    max-width: 20px;
    width: 100%;
    height: 20px
}

.what-is.steps-section .grid-nest .grid .grid-col-1 div p,
.what-is.steps-section .grid-nest .grid .grid-col-2 div p {
    background: 0 0;
    color: #252b37 !important;
    border-radius: 0;
    padding: 0
}

.digital.steps-section .digital-block {
    flex-direction: column
}

.digital.steps-section .digital-block .image {
    height: auto
}

.digital.steps-section .digital-block .durations-title {
    text-align: center
}

.digital.steps-section .digital-block .quote-container.bg-image {
    background-image: url(../img/bl8_bg.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.digital.steps-section .digital-block .quote-container li,
.digital.steps-section .digital-block .quote-container p {
    color: #c2c3c8;
    font-weight: lighter
}

@media (max-width:768px) {
    h1 {
        font-size: 36px
    }

    h2 {
        font-size: 26px
    }

    h6 {
        font-size: 18px
    }

    .what-is .grid-nest .grid .grid-col-1,
    .what-is .grid-nest .grid .grid-col-2 {
        grid-template-columns: 1fr
    }

    .digital.dark .digital-block .image {
        height: auto !important
    }

    .digital.dark .digital-grid {
        grid-template-columns: 1fr
    }

    .main-btn {
        font-size: 16px !important
    }

    .header {
        z-index: 2
    }

    .header .main-btn {
        max-width: fit-content !important
    }

    .about-title h1 {
        font-size: 36px !important
    }

    .about-title h7 {
        font-size: 18px;
        line-height: 140%
    }

    .about-advantages .advantages-grid .subgrid {
        grid-template-columns: 1fr
    }

    .about-poster {
        padding-bottom: 0
    }

    .main-btn,
    .only-mobile-btn {
        max-width: none;
        width: 100%
    }

    .form-send {
        padding: 32px
    }

    .form-send h6 {
        font-size: 20px
    }

    .header-block {
        flex-direction: row
    }

    .burger {
        display: flex
    }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px;
        z-index: 2;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: .3s;
        padding-top: 0;
        text-align: center;
        flex-direction: row;
        justify-content: space-around
    }

    .nav a {
        width: 100%;
        text-align: center;
        font-size: 18px
    }

    .nav.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        z-index: 2
    }

    .hero .hero-block {
        flex-direction: column;
        align-items: center;
        gap: 24px
    }

    .calculate {
        padding-bottom: 0
    }

    .calculate .calc__ticks span {
        padding: 0;
        font-size: 10px
    }

    .calculate .calc__box {
        padding: 1rem
    }

    .what-is {
        padding: 60px 0;
        border-radius: 60px
    }

    .what-is h2 {
        max-width: 100%
    }

    .what-is .what-is-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0
    }

    .what-is .what-is-text {
        gap: 16px
    }

    .durations .durations-items {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%
    }

    .durations .durations-info p {
        font-size: 28px
    }

    .durations .durations-title {
        max-width: 100%
    }

    .durations .item {
        width: 100%;
        justify-content: normal
    }

    .expert .expert__image-container {
        max-width: 100% !important
    }

    .expert .expert-block {
        padding-top: 0;
        flex-direction: column;
        height: auto
    }

    .expert .expert-block .expert__text-content {
        padding: 1rem
    }

    .invert .expert-block {
        flex-direction: column-reverse !important;
        padding-bottom: 0
    }

    .digital .digital-block {
        flex-direction: column
    }

    .digital .digital-list {
        padding: 0
    }

    .digital .image {
        flex-direction: column;
        height: 350px !important
    }

    .digital .image ul {
        padding: 0
    }

    .digital .digital-footer-container .subtitle {
        font-size: 18px
    }

    .digital .digital-footer-container .digital-grid {
        grid-template-columns: 1fr
    }

    .digital .digital-grid {
        display: flex;
        flex-direction: column;
        gap: 24px
    }

    .beats-manual__head {
        margin-bottom: 24px
    }

    .beats-manual__head h2 {
        margin-bottom: 12px;
        font-size: 34px
    }

    .beats-manual__head p {
        font-size: 15px
    }

    .beats-manual__table th,
    .beats-manual__table td {
        padding: 12px 14px;
        font-size: 14px
    }

    .beats-manual__note {
        margin-top: 24px;
        font-size: 22px
    }

    .manual-advantages__head {
        margin-bottom: 24px
    }

    .manual-advantages__title {
        font-size: 26px
    }

    .manual-advantages__top-grid {
        grid-template-columns: 1fr
    }

    .manual-advantages__list {
        order: 2
    }

    .manual-advantages__image {
        order: 1;
        min-height: 300px
    }

    .manual-advantages__bottom-grid {
        grid-template-columns: 1fr
    }

    .manual-advantages__item {
        padding: 20px 18px 20px 54px;
        min-height: 76px
    }

    .manual-advantages__item::before {
        left: 18px;
        width: 22px;
        height: 22px;
        font-size: 12px
    }

    .manual-advantages__note {
        margin-top: 20px;
        font-size: 15px
    }

    .secure-control__heading {
        margin-bottom: 24px
    }

    .secure-control__grid {
        grid-template-columns: 1fr
    }

    .secure-control__card {
        min-height: auto;
        padding: 22px 18px
    }

    .secure-control__card h3 {
        font-size: 21px
    }

    .secure-control__icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 20px
    }

    .digital .digital-grid .image-card .digital-item {
        position: relative
    }

    .digital .digital-grid .image-card {
        gap: 0
    }

    .digital .digital-grid .image-card img {
        border-radius: 2rem 2rem 0 0;
        height: auto
    }

    .digital .image img {
        object-position: right;
        height: auto
    }

    .digital .item {
        padding: 24px
    }

    .calculate .main-btn {
        display: none
    }

    .calculate .only-mobile-btn {
        display: block;
        text-align: center
    }

    .calculate .calculate-block {
        display: flex;
        flex-direction: column
    }

    .footer .footer-block {
        align-items: center
    }

    .footer .logo {
        max-width: 260px
    }

    .footer h6 {
        font-size: 24px
    }

    .footer .info-nav a {
        font-size: 18px
    }

    .footer .info-social {
        justify-content: center
    }

    .investments h2 {
        max-width: 100%
    }

    .margin-top-5 {
        margin: 0
    }

    .approved {
        margin: 0;
        padding-bottom: 0
    }

    .approved .approved-blocks {
        flex-direction: column;
        margin-bottom: 2rem
    }

    .approved .approved-block {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 1rem
    }

    .approved .approved-block .approved-title {
        gap: 1.5rem
    }

    .approved .reversed {
        flex-direction: column !important
    }

    .action .container {
        padding: 80px 10px
    }

    .action .action-block {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .action .action-title {
        max-width: 100%
    }

    .action .action-title h2 {
        font-size: 36px
    }

    .feedback .feedback__track {
        grid-auto-columns: calc((100% - 24px)/ 2)
    }

    .feedback .fb-card {
        min-height: 250px;
        padding: 22px 18px
    }

    .feedback .fb-card__name {
        font-size: 18px
    }

    .feedback .fb-card__avatar {
        width: 88px;
        height: 88px
    }

    .feedback .fb-card__stars {
        font-size: 18px
    }

    .bottom-image-container {
        display: none !important
    }

    .how {
        padding-top: 0
    }

    .how .howto__grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .how .steps {
        display: none
    }

    .how .mobile-step p {
        font-size: 20px
    }

    .how .poster {
        padding: 24px
    }

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

    .login h1 {
        font-size: 36px
    }

    .login .login-block {
        flex-direction: column;
        align-items: center
    }

    .login .login-block p {
        font-size: 18px
    }

    .about .about-block {
        flex-direction: column;
        align-items: center
    }

    .about-info .about-info-block {
        display: flex;
        flex-direction: column-reverse;
        align-items: center
    }

    .about {
        padding-bottom: 0
    }

    .about-advantages .item-info {
        padding: 24px 0
    }

    .about-advantages ul {
        padding: 0 0 0 30px
    }

    .about-advantages li {
        font-size: 16px
    }

    .about-advantages .item-bg {
        min-height: 213px;
        margin: 0
    }

    .about-advantages .advantages-bottom {
        padding: 24px
    }

    .about-poster .about-poster-block {
        text-align: left
    }

    .about-poster .main-btn {
        display: block;
        width: 100%;
        text-align: center
    }

    .footer .info {
        flex-direction: column;
        align-items: center
    }

    .footer .info-menu {
        text-align: center;
        gap: 32px;
        max-width: max-content;
        width: 100%
    }

    .footer .partners {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px
    }

    .footer .item {
        max-width: 67px
    }

    .page-404 svg,
    .success svg {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -250px;
        margin-left: -190px
    }

    .page-404 .message-box,
    .success .message-box {
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -190px;
        text-align: center
    }

    .container {
        padding-left: 10px;
        padding-right: 10px
    }

    .calculate,
    .beats-manual,
    .manual-advantages,
    .secure-control,
    .digital,
    .durations,
    .investments,
    .what-is {
        padding: 80px 0;
        margin: 0
    }

    .digital.dark .digital-footer-container {
        gap: 1.5rem
    }

    .digital.steps-section .image {
        height: 100% !important
    }
}

@media (max-width:578px) {
    p {
        font-weight: 300;
        font-size: 16px
    }

    .what-is .main-btn {
        display: block;
        max-width: 100%;
        width: 100%;
        text-align: center
    }

    .durations .main-btn {
        display: block;
        max-width: 100%;
        width: 100%;
        text-align: center
    }

    .durations .durations-payback-period {
        max-width: 104px
    }

    .beats-manual__head h2 {
        font-size: 29px
    }

    .beats-manual__note {
        font-size: 18px
    }

    .manual-advantages__title {
        font-size: 22px
    }

    .manual-advantages__head h2 {
        font-size: 29px
    }

    .manual-advantages__head p {
        font-size: 15px
    }

    .manual-advantages__item {
        font-size: 15px
    }

    .secure-control__heading {
        font-size: 29px
    }

    .secure-control__card h3 {
        font-size: 20px
    }

    .secure-control__card p {
        font-size: 15px
    }

    .feedback .feedback__track {
        grid-auto-columns: 100%
    }

    .feedback .fb-card {
        min-height: auto
    }

    .feedback .fb-card__city,
    .feedback .fb-card__text {
        font-size: 15px
    }

    .feedback .fb-card__stars {
        font-size: 17px
    }

    .feedback .fb-card__avatar {
        width: 84px;
        height: 84px
    }
}