.compare-page {
    h1, h3, p {
        margin: 0;
    }

    padding: 0;
    color: rgba(40, 40, 40, 1);
    background-color: rgba(255, 255, 255, 1);

    .hero {
        background: linear-gradient(180deg, #FFF2EB 0%, #FFFFFF 100%);
    }

    .hero__wrapper {
        display: flex;
        flex-direction: unset;
        align-items: unset;
        gap: 64px;

        > * {
            flex: 1;
        }
    }

    .hero__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        text-align: left;
    }

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

    .hero__header{
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 400px;
    }

    .hero__subtitle {
        font-weight: 500;
        font-size: 18px;
        line-height: 26px;
        color: rgba(51, 51, 51, 1);
    }

    .hero__title {
        font-size: 56px;
        font-weight: 700;
        line-height: 60px;

        span {
            display: inline;
            color: rgba(64, 154, 101, 1);
        }
    }

    .hero__text {
        margin: 0;
        line-height: 28px;
        font-size: 18px;
    }

    .hero__trial {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;

        p {
            max-width: 130px;
            font-size: 14px;
            font-weight: 500;
            line-height: 18px;
            color: rgba(51, 51, 51, 1);
        }
    }

    .hero__image {
        margin-top: 0;
    }

    .business__socials-text{
        color: rgba(119, 119, 119, 1);

        span {
            color: rgba(40, 40, 40, 1);
        }
    }

    .challenges__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .challenges__header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        max-width: 712px;
        text-align: center;
    }

    .challenges__label {
        padding: 8px 16px;
        border-radius: 40px;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.56px;
        color: rgba(232, 50, 0, 1);
        background-color: rgba(255, 245, 239, 1);
        line-height: 1;
    }

    .challenges__title {
        margin: 0;
        font-weight: 700;
        font-size: 48px;
        line-height: 52px;
        color: #282828;
    }

    .challenges__text {
        max-width: 512px;
        font-weight: 400;
        font-size: 18px;
        line-height: 26px;
        text-align: center;
    }

    .challenges__cards {
        display: flex;
        justify-content: space-between;
        gap: 32px;
    }

    .challenges__card {
        max-width: calc((100% / 3) - 16px);
        min-width: 335px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 32px 40px;
        background: linear-gradient(180deg, #FFF9F5 0%, #FFF4ED 100%);
        border-radius: 32px;
        color: #282828;
    }

    .challenges__card-img {
        margin-bottom: 32px;
        border-radius: 50%;
        box-shadow: 0px 12px 24px -16px rgba(255, 87, 26, 0.4);
        width: 80px;
        height: 80px;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
    }

    .challenges__card-title {
        max-width: 280px;
        font-weight: 700;
        font-size: 24px;
        line-height: 135%;
        margin: 0;
        margin-bottom: 4px;
        color: inherit;
    }

    .challenges__card-text {
        margin: 0;
        line-height: 1.44;
    }

    .future__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 80px;
    }

    .future__header {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 778px;
        gap: 16px;
        text-align: center;
    }

    .future__label {
        display: inline-block;
        height: 28px;
        line-height: 28px;
        padding: 0 16px;
        border-radius: 40px;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        opacity: 1;
        background-color: rgba(237, 252, 247, 1);
        color: rgba(0, 103, 70, 1);
        letter-spacing: 0.56px;
    }

    .future__title {
        font-weight: 700;
        font-size: 48px;
        line-height: 52px;
        margin: 0;
        color: #282828;
    }

    .future__cards {
        display: flex;
        flex-direction: column;
        gap: 80px;
    }

    .future__card {
        display: flex;
        align-items: center;
        gap: 80px;
    }

    .future__card:nth-child(even) {
        flex-direction: row-reverse;
    }

    .future__content {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 16px;
        text-align: left;
    }

    .future__sub-title {
        font-weight: 700;
        font-size: 48px;
        line-height: 52px;
        margin: 0;
        color: #282828;
        text-align: left;

        span {
            color:rgba(64, 154, 101, 1);
        }
    }

    .future__text {
        max-width: 498px;
        line-height: 28px;
        font-size: 18px;
    }

    .future__stats {
        display: flex;
        margin-top: 16px;
        padding-top: 32px;
        gap: 48px;
        border-top: 1px solid rgba(235, 235, 235, 1);
    }

    .future__stat-item {
        text-align: left;
    }

    .future__stat-num {
        font-weight: 600;
        font-size: 32px;
        line-height: 40px;
    }

    .future__stat-desc {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: rgba(119, 119, 119, 1);
    }

    .future__img {
        min-width: 335px;
        max-width: 600px;
        width: 100%;
        border-radius: 24px;
    }

    /* Comparison */
    .comparison__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 80px;
    }

    .comparison__header {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 778px;
        gap: 16px;
        text-align: center;
    }

    .comparison__label {
        border-radius: 40px;
        padding: 7px 16px;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        opacity: 1;
        background-color: rgba(237, 252, 247, 1);
        color: rgba(0, 103, 70, 1);
        line-height: normal;
        letter-spacing: 0.56px;
    }

    .comparison__title {
        max-width: 640px;
        font-weight: 700;
        font-size: 48px;
        line-height: 52px;
        margin: 0;
        color: #282828;
    }

    .comparison__text {
        font-weight: 400;
        font-size: 18px;
        line-height: 26px;
    }

    /*.comparison__button {*/
    /*    border-radius: 10px;*/
    /*    padding: 6px 12px;*/
    /*    font-weight: 600;*/
    /*    font-size: 14px;*/
    /*    line-height: 20px;*/
    /*    width: fit-content;*/
    /*    margin: 0 auto;*/
    /*}*/

    .content {
        display: flex;
        gap: 24px;
    }

    .table {
        width: 100%;
        font-weight: 500;
        font-size: 18px;
        line-height: 26px;
    }

    .table__column {
        width: 25%;
    }

    .table__column-head,
    .first-column__header {
        height: 102px;
        /*padding-top: 35px;*/
        text-align: left;
        padding: 50px 16px 24px 16px;
        background-color: #fff;
        border-bottom: 1px solid rgba(233, 233, 233, 1);

        position: sticky;
        top: 71px;
        z-index: 10;

        span {
            color: #000;
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: 28px;
        }
    }

    .table__logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex-wrap: wrap;

        img {
            width: 16px;
            height: 16px;
        }

        .table__logo-text {
            font-weight: 500;

            span {
                color: #333;
                font-size: 18px;
                font-weight: 700;
                line-height: 26px;
            }
        }
    }


    .table__logo:nth-child(3) {
        .table__logo-text {
            font-weight: 600;
            color: #333;
        }
    }

    .table__cell.first-column__header {
        height: 102px;
        padding: 50px 16px 24px 16px;
    }

    .table__cell.first-column__header:first-child {
        border-top: unset;
    }

    .table__cell.second_column__header:first-child,
    .table__cell.third_column__header:first-child {
        display: none;
    }

    .table__cell.second_column__header,
    .table__cell.third_column__header {
        /*border: unset;*/
        height: 102px;
    }

    .table__column--logo {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;

        span {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;

        }

        img {
            height: 16px;
            width: 16px;
        }
    }

    .table__cell {
        height: 64px;
        padding: 19px 16px;
        border-bottom: 1px solid rgba(233, 233, 233, 1);
        text-align: center;
        /*position: relative;*/
    }

    /*.table__cell:nth-child(1) {*/
    /*    border-top: 1px solid rgba(233, 233, 233, 1);*/
    /*}*/

    /*.table__cell:last-child{*/
    /*    border-bottom: 1px solid rgba(233, 233, 233, 1);*/
    /*}*/

    .table__cell-caption {
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        transition: .3s;
        border-radius: 8px;
        padding: 4px 8px;
        width: max-content;
        background: var(--caption-bg);
        color: var(--caption-color);
    }

    .table__cell-caption::after {
        content: "";
        left: 50%;
        transform: translateX(-50%) rotate(180deg);
        border-color: transparent transparent var(--caption-bg) transparent;
        position: absolute;
        bottom: -4px;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 4px 4px 4px;
    }

    .table__cell:hover .table__cell-caption {
        opacity: 1;
        pointer-events: all;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

    .table__cell:has([alt="check"]) .table__cell-caption {
        --caption-bg: #409A65;
        --caption-color: white;
    }

    .table__cell:has([alt="minus"]) .table__cell-caption {
        --caption-bg: #FFB53F;
        --caption-color:  black;
    }

    .table__cell:has([alt="cross"]) .table__cell-caption {
        --caption-bg: #EA4335;
        --caption-color: white;
    }

    .table__column:nth-child(1) {
        width: 50%;
        padding-top: 16px;

        .table__cell {
            text-align: left;
        }
    }

    .table__column:nth-child(2) {
        border-radius: 16px;
        padding: 16px;
        outline: 1px solid rgba(169, 212, 187, 1);
        box-shadow: 0px 0px 0px 6px rgba(207, 238, 220, 1);

        .table__column-head {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 16px 0;
            height: 102px;
        }
    }

    .table__column:nth-child(3) {
        padding-top: 16px;

        .table__column-head{
            padding-top: 16px;

            .table__logo-text {
                font-weight: 600;
            }
        }
    }


    .superiority {
        .container {
            max-width: 1440px;
        }

        .comparison__button {
            max-width: 155px;
            color: rgba(251, 251, 253, 1);
            background-color: rgba(64, 154, 101, 1);
        }

    }

    .superiority__wrapper {
        display: flex;
        align-items: center;
        padding: 16px;
        background-color: rgba(18, 30, 23, 1);
        border-radius: 32px;
        background-image: url("/wp-content/themes/simplydepo/images/compare/blur-round.svg");
        background-repeat: no-repeat;
        background-position: bottom;
    }

    .superiority__img {
        max-width: 560px;
        flex-shrink: 0;

        img {
            border-radius: 24px;
        }
    }

    .superiority__content {
        padding: 56px;
        padding-right: 32px;
        color: rgba(251, 251, 253, 1);
    }

    .superiority__header {
        margin-bottom: 40px;
    }

    .superiority__title {
        max-width: 650px;
        font-weight: 700;
        font-size: 48px;
        line-height: 52px;
        margin: 0;
        color: rgba(251, 251, 253, 1);
    }

    .superiority__list {
        display: flex;
        flex-wrap: wrap;
        gap: 48px;
        margin-bottom: 40px;
    }

    .superiority__item {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: calc((100% / 2) - 24px);
    }

    .superiority__item-logo {
        margin-bottom: 20px;
    }

    .superiority__item-title {
        font-weight: 600;
        font-size: 24px;
        line-height: 135%;
        color: rgba(251, 251, 253, 1);
        margin: 0;
        margin-bottom: 4px;
    }

    .superiority__item-text {
        font-size: 16px;
        line-height: 150%;
        color: rgba(200, 200, 200, 1);
    }

    .migration__wrapper {
        display: flex;
        gap: 80px;
        justify-content: space-between;
        align-items: center;

        img {
            max-width: 600px;
        }
    }

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

    .migration__header {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 16px;
    }

    .migration__label {
        padding: 8px 16px;
        border-radius: 40px;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        color: rgba(0, 103, 70, 1);
        background-color: rgba(237, 252, 247, 1);
        letter-spacing: 0.56px;
    }

    .migration__title {
        font-weight: 700;
        font-size: 48px;
        line-height: 52px;
        margin: 0;
        max-width: 400px;
        color: #282828;
    }

    .migration__list {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .migration__item {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .migration__migration__item-text {
        font-weight: 500;
        font-size: 18px;
        margin-top: 2px;
    }

    .trial__wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: end;
        min-height: 560px;
        padding: 40px;
        border-radius: 24px;
        background-color: rgba(18, 30, 23, 1);
        background-image: url("/wp-content/themes/simplydepo/images/compare/blur-round.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .trial__bg {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 24px;
        overflow: clip;
    }

    .trial__bg::before {
        content: "";
        background: linear-gradient(180deg, rgba(13, 24, 17, 0) 0%, rgba(13, 24, 17, 0.9) 100%);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .trial__bg img {
        height: 100%;
    }

    .trial__header {
        max-width: 600px;
        color: rgba(255, 255, 255, 1);
        z-index: 1;
    }

    .trial__title {
        font-weight: 700;
        font-size: 56px;
        line-height: 60px;
        color: rgba(255, 255, 255, 1);
        max-width: 400px;
        margin: 0;
        margin-bottom: 16px;
        color: #282828;
    }

    .trial__text {
        line-height: 150%;
        font-size: 18px;
        margin-bottom: 32px;
        font-weight: 600;
    }

    .faq {
        margin: unset;
    }

    .disclaimer {
        padding-top: unset;
        padding-bottom: 80px;
        .container {
        }

        .disclaimer__wrapper {
            max-width: 800px;
            width: 100%;
            margin: 0 auto;
        }

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

    @media (max-width: 1220px) {
        .table__column:nth-child(1),
        .table__column:nth-child(2),
        .table__column:nth-child(3) {
            .first-column__header,
            .table__column-head {
                top: 54px;
            }
        }
    }

    @media (max-width: 1199px) {
        .hero__wrapper {
            gap: 32px;
        }

        .challenges__cards {
            flex-wrap: wrap;
            justify-content: center;
        }

        .challenges__cards {
            gap: 16px;
        }

        .future__card {
            gap: 24px;
        }

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

        .migration__wrapper {
            gap: 24px;
        }
    }

    @media (max-width: 991px)  {
        .hero__wrapper {
            flex-direction: column;
            align-items: center;
        }

        .future__card {
            flex-direction: column-reverse;
        }
        .future__card:nth-child(even) {
            flex-direction: column-reverse;
        }

        .migration__wrapper {
            flex-direction: column-reverse;
            align-items: start;
        }
    }

    @media (max-width: 767px) {
        .challenges,
        .future,
        .comparison,
        .migration{
            padding-top: 48px;
        }

        .hero__content {
            align-items: center;
            gap: unset;
        }

        .hero__intro {
            margin-bottom: 32px;
        }

        .hero__trial {
            margin-bottom: 20px;
        }

        .hero__header {
            max-width: unset;
        }

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

        .hero__title {
            font-size: 32px;
            line-height: 120%;
        }

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

        .hero__trial {
            flex-direction: column;
            width: 100%;

            .button {
                width: 100%;
            }

            p {
                max-width: unset;
            }
        }

        .hero__social {
           width: 100%;
           display: flex;
            justify-content: center;
        }

        .challenges__title {
            font-size: 28px;
            line-height: 36px;
        }

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

            br {
                display: none;
            }
        }

        .challenges__card {
            padding: 24px;
            max-width: 100%;
        }

        .challenges__card-img {
            width: 64px;
            height: 64px;
        }

        .challenges__card-title {
            font-weight: 600;
            font-size: 20px;
            line-height: 28px;
        }

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

        .future__wrapper {
            gap: 48px;
        }

        .future__cards {
            gap: 32px;
        }

        .future__card {
            padding-bottom: 32px;
            border-bottom: 1px solid rgba(230, 230, 230, 1);
        }

        .future__title {
            font-size: 28px;
            line-height: 36px;
        }

        .future__sub-title {
            font-weight: 700;
            font-size: 24px;
            line-height: 32px;
        }

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

        .future__stat-num {
            font-weight: 600;
            font-size: 20px;
            line-height: 28px;
        }

        .future__stat-desc {
            font-weight: 500;
            font-size: 14px;
            line-height: 18px;
        }

        .comparison__wrapper {
            gap: 48px;
        }

        .comparison__title {
            font-size: 28px;
            line-height: 36px;
        }

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

        .content {
            gap: 16px;
        }

        .table {
            .comparison__button {
                display: none;
            }
        }

        .table__column {
            width: 30%;
        }


        .table__logo {
            flex-direction: column;
            font-size: 14px;
            line-height: 14px;

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

            .table__logo-text {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-weight: 600;

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


        .table__column:nth-child(1) {
            width: 40%;

            .table__column-head {
                height: 88px;
                /*top: 57px;*/
            }

            .table__cell {
                align-items: flex-start;
            }

            .first-column__header {
                height: 88px;
                padding: 12px 8px 12px;
                /*top: 57px;*/

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

        .table__column:nth-child(2) {
            width: 30%;
            padding: 16px 8px;
            box-shadow: 0px 0px 0px 3px #CFEEDC;

            .table__column-head {
                gap: unset;
                height: 88px;
                padding-top: 12px;
                justify-content: center;
                /*top: 57px;*/
            }

            .table__cell.second_column__header {
                height: 88px;
            }

            .table__logo img {
                display: none;
            }

            .button {
                display: none;
            }
        }

        .table__column:nth-child(3) {
            padding: 16px 8px;

            .table__column-head {
                height: 88px;
                padding: 12px 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                /*top: 57px;*/
            }

            .table__cell.third_column__header {
                height: 88px;
                top: 50px;
            }

            .table__logo img {
                display: none;
            }

        }

        /*.table__column-head {*/
        /*    height: 88px;*/
        /*    padding-top: 0;*/
        /*}*/

        .table__cell {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            padding: 12px 8px;
        }

        .superiority {
            .container {
                padding: 0 8px;
            }


            .comparison__button {
                max-width: unset;
            }
        }


        .superiority__wrapper {
            gap: 20px;
            border-radius: 24px;
            padding: 8px;
        }

        .superiority__img {
            /*width: 100%;*/
            img {
                border-radius: 16px;
            }
        }

        .superiority__content {
            display: flex;
            flex-direction: column;
            padding: 20px 8px 12px 8px;
            gap: 32px;

            .button {
                width: 100%;
            }
        }

        .superiority__header,
        .superiority__list {
            margin: unset;
        }

        .superiority__title {
            font-size: 28px;
            line-height: 32px;
            max-width: 300px;
        }

        .superiority__list {
            flex-direction: column;
            gap: 20px;
        }

        .superiority__item {
            flex-direction: row;
            width: 100%;
            gap: 12px;
        }

        .superiority__item-logo {
            max-width: 20px;
            margin-top: 2px;
        }

        .superiority__item-title {
            font-size: 18px;
            line-height: 26px;
        }

        .superiority__item-text {
            font-size: 16px;
            line-height: 150%;
        }

        .migration {
            .button {
                width: 100%;
            }
        }

        .migration__wrapper {
            img {
                max-width: 100%;
            }
        }

        .migration__content {
            width: 100%;
            gap: 24px;
        }

        .migration__title {
            font-size: 28px;
            line-height: 36px;
        }

        .migration__list {
            gap: 12px;
        }

        .migration__item img {
            width: 20px;
            height: 20px;
        }

        .feedback__header {
            margin-bottom: 32px;
        }

        .feedback__title {
            max-width: 240px;
            font-size: 28px;
            line-height: 36px;
        }

        .feedback__text {
            font-size: 18px;
            line-height: 28px;
        }

        .trial__wrapper {
            padding: 8px;
            min-height: auto;
        }

        .trial__bg {
            position: relative;
            top: unset;
            left: unset;
            height: 217px;
            width: 100%;
        }

        .trial__bg::before {
            display: none;
        }

        .trial__bg img {
            width: 100%;
            object-fit: cover;
            border-radius: 16px;
        }

        .trial__header {
            padding: 32px 24px;
            text-align: center;
            width: 100%;
            max-width: 100%;
        }

        .trial__title {
            font-size: 32px;
            line-height: 120%;
            max-width: 245px;
            margin: 0 auto;
            margin-bottom: 16px;
        }

        .trial__text {
            max-width: 260px;
            margin: 0 auto 24px;
        }


        .disclaimer {
            padding-bottom: 48px;
        }
    }
}