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

@font-face {
    font-family: "Cygre-SemiBold";
    src: url(../assets/fonts/Cygre/Cygre-SemiBold.ttf) format('ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url(../assets/fonts/Inter/Inter-400.ttf) format('ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url(../assets/fonts/Inter/Inter-500.ttf) format('ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url(../assets/fonts/Inter/Inter-600.ttf) format('ttf');
    font-weight: 600;
    font-style: normal;
}

body {
    font-family: var(--primary-font);
}

h1, h2, h3, h4, h5, h6, .h7, .h8 {
    font-family: var(--alt-font)
}


/* ===================================
    01. Global variables
====================================== */
:root {

    --alt-font: "Cygre-SemiBold", sans-serif;
    --primary-font: "Inter", sans-serif;

    /* colors */
    --primary: #244FE9;
    --primary-hover: #6C86E2;
    --primary-active: #314692;
    --primary-light: #1673FF;

    --white: #fff;
    --white-900: #F1F1F1;

    --gray-900: #F2F2F2;
    --gray-800: #F4F4F4;
    --gray-700: #F5F5F5;
    --gray-600: #5D5D5D;
    --gray-500: #E0E0E0;
    --gray-400: #C7C7C7;
    --gray-300: #909090;
    --gray-200: #F7F7F7;
    --gray-100: #7F7F7F;

    --black-900: #111;
    --black-800: #222;
    --black-700: #2E2E2E;
    --black-600: #444;
    --black-500: #555;
    --black-400: #666;
    --black-333: #333;
    --black-300: #777;
    --black-200: #888;
    --black-100: #999;

    /* animation */
    --duration-01: 0.1s;
    --duration-02: 0.2s;
    --duration-03: 0.3s;
    --duration-04: 0.4s;
    --duration-05: 0.5s;
    --duration-06: 0.6s;
    --duration-07: 0.7s;
    --duration-08: 0.8s;
    --duration-09: 0.9s;
    --duration-10: 1s;
}

.row {
    margin-right: -8px;
    margin-left: -8px;
}

.row > * {
    padding-right: 8px;
    padding-left: 8px;
}


/* ===================================
    02. Colors
====================================== */
.color-primary {
    color: var(--primary);
}

.color-primary-light {
    color: var(--primary-light);
}

.color-white {
    color: var(--white);
}

.color-white-900 {
    color: var(--white-900);
}

.color-black-900 {
    color: var(--black-900);
}

.color-black-800 {
    color: var(--black-800);
}

.color-black-700 {
    color: var(--black-700);
}

.color-black-600 {
    color: var(--black-600);
}

.color-black-500 {
    color: var(--black-500);
}

.color-black-400 {
    color: var(--black-400);
}

.color-black-333 {
    color: var(--black-333);
}

.color-black-300 {
    color: var(--black-300);
}

.color-black-200 {
    color: var(--black-200);
}

.color-black-100 {
    color: var(--black-100);
}

.color-gray-900 {
    color: var(--gray-900);
}

.color-gray-800 {
    color: var(--gray-800);
}

.color-gray-700 {
    color: var(--gray-700);
}

.color-gray-600 {
    color: var(--gray-600);
}

.color-gray-500 {
    color: var(--gray-500);
}

.color-gray-400 {
    color: var(--gray-400);
}

.color-gray-300 {
    color: var(--gray-300);
}

.color-gray-200 {
    color: var(--gray-200);
}

.color-gray-100 {
    color: var(--gray-100);
}

/* ===================================
    03. BG Colors
====================================== */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-primary-hover {
    background-color: var(--primary-hover);
}

.bg-primary-active {
    background-color: var(--primary-active);
}

.bg-white {
    background-color: var(--white);
}

.bg-white-900 {
    background-color: var(--white-900) !important;
}

.bg-gray-900 {
    background-color: var(--gray-900);
}

.bg-gray-800 {
    background-color: var(--gray-800);
}

.bg-gray-700 {
    background-color: var(--gray-700);
}

/* .bg-gray-700 {
    background-color: var(--gray-700);
}
.bg-gray-600 {
    background-color: var(--gray-600);
}
.bg-gray-500 {
    background-color: var(--gray-500);
}
.bg-gray-400 {
    background-color: var(--gray-400);
} */

.bg-gray-200 {
    background-color: var(--gray-200);
}


/* ===================================
    04. Containers
====================================== */
.container {
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 735px) {
    .container-sm, .container {
        max-width: 703px;
    }
}

@media (min-width: 992px) {
    .container-md, .container-sm, .container {
        max-width: 944px;
    }
}

@media (min-width: 1280px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 1200px;
    }
}

@media (min-width: 1520px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1440px;
    }

    .container {
        padding-left: 0;
        padding-right: 0;
    }
}


/* ===================================
    05. Margins
====================================== */
.mt-32-lg-24-sm {
    margin-top: 24px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-100 {
    margin-top: 100px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mt-32 {
    margin-top: 32px;
}

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

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

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

.mb-60 {
    margin-bottom: 60px;
}

.mt-0 {
    margin-top: 0 !important;
}

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

@media (min-width: 992px) {

}

@media (min-width: 1280px) {
    .mt-32-lg-24-sm {
        margin-top: 32px;
    }
}

@media (min-width: 1520px) {

}


/* ===================================
    06. Paddings
====================================== */
.pt-0 {
    padding-top: 0 !important;
}

.p-24 {
    padding: 24px;
}

.p-32 {
    padding: 32px;
}

/* ===================================
    07. Header
====================================== */
header .navbar [class*=col-] {
    padding: 0;
}

header.sticky.sticky-active .header-reverse {
    border-bottom: 1px solid #F4F4F4 !important;
}

header .navbar-brand {
    padding: 35px 0;
}

.header-home .logo-white {
    display: block;
}

.header-home .nav-link {
    border-radius: 30px;
}

.header-home .navbar-toggler-line {
    background-color: var(--white);
}

.header-home.sticky-active .navbar-toggler-line {
    background-color: var(--black-900);
}

.header-home .navbar-collapse {
    background: none;
}

.navbar-nav {
    gap: 12px;
}

.dropdown-menu__nav {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    width: auto !important;
}

.navbar .navbar-nav .simple-dropdown .dropdown-menu {
    display: none;
    width: auto;
    padding: 16px;
    -webkit-border-radius: 0;
    border-radius: 20px;
    box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.47);
}

.navbar .navbar-nav .simple-dropdown .dropdown-menu li {
    padding: 0;
}

.header-home .nav-link.child:hover {
    background-color: var(--white);
}

.open .nav-link {
    background-color: #fff;
    color: black !important;
}

.nav-link-dropdown {
    color: var(--black-900) !important;
}

.nav-link-dropdown:hover {
    color: var(--primary) !important;
}

.header-home.sticky-active .navbar {
    background-color: #fff;
}

.header-home.sticky-active .navbar .logo-dark {
    display: block !important;
}

.header-home.sticky-active .navbar .logo-white {
    display: none !important;
}

.header-home .navbar .navbar-nav .nav-link {
    color: var(--black-900);
}

.header-home.sticky-active .navbar .navbar-nav .nav-link {
    color: var(--black-900);
}

.header-home.sticky-active .logo-dark {
    display: block !important;
}

.header-home.sticky-active .navbar .navbar-nav .nav-link {
    color: var(--black-900);
}

.header-home .logo-dark {
    display: none;
}

.header-home .header-social__icon-white {
    display: block;
}

.header-home .header-social__icon-black {
    display: none;
}

.header-home.sticky-active .header-social__icon-white {
    display: none;
}

.header-home.sticky-active .header-social__icon-black {
    display: block;
}

.header-main .header-social__icon-white {
    display: none;
}

.header-main .logo-white {
    display: none !important;
}

.header-main .nav-link {
    color: #000 !important;
}

.header-main .navbar {
    background-color: #fff;
}

.header-home.sticky-active .navbar-toggler-line {
    background: var(--black-900);
}

.header-main .navbar .navbar-nav .nav-item:hover .nav-link, .navbar .navbar-nav .nav-item.active .nav-link {
    opacity: 1;
    color: var(--primary);
}

.navbar-nav .nav-item {
    background-color: transparent;
    color: var(--white);
    border-radius: 20px;
}

.navbar-nav .nav-link {
    padding: 8px 16px;
}

.navbar-nav {
    padding: 0;
    align-self: auto !important;
}

.navbar-nav .nav-item:hover .nav-link {
    color: var(--primary);
    opacity: 1 !important;
    transition-duration: var(--duration-03)
}


.navbar-nav .nav-item {
    color: var(--white);
    border-radius: 20px;
}

.navbar-nav .nav-link {
    padding: 8px 16px;
}

.navbar-nav .nav-item:hover {
    transition-duration: var(--duration-03)
}

.button-header {
    padding: 13px 24px;
    font-family: var(--primary-font);
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    color: var(--white);
    background-color: var(--primary);
}

.button-header:hover {
    transition-duration: var(--duration-03);
    color: var(--white);
    background-color: var(--primary-hover);
}

.button-header:active {
    transition-duration: var(--duration-03);
    background-color: var(--primary-active);
}

/* ===================================
    07. Footer
====================================== */

footer {
    background-color: #111;
    border-radius: 24px 24px 0 0;
    padding: 40px 0;
}

.footer-col-1 {
    padding: 24px 28px;
    background-color: #1F1F1F;
    border-radius: 16px;
}

.footer-col {
    padding: 24px;
    background-color: #1F1F1F;
    border-radius: 16px;
}

.footer-link {
    font-size: 14px;
    line-height: 20px;
}

.footer-menu-products {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

@media (min-width: 1280px) {
    footer {
        background-color: #111;
        border-radius: 32px 32px 0 0;
        padding: 40px 0;
    }
}

/* ===================================
    08. Sections
====================================== */
.section-primary {
    padding: 24px 0;
    border-radius: 24px;
}

.section-small-top {
    padding: 24px 0;
}

.section-inner-hero {
    padding: 24px 0;
}

.section-small {
    padding: 16px 0;
    border-radius: 24px;
}

@media (min-width: 992px) {
    .section-primary {
        padding: 32px 0;
    }

    .section-small-top {
        padding: 32px 0;
    }
}

@media (min-width: 1280px) {
    .section-primary {
        padding: 40px 0;
    }

    .section-small-top {
        padding: 32px 0 40px 0;
    }

    .section-inner-hero {
        padding: 24px 20px;
    }

    .section-small {
        padding: 30px 0;
    }
}

@media (min-width: 1520px) {
    .section-primary {
        padding: 60px 0;
        border-radius: 32px;
    }

    .section-small-top {
        padding: 32px 0 60px 0;
    }

    .section-small {
        padding: 40px 0;
        border-radius: 32px;
    }
}


/* ===================================
    09. FONTS
====================================== */
h1 {
    font-size: 56px;
    line-height: 60px;
    font-weight: 600 !important;
    margin-bottom: 0;
}

.h1 {
    font-size: 56px;
    line-height: 60px;
    font-weight: 600 !important;
    margin-bottom: 0;
}

h2 {
    font-size: 32px;
    line-height: 36px;
    font-weight: 600 !important;
    margin-bottom: 0;
}

.h2 {
    font-size: 32px;
    line-height: 36px;
    font-weight: 600 !important;
    margin-bottom: 0;
}

h3 {
    font-size: 36px;
    line-height: 40px;
    font-weight: 600 !important;
    margin-bottom: 0;
}

.h3 {
    font-size: 36px;
    line-height: 40px;
    font-weight: 600 !important;
    margin-bottom: 0;
}

h4 {
    font-size: 16px;
    line-height: 18px;
    font-weight: 600 !important;
    margin-bottom: 0;
}

.h4 {
    font-size: 16px;
    line-height: 18px;
    font-weight: 600 !important;
    margin-bottom: 0;
}

h5 {
    font-size: 15px;
    line-height: 20px;
    font-weight: 600 !important;
    margin-bottom: 0;
}

.h5 {
    font-size: 15px;
    line-height: 20px;
    font-weight: 600 !important;
    margin-bottom: 0;
}

h6 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600 !important;
    margin-bottom: 0;
}

.h6 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600 !important;
    margin-bottom: 0;
}

