:root {
    --Text-Primary: #282828;
    --Text-default: #333333;
    --icon-green-main: #006746;
    --General-Green-Main: #409A65;
    --General-White: #ffffff;
    --Text-Secondary: #777777;
}

.page-solutions-main {
    background-color: #FFF;

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

    h2 {
        color: var(--Text-Primary);
        font-size: 44px;
        font-weight: 700;
        line-height: 48px;
        letter-spacing: -0.5px;
    }

    h3 {
        color: var(--Text-Primary, #282828);
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
    }

    p {
        color: var(--Text-default, #333);
        font-size: 18px;
        font-weight: 400;
        line-height: 28px;
        letter-spacing: 0.18px;

        @media (max-width: 991px) {
            font-size: 16px;
            line-height: 24px;
        }
    }

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

        .hero__wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 32px;
            flex-wrap: wrap;
        }

        .hero__content {
            display: flex;
            flex-direction: column;
            gap: 32px;
            flex: 1 0 335px;
            max-width: 557px;
            text-align: left;
        }

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

            .soc-logo {
                display: flex;
                padding: 6px;
                align-items: center;
                gap: 8px;
                border-radius: 8px;
                background: #333;
            }

            .feedback__social {
                position: relative;
                display: flex;
                padding-right: 12px;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 20px;
                color: #282828;

                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 2px;
                    right: 0px;
                    height: 16px;
                    border-left: 1px solid #00000033;
                }
            }

            span {
                color: #777;
                font-size: 14px;
                font-weight: 500;
                line-height: 20px;
            }
        }

        .hero__header {
        }

        .hero__title {
            margin-bottom: 20px;
            color: var(--Text-Primary, #282828);
            font-size: 56px;
            font-style: normal;
            font-weight: 700;
            line-height: 60px;
            letter-spacing: -0.5px;
        }

        .hero__demo {
            display: flex;
            gap: 16px;
            align-items: center;
        }

        .hero__demo-desc {
            color: var(--Text-Secondary, #777);
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
            letter-spacing: 0.14px;
        }

        .hero__picture {
            flex: 1 0 335px;
            max-width: 557px;
        }

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

            .hero__wrapper {
                justify-content: center;
            }

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

            .hero__text {
                letter-spacing: 0;
            }

            .hero__demo {
                flex-direction: column;

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


    .solutions-cards {
        .container {
        }

        .cards__wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 32px;
        }

        .solution-card {
            max-width: 372px;
            flex: 1 0 320px;
            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);

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

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

                        span {
                            text-decoration: underline;
                            text-decoration-thickness: 1px;
                            text-decoration-skip-ink: none;
                            text-underline-offset: 2px;

                        }

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

        .solution-card__logo {
            width: 56px;
            height: 56px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: #E6F5ED;
            margin-bottom: 32px;
        }

        .solution-card__title {
            margin-bottom: 8px;

            a {
                display: inline-flex;
                align-items: center;
                gap: 2px;
                color: inherit;
                font-size: inherit;
                font-weight: inherit;
                line-height: inherit;
            }
        }

        @media (max-width: 991px) {
            .cards__wrapper {
                gap: 20px;
            }

            .solution-card {
                padding: 24px;
            }

            .solution-card__logo {
                margin-bottom: 24px;
            }
        }
    }

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