* {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    transition: .2s all;
    box-sizing: border-box;
}

:root {
    --blue: #025BFF;

    --background: #fff;
    --navbar-background: #fff;
    --navbar-outline: none;
    --navbar-active-link: #1D2939;
    --navbar-submenu-color-text: #98A2B3;
    --main-heading-text-color: #2A2A2A;
    --custom-input-background: #fff;
    --custom-input-border: 0 0 0 2px #E4E7EC;

    --default-border-radius: 32px;
    --tablet-border-radius: 24px;
    --mobile-border-radius: 16px;

    --default-card-background: #F2F4F7;
    --default-card-text-color: #00091A;

    --started-card-description-color: #00091A;
    --installation-card-description-color: #00091A;
    --examples-card-border-color: #98A2B3;
    --dashboard-card-info-description-color: #00091A;

    --widget-osago-background: var(--default-card-background);
    --widget-osago-border-radius: var(--default-border-radius);
    --widget-osago-card-background: #fff;
    --widget-osago-padding: 20px;
    --widget-osago-margin: auto;
    --widget-osago-max-width: var(--base-container-width);

    --connect-background: #E4E7EC;


    --system-alert-background-primary: #EFF8FF;
    --system-alert-text-color-primary: #1D2939;


    --footer-background: #F2F4F7;
    --footer-hr-color: #98A2B3;
    --footer-border-color: none;
    --footer-description-text-color: #98A2B3;
    --footer-title-text-color: #98A2B3;
    --footer-title-opacity-value: 1;
    --footer-link-color: #98A2B3;
}

:root.dark {
    --background: #141414;
    --navbar-background: #242424;
    --navbar-outline: 1px solid #4D4D4D;
    --navbar-active-link: #fff;
    --navbar-submenu-color-text: #98A2B3;

    --main-heading-text-color: #fff;

    --custom-input-background: #2F2F2F;
    --custom-input-border: none;

    --default-card-background: #242424;
    --default-card-text-color: #fff;

    --started-card-description-color: #98A2B3;
    --installation-card-description-color: #98A2B3;
    --examples-card-border-color: #4D4D4D;
    --dashboard-card-info-description-color: #98A2B3;
    --widget-osago-background: linear-gradient(180deg, rgba(1, 55, 153, 0.00) 50%, #025BFF 100%);
    --widget-osago-card-background: #242424;
    --widget-osago-border-radius: 0;
    --widget-osago-margin: 0;
    --widget-osago-padding: 0;
    --widget-osago-max-width: 100%;

    --connect-background: #141414;


    --system-alert-background-primary: #4D4D4D;
    --system-alert-text-color-primary: #fff;


    --footer-background: #141414;
    --footer-hr-color: #4D4D4D;
    --footer-border-color: 1px solid #4D4D4D;
    --footer-description-text-color: #FFF;
    --footer-title-text-color: #fff;
    --footer-title-opacity-value: .3;
    --footer-link-color: #fff;
}

html, body {
    margin: 0;
    padding: 0;
}

/*.chromeperfectpixel-panel-container {*/
/*    display: none !important;*/
/*}*/

p,
i,
b,
span,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none!important;
}

body {
    background-color: var(--background);
}

body > section:first-of-type {
    padding-top: 132px;
}

.base-container-fluid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
}

.base-container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--base-container-width);
}