.span-lg {
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    font-family: var(--alt-font)
}

.span-md {
    font-size: 56px;
    line-height: 60px;
    font-weight: 600;
    font-family: var(--alt-font)
}

.span-sm {
    font-size: 56px;
    line-height: 60px;
    font-weight: 600 !important;
    font-family: var(--alt-font)
}

p {
    margin-bottom: 0;
    font-weight: 400;
}

::placeholder {
    color: #6B6D80 !important;
    opacity: 1 !important;
}

::-ms-input-placeholder {
    color: #6B6D80 !important;
}

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

.text-md {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}

.text-sm {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
}

.underline {
    text-decoration: underline;
}

.mfp-close {
    background-color: #F6F6F6 !important;
}

a {
    color: #000;
}

.link {
    color: var(--primary);
}

.link:hover {
    color: var(--primary-hover);
}

.r-20-lh-32 {
    font-size: 20px;
    line-height: 32px;
}

.r-20-lh-24 {
    font-size: 20px;
    line-height: 24px;
}

.r-18-lh-24 {
    font-size: 18px;
    line-height: 24px;
}

.r-15-lh-24 {
    font-size: 15px;
    line-height: 24px;
}

.r-14-lh-24 {
    font-size: 14px;
    line-height: 24px;
}

.w-100 {
    width: 100% !important;
    max-width: 100% !important;
}

@media (min-width: 992px) {
    h1 {
        font-size: 48px;
    }

    .h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 48px;
        line-height: 54px;
    }

    .h2 {
        font-size: 48px;
        line-height: 54px;
    }

    h3 {
        font-size: 48px;
    }

    .h3 {
        font-size: 48px;
    }

    h4 {
        font-size: 34px;
        line-height: 36px;
    }

    .h4 {
        font-size: 34px;
        line-height: 36px;
    }

    h5 {
        font-size: 28px;
        line-height: 32px;
    }

    .h5 {
        font-size: 28px;
        line-height: 32px;
    }

    h6 {
        font-size: 20px;
    }

    .h6 {
        font-size: 20px;
    }

    .span-lg {
        font-size: 24px;
        line-height: 28px;
    }

    .span-md {
        font-size: 48px;
    }

    .span-sm {
        font-size: 48px;
    }

    .text {
        margin-bottom: 0;
        font-weight: 400;
        font-size: 20px;
        line-height: 32px;
    }
}

@media (min-width: 1280px) {
    h1 {
        font-size: 48px;
    }

    .h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 56px;
        line-height: 60px;
    }

    .h2 {
        font-size: 56px;
        line-height: 60px;
    }

    h3 {
        font-size: 48px;
    }

    .h3 {
        font-size: 48px;
    }

    h4 {
        font-size: 34px;
    }

    .h4 {
        font-size: 34px;
    }

    h5 {
        font-size: 28px;
    }

    .h5 {
        font-size: 28px;
    }

    h6 {
        font-size: 20px;
    }

    .h6 {
        font-size: 20px;
    }

    .span-lg {
        font-size: 24px;
    }

    .span-md {
        font-size: 48px;
    }

    .span-sm {
        font-size: 48px;
    }

    .text-sm {
        line-height: 20px;
        font-size: 14px;
    }

    .text-md {
        margin-bottom: 0;
        font-weight: 400;
        font-size: 18px;
        line-height: 24px;
    }
}

@media (min-width: 1520px) {
    h1 {
        font-size: 48px;
    }

    .h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 56px;
        line-height: 60px;
    }

    .h2 {
        font-size: 56px;
        line-height: 60px;
    }

    h3 {
        font-size: 48px;
    }

    .h3 {
        font-size: 48px;
    }

    h4 {
        font-size: 34px;
    }

    .h4 {
        font-size: 34px;
    }

    h5 {
        font-size: 28px;
    }

    .h5 {
        font-size: 28px;
    }

    h6 {
        font-size: 20px;
    }

    .h6 {
        font-size: 20px;
    }

    .span-lg {
        font-size: 24px;
    }

    .span-md {
        font-size: 48px;
    }

    .span-sm {
        font-size: 48px;
    }
}

/* fonts end */


/* ===================================
    SHADOWS
====================================== */
.shadow-900 {
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.25);
}


/* buttons start */
.button-primary {
    color: var(--white);
    background-color: var(--primary);
    padding: 13px 18px;
    border-radius: 30px;
    border: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    opacity: 1 !important;
    text-align: center;
}

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

.button-primary:active {
    color: var(--white);
    background-color: var(--primary-active);
}

.button-secondary {
    color: var(--black-900);
    background-color: var(--gray-900);
    padding: 13px 18px;
    border-radius: 30px;
    border: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
}

.button-secondary:hover {
    color: var(--primary);
    /*background-color: var(--primary-hover);*/
}

.button-secondary:active {
    color: var(--primary-hover);
    /*background-color: var(--primary-active);*/
}

.button-primary-with-icon {
    color: var(--black-900);
    background-color: var(--white);
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    padding: 8px 8px 8px 24px;
    border-radius: 32px;
    width: max-content;
    display: flex;
    align-items: center;
}

.button-icon-wrap {
    padding: 9px;
    background-color: var(--primary);
    margin-left: 12px;
    border-radius: 44px;
    display: inline-block;
}

