@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPMincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');

.front-page-v2 {
    background-color: unset;

    h1, h2, h3, h4, p, figure, blockquote {
        margin: 0;
        padding: 0;
    }

    .splide__arrow:not([disabled]) svg path,
    .splide__arrow:not([disabled]) svg rect {
        stroke: #333333;
    }

    .hero {
        padding-top: 64px;
        padding-bottom: unset;
        background: linear-gradient(180deg, #FAF7F5 0%, rgba(250, 247, 245, 0.00) 100%);

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

        .hero__header {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 32px;
            max-width: 800px;
        }

        .hero__title {
            margin-top: 20px;
            margin-bottom: 20px;
            color: #292929;
            text-align: center;
            font-size: 72px;
            font-style: normal;
            font-weight: 700;
            line-height: 72px;
            letter-spacing: -1px;

            span {
                color: var(--General-Green-Main, #409A65);
                font-size: 72px;
                font-style: normal;
                font-weight: 700;
                line-height: 72px;
                letter-spacing: -1px;
            }
        }

        .hero__text {
            max-width: 560px;
            color: var(--Text-Primary, #282828);
            text-align: center;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 28px;
            letter-spacing: 0.18px;
        }

        .hero__button-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            margin-bottom: 32px;

            span {
                color: var(--Text-Secondary, #777);
                text-align: center;
                font-size: 12px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px;
                letter-spacing: 0.96px;
                text-transform: uppercase;
            }
        }

        .hero__picture {
        }

        .hero__footer {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 32px 40px;
            border-radius: 24px;
            background-color: #FAF7F5;

            .hero__footer-text {
                text-align: left;
                max-width: 515px;
            }

            .hero__footer-title {
                margin-bottom: 12px;
                color: var(--Text-Primary, #282828);
                font-size: 28px;
                font-style: normal;
                font-weight: 600;
                line-height: 32px;

                br {
                    display: none;
                }
            }

            .hero__footer-desc {
                color: var(--Text-Secondary, #777);
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px; /* 150% */
            }
        }
    }

    .customers {
        padding-top: 48px;
        padding-bottom: 80px;

        .customers__wrapper-container {
            overflow: hidden;
            width: 100%;
            position: relative;
        }

        .customers__wrapper-container::before,
        .customers__wrapper-container::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100px;
            z-index: 2;
            pointer-events: none;
        }

        .customers__wrapper-container::before {
            left: 0;
            background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
        }

        .customers__wrapper-container::after {
            right: 0;
            background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
        }

        .customers__logos {
            display: flex;
            flex-wrap: nowrap;
            width: max-content;
            will-change: transform;
            gap: 56px;
        }

        .customer__slide {
            flex-shrink: 0;
        }

        .customer__slide img {
            display: block;
            max-width: 100%;
            height: auto;
        }

    }

    .wholesalers {
        padding-top: 96px;
        padding-bottom: 96px;

        .wholesalers__wrapper {
        }

        .wholesalers__header {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-bottom: 40px;
        }

        .wholesalers__label {
            margin-bottom: 24px;
            color: var(--icon-green-main, #006746);
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
            letter-spacing: 1.12px;
            text-transform: uppercase;
        }

        .wholesalers__title {
            text-align: center;
            font-size: 48px;
            font-style: normal;
            font-weight: 700;
            line-height: 52px;
            letter-spacing: -0.48px;
        }

        .wholesalers-tabs__header {
            display: flex;
            gap: 20px;
            align-items: stretch;
            margin-bottom: 48px;
        }

        .wholesalers-tabs-nav {
            max-height: 104px;
            width: calc((100% / 5) - 10px);
            position: relative;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 20px;
            outline: 1px solid #DBDBDB;
            background-color: #FFFFFF;
            transition: .1s ease-in-out;
            cursor: pointer;
            color: #777;

            svg {
                min-width: 25px;
            }
        }

        .wholesalers-tabs-nav__title {
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 24px; /* 150% */
        }

        .wholesalers-tabs-nav:hover {
            outline: 2px solid #757575;
            color: #282828;

            svg path {
                fill: #282828;
            }
        }

        .wholesalers-tabs-nav.--active {
            background-color: #F2EFED;
            color: #282828;
            outline: unset;

            svg path {
                fill: #282828;
            }
        }

        .wholesalers-tabs__header-tab {
            display: none;
        }

        .wholesalers-tabs__sub-title {
            margin-bottom: 16px;
            color: var(--icon-green-main, #006746);
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
            letter-spacing: 1.12px;
            text-transform: uppercase;
        }


        .wholesalers-tabs__text {
            color: var(--Text-Primary, #282828);
            font-size: 36px;
            font-style: normal;
            font-weight: 700;
            line-height: 44px; /* 122.222% */
            letter-spacing: -0.5px;
            margin-bottom: 32px;
        }

        .wholesalers-tabs__item {
            display: none;
            /*grid-template-columns: 1fr 1fr;*/
            gap: 32px;
        }

        .wholesalers-tabs__title_mobile {
            display: none;
        }

        .wholesalers-tabs__title-icon {
            display: none;
        }

        .wholesalers-tabs__item.--active {
            display: flex;
        }

        .wholesalers-tabs__desc {
            padding: 8px 32px 8px 0px;
        }

        .wholesalers-tabs__content {
            margin-top: unset;
            font-weight: 600;
            font-size: 18px;
            line-height: 27px
        }

        .wholesalers-tabs__content ul {
            margin-bottom: 32px;
        }

        .wholesalers-tabs__content li {
            display: flex;
            align-items: center;
            color: var(--Text-default, #333);
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: 26px;
        }

        .wholesalers-tabs__content li:not(:last-child) {
            margin-bottom: 10px;
            font-size: 16px;
            line-height: 24px;
        }

        .wholesalers-tabs__content li::before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10Z' fill='%23D3F6E1'/%3E%3Cpath d='M13.5775 6.49408C13.9029 6.16864 14.4308 6.16864 14.7562 6.49408C15.0812 6.81944 15.0812 7.34645 14.7562 7.67181L8.92221 13.5058C8.59684 13.8308 8.06982 13.8308 7.74447 13.5058L5.24447 11.0058C4.91904 10.6804 4.91904 10.1525 5.24447 9.82709C5.56987 9.50187 6.09681 9.50187 6.42221 9.82709L8.33334 11.7382L13.5775 6.49408Z' fill='%23006746'/%3E%3C/svg%3E");
            margin-right: 12px;
            width: 20px;
            height: 20px;
        }

        .wholesalers-tabs__image {
            max-width: 50%;
        }

        .wholesalers-tabs__image_desktop {
            display: block;
            padding-top: 24px;
            padding-bottom: 22px;

            img {
                max-height: 560px;
                max-width: 573px;
            }
        }

        .wholesalers-tabs__image_mobile {
            display: none;
            margin-bottom: 32px;
        }

        .wholesalers__testimonial {
            margin-top: 40px;
            border-top: 1px solid #E4E4E4;
            padding-top: 16px;

            .quote-text {
                margin-bottom: 16px;
                color: var(--Text-Primary, #282828);
                font-family: "Roboto Serif";
                font-size: 16px;
                font-style: italic;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.16px;
            }

            .author-info {
                display: flex;
                gap: 12px;
            }

            .avatar {
                width: 36px;
                height: 36px;
                border-radius: 100%;
            }

            .details {
                display: flex;
                flex-direction: column;
            }

            .name {
                color: var(--Text-Primary, #282828);
                font-size: 14px;
                font-style: normal;
                font-weight: 600;
                line-height: 20px;
                letter-spacing: -0.14px;
            }

            .position {
                color: var(--Text-default, #333);
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: 0.14px;
            }
        }


        /*.wholesalers-tabs__link-more {*/
        /*    display: inline-block;*/
        /*    color: #409A65;*/
        /*    font-size: 16px;*/
        /*    font-weight: 600;*/
        /*    line-height: 120%;*/
        /*    margin-top: 20px;*/
        /*}*/

        /*.wholesalers-tabs__link-more::after {*/
        /*    content: ' →';*/
        /*    color: #409A65;*/
        /*    font-size: 16px;*/
        /*    font-weight: 600;*/
        /*}*/

        /*.wholesalers-tabs__item .btn-popup {*/
        /*    background: #282823;*/
        /*    margin-top: 10px;*/
        /*}*/

    }

    .visibility {
        padding-top: 96px;
        padding-bottom: 96px;
        background-color: #1A1A1A;

        .container {
        }

        .visibility__wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
        }

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

        .visibility__header {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .visibility__indicator {
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 100%;
            background-color: #409A65;
        }

        .visibility__label {
            display: inline-block;
            color: var(--General-White, #FFF);
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
            letter-spacing: 1.12px;
            text-transform: uppercase;
        }

        .visibility__title {
            color: var(--General-White, #FFF);
            font-size: 48px;
            font-style: normal;
            font-weight: 700;
            line-height: 52px;
            letter-spacing: -0.48px;
        }

        .visibility__description {
            color: #E6E6E6;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 26px;

            p:not(:last-child) {
                margin-bottom: 26px;
            }
        }

        .visibility__metrics {
            margin-bottom: 32px;
            padding: unset;
        }

        .visibility__metrics-caption {
            margin-bottom: 32px;
            color: var(--Text-Secondary, #777);
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
            letter-spacing: 1.12px;
            text-transform: uppercase;
        }

        .visibility__stats-grid {
            display: grid;
            height: 400px;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 4px;
        }

        .visibility__stat-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            max-height: 198px;
            padding: 24px;
            border-radius: 8px;
            background: #252525;
        }

        .visibility__stat-value {
            margin-bottom: 8px;
            color: var(--General-White, #FFF);
            text-align: center;
            font-size: 40px;
            font-style: normal;
            font-weight: 400;
            line-height: 48px;
        }

        .visibility__stat-description {
            color: #B1B1B1;
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
        }
    }

    .success-quotes {
        padding-top: 96px;
        padding-bottom: 96px;
        overflow: hidden;

        .splide__arrows {
            max-width: 1178px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        .arrows_desktop {
            position: absolute;
            top: 69px;
            right: 53px;
        }

        .success-quotes__header {
            max-width: 686px;

            h2 {
                margin-bottom: 24px;
                color: var(--Text-Primary, #282828);
                font-feature-settings: 'ss02' on, 'ss03' on, 'liga' off;
                font-size: 44px;
                font-style: normal;
                font-weight: 700;
                line-height: 48px; /* 109.091% */
                letter-spacing: -0.44px;
            }

            p {
                color: var(--Text-Primary, #282828);
                font-feature-settings: 'ss02' on, 'ss03' on, 'liga' off;
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 28px; /* 155.556% */
                letter-spacing: 0.18px;
            }
        }

        .splide__track {
            margin-top: 48px;
            overflow: unset;
        }

        .splide__list {
            li:not(:last-child) {
                margin-right: 32px;
            }
        }

        .case-quote {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;

            padding: 16px;
            border-radius: 32px;
            background-color: #FAF7F5;

            .case-quote__inner {
                padding: 24px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;

                .case-quote__logo {
                    max-width: 121px;
                    margin-bottom: 20px;
                    max-height: 56px;
                }

                .case-quote__text {
                    margin-bottom: 20px;

                    p {
                        color: var(--Text-Primary, #282828);
                        font-family: "Roboto Serif", serif;
                        font-size: 24px;
                        line-height: 32px;
                        letter-spacing: -0.5px;
                    }
                }

                .customer {
                    margin-top: auto;

                    .profile {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        margin: 24px 0;

                        .profile__avatar {
                            width: 48px;
                            height: 48px;
                            border-radius: 100%;
                        }

                        .author {
                            p {
                                font-size: 16px;
                                line-height: 24px;
                                letter-spacing: -0.16px;
                                font-style: normal;
                            }

                            .author__name {
                                color: var(--Text-Primary, #282828);
                                font-weight: 600;
                            }

                            .author__position {
                                color: var(--Text-default, #333);
                            }
                        }
                    }

                    .cards-stats {
                        display: flex;
                        gap: 65px;
                        position: relative;

                        .card__num {
                            color: var(--Text-Primary, #282828);
                            font-feature-settings: 'salt' on;
                            font-size: 32px;
                            font-weight: 600;
                            line-height: 40px;
                        }

                        .card__text {
                            color: var(--Text-default, #333);
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 20px;
                        }
                    }

                    .cards-stats li:last-child {
                        border-left: 1px solid #D9D9D9;
                        padding-left: 32px;
                    }
                }

            }

            .poster {
                border-radius: 16px;
                align-self: center;
                max-height: 504px;
                width: 100%;
            }
        }
    }

    .cases {
        padding-top: 96px;
        padding-bottom: 96px;

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

        .cases__header {
            max-width: 560px;
            margin-bottom: 32px;
            text-align: center;
        }

        .cases__subtitle {
            display: inline-block;
            height: 28px;
            padding: 0 16px;
            border-radius: 40px;
            border: 1px solid rgba(64, 154, 101, 0.50);
            font-size: 14px;
            font-weight: 600;
            line-height: 28px;
            letter-spacing: 0.56px;
            text-transform: uppercase;
            color: rgba(0, 103, 70, 1);
        }

        .cases__title {
            color: var(--Text-Primary, #282828);
            text-align: center;
            font-size: 44px;
            font-style: normal;
            font-weight: 700;
            line-height: 48px;
            letter-spacing: -0.44px;

            span {
                color: var(--General-Green-Main, #409A65);
            }
        }

        .cases__menu {
            display: flex;
            gap: 4px;
            margin-bottom: 32px;
            padding: 4px;
            border-radius: 999px;
            /*background-color: #F0F0F0;*/
        }

        .cases__menu-button {
            height: 36px;
            padding: 0 16px;
            color: var(--Text-Primary, #282828);
            text-align: center;
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;

            &:hover {
                border-radius: 999px;
                background-color: #F0F0F0;
            }
        }

        .cases__menu-button.active {
            border-radius: 999px;
            background: #F7F4F2;
        }

        .cases-tubs {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .cases-tubs__item {
            display: none;
            gap: 16px;
        }

        .cases-tubs__item.active {
            display: flex;
            min-height: 480px;
        }

        .cases-tubs__content-left {
            width: 34%;
            display: flex;
            flex-direction: column;
            padding: 40px;
            border-radius: 24px;
            background-color: rgba(247, 244, 242, 1);
        }

        .cases-tubs__header {
            h3 {
                margin-bottom: 16px;
                color: var(--Text-Secondary, #777);
                font-family: Caveat;
                font-size: 24px;
                font-weight: 700;
                line-height: 32px;
            }

            span {
                color: var(--Text-Primary, #282828);
                font-size: 32px;
                /*font-weight: 700;*/
                line-height: 40px;
                letter-spacing: -0.32px;

                strong {
                    font-weight: 700;
                }
            }
        }

        .cases-tubs__text {
            margin-top: auto;
            margin-bottom: 20px;
            line-height: 26px;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            letter-spacing: 0.18px;
        }

        .cases-tubs__content-right {
            width: 66%;
            display: flex;
            align-items: center;
            border-radius: 32px;
            background-color: rgba(247, 244, 242, 1);
            padding-right: 16px;

            img {
                flex: 1 0 311px;
                max-width: 522px;
                min-width: 0;
            }
        }

        .stats__list {
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            flex: 1 0 150px;
            max-width: 224px;
            padding: 16px 0;
            gap: 16px;

            & > * {
                flex: 1;
            }
        }

        .stats__item {
            /*width: 224px;*/
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 16px 24px;
            border-radius: 24px;
            background-color: rgba(255, 255, 255, 0.80);
            text-align: center;
        }

        .stats__num {
            font-size: 40px;
            font-weight: 600;
            line-height: 1.2;
            color: rgba(40, 40, 40, 1);
        }

        .stats__desc {
            max-width: 75%;
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 400;
            line-height: 1.25;
            letter-spacing: 0.16px;
        }

        .execution__link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--Text-Primary, #282828);
            font-size: 18px;
            font-weight: 600;
            line-height: 28px;
        }
    }

    .transformation-block {
        .container{

        }

        .transformation-block__title {
            margin-bottom: 48px;
            color: var(--Text-Primary, #282828);
            text-align: center;
            font-size: 44px;
            font-style: normal;
            font-weight: 700;
            line-height: 48px;
            letter-spacing: -0.44px;

            span {
                color: var(--General-Green-Main, #409A65);
            }
        }

        .transformation-block__grid {
            display: flex;
            gap: 32px;
        }

        .transformation-block__side {
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .transformation-block__header {
            padding: 32px 32px 16px 32px;
        }

        .transformation-block__label {
            display: block;
            margin-bottom: 12px;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
            letter-spacing: 1.12px;
            text-transform: uppercase;
        }

        .transformation-block__side-title {
            color: var(--Text-Primary, #282828);
            font-family: Gilroy;
            font-size: 32px;
            font-style: normal;
            font-weight: 600;
            line-height: 40px;
            letter-spacing: -0.5px;
        }

        .transformation-block__side--old {
            background-color: #FFEDEF;

            .transformation-block__label {
                color: #BE1A1A;
            }
        }

        .transformation-block__side--new {
            background-color: #DAF8E9;

            .transformation-block__label {
                color: var(--icon-green-main, #006746);
            }

            .transformation-block__side-title {
                margin-bottom: 24px;
            }
        }
    }

    .integrations-workflow {
        position: relative;
        padding-top: 96px;
        padding-bottom: 96px;
        background-color: #F7F4F2;
        overflow: hidden;

        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("/wp-content/themes/simplydepo/images/new-front/bg-intefrations.svg");
            background-repeat: no-repeat;
            background-size: cover;
            z-index: 0;
        }

        .integrations-workflow__wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .integrations-workflow__header {
            margin-bottom: 24px;
            max-width: 560px;
            width: 100%;
        }

        .integrations-workflow__title {
            margin-bottom: 12px;
            color: var(--Text-Primary, #282828);
            text-align: center;
            font-size: 44px;
            font-style: normal;
            font-weight: 700;
            line-height: 48px;
            letter-spacing: -0.44px;

            span {
                color: var(--General-Green-Main, #409A65);
                font-size: 44px;
                font-style: normal;
                font-weight: 700;
                line-height: 48px;
                letter-spacing: -0.44px;
            }
        }

        .integrations-workflow__desc {
            color: var(--Text-default, #333);
            text-align: center;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 28px;
            letter-spacing: 0.18px;
        }

        .integrations-workflow__cards-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
        }

        .integrations-workflow__cards-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 177px;
            width: calc((100% / 4) - 16px);
            gap: 16px;
            padding: 16px 20px;
            border-radius: 16px;
            background: var(--General-White, #FFF);

            &:hover {
                outline: 2px solid var(--General-Green-Main, #409A65);
            }

            p {
                color: var(--Text-Primary, #282828);
                text-align: center;
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                line-height: 26px; /* 144.444% */
            }
        }
    }

    .additional-features {
        overflow: hidden;

        .container {
            position: relative;
        }

        .additional-features__wrapper {
        }

        .additional-features__header {
            margin-bottom: 48px;
            max-width: 680px;
            text-align: left;

            h2 {
                color: var(--Text-Primary, #282828);
                font-size: 44px;
                font-style: normal;
                font-weight: 700;
                line-height: 48px;
                letter-spacing: -0.5px;
                margin-bottom: 24px;
            }

            p {
                color: var(--Text-default, #333);
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 28px;
            }
        }

        .splide__track {
            overflow: unset;
        }

        .additional-features__cards {
            display: flex;

            li {
                max-width: 370px;

                &:not(:last-child) {
                    margin-right: 32px;
                }
            }
        }

        .splide-additional-features {
            margin: 0 auto;
            max-width: fit-content;
            /*padding-left: 156px;*/
        }

        .arrows_desktop {
            position: absolute;
            top: 69px;
            right: 53px;
        }

        .feature-card {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 32px;
            border-radius: 24px;
            border: 1px solid #E6E6E6;
            background: var(--General-White, #FFF);
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04);

            .feature-card__logo {
                width: 56px;
                height: 56px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-bottom: 24px;
                border-radius: 8px;
            }

            .orange {
                background-color: #FFF5EE;
            }

            .purple {
                background-color: #F5ECFC;
            }

            .mint {
                background-color: #E6F5F1;
            }


            .sky {
                background: #ECF4FC;
            }

            .rose {
                background: #FCECEF;
            }

            .lilac {
                background: #EFECFC;
            }

            h3 {
                margin-bottom: 8px;

                a {
                    display: inline-flex;
                    align-items: center;
                    gap: 2px;

                    color: inherit;
                    font-size: inherit;
                    font-weight: inherit;
                    line-height: inherit;

                    span {
                        display: inline-block;
                        position: relative;
                    }
                }
            }

            p {
                color: var(--Text-default, #333);
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
            }

            &:hover {
                h3 {
                    a {
                        color: var(--icon-green-main, #006746);

                        span::after {
                            display: block;
                            position: absolute;
                            content: "";
                            height: 1px;
                            left: 0;
                            bottom: 3px;
                            width: 100%;
                            background-color: var(--icon-green-main, #006746);
                        }

                        svg path {
                            fill: var(--icon-green-main, #006746);
                        }
                    }
                }
            }
        }
    }

    @media (max-width: 1199px) {
        padding-top: 56px;

        .customers {
            padding-top: 48px;
            padding-bottom: 48px;
        }

        .additional-features {
            padding: 48px 0;

            .arrows_desktop {
                position: absolute;
                top: 100px;
                left: 80%;
            }
        }
    }

    @media (max-width: 991px) {
        .hero {
            .hero__footer {
                flex-direction: column;

                .hero__footer-text {
                    text-align: center;
                    margin-bottom: 24px;
                    max-width: 298px;
                    width: 100%;
                }

                .hero__footer-title {
                    font-size: 20px;
                    line-height: 24px;
                    margin-bottom: 8px;

                    br {
                        display: block;
                    }
                }

                .hero__footer-desc {
                    font-size: 16px;
                    line-height: 24px;
                }
            }
        }

        .success-quotes {
            padding-top: 56px;
            padding-bottom: 56px;

            .arrows_desktop {
                position: unset;
            }

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

            .splide__pagination {
                .splide__pagination__page {
                    padding: unset;
                    margin: unset;
                    width: 8px;
                    height: 8px;
                    background-color: #D9D9D9;
                    border-radius: 100%;
                    opacity: 1;
                }

                .splide__pagination__page.is-active {
                    background: #282828;
                }

                li {
                    width: 24px;
                    height: 24px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
            }

            .case-quote {
                grid-template-columns: 1fr;
                gap: 8px;
                padding: 8px;

                .case-quote__inner {
                    padding: 16px;

                    .case-quote__logo {
                        max-width: 97px;
                        margin-bottom: 16px;
                    }

                    .button {
                        order: 1;
                        width: 100%;
                    }

                    .case-quote__text {
                        margin-bottom: unset;

                        p {
                            font-size: 18px;
                            font-weight: 400;
                            line-height: 24px;
                            letter-spacing: -0.2px;
                        }
                    }

                    .customer {
                        .cards-stats {
                            gap: 16px;
                            margin-bottom: 24px;

                            &::before {
                                display: none;
                            }

                            .card__num {
                                font-size: 20px;
                                line-height: 30px;
                                margin-bottom: 4px;
                            }
                        }
                    }

                }

                .poster {
                    grid-row: 1;
                    border-radius: 24px;
                    max-height: unset;
                    width: unset;
                }
            }
        }

        .cases {
            padding: 48px 0;

            .cases__header {
                gap: 16px;
                margin-bottom: 24px;
            }

            .cases__title {
                font-size: 28px;
                letter-spacing: -0.28px;
                line-height: 1.28;
                text-align: left;
            }

            .cases__menu {
                justify-content: space-between;
                gap: 4px;
                margin-bottom: 16px;
                width: 100%;
            }

            .cases__menu-button {
                font-size: 16px;
                height: 36px;
                line-height: 36px;
            }

            .cases-tubs__item {
                gap: unset;
                flex-wrap: wrap;
            }

            .cases-tubs__content-left {
                width: 100%;
                padding: 20px 20px 4px;
                border-radius: 16px 16px 0 0;
            }

            .cases-tubs__header {
                margin-bottom: 8px;
                font-size: 28px;
                font-weight: 700;
                line-height: 1.28;
                letter-spacing: -0.28px;

                h3 {
                    margin-bottom: 8px;
                    font-size: 20px;
                    line-height: 28px;
                }

                span {
                    font-size: 24px;
                    line-height: 32px;
                    letter-spacing: -0.2px;
                }
            }

            .cases-tubs__subtitle {
                margin-bottom: 8px;
                font-size: 20px;
                line-height: 1.4;
            }

            .cases-tubs__title {
                font-size: 24px;
                font-weight: 700;
                line-height: 1.33;
                letter-spacing: -0.2px;
            }

            .cases-tubs__text {
                font-size: 16px;
                line-height: 1.5;
                letter-spacing: 0.16px;
                margin-bottom: 24px;
            }

            .button {
                width: 100%;
            }

            .cases-tubs__content-right {
                flex-direction: column;
                width: 100%;
                gap: unset;
                padding: 4px 12px 12px;
                border-radius: 0 0 16px 16px;

                img {
                    height: unset;
                    max-width: 240px;
                    flex-basis: unset;
                }
            }

            .stats__list {
                position: relative;
                gap: unset;
                height: 108px;
                width: 100%;
                flex-basis: unset;
                max-width: unset;
                padding: unset;

                &::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    right: 50%;
                    top: 22px;
                    width: 1px;
                    height: 64px;
                    background-color: rgba(229, 229, 229, 1);
                }
            }

            .stats__item {
                height: 100%;
                padding: 24px 16px;

                &:nth-of-type(1) {
                    border-radius: 10px 0 0 10px;
                }

                &:nth-of-type(2) {
                    border-radius: 0 10px 10px 0;
                }
            }

            .stats__num {
                font-size: 24px;
            }

            .stats__desc {
                max-width: unset;
                font-size: 12px;
            }
        }

        .additional-features {
            padding: 48px 0;

            .additional-features__header {
                text-align: left;
                margin-bottom: 32px;

                h2 {
                    font-size: 32px;
                    line-height: 36px;
                    letter-spacing: -0.5px;
                    margin-bottom: 16px;
                }

                p {
                    font-size: 16px;
                    line-height: 24px;
                }
            }

            .additional-features__cards {
                li {
                    min-width: 320px;
                    flex: 1 0 0;

                    &:not(:last-child) {
                        margin-right: 16px;
                    }
                }
            }

            .feature-card {
                padding: 24px;
            }

            .splide__track {
                margin-bottom: 32px;
            }

            .splide__arrows {
                display: flex;
                flex-direction: row-reverse;
                justify-content: space-between;
            }

            .arrows_desktop {
                position: unset;
            }
        }

        .transformation-block {
            .transformation-block__grid {
                flex-direction: column;
                gap: 32px;
            }

            .transformation-block__title {
                font-size: 32px;
                line-height: 36px;
                letter-spacing: -0.5px;
                text-align: left;
                margin-bottom: 32px;

                br {
                    display: none;
                }
            }
        }
    }

    @media (max-width: 767px) {
        .hero {
            padding-top: 32px;
            padding-bottom: unset;

            .hero__wrapper {
            }

            .business__socials {
            }

            .business__socials-item {
            }

            .business__socials-logo {
            }

            .business__socials-text {
            }

            .hero__header {
                margin-bottom: 24px;
            }

            .hero__title {
                font-size: 40px;
                line-height: 44px;
                letter-spacing: -0.4px;

                span {
                    font-size: 40px;
                    line-height: 44px;
                    letter-spacing: -0.4px;
                }

            }

            .hero__text {
                font-size: 16px;
                line-height: 24px;
            }

            .hero__picture {
            }
        }

        .wholesalers {
            padding-top: 48px;
            padding-bottom: 48px;

            .wholesalers__header {
                margin-bottom: 32px;
            }

            .wholesalers__label {
                margin-bottom: 16px;
            }

            .wholesalers__title {
                font-size: 32px;
                line-height: 36px;
                letter-spacing: -0.32px;
            }

            .wholesalers-tabs__desc {
                width: 100%;
                padding: unset;
            }

            .wholesalers-tabs__header-tab {
                display: flex;
                flex-direction: column;
                margin-bottom: 32px;
                margin-bottom: unset;
            }

            .wholesalers-tabs__content {
                margin-top: 20px;
            }

            .wholesalers-tabs__title_mobile {
                margin-bottom: 0;
                display: flex;
                align-items: center;
                gap: 20px;

                color: var(--Text-Primary, #282828);
                text-align: center;
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: 26px; /* 144.444% */
                letter-spacing: 0.18px;
            }

            .wholesalers-tabs__title::after {
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.7071 6.79289C16.0976 7.18342 16.0976 7.81643 15.7071 8.20696L10.7071 13.207C10.3166 13.5975 9.68357 13.5975 9.29304 13.207L4.29304 8.20696C3.90252 7.81643 3.90252 7.18342 4.29304 6.79289C4.68357 6.40237 5.31658 6.40237 5.70711 6.79289L10.0001 11.0859L14.293 6.79289C14.6836 6.40237 15.3166 6.40237 15.7071 6.79289Z' fill='%23777777'/%3E%3C/svg%3E");
                display: flex;
                flex: 1;
                justify-content: end;
                height: 20px;
            }

            .wholesalers-tabs__item.--active .wholesalers-tabs__title::after {
                transform: rotate(.5turn);
                justify-content: flex-start;
            }

            .wholesalers-tabs__title-icon {
                display: inline-flex;

                svg {
                    width: 20px;
                    height: 20px;
                }

                svg path {
                    fill: var(--Text-default, #333);
                }
            }

            .wholesalers-tabs-nav {
                font-size: 18px;
                gap: 6px;
            }

            .wholesalers .title-section__line {
                display: none;
            }

            .wholesalers-tabs__header {
                display: none;
            }

            .wholesalers-tabs__text {
                display: none;
                font-size: 24px;
                line-height: 32px;
                letter-spacing: -0.24px;

                br {
                    display: none;
                }
            }

            .wholesalers-tabs__body {
                display: flex;
                flex-direction: column;
            }

            .wholesalers-tabs__item {
                display: flex;
                flex-direction: column;
                background: transparent;
                padding: 24px 0;
            }

            .wholesalers-tabs__item:not(:last-of-type) {
                border-bottom: 1px solid #E4E4E4;
            }

            .wholesalers-tabs__image {
                display: none;
                max-width: 100%;
            }

            .wholesalers-tabs__image_desktop {
                display: none;
            }

            .wholesalers-tabs__content {
                display: none;
            }

            .wholesalers__testimonial {
                display: none;
            }

            .wholesalers-tabs__item.--active .wholesalers-tabs__content {
                display: block;
            }

            .wholesalers-tabs__item.--active .wholesalers-tabs__text {
                display: block;
                margin-bottom: 20px;
            }

            .wholesalers-tabs__item.--active .wholesalers-tabs__image_mobile {
                display: block;
            }

            /*.wholesalers-tabs__item.--active .wholesalers-tabs__title {*/
            /*    font-weight: 700;*/
            /*}*/
        }

        .visibility {
            padding-top: 56px;
            padding-bottom: 56px;

            .visibility__wrapper {
                grid-template-columns: 1fr;
                gap: 48px;
            }

            .visibility__content {
                gap: 16px;
            }

            .visibility__metrics-caption {
                margin-bottom: 24px;
            }

            .visibility__description {
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;

                p:not(:last-child) {
                    margin-bottom: 26px;
                }
            }

            .visibility__title {
                font-size: 32px;
                line-height: 36px;
                letter-spacing: -0.5px;
            }

            .visibility__stats-grid {
                height: auto;
                grid-template-rows: repeat(2,fit-content(100%));
                grid-template-columns: repeat(2,minmax(0,1fr));
            }

            .visibility__stat-card {
                padding: 20px;
                align-items: flex-start;
            }

            .visibility__stat-value,
            .visibility__stat-value span{
                font-size: 32px;
                font-weight: 400;
                line-height: 40px;
                letter-spacing: -3.2px;
            }

            .visibility__stat-description {
                font-size: 14px;
                line-height: 18px;
                text-align: left;
            }

            .visibility__metrics {
                margin-bottom: unset;
            }

        }

        .success-quotes {
            .splide__track {
                margin-top: 24px;
            }
        }


        .transformation-block {
            .transformation-block__title {
            }

            .transformation-block__grid {
            }

            .transformation-block__side {
            }

            .transformation-block__side--old {
            }

            .transformation-block__header {
            }

            .transformation-block__label {
            }

            .transformation-block__side-title {
                font-size: 22px;
                line-height: 30px;
                letter-spacing: -0.5px;
            }

            .transformation-block__side--new {
            }
        }

        /*.transformation-block {*/
        /*    .transformation-block__grid {*/
        /*        flex-direction: column;*/
        /*        gap: 32px;*/
        /*    }*/

        /*    .transformation-block__title {*/
        /*        font-size: 32px;*/
        /*        line-height: 36px;*/
        /*        letter-spacing: -0.5px;*/
        /*        text-align: left;*/
        /*        margin-bottom: 32px;*/

        /*        br {*/
        /*            display: none;*/
        /*        }*/
        /*    }*/
        /*}*/

        .integrations-workflow {
            padding-top: 56px;
            padding-bottom: 56px;

            .integrations-workflow__title {
                font-size: 32px;
                line-height: 36px;
                letter-spacing: -0.5px;

                span {
                    font-size: 32px;
                    line-height: 36px;
                    letter-spacing: -0.5px;
                }
            }

            .integrations-workflow__cards-list {
                gap: 8px;
            }

            .integrations-workflow__cards-item {
                padding: 12px;
                gap: 8px;
                border-radius: 12px;

                p {
                    font-size: 16px;
                    line-height: 24px;
                }
            }

            .integrations-workflow__icon {

                svg{
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
}