.blue-gradient-text {
    background: linear-gradient(90deg, #00A1FF, #003CFF);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

input.custom-input {
    display: flex;
    height: 48px;
    padding: 12px 16px;
    align-items: center;
    align-self: stretch;
    border-radius: 16px;
    background: var(--custom-input-background);
    border: none !important;
    outline: none !important;
    color: #98A2B3;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    width: max-content;
}

input.custom-input::placeholder {
    color: #98A2B3;
}

input.custom-input.border {
    box-shadow: var(--custom-input-border) !important;
}

input.custom-input.big {
    height: 60px;
}

.inputs-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.inputs-row.inputs-row4 > * {
    flex: 1 1 calc(25%);
}

.inputs-row.inputs-row2 > * {
    flex: 1 1 calc(50%);
}

.radio-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

.radio-row .radio-title {
    color: var(--default-card-text-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.radio-row .radio-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*gap: 8px;*/
    gap:16px;
    align-items: center;
}

.radio-list input {
    width: max-content;
}

.system-alert {
    display: flex;
    padding: 12px 16px;
    border-radius: 16px;
    background: transparent;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

.system-alert.primary {
    background: var(--system-alert-background-primary);
    color: var(--system-alert-text-color-primary);
}

.other-text {
    color: var(--default-card-text-color);
}

.blue-text {
    color: var(--blue);
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.m-20 {
    margin: 20px !important;
}

.pl-20 {
    padding-left: 20px;
}

.pr-20 {
    padding-right: 20px;
}


.banner-container {
    display: flex;
    flex-direction: column;
    padding: 80px;
    border-radius: var(--default-border-radius);
    background: var(--banner-background);
    height: 600px;
    max-height: 600px;
    position: relative;
    overflow: hidden;
}

.banner-default {
    display: flex;
    flex-direction: column;
    border-radius: var(--default-border-radius);
    background: var(--banner-background);
    position: relative;
    overflow: hidden;
}

.banner-container button {
    padding: 18px 32px;
}

.banner-container .image-wrapper,
.banner-default .image-wrapper {
    z-index: 0;
    width: var(--banner-image-width);
    height: var(--banner-image-height);
    position: absolute;
    top: var(--banner-image-position-top);
    right: var(--banner-image-position-right);
    left: var(--banner-image-position-left);
    bottom: var(--banner-image-position-bottom);
    background: var(--banner-path) var(--banner-image-params);
}

.banner-container .banner-content {
    z-index: 10;
    max-width: 644px;
}

.banner-default .banner-content {
    z-index: 10;
}

.banner-container.banner-credit-card .banner-content {
    max-width: 780px;
}

.banner-container .banner-heading,
.banner-default .banner-heading {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.banner-container .banner-heading .banner-title,
.banner-default .banner-heading .banner-title {
    color: var(--banner-title-color);
    font-size: 56px;
    font-style: normal;
    font-weight: 800;
    line-height: 56px;
    margin: 0;
}

.banner-container .banner-heading .banner-description,
.banner-default .banner-heading .banner-description {
    color: var(--banner-description-color);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
    margin: 0;
    max-width: 526px;
}

.banner-container .banner-bottom {
    z-index: 10;
    margin-top: auto;
}


.device-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 72px;
    padding: 40px;
}

.device-container .device-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.device-container .device-heading .device-subtitle {
    text-align: center;
    text-transform: uppercase;
    color: var(--default-card-text-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 155.556% */
    margin: 0;
}

.device-container .device-heading .device-title {
    text-align: center;
    color: var(--default-card-text-color);
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 58px;
    margin: 0;
}

.device-container .device-wrapper {
    display: flex;
    flex-direction: row;
    gap: 200px;
    align-items: center;
}

.device-container .device-wrapper .divider {
    width: 1px;
    height: 100px;
    background: #98A2B3;
}

.device-container .device-wrapper .device-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.device-container .device-wrapper .device-item .image-phone-ios {
    width: 77.5px;
    height: 140px;
}

.device-container .device-wrapper .device-item .image-web {
    width: 176.4px;
    height: 140px;
}

.device-container .device-wrapper .device-item .device-mame {
    color: var(--default-card-text-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}


.started-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.started-container .started-heading h2.started-title {
    color: var(--default-card-text-color);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.started-container .started-wrapper {
    padding: 40px;
    border-radius: var(--default-border-radius);
    background: var(--default-card-background);
}

.started-container .started-cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.started-container .started-cards .started-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.started-container .started-cards .started-card.step1 {
    width: 332px;
}

.started-container .started-cards .started-card.step2 {
    width: 412px;
}

.started-container .started-cards .started-card.step3 {
    width: 345px;
}

.started-container .started-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
}

.started-container .started-arrow > img {
    width: 48px;
    height: 48px;
}

.started-container .started-card .started-tooltip {
    display: flex;
    width: max-content;
    padding: 2px 12px;
    border-radius: 10px;
    background: #025BFF;
    color: #FFF;
    height: 26px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
}

.started-container .started-card .started-title {
    color: var(--default-card-text-color);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.started-container .started-card .started-description {
    color: var(--started-card-description-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}


.installation-container {
    display: flex;
    flex-direction: column;
    gap: 72px;
    margin-bottom: 20px;
}

.installation-container .installation-heading > h1.installation-title {
    text-align: center;
    color: var(--default-card-text-color);
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 58px; /* 138.095% */
}

.installation-container .installation-cards {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.installation-container .installation-cards .installation-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--default-border-radius);
    background-color: var(--default-card-background);
    gap: 48px;
    padding: 40px;
    align-items: flex-start;
    flex: 1 1;
    overflow: hidden;
}

.installation-container .installation-card .installation-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    align-items: center;
}

.installation-container .installation-card .installation-tooltip {
    display: flex;
    width: max-content;
    padding: 2px 12px;
    border-radius: 10px;
    background: #025BFF;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
}

.installation-container .installation-card .installation-image {
    width: 272px;
    height: 220px;
}

.installation-container .installation-card .installation-image > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.installation-container .installation-card .installation-info {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    justify-content: center;
}

.installation-container .installation-card .installation-title {
    color: var(--default-card-text-color);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.installation-container .installation-card .installation-description {
    color: var(--installation-card-description-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
}

.installation-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.installation-banner {
    display: flex;
    flex-direction: column;
    padding: 40px;
    border-radius: var(--default-border-radius);
    background: var(--installation-banner-background);
    position: relative;
    overflow: hidden;
    height: 350px;
}

.installation-banner button {
    padding: 12px 24px;
}

.installation-banner .image-wrapper {
    z-index: 0;
    width: var(--installation-banner-image-width);
    height: var(--installation-banner-image-height);
    position: absolute;
    top: var(--installation-banner-image-position-top);
    right: var(--installation-banner-image-position-right);
    left: var(--installation-banner-image-position-left);
    bottom: var(--installation-banner-image-position-bottom);
    background: var(--installation-banner-path) var(--installation-banner-image-params);
}

.installation-banner .banner-content {
    z-index: 10;
    max-width: 462px;
}

.installation-banner .banner-heading {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.installation-banner .banner-heading .banner-title {
    color: var(--installation-banner-title-color);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.installation-banner .banner-heading .banner-description {
    color: var(--installation-banner-description-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.installation-banner .banner-bottom {
    z-index: 10;
    margin-top: 32px;
}

.installation-support {
    padding: 60px 0;
    border-radius: var(--default-border-radius);
    background: var(--default-card-background);
}

.installation-support .support-items {
    display: flex;
    flex-direction: row;
    gap: 120px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}


.examples-container {
    display: flex;
    flex-direction: column;
    gap: 72px;
}

.examples-container .examples-heading > h1.examples-title {
    color: var(--default-card-text-color);
    text-align: center;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 58px; /* 138.095% */
}

.examples-container .examples-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.examples-container .examples-cards .examples-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 32px;
    height: 300px;
    max-height: 300px;
    background: transparent;
    box-shadow: 0 0 0 1px var(--examples-card-border-color);
    border-radius: var(--default-border-radius);
    flex: 1 1 calc(33.333% - 20px);
    cursor: pointer;
}

.examples-container .examples-card .examples-head {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.examples-container .examples-card .examples-image {
    width: 100%;
    height: 100%;
}

.examples-container .examples-card:hover .examples-head > .examples-link {
    opacity: 1;
}

.examples-container .examples-card:hover .examples-head > .examples-link svg * {
    transition: none;
    fill: var(--default-card-text-color);
}

.examples-container .examples-card .examples-head > .examples-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    opacity: 0;
    color: var(--default-card-text-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 150% */
    text-decoration: none;
    position: absolute;
    right: 0;
}

.examples-container .examples-card .examples-info {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.examples-container .examples-card .examples-info .examples-title {
    color: var(--default-card-text-color);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 100% */
    text-align: start;
}

.examples-container .examples-card .examples-info .examples-description {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.examples-container .examples-card .examples-info .examples-description .examples-type {
    color: var(--default-card-text-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    opacity: .5;
}

.examples-container .examples-card .examples-info .examples-description .examples-name {
    color: var(--default-card-text-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
}


.dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard-container .dashboard__feature-cards {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.dashboard-container .dashboard__feature-cards .dashboard__feature-card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    max-height: 700px;
    height: 700px;
    border-radius: var(--default-border-radius);
    justify-content: flex-end;
    padding: 40px;
    flex: 1 1;
    overflow: hidden;
    /*gap: 20px;*/
}

.dashboard-container .dashboard__feature-cards .dashboard__feature-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 80%);
    z-index: 2;
}

.dashboard-container .dashboard__feature-cards .dashboard__feature-card.manager::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 41.49%, #000 66.52%);
}

.dashboard-container .dashboard__feature-card .image-wrapper {
    z-index: 0;
    width: var(--dashboard-banner-image-width);
    height: var(--dashboard-banner-image-height);
    position: absolute;
    top: var(--dashboard-banner-image-position-top);
    right: var(--dashboard-banner-image-position-right);
    left: var(--dashboard-banner-image-position-left);
    bottom: var(--dashboard-banner-image-position-bottom);
    background: var(--dashboard-banner-path) var(--dashboard-banner-image-params);
}

.dashboard-container .dashboard__feature-card .dashboard-image.cabinet {
    --dashboard-banner-image-width: 820px;
    --dashboard-banner-image-height: 700px;
    --dashboard-banner-image-position-top: 0;
    --dashboard-banner-image-position-right: auto;
    --dashboard-banner-image-position-left: 0;
    --dashboard-banner-image-position-bottom: auto;
    --dashboard-banner-image-params: -117px -182px / 143.415% 126% no-repeat;
}

.dashboard-container .dashboard__feature-card .dashboard-image.manager {
    --dashboard-banner-image-width: 820px;
    --dashboard-banner-image-height: 700px;
    --dashboard-banner-image-position-top: 0;
    --dashboard-banner-image-position-right: auto;
    --dashboard-banner-image-position-left: 0;
    --dashboard-banner-image-position-bottom: auto;
    --dashboard-banner-image-params: 0px -0.324px / 100% 65.664% no-repeat;
}

.dashboard-container .dashboard__feature-card .dashboard__feature-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.dashboard-container .dashboard__feature-card .dashboard__feature-content .title {
    color: #FFF;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 58px;
}

.dashboard-container .dashboard__feature-card .dashboard__feature-content .description {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.dashboard-container .dashboard__info-cards {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.dashboard-container .dashboard__info-cards .dashboard__info-card {
    display: flex;
    flex-direction: column;
    padding: 40px;
    gap: 32px;
    flex: 1 1;
    border-radius: var(--default-border-radius);
    background: var(--default-card-background);
    height: 240px;
    max-height: 240px;
    overflow: hidden;
}

.dashboard-container .dashboard__info-card .dashboard__info-heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.dashboard-container .dashboard__info-card .dashboard__info-heading .title {
    color: var(--default-card-text-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 150% */
}

.dashboard-container .dashboard__info-card .dashboard__info-heading > img {
    width: 32px;
    height: 32px;
}

.dashboard-container .dashboard__info-card .dashboard__info-description {
    color: var(--dashboard-card-info-description-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.partners-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.partners-container .partners-heading .partners-title {
    color: var(--default-card-text-color);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.partners-container .partners-items img {
    opacity: .4;
}


.widget-osago,
.widget-mortgage {
    position: relative;
    margin-left: var(--widget-osago-margin);
    margin-right: var(--widget-osago-margin);
    width: 100%;
    padding: var(--widget-osago-padding);
    max-width: var(--widget-osago-max-width) !important;
}

.widget-container {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.widget-container .image-wrapper {
    z-index: 0;
    width: var(--widget-image-width);
    height: var(--widget-image-height);
    position: absolute;
    top: var(--widget-image-position-top);
    right: var(--widget-image-position-right);
    left: var(--widget-image-position-left);
    transform: translate(-50%);
    bottom: var(--widget-image-position-bottom);
    background: var(--widget-path) var(--widget-image-params);
}

.widget-container.osago {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px 0;
    background: var(--widget-osago-background);
    border-radius: var(--widget-osago-border-radius);
    max-height: 820px;
    height: 820px;
}

.widget-container .widget-heading {
    text-align: center;
}

.widget-container .widget-heading > h1.widget-title {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.widget-container.osago .widget-form {
    padding: 40px;
    background: var(--widget-osago-card-background);
    width: 1100px;
    margin: 0 auto;
    border-radius: var(--default-border-radius);
    display: flex;
    flex-direction: column;
    gap: 24px
}

.widget-container.osago .widget-form .widget-wrapper {
    width: 540px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.widget-container.osago .widget-wrapper .widget-form__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget-container.osago .widget-wrapper .widget-form__heading > h3.title {
    color: var(--default-card-text-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 150% */
    text-align: center;
}

.widget-container.osago .widget-wrapper .widget-form__heading > .description {
    color: var(--default-card-text-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    text-align: center;
}

.widget-container .widget-wrapper .widget-form__content form {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.widget-container button {
    padding: 18px 0;
}

.widget-container input {
    padding: 14px 16px;
}

.widget-container.mortgage {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px 0;
    background: var(--widget-osago-background);
    border-radius: var(--widget-osago-border-radius);
    max-height: 862px;
    height: 862px;
}

.widget-container.mortgage .inputs-row {
    gap: 24px;
}

.widget-container.mortgage .widget-form {
    padding: 40px;
    background: var(--widget-osago-card-background);
    width: 1235px;
    margin: 0 auto;
    border-radius: var(--default-border-radius);
    display: flex;
    flex-direction: column;
    gap: 24px
}

.widget-container.mortgage .widget-form .widget-wrapper {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.connect-container {
    display: flex;
    flex-direction: row;
    gap: 40px;
    background: var(--default-card-background);
    border-radius: var(--default-border-radius);
    padding: 40px;
}

.connect-container .connect-left__side {
    width: 600px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex-shrink: 0;
}

.connect-container .connect-left__side .connect-heading {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.connect-container .connect-left__side .connect-heading > h1.connect-title {
    color: var(--default-card-text-color);
    text-align: center;
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: 48px;
}

.connect-container .connect-left__side .connect-heading > .connect-description {
    color: var(--default-card-text-color);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.connect-container .connect-left__side .connect-form form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    gap: 16px;
}

.connect-container .connect-left__side .connect-form button {
    margin-top: 8px;
    padding: 12px 24px;
}

.connect-container .connect-right__side {
    width: 100%;
}

.connect-container .connect-right__side .connect-wrapper {
    background-color: var(--connect-background);
    border-radius: 24px;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.connect-container .connect-right__side .connect-wrapper .image-wrapper {
    z-index: 0;
    width: var(--connect-image-width);
    height: var(--connect-image-height);
    position: absolute;
    top: var(--connect-image-position-top);
    right: var(--connect-image-position-right);
    left: var(--connect-image-position-left);
    transform: translate(-50%);
    bottom: var(--connect-image-position-bottom);
    background: var(--connect-path) var(--connect-image-params);
}


.articles-container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}

.article-actions .btn-articles {
    padding: 12px 32px;
    color: var(--main-articles-button-color);
    box-shadow: 0 0 0 1px var(--main-articles-border-color);
}

.article-actions .btn-articles:hover {
    color: var(--main-articles-botton-color-hover);
    background: var(--main-articles-botton-background-hover);
    box-shadow: 0 0 0 1px var(--main-articles-botton-border-hover);
}

.article-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: none;  /* IE и Edge */
    scrollbar-width: none;     /* Firefox */
}

.article-cards::-webkit-scrollbar {
    display: none;             /* Chrome, Safari */
}

.article-cards .article-card {
    position: relative;
    padding: 24px;
    width: 400px;
    height: 300px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 24px;
    flex: 1 1 calc(100% - 20px);
    overflow: hidden;
}

.article-cards .article-card img:not(.blog-icon) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.article-cards .article-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 9, 26, 1) 0%, rgba(0, 9, 26, 0) 100%);
    z-index: 2;
}

.article-cards .article-card .article-card__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.article-cards .article-card h2.article-title {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
}

.article-cards .article-card .article-description {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

.relevant-category-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.relevant-container {
    display: flex;
    flex-direction: row;
    gap: 72px;
    background: #025BFF;
    padding: 40px;
    border-radius: var(--default-border-radius);
    justify-content: space-between;
}

.relevant-container .relevant-heading {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.relevant-container .relevant-heading .relevant-title {
    color: #FFF;
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: 48px;
}

.relevant-container .relevant-heading .relevant-description {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.relevant-container .relevant-right {
    margin: 0 56px;
}

.relevant-container .relevant-cards {
    display: flex;
    flex-direction: row;
    gap: 100px;
}

.relevant-cards .relevant-card {
    display: flex;
    flex-direction: column;
}

.relevant-cards .relevant-card .title .number {
    color: #FFF;
    font-size: 72px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: uppercase;
}

.relevant-cards .relevant-card .title .text {
    color: #FFF;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-left: 16px
}

.relevant-cards .relevant-card .description {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}


.category-container {
}

.category-container .category-cards {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.category-cards .category-card {
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding: 32px 80px;
    background: var(--default-card-background);
    border-radius: var(--default-border-radius);
    justify-content: center;
    flex: 1 1 calc(25% - 20px);
    align-items: center;
    height: 200px
}

.category-cards .category-card .category-icon {
    height: 48px;
}

.category-cards .category-card .category-description {
    color: var(--default-card-text-color);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}


.values-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.values-container .values-left {
    flex: 1 1 calc(50% - 20px);
}

.values-container .values-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 calc(50% - 20px);
}

.values-container .values-bottom {
    flex: 1 1 100%;
}

.values-container .accuracy-banner,
.values-container .transparency-banner,
.values-container .individuality-banner,
.values-container .goal-banner {
    display: flex;
    flex-direction: column;
    padding: 50px 40px;
    background: var(--default-card-background);
    border-radius: var(--default-border-radius);
    /*max-height: max-content;*/
    /*height: max-content;*/
    height: 290px
}

.values-container .accuracy-banner {
    height: 100%;
    max-height: 100%;
}

.values-container .goal-banner {
    height: 400px;
    max-height: 400px;
    padding: 56px 40px;
}

.values-container .individuality-banner {
    background: #025BFF;
}

.values-container .banner-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.values-container .banner-title {
    color: var(--default-card-text-color);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.values-container .banner-description {
    color: var(--default-card-text-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.values-container .goal-banner .banner-content {
    width: max-content;
    max-width: 760px;
}

.values-container .individuality-banner .banner-title,
.values-container .individuality-banner .banner-description {
    color: #fff;
}

.footer {
    padding: 100px 130px;
    background: var(--footer-background);
    border-top: var(--footer-border-color);
    position: relative;
}

.footer hr {
    border-top: 1px solid var(--footer-hr-color);
    margin: 60px 0;
}

.footer .footer-logo {
    width: 132px;
    height: 40px;
}

.footer .footer-sections {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 300px;
    height: 230px
}

.footer .info-section {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 540px;
}

.footer .cookie-policy {
    color: var(--footer-description-text-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}

.footer .footer-partners {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.footer .service-section,
.footer .contact-section {
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer .footer-title {
    color: var(--footer-title-text-color);
    opacity: var(--footer-title-opacity-value);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 100% */
}

.footer .footer-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer .footer-links .footer-link {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    color: var(--footer-link-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    height: 17px
}

.footer .contact-section .footer-links {
    gap: 24px
}

.footer .footer-copyright {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.footer .footer-copyright > span {
    color: var(--footer-description-text-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}

.owl-main-partners .item,
.partners-items .item {
    opacity: .4;
    max-width: 280px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
}