.button-primary-with-icon:hover {
    background-color: var(--primary-hover);
    color: var(--white);
    transition-duration: var(--duration-03);
}

.button-primary-with-icon:hover .button-icon-wrap {
    background-color: var(--primary-hover);
    transition-duration: var(--duration-03);
}

.button-primary-with-icon:active {

}

.sticky-active {
    background-color: #000;
}

.header-button span {
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
}

.button-icon {
    border-radius: 44px;
    padding: 4px 10px 4px 10px;
}

.button-icon svg {
    max-width: 18px;
    max-height: 18px;
}

.share-links {
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.share-links-button {
    background-color: #000;
    border-radius: 100px;
    padding: 13px 16px;
    width: fit-content;
}

.share-links-button-copy {
    background-color: #000;
    border-radius: 100px;
    padding: 0;
    width: fit-content;
    cursor: pointer;
}

.share-links-button-copy a {
    border-radius: 100px;
}

.share-links-button-copy img {
    padding: 16px;
}

.share-links-button-tooltip {
    color: #fff;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 16px;
}

.section-card {
    padding: 16px;
}


@media (min-width: 992px) {
    .button-primary {
        padding: 16px 24px;
    }

    .button-secondary {
        padding: 16px 24px;
    }

    .button-icon-wrap {
        padding: 12px;
    }
}

/* buttons end */


/*  start */
/*  end */


/*  start */
/*  end */


/*  start */
/*  end */


/* ===================================
    10. Border-radius
====================================== */
.br-32 {
    border-radius: 32px;
}

.br-28 {
    border-radius: 28px;
}

.br-24 {
    border-radius: 24px;
}

.br-20 {
    border-radius: 20px;
}

.br-16 {
    border-radius: 16px;
}


/* ===================================
    11. STYLES
====================================== */
.images-min {
    gap: 4px;
}

.hero-section {
    background-position-x: 50%;
    background-position-y: center;
    animation-delay: 0s;
    animation-duration: 60s;
    animation-name: panoramic;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    will-change: background-position-x;
}

.hero__title {
    margin-bottom: 16px;
    font-size: 32px;
    line-height: 36px;
}

.hero-span {
    font-size: 14px;
    line-height: 20px;
}

.hero__text {
    font-size: 11px;
    line-height: 18px;
}

.hero__button-and-text {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 16px;
}

@keyframes panoramic {
    0% {
        background-position-x: 0%;
    }
    50% {
        background-position-x: 100%;
    }
    100% {
        background-position-x: 0%;
    }
}

.title-with-bage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 16px;
}

.bage-primary {
    display: inline-block;
    padding: 5px 13px;
    border: 1px solid var(--black-800);
    color: var(--black-800);
    border-radius: 28px;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 12px;
}

.advantages {
    padding: 12px 16px;
    gap: 16px;
    border-radius: 20px;
    background-position: left;
}

.advantages-number__plus {
    color: blue;
}

.problems-title-wrap {
    padding: 100px 60px;
    margin-bottom: 40px;
}

.page-title {
    padding: 24px;
    min-height: 372px;
    border-radius: 20px;
    display: flex;
    align-items: end;
}

.problems-title {
    line-height: 32px;
    font-size: 28px;
}

.problems-card {
    padding: 28px;
    border-radius: 20px;
}

.problems-card__text .h4 {
    margin-bottom: 12px;
    margin-top: 14px;
}

.problems-card__text h2 {
    margin-bottom: 16px;
}

.problems-card__vertical .problems-card__img {
    margin-right: 32px;
    width: 114px !important;
    max-width: 114px;
    height: fit-content;
}

.problems-card__horizontal .problems-card__img {
    margin-right: 32px;
    width: 114px !important;
    max-width: 114px;
    height: fit-content;
}

.problems-img {
    border-radius: 20px;
    background: var(--white-900);
    width: 100%;
    min-height: 291px;
}

.card-link {
    min-height: 268px;
    background: var(--white-900);
    border-radius: 20px;
    padding: 16px;
}

.card-link .h6 {
    font-size: 15px;
    line-height: 20px;
}

.card-link:hover .button-secondary {
    color: var(--primary);
    transition-duration: var(--duration-03);
}

.icon-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.icon-box__icon {
    padding: 10px;
    background: #fff;
    border-radius: 100px;
}

.advantages-number {
    font-size: 40px;
    line-height: 60px;
    font-family: 'Cygre-Semibold';
    color: var(--black-333);
}

.title {
    margin-bottom: 24px;
}

.title-with-text {
    margin-bottom: 24px;
}

.title-with-text h2 {
    margin-bottom: 12px;
}

.tab-style-01 .nav-tabs .nav-link.show, .tab-style-01 .nav-tabs .nav-link {
    color: var(--black-900);
    background-color: var(--white);
    transform: translate3d(0, -3px, 0);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    padding: 20px 24px;
}

.tab-style-01 .nav-tabs .nav-link.show, .tab-style-01 .nav-tabs .nav-link:hover {
    color: var(--white);
    background-color: var(--primary-hover);
}

.tab-style-01 .nav-tabs .nav-link.show, .tab-style-01 .nav-tabs .nav-link.active {
    color: var(--white);
    background-color: var(--primary);
    transform: translate3d(0, -3px, 0);
}

.cta-box {
    padding: 24px;
    background-image: url("/storage/app/media/webp/site/cta-box_mob-bg-min.webp");
}

.hero-section {
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0 0 32px 32px;
}


.cta-box h2 {
    margin-bottom: 24px;
}

.cta-box p {
    margin-bottom: 77px;
}

.cta-box__title-with-logo {
    margin-bottom: 16px;
}


.review-box {
    min-height: 510px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.review-box__head {
    display: flex;
    align-items: center;
}

.review-box__head-img {
    margin-right: 13px;
    height: 56px;
    width: 56px;
    min-height: 56px;
    min-width: 56px;
}

.review-box__head-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.review-box__head-title span {
    margin-bottom: 8px;
}

.review-box__head-title p {
    font-size: 13px;
    line-height: 20px;
}

.review-box__body {
    margin: 16px 0 20px 0;
}

.bg-cover {
    background-size: cover;
}

.bg-center {
    background-position: center;
}

.digital-card {
    padding: 16px 12px 12px 12px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.digital-card__vertical .digital-card__img {
    position: absolute;
    right: 0;
    height: 100%;
    bottom: 0;
}

.digital-card__horizontal .digital-card__img {
    position: absolute;
    right: auto;
    left: auto;
    height: 150px;
    bottom: -24px;
}

.digital-card__horizontal .h5 {
    max-width: 80%;
}

.digital-card__vertical {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.digital-card__horizontal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.digital-card .button-icon {
    align-self: flex-start;
}

.digital-card__vertical .button-icon {
    margin-top: 69px;
}

.digital-card__horizontal .button-icon {
    margin-top: 69px;
}

.technological-card {
    padding: 16px 12px 12px 12px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.technological-card h5 {
    margin-bottom: 152px;
}

.digital-card__gap {
    gap: 16px;
}

.technological-card {
    position: relative;
    overflow: hidden;
    min-height: 155px;
}

.technological-card__img {
    position: absolute;
    right: 0;
    height: 100%;
    bottom: -20px;
}

@media (min-width: 992px) {
    .digital-card__vertical .digital-card__img {
        position: absolute;
        right: 0;
        height: 68%;
        bottom: 0;
    }

    .technological-card__img {
        bottom: -20px;
        right: 12px;
    }

    .digital-card__horizontal .button-icon {
        margin-top: 80px;
    }

    .digital-card .button-icon {
        align-self: flex-end;
    }
    .technological-card {
        min-height: 436px;
    }
    .technological-card__img {
        bottom: -64px;
        right: 24px;
        /* width: 230px; */
        width: auto;
        height: 82%;
    }
}

@media (min-width: 1280px) {
    .digital-card {
        border-radius: 32px;
    }

    .digital-card__horizontal {
        flex-direction: row;
    }

    .digital-card__horizontal .button-icon {
        margin-top: 150px;
    }

    .digital-card__vertical .digital-card__img {
        height: 75%;
    }

    .technological-card__img {
        bottom: -64px;
        right: 24px;
        /* width: 230px; */
        width: auto;
        height: 82%;
    }

    .digital-card__horizontal .digital-card__img {
        position: absolute;
        right: -50px;
        height: 100%;
        bottom: 0;
    }

    .consulting-title {
        width: 48%;
    }

    .digital-card__horizontal .h5 {
        max-width: 65%;
        align-self: center;
    }

    .button-icon svg {
        max-width: 24px;
        max-height: 24px;
    }

    .button-icon {
        border-radius: 44px;
        padding: 8px 12px 10px 12px;
    }

    .problems-title {
        width: 72%;
    }
}

@media (min-width: 1520px) {
    .digital-card__vertical .digital-card__img {
        height: 82%;
    }

    .digital-card__horizontal .button-icon {
        margin-top: 188px;
    }

    .digital-card__horizontal .digital-card__img {
        position: absolute;
        right: 0;
        height: 100%;
        bottom: 0;
    }

    .digital-card__horizontal .h5 {
        max-width: 52%;
    }
}

.why-choose-card-100 {
    display: flex;
    flex-direction: column;
}

.why-choose-card-100 img {
    margin-bottom: 16px;
}

.row-gap-12 > * {
    padding-right: 6px !important;
    padding-left: 6px !important;
}

.row-gap-40 > * {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

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

.contact-form-wrap {
    padding: 0px;
}

.contact-form-wrap p {
    font-size: 14px;
    line-height: 20px;
}

.input {
    padding: 16px;
    font-size: 15px;
    line-height: 24px;
    color: rgba(27, 31, 59, 0.65);
    border: 1px solid var(--gray-500);
    border-radius: 12px;
}

.textarea {
    padding: 16px;
    font-size: 15px;
    line-height: 24px;
    color: rgba(27, 31, 59, 0.65);
    border: 1px solid var(--gray-500);
    border-radius: 12px;
}

.news-card img {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
}

.news-card__body p {
    margin-bottom: 12px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 20px;
}

.news-card__meta p {
    font-size: 15px;
    line-height: 20px;
}

.contacts-box-wrap {
    margin-top: 16px;
}

.contacts-box {
    margin-right: 60px;
}

.contacts-box .button-icon {
    margin-right: 16px;
}

.contacts-box__text a {
    font-size: 18px;
    line-height: 24px;
}

.contacts-box__text h6 {
    margin-bottom: 4px;
}

.our-contacts h2 {
    margin-bottom: 16px;
}

.our-contacts img {
    margin-bottom: 32px;
    margin-top: 24px;
}

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

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

.mr-12 {
    margin-right: 12px;
}

.mr-16 {
    margin-right: 16px;
}

.ml-8 {
    margin-left: 8px;
}

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

.mr-40 {
    margin-right: 40px;
}

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

.header-social-wrap {
    margin-right: 40px;
}

.advantages-wrap {
    margin-top: 24px;
}

.problems-card-mobile {
    height: 100% !important;
    padding: 16px !important;
}

.problems-card-mobile .text {
    font-size: 12px !important;
    line-height: 18px !important;
}

.problems-card-mobile .problems-card__img {
    width: 86px !important;
}

.swiper-wrapper .swiper-slide {
    height: 100% !important;
}

.swiper-wrapper .swiper-slide .gallery-box {
    height: 100% !important;
}

.swiper-wrapper .swiper-slide .gallery-box .problems-card-mobile {
    height: 100% !important;
}

.digital-card__button {
    margin-top: 69px;
}

.nav-tabs-mob {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    overflow-y: hidden;
    scrollbar-width: none;
}

.reviews-wrap-mob {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    overflow-y: hidden;
    scrollbar-width: none;
}

.mr-8 {
    margin-right: 8px;
}

.mr-32 {
    margin-right: 32px;
}

.mb-115 {
    margin-bottom: 115px;
}

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

.reviews-wrap-mob .review-box__body {
    white-space: normal;
}

.nav-tabs-mob .nav-link {
    padding: 6px 16px 12px 16px !important;
    border-radius: 30px !important;
    margin-top: 3px;
    font-size: 14px;
    line-height: 24px;
}

.contacts-box:hover .button-icon .contacts-box__icon * {
    fill: var(--primary);
    transition-duration: var(--duration-03);
}

.block-with-bg-image {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 364px;
    border-radius: 32px;
}

.block-with-bg-image h2 {
    font-size: 24px;
    line-height: 28px;
}

.popup {
    padding: 16px;
    /*max-width: 569px;*/
    border-radius: 16px;
}

.popup-form {
    max-width: 569px;
}

.popup-form .text {
    line-height: 1.6rem;
}

.popup .contact-form-wrap__modal {
    margin-top: 24px;
}

.popup .button-primary {
    margin-top: 24px;
}

.popup .input {
    margin-bottom: 16px;
}

.list-disc li {
    list-style: disc !important;
}

.top-spacer {
    height: 91px;
    padding: 0;
    margin: 0;
}

.show-button-on-hover .button {
    opacity: 0;
    transition: var(--duration-03);
}

.show-button-on-hover:hover .button {
    opacity: 1;
    transition: var(--duration-03);
    color: var(--primary);
}

.popular-post-sidebar li:last-child {
    margin-bottom: 16px;
}

.mfp-close {
    display: none;
}

.section-breadcrumbs {
    padding: 16px 0 0 0;
}

.breadcrumbs__back-button {
    align-self: flex-start;
    background-color: #E9E9E9;
    padding: 16px 24px;
    border-radius: 30px;
    max-height: 44px;
    display: flex;
    margin-bottom: 12px;
}

.breadcrumbs__back-button:hover {
    background-color: #dcdcdc;
}

.breadcrumbs__nav-link {
    font-size: 14px;
    line-height: 20px;
    color: #868585;
}

.breadcrumb-style-01 ul li:after {
    content: "/";
}

.numbers-list {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background-color: var(--gray-800);
    border-radius: 24px;
}

.numbers-list__number {
    min-width: 60px;
    display: flex;
    justify-content: start;
    margin-bottom: 16px;
}

.numbers-list__title {
    margin-bottom: 16px;
}

.news-divider {
    padding: 40px 0;
    margin: 0;
}

.news-divider-small {
    padding: 8px 0;
    margin: 0;
}

.divider {
    padding: 0 0 0 64px;
    margin: 4px 0;
}

.divider__vertical-line {
    width: 1px;
    height: 14px;
    background-color: #A4A4A4;
}

.button-wrap {
    margin-top: 32px;
}

.integration-effect-card {
    padding: 24px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
}

.integration-effect-card img {
    margin-bottom: 16px;
    max-width: 48px;
}

.integration-effect-card .h5 {
    margin-bottom: 16px;
}

.advantage-big-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 414px;
    border-radius: 20px;
    padding: 24px;
}

.review-box__head-img {
    display: flex;
    background: #fff;
    border-radius: 100%;
    padding: 8px;
}

.modal-popup-reviews {
    background-color: var(--gray-700);
    border-radius: 32px;
    padding: 24px;
    max-width: 950px;
}

.modal-popup__opened {
    background-color: var(--gray-700);
    border-radius: 32px;
    padding: 24px;
    max-width: 950px;
}

.modal-popup__opened .mfp-close {
    color: #000;
    height: 48px;
    width: 48px;
    background-color: var(--white) !important;
    top: 26px;
}

button.mfp-close, button.mfp-close:active {
    color: #000;
    height: 48px;
    width: 48px;
    background-color: var(--white) !important;
    top: 26px;
}

.alert-2662 p {
    font-size: 15px;
    line-height: 24px;
}

.alert-2662 a {
    font-size: 15px;
    line-height: 24px;
}

.modal-popup-cookies h5 {
    margin-bottom: 24px;
}

.modal-popup-cookies p {
    margin-bottom: 24px;

}

.modal-popup-cookies a {
    margin-bottom: 24px;

}

.modal-popup-cookies {
    max-width: 500px;
}

.modal-popup-screens {
    background-color: var(--gray-700);
    border-radius: 8px;
    padding: 24px;
    max-width: 100%;
}

.about-docs-image {
    border-radius: 28px;
    border: 1px solid #CDCDCD;
    padding: 16px;
}

.modal-popup-screens .mfp-close {
    color: #000;
    height: 48px;
    width: 48px;
    background-color: var(--white) !important;
    top: 26px;
}

.review-wrap__modal .review-box__head {
    margin-bottom: 24px;
}

.review-wrap__modal .review-box__head-img {
    max-width: 60px;
    max-height: 60px;
    margin-right: 16px;
}


.modal-popup-reviews .mfp-close {
    color: #000;
    height: 48px;
    width: 48px;
    background-color: var(--white) !important;
    top: 26px;
}

swiper-container {
    width: 100%;
    height: 100%;
}

swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.awards {
    gap: 10px;
    flex-wrap: nowrap;
}

.award-block {
    padding: 45px 45px 0 45px;
    background: var(--1, linear-gradient(206deg, #0838E2 -33.33%, rgba(77, 244, 255, 0.99) 100.22%));
    overflow: hidden;
    border-radius: 28px;
}

.award-block:hover {
    padding: 35px 35px 0 35px;
    transition-duration: 350ms;
}

.award-slide {
    min-height: 286px;
    max-height: 286px;
}

.award-block-bg {
    top: 0;
    right: -30%;
    position: absolute;
    z-index: 1;
}

.award-block-img {
    margin-bottom: -40%;
    z-index: 2;
    position: relative;
}

.tasks-card-style-02 {
    padding: 16px 12px;
}

.tasks-card-style-02 img {
    max-width: 40px;
    margin-bottom: 16px;
}

.max-content {
    min-width: max-content;
}

.button-preview {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 24px;
    border-radius: 24px;
    bottom: 24px;
    right: 24px;
    max-width: 72px;
    max-height: 72px;
    display: flex;
    visibility: hidden;
    z-index: 3;
}

.button-preview__link:hover .button-preview {
    visibility: visible;
}

.awards-card:hover .button-preview {
    visibility: visible;
}

.products-title {
    padding: 16px 0 0 0;
}

.presentation-box {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    height: 349px;
}

.presentation-box__content {
    padding: 16px;
}

.presentation-box__img {
    position: relative;
}

.presentation-box__img img {
    max-width: 320px;
    position: absolute;
    top: -72px;
    left: -9px;
}

.presentation-box h2 {
    margin-bottom: 8px;
}

.presentation-box .button-secondary {
    margin-top: 36px;
}

.products-description {
    padding: 24px 0;
}

.products-title__image {
    border-radius: 24px;
}

.products-description__text {
    margin-top: 24px;
}

.products-description__cta {
    background-color: var(--gray-800);
    padding: 16px;
    border-radius: 20px;
}

.products-description__cta .text {
    margin-top: 24px;
}

.products-description__cta .button-primary {
    margin-top: 24px;
}

.products-title__top {
    border-radius: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
}

.products-title__top .col-12:first-child {
    padding: 24px;
}

.products-title__top-devices img {
    width: 100%;
}

.application-card__description {
    padding: 8px 16px 16px 16px;
    background-color: var(--white);
    border-radius: 0 0 32px 32px;
}

.application-card img {
    border-radius: 32px 32px 0 0;
}

.tasks-card {
    padding: 16px;
    border-radius: 24px;
    background-color: var(--white);
}

.tasks-card img {
    border-radius: 16px;
}

.tasks-card .span-lg {
    margin-top: 24px;
}

.tasks-card .text {
    margin-top: 16px;
}

.effect-card-02 {
    padding: 24px;
}

.effect-card-02 img {
    margin-right: 12px;
    max-width: 56px;
}

.effect-card-02__divider {
    height: 1px;
    width: 100%;
    margin: 12px 0;
    background-color: #DCDCDC;
}

.device-mockup {
    padding: 24px 0;
}

.info-block h3 {
    margin-bottom: 12px;
}

.info-block__text {
    padding: 44px 16px;
}

.section-why-abie {
    background-color: var(--white-900);
    background-position: bottom;
    background-size: cover;
}

.why-choose-card-50 {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 16px;
}

.subheading-why-abie {
    margin-top: 12px;
}

.section-why-abie .row {
    margin-top: 24px;
}

.why-choose-card-100 {
    padding: 16px;
}

.why-abie__icon {
    margin-bottom: 16px;
}

.why-abie__icon img {
    max-width: 40px;
    max-height: 40px;
}

.why-choose-card-100 {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.why-abie__col-2-bg {
    background-image: url("/storage/app/media/why-choose-img-58972365780005.jpg");
    background-position: left;
}

.why-abie__col-4-bg {
    background-image: url("/storage/app/media/why-choose-img-58972365780006.jpg");
    background-position: left;
}

.review-box__head-img {
    display: flex;
    background: #fff;
    border-radius: 100%;
    padding: 8px;
}

.modal-popup-reviews {
    background-color: var(--gray-700);
    border-radius: 32px;
    padding: 24px;
    max-width: 950px;
}

.review-wrap__modal .review-box__head {
    margin-bottom: 24px;
}

.review-wrap__modal .review-box__head-img {
    max-width: 60px;
    max-height: 60px;
    margin-right: 16px;
}

.modal-popup-reviews .mfp-close {
    color: #000;
    height: 48px;
    width: 48px;
    background-color: var(--white) !important;
    top: 26px;
}

.blog-card {
    border: 1px solid #E3E3E3;
    border-radius: 16px;
    padding: 16px;
    height: 100%;
}

.blog-card__image {
    border-radius: 12px;
}

.blog-card__meta {
    margin-top: 12px !important;
    color: #909090;
    font-size: 14px;
    line-height: 20px;
}

.blog-card__title {
    margin-top: 12px;
    color: #333333;
}

.blog-card__text {
    margin-top: 12px;
    font-size: 13px;
    line-height: 20px;
    color: var(--gray-600);
}

.news {
    margin-top: 24px;
    padding: 0;
}

.news-title {
    margin-bottom: 24px;
}

.sidebar .promo {
    margin-bottom: 24px;
}

.promo img {
    border-radius: 20px;
}

.promo__title {
    margin-top: 16px;
}

.promo__text {
    font-size: 14px;
    line-height: 24px;
    margin-top: 16px;
}

.promo__button {
    margin-top: 77px;
}

.popular-news {
    background-color: var(--gray-700);
    border-radius: 20px;
    padding: 24px;
}

.blog-sidebar p {
    margin-bottom: 8px;
}
.blog-sidebar .button-secondary{
    margin-top: 14px !important;
}

.popular-news__meta {
    font-size: 15px;
    line-height: 24px;
    color: var(--gray-600);
    margin-bottom: 2px;
}

.popular-news__title {
    font-size: 16px;
    line-height: 20px;
    color: var(--black-900);
}

.popular-news__link:hover .popular-news__title {
    color: var(--primary);
}

.popular-news h5 {
    margin-bottom: 38px;
}

.slider-screen__title {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
}

.popular-news__divider {
    width: 100%;
    height: 1px;
    background-color: #E3E3E3;
    margin: 16px 0 16px 0;
}

.contacts__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contacts__card-link {
    margin-top: 4px;
}

.contacts__card-icon {
    margin-bottom: 24px;
    max-width: 24px;
    max-height: 24px;
}

.contacts__card {
    border-radius: 16px;
    padding: 16px;
}

.why-abie__icon {
    max-width: 40px;
    min-height: 40px;
}

.why-choose-card-style-2 {
    padding: 16px 16px 189px 16px;
    position: relative;
    overflow: hidden;
}

.why-choose-card-style-2 .column-with-content {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.why-choose-card-style-2 .why-abie__text {
    font-size: 13px;
    line-height: 20px;
    margin-top: 12px;
}

.section-why-abie-style-03 .why-abie__text {
    font-size: 13px;
    line-height: 20px;
    margin-top: 12px;
}

.why-choose-card-style-2 .why-abie-bg-image {
    position: absolute;
    left: 16px;
    bottom: -42px;
}

.col-calculate-the-cost__bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 24px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    min-height: 379px;
    padding: 24px 16px 24px 24px;
    margin-bottom: 24px;
}

.contact-form-wrap .textarea {
    margin-bottom: 16px;
    height: 132px;
}

.blog-hero {
    width: 100%;
    height: 440px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: start;
    align-items: end;
}

.section-blog-hero {
    padding: 32px 0;
}

.alert-2662 {
    position: fixed;
    bottom: 30px;
    right: 130px;
    z-index: 999;
    background: var(--white);
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 32px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transform: translateY(140%);
    transition: var(--duration-02) ease;
}

.alert-2662 .button-primary {
    margin-left: 24px;
}

.alert-2662.is-show {
    transform: translateY(0);
    transition: var(--duration-02) ease;
}

.button-primary-with-icon {
    overflow: hidden;
}

.button-with-icon__icon {
    margin-left: 12px;
    padding: 12px;
    z-index: 1;
}

.button-with-icon__text {
    z-index: 1;
}

.button-with-icon__fill {
    width: 48px;
    height: 49px;
    position: absolute;
    right: 8px;
    border-radius: 60%;
    transition-duration: 450ms;
}

.button-primary-with-icon:hover .button-with-icon__fill {
    width: 100% !important;
    height: 506% !important;
    border-radius: 100% !important;
    right: 0 !important;
    transition-duration: 500ms;
}

#btn-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 116px;
    display: none;
    border-radius: 100%;
    z-index: 9999;
}

.partner-slide {
    padding-left: 6px;
    padding-right: 6px;
}

.partner-logo__wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 16px;
    background-color: #fff;
    border-radius: 24px;
    border: 1px solid #CFCFCF;
}

.about-us-text h6 {
    margin-bottom: 8px;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.accordion-item {
    padding: 16px 24px !important;
    border-radius: 16px !important;
    background-color: var(--gray-900) !important;
}
.accordion-style-02 .accordion-item .accordion-body {
    padding: 9px 25px 0 0;
}

.author-block {
    background: transparent !important;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 !important;
    border-radius: none !important;
    max-width: 600px;
    border: none !important;
    margin: 24px 0 40px 0;
}

.author-avatar {
    height: 100px !important;
    width: 100px !important;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    border: none !important;
    box-shadow: none !important;
}

.author-avatar img {
    width: 100%;
    height: 100%;
}

.table-of-contents {
    padding: 16px 24px;
    border: none !important;
    margin: 0 0 32px 0 !important;
    border-radius: 24px;
}

.table-of-contents .h5 {
    margin-bottom: 24px;
    margin-top: 0 !important;
}

.table-of-contents li {
    margin-bottom: 4px !important;
}

.table-of-contents ul,
.table-of-contents li,
.table-of-contents a {
    color: var(--primary);
}

.section-blog-hero ul li {
    list-style: disc !important;
}

.section-blog-hero ol li {
    list-style: decimal !important;
}

.section-blog-hero ul,
.section-blog-hero ol {
    padding-left: 1.5rem;
}

.news-image {
    width: 100%;
    height: auto;
    border-radius: 32px;
}

.news-products {
    padding: 32px 40px;
}

.news-products__card {
    transition: transform 0.3s ease;
    display: block;
}
.news-products__card:hover {
    transform: translateY(-5px);
}

.news-products__card-link {
    margin-top: 16px;
}

.news-products__card p {
    margin-bottom: 0 !important;
}

.section-blog-hero h2,
.section-blog-hero h3,
.section-blog-hero h4,
.section-blog-hero h5,
.section-blog-hero h6 {
    margin-bottom: 24px;
    color: var(--black-900)
}

.section-blog-hero b {
    color: var(--black-600);
}

.section-blog-hero h2 {
    margin-top: 80px;
}

.section-blog-hero h3 {
    margin-top: 48px;
}

.section-blog-hero p {
    margin-bottom: 24px;
}

.section-blog-hero a {
    color: var(--primary);
}

.section-blog-hero .image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 32px;
    margin: 32px 0;
}

.editor-js-delimiter {
    padding: 40px 0;
}

.blog-hero .hero__title {
    color: #fff;
}

.news-presentation-box {
    margin-top: 60px;
}

.news-presentation-box .h4 {
    margin-top: 0 !important;
    color: var(--white);
}

.news-meta {
    gap: 24px;
    margin: 12px 0 48px 0 !important;
    font-size: 14px;
}
.news-meta i {
    margin-right: 8px;
}

table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
}

table tr:nth-child(odd) {
    background-color: #f3f6ff;
}

table td,
table th {
    width: auto;
    text-align: left;
    padding: 12px;
    border: 1px solid #ddd;
    overflow-wrap: break-word;
    vertical-align: baseline;
}

.section-blog-hero .presentation-box a {
    color: var(--black-900);
}
.section-blog-hero .presentation-box a:hover {
    color: var(--primary);
}

.section-blog-hero .news-products__card-text .h6{
    margin-top: 0;
}

@media (max-width: 734px) {
    table {
        width: 100% !important;
        table-layout: auto !important;
        display: table;
        overflow: scroll;
    }

    table td {
        padding: 12px 16px;
        vertical-align: baseline;
        width: auto;
        display: table-cell;
        min-width: 180px;
    }

    table tr {
        display: table-row;
        vertical-align: inherit;
        unicode-bidi: isolate;
    }

    table td::before {
        content: attr(data-label);
        left: 10px;
        font-weight: bold;
        width: 100px !important;
        writing-mode: horizontal-tb;
        display: block;
    }

    .section-blog-hero .container {
        overflow: scroll;
    }

    .news-meta {
        gap: 4px;
        margin: 12px 0 24px 0 !important;
    }

    .news-products {
        padding: 16px 16px 4px 16px;
    }

    .section-blog-hero h2 {
        margin-top: 60px;
    }

    
    .section-blog-hero .image-wrapper img {
        border-radius: 16px;
        margin: 16px 0;
    }

    .section-blog-hero .presentation-box {
        height: fit-content !important;
    }
}

@media (min-width: 992px) and (max-width: 1279px) {
    header .navbar-brand {
        padding: 35px 0 !important;
    }
    header .navbar-brand img {
        max-width: 110% !important;
    }
    .navbar .navbar-nav .nav-link {
        padding: 10px 8px !important;
        font-size: 15px !important;
    }
    .button-header {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
    .breadcrumbs__back-button {
        margin-bottom: 0 !important;
        margin-right: 12px;
    }
}

.app-link {
    max-width: 130px;
    margin: 0 9px 8px 0;
    display: inline-flex;
    transition: transform 0.3s ease;
}
.app-link:hover {
    transform: translateY(-5px);    
}

.card-price {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
}

.card-price .h4 {
    margin-bottom: 16px;
}

.card-price .text {
    margin-bottom: 32px;
}

.card-price .bage-primary {
	margin-bottom: 32px;
}

.card-price__top-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
}

.bage-fill-primary {
	color: white !important;
    border-color: #fff;
    background-color: var(--primary);
}

.form-widget-block {
    padding: 0 !important;
}
.form-widget-container {
    max-width: 100% !important;
    box-shadow: none !important;
    border: 1px solid #E3E3E3;
    padding: 32px 24px !important; 
    border-radius: 24px !important;
    background-color: var(--gray-200) !important; 
}
.form-widget-title {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    text-align: start !important;
}
.form-widget-description {
    text-align: start !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    line-height: 32px !important;
    color: var(--black-900) !important;
}
.form-widget-label {
    display: none !important;
}
.form-widget-field-error {
    display: none !important;
}
.form-widget-input, .form-widget-textarea, .form-widget-select {
  border: 1px solid var(--gray-500) !important;
  padding: 16px !important;
  font-size: 15px !important;
  line-height: 24px;
  color: rgba(27, 31, 59, 0.65);  
  width: 100%;
  background: var(--white, #fff);
}

.faq-widget-title {
    text-align: start !important;
}
.faq-widget-subtitle {
    text-align: start !important;
    max-width: inherit !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    line-height: 32px !important;
    color: var(--black-900) !important;
    margin-bottom: 40px !important;
}

.faq-widget-block .accordion-style-02 {
    gap: 16px !important;
}
.faq-widget-block .accordion-item.active-accordion {
    border: none !important;
}
.faq-widget-block .accordion-item {
    box-shadow: none !important;
    border: none !important;
}
.faq-widget-block .accordion-item:hover {
    box-shadow: none !important;
    border: none !important;
}
.faq-widget-block .accordion-header a {
    padding: 0 !important;
}
.faq-widget-block .accordion-header a:hover {
    background: none !important;
}

.sidebar .button-secondary {
    color: var(--black-900);
}

aside.sidebar {
    align-self: stretch;
}

aside.sidebar > div {
    position: sticky;
    top: 100px;
}

.form-widget-fields {
    gap: 24px !important;
}

.quiz-widget-block {
    margin: 0 !important;
    padding: 0 !important;
}
.quiz-widget-container {
    max-width: 100% !important;
    box-shadow: none !important;
    border: 1px solid #E3E3E3;
    background-color: #fff !important;
}
.quiz-questions-wrapper {
    padding: 24px;
    background-color: var(--gray-200) !important;
    border: 1px solid var(--gray-500) !important;
    border-radius: 16px;
}
.quiz-widget-title {
    text-align: start !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
}
.quiz-widget-description {
    text-align: start !important;
    margin-bottom: 40px !important;
}
.quiz-result-title {
    margin-top: 0 !important;
}
.quiz-result-description {
    color: var(--medium-gray) !important;
}
.quiz-answer {
    background-color: #fff !important;
    border: 1px solid var(--gray-500) !important;
    border-radius: 12px !important;
}
.quiz-answer:hover {
    background-color: #244FE938 !important;
    border: 1px solid var(--primary) !important;
}
.quiz-answers {
    gap: 24px !important;
}
.quiz-navigation {
    padding-top: 0 !important;
}
.quiz-btn {
    color: var(--white) !important;
    background: var(--primary) !important;
    padding: 16px 24px !important;
    border-radius: 30px !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    opacity: 1 !important;
    text-align: center !important;
}
.quiz-btn-primary:hover {
  transition-duration: var(--duration-03);
  color: var(--white);
  background: var(--primary-hover) !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}
.quiz-form-checkbox-label a {
  color: var(--primary) !important;
  text-decoration: none;
}
.quiz-form-checkbox-label a:hover {
  color: var(--primary-hover) !important;
  text-decoration: none;
}
.quiz-result-form-wrapper {
    border: 1px solid var(--primary, #6366f1) !important;
    background-color: var(--gray-200) !important;   
}
.quiz-form-label {
    display: none;
}
.quiz-form-hint {
    display: none !important;
}
.quiz-result-form-title {
    display: none;
}
.quiz-form-fields-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}


/* start before */

@media (max-width: 1519px) {
    .header-social-wrap {
        display: none !important;
    }
}


@media (max-width: 991px) {
    .mob-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        white-space: normal;
    }
    
    aside.sidebar > div {
        position: static;
    }

    .fab-container {
        bottom: 16px !important;
        right: 16px !important;
    }

    .alert-2662 {
        width: 100%;
        right: auto;
        z-index: 10000;
        bottom: 16px;
        border-radius: 24px;
        padding: 16px;
    }

    .alert-2662-box {
        flex-direction: column !important;
    }

    .alert-2662-box button {
        width: 100%;
        margin-left: 0 !important;
        margin-top: 8px;
    }

    .navbar .navbar-nav .simple-dropdown .dropdown-menu li a {
        padding: 8px 0 !important;
    }

    .navbar .navbar-nav .nav-link, .navbar-modern-inner .navbar-nav .nav-link, .navbar-full-screen-menu-inner .navbar-nav .nav-link {
        padding: 8px 14px !important;
    }

    .navbar .navbar-nav .simple-dropdown .dropdown-menu {
        display: none;
        width: auto;
        padding: 8px 14px;
        -webkit-border-radius: 0;
        border-radius: 0;
        box-shadow: none !important;
        margin-top: 12px;
    }

    .navbar .navbar-nav .simple-dropdown .dropdown-menu .dropdown > a, .navbar-modern-inner .navbar-nav .simple-dropdown .dropdown-menu .dropdown > a, .navbar-full-screen-menu-inner .navbar-nav .simple-dropdown .dropdown-menu .dropdown > a {
        font-size: 12px;
        padding: 0 !important;
        margin-top: 0;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .header-home .navbar-collapse .navbar-nav {
        background-color: var(--white);
        border-radius: 20px;
    }

    .title-with-slider-nav .slider-nav {
        margin-top: 16px;
    }

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

    .white-space-normal p, h1, h2, h3, h4, h5, h6, span, a {
        white-space: normal;
    }

    .section-cta {
        padding: 40px 0 32px 0 !important;
    }

    .presentation-box h2 {
        margin-bottom: 8px;
        font-size: 24px;
        line-height: 30px;
    }

    .award-block {
        background: none !important;
        padding: 0 8px;
    }

    .award-block-bg {
        display: none;
    }

    .award-block-img {
        height: 100%;
        border: 1px solid #E7E7E7;
    }

    .modal-popup-reviews {
        width: 100%;
        border-radius: 16px;
        padding: 16px 8px;
    }

    .review-box__head-title span {
        margin-bottom: 0;
    }

    .modal-popup-reviews .mfp-close {
        height: 32px;
        width: 32px;
        top: 12px;
    }

    .news-card {
        padding: 16px;
        border: 1px solid #E7E7E7;
        border-radius: 24px;
    }

    .contacts__card-link {
        font-size: 13px;
        line-height: 20px;
    }

    .why-choose-card-50 {
        height: 140px;
    }

    .hero__button {
        width: 100%;
    }

    .hero__button .button-primary-with-icon {
        justify-content: space-between;
        width: 100%;
    }

    #hero {
        padding-bottom: 24px;
    }

    #hero .hero__button-and-text {
        margin-top: 0;
    }

    #hero .hero__content {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
    }

    #hero .hero__title-and-description {
        display: flex;
        flex-direction: column;
        margin-top: 116px;
        justify-content: center;
    }

    .header-icon {
        mArgin-right: 24px;
    }
}

@media (max-width: 1279px) {
    .why-choose-card-50 .span-lg {
        font-size: 15px;
    }

    .why-choose-card-100 .span-lg {
        font-size: 15px;
    }

    .section-calculate-the-cost__bg {
        background-image: none !important;
    }
    .section-blog-hero .why-choose-card-style-2 {
        padding: 16px 16px 16px 16px;
    }
}


@media (min-width: 992px) {
    .hero__title {
        font-size: 48px;
        line-height: 54px;
        max-width: 840px;
    }

    .header-home .navbar .navbar-nav .nav-link {
        color: var(--white);
    }

    .navbar .navbar-nav .simple-dropdown .dropdown-menu li a {
        padding: 10px 16px !important;
        border-radius: 12px;
    }

    .navbar .navbar-nav .simple-dropdown .dropdown-menu li a:hover {
        background-color: #F0F0F0;
    }

    .advantages-number {
        font-size: 64px;
        line-height: 60px;
    }

    .advantages-wrap {
        margin-top: 32px;
    }

    .advantages {
        background-position: right;
    }

    .cta-box {
        padding: 32px;
    }

    .review-box__head-title p {
        font-size: 18px;
        line-height: 24px;
    }

    .review-box__head-img {
        height: 86px;
        width: 86px;
    }

    .news-card__body p {
        margin-bottom: 16px;
        margin-top: 16px;
        font-size: 16px;
        line-height: 24px;
    }

    .page-title {
        padding: 40px;
        border-radius: 32px;
        align-items: center;
    }

    .top-spacer {
        height: 100px;
    }

    .why-choose-card-style-2 .why-abie-bg-image {
        right: -80px;
        bottom: -48px;
    }

    .presentation-box .button-secondary {
        align-self: flex-start;
        margin-top: auto;
    }

    .presentation-box {
        height: 360px;
    }

    .presentation-box__content {
        padding: 40px;
    }

    .presentation-box h2 {
        margin-bottom: 24px;
    }

    .presentation-box__img img {
        max-width: 398px;
        position: absolute;
        right: -54px;
        top: -240px;
        left: auto;
    }
}

@media (min-width: 1280px) {
    .hero__title {
        font-size: 56px;
        line-height: 60px;
        margin-bottom: 32px;
        max-width: 980px;
    }

    .hero__button-and-text {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 32px;
        margin-top: 60px;
    }

    .hero__button-and-text .hero__text {
        max-width: 660px;
    }

    .hero__text {
        font-size: 17px;
        line-height: 28px;
    }

    .hero-span {
        font-size: 20px;
        line-height: 28px;
    }

    .advantages-number {
        font-size: 64px;
        line-height: 60px;
    }

    .title-with-text {
        margin-bottom: 40px;
    }

    .award-slide {
        min-height: 400px;
        max-height: 400px;
    }

    .title-with-text h2 {
        margin-bottom: 24px;
    }

    .cta-box__title-with-logo {
        margin-bottom: 32px;
    }

    .cta-box p {
        margin-bottom: 24px;
    }

    .digital-card {
        padding: 32px 24px 24px 32px;
    }

    .technological-card {
        padding: 24px 24px 32px 24px;
        min-height: 600px;
    }

    .technological-card .h5 {
        margin-bottom: 156px;
    }

    .pr-lg-64 {
        padding-right: 64px;
    }

    .pl-lg-64 {
        padding-left: 64px;
    }

    .row-gap-lg-12 > * {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    .advantages-wrap {
        margin-top: 40px;
    }

    .card-link .h6 {
        font-size: 24px;
        line-height: 28px;
    }

    .advantages {
        padding: 16px 24px;
        gap: 32px;
    }

    .card-link {
        min-height: 350px;
        padding: 24px;
    }

    .problems-title {
        line-height: 72px;
        font-size: 56px;
    }

    .heading-why-abie {
        color: var(--white);
    }

    .subheading-why-abie {
        color: var(--white);
        margin-top: 24px;
    }

    .why-choose-card-50 {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        min-height: 307px;
    }

    .section-why-abie .row {
        margin-top: 32px;
    }

    .why-choose-card-50 {
        padding: 24px;
    }

    .why-choose-card-100 {
        padding: 24px;
    }

    .why-abie__icon img {
        max-width: 64px;
        max-height: 64px;
    }

    .why-choose-card-100 {
        background-position: bottom;
    }

    .title-with-bage {
        margin-bottom: 24px;
    }

    .problems-card__vertical {
        justify-content: space-between;
    }

    .problems-card__vertical .problems-card__img {
        margin-bottom: 32px;
    }

    .problems-card__horizontal .problems-card__img {
        margin-right: 32px;
        width: 114px !important;
        max-width: 114px;
    }

    .problems-card__text .h4 {
        margin-bottom: 16px;
        margin-top: 0px;
    }

    .problems-card__text h2 {
        margin-bottom: 32px;
    }

    .cta-box {
        padding: 40px;
        background-image: url("/storage/app/media/bg-img-893478956fgh23df.jpg");
    }

    .why-abie__col-2-bg {
        background-image: url("/storage/app/media/why-choose-img-5897236578906.jpg");
    }

    .why-abie__col-4-bg {
        background-image: url("/storage/app/media/why-choose-img-5897236578907.jpg");
    }

    .news-card img {
        width: 100%;
        min-height: 311px;
        margin-bottom: 16px;
    }

    .news-card__body p {
        margin-bottom: 24px;
        margin-top: 16px;
        font-size: 18px;
        line-height: 24px;
    }

    .our-contacts h2 {
        margin-bottom: 24px;
    }

    .contact-form-wrap {
        padding: 32px;
    }

    .block-with-bg-image {
        padding: 40px 40px;
        display: flex;
        flex-direction: column;
        justify-content: end;
        border-radius: 32px;
    }

    .block-with-bg-image h2 {
        font-size: 46px;
        line-height: 48px;
        margin-top: 16px;
    }

    .products-description {
        padding: 40px 0;
    }

    .section-blog-hero {
        padding: 32px 0 40px 0;
    }

    .blog-hero {
        height: 660px;
        border-radius: 24px;
        padding: 60px;
    }

    .popup {
        padding: 24px 32px 32px 32px;
        border-radius: 28px;
    }

    .popup-form {
        max-width: 569px;
    }

    .popup .contact-form-wrap__modal {
        margin-top: 40px;
    }

    .popup .button-primary {
        margin-top: 40px;
    }

    .popup .input {
        margin-bottom: 24px;
    }

    .top-spacer {
        height: 100px;
    }

    .breadcrumbs__back-button {
        background-color: #E9E9E9;
        padding: 24px 42px;
        border-radius: 30px;
        max-height: 64px;
        margin-bottom: 0;
        margin-right: 16px;
    }

    .breadcrumbs__nav-link {
        font-size: 18px;
        line-height: 24px;
        color: #868585;
    }

    .section-breadcrumbs {
        padding: 32px 0 0 0;
    }

    .numbers-list {
        padding: 16px 24px;
        height: 100%;
    }

    .numbers-list__number {
        margin-bottom: 24px;
    }

    .integration-effect-card img {
        max-width: 56px;
    }

    .advantage-big-card {
        min-height: 492px;
        justify-content: center;
    }

    .products-title {
        padding: 40px 0 0 0;
    }

    .products-description__cta {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right;
        border-radius: 20px;
        padding: 32px 230px 32px 32px;
    }

    .products-description__cta .text {
        margin-top: 24px;
    }

    .products-description__cta .button-primary {
        margin-top: 24px;
    }

    .products-title__top {
        height: 340px;
    }

    .products-title__top .col-12:first-child {
        padding: 40px;
    }

    .products-title__top-devices img {
        width: auto;
        height: 100%;
        margin-right: -1px;
    }

    .application-card__description {
        padding: 16px 24px 24px 24px;
    }

    .contact-form-wrap .textarea {
        margin-bottom: 57px;
        height: 164px;
    }

    .tasks-card {
        padding: 24px;
    }

    .tasks-card-style-02 {
        padding: 24px 32px 24px 24px;
    }

    .tasks-card-style-02 img {
        max-width: 54px;
        margin-bottom: 69px;
    }

    .blog-card {
        border-radius: 24px;
    }

    .blog-card__image {
        border-radius: 20px;
    }

    .blog-card__meta {
        margin-top: 16px !important;
    }

    .blog-card__title {
        margin-top: 16px;
    }

    .blog-card__text {
        margin-top: 16px;
        font-size: 15px;
        line-height: 24px;
    }

    .news {
        margin-top: 32px;
    }

    .news-title {
        margin-bottom: 40px;
    }

    .blog-standard {
        padding-left: 40px !important;
    }

    .title {
        margin-bottom: 40px;
    }

    .contacts__card-link {
        margin-top: 16px;
    }

    .contacts__card-icon {
        margin-bottom: 16px;
        max-width: 40px;
        max-height: 40px;
    }

    .contacts__card-link {
        font-size: 20px;
        line-height: 32px;
    }

    .contacts__card {
        border-radius: 24px;
        padding: 24px;
    }

    .review-box {
        padding: 24px;
    }

    .review-box__body {
        margin: 24px 0 26px 0;
    }

    .numbers-list__title {
        margin-bottom: 24px;
    }

    .advantage-big-card {
        padding: 60px !important;
        text-align: center;
    }

    .advantage-big-card h2 {
        width: 65%;
    }

    .why-abie__icon {
        max-width: 64px;
        min-height: 64px;
    }

    .why-choose-card-style-2 {
        padding: 24px 24px 24px 24px;
        position: relative;
        overflow: hidden;
    }

    .why-choose-card-style-2 .column-with-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .why-choose-card-style-2 .why-abie__text {
        font-size: 15px;
        line-height: 24px;
    }

    .why-choose-card-style-2 .why-abie-bg-image {
        right: -24px;
        left: auto;
        bottom: 0;
        position: absolute;
    }

    .section-why-abie-style-03 .why-abie__text {
        font-size: 15px;
        line-height: 24px;
    }

    .section-calculate-the-cost__bg {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .col-calculate-the-cost__bg {
        background-image: none !important;
        border-radius: 0;
        min-height: 100%;
        padding: 0;
        margin-bottom: 0;
    }

    .slider-screen__title {
        margin-top: 16px;
        font-size: 20px;
        line-height: 28px;
    }

    .modal-popup-screens {
        border-radius: 32px;
        padding: 24px;
        max-width: 64%;
    }

    .section-card {
        padding: 40px;
    }

    .partner-slide {
        padding-left: 8px;
        padding-right: 8px;
    }

    .partner-logo__wrap {
        padding: 28px 32px;
    }

}

@media (min-width: 1520px) {
    header .navbar-brand .logo-desktop {
        visibility: visible;
        opacity: 1;
        width: auto;
    }

    .hero__title {
        max-width: 1000px;
    }

    .hero__button-and-text .hero__text {
        max-width: 670px;
    }

    .advantages-number {
        font-size: 56px;
        line-height: 60px;
        font-weight: 600;
    }

    .advantages-wrap {
        margin-top: 60px;
    }

    .cta-box {
        padding: 40px;
    }

    .header-main .navbar-brand .logo-desktop {
        visibility: visible;
        opacity: 1;
        width: auto;
    }
}


/* banners */
/* banner-sm / banner-lg ------ justify-content-end / justify-content-between / justify-content-center */
.banner {
    padding: 24px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

.banner-text-only {
    justify-content: space-between;
    background-position: right;
    background-size: cover;
}

.banner-lg {
    min-height: 500px;
    padding: 54px 24px 24px 24px;
}

.banner-sm {
    min-height: 365px;
}

.banner-content {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.banner-content .banner-content__img {
    width: 100%;
    margin-bottom: 16px;
}

.banner-content .banner-content__title {
    margin-bottom: 16px;
}

.banner__bg-image {
    position: absolute;
    top: 0;
    right: 0;
}

.banner-nav-arrows {
    position: absolute;
    bottom: 20px;
    right: 40px;
    z-index: 1;
}

.banner-pagination {
    position: absolute;
    top: 24px;
    z-index: 1;
    width: 100%;
    padding: 0 24px;
}

.banner-pagination .swiper-pagination-progress {
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
}

.banner-pagination .swiper-pagination-progress .swiper-progress {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
}

.banner-additional-info {
    background-color: #292929;
    padding: 6px 24px;
    border-radius: 32px;
}

.banner-additional-info__wrap {
    gap: 4px;
}

.text-space p {
    margin-top: 24px;
}

@media (max-width: 991px) {
    .banner-text-only h2 {
        font-size: 24px;
        line-height: 28px;
    }

    .banner__bg-image {
        z-index: 1;
        position: absolute;
        width: 100%;
        top: 340px;
    }
}

@media (max-width: 1279px) {
    .banner-navigation {
        display: none !important;
    }

    .banner-button .button-secondary {
        width: 100%;
        text-align: center;
    }
}

@media (min-width: 992px) {
    .banner-lg {
        padding: 54px 24px 24px 24px;
    }

    .banner-content {
        margin-right: 210px;
    }

    .banner__bg-image {
        right: -280px;
        height: 100%;
    }
}

@media (min-width: 1280px) {
    .banner {
        padding: 54px 40px 40px 40px;
        border-radius: 24px;
    }

    .banner-content {
        margin-right: 350px;
    }

    .banner__bg-image {
        right: -124px;
    }

    .banner-pagination {
        padding: 0 40px;
    }

    .banner-content .banner-content__img {
        max-height: 50px;
        width: auto;
        margin-bottom: 24px;
    }

    .banner-text-only {
        justify-content: space-between;
        background-position: center;
        background-size: cover;
    }

    .advantage-big-card {
        padding: 60px !important;
        text-align: center;
    }

    .advantage-big-card h2 {
        width: 65%;
    }
}

@media (min-width: 1520px) {
    .banner {
        border-radius: 32px;
    }

    .banner-content {
        margin-right: 490px;
    }

    .banner__bg-image {
        right: 0;
    }
}