#hero {
    .container {
        display:        flex;
        flex-direction: column;
        align-items:    center;
        padding-bottom: 100px;

        .hero {
            padding: 162px 236px 0;

            & p {
                max-width: 585px;
                margin:    0 auto;
            }
        }

        .opportunities {
            display:         flex;
            align-items:     center;
            justify-content: space-between;
            gap:             10px;
            padding:         20px 0 50px;

            & button {
                background: #FFFFFF;

                &:after {
                    border-radius: 36px;
                    border:        2px solid rgba(180, 174, 247, 0.10);
                }
            }
        }

        .pricing-cards {
            display:        flex;
            gap:            20px;

            .pricing-card {
                max-width:      413px;
                width:          100%;
                border-radius:  20px;
                background:     #FFF;
                box-shadow:     0 14px 44px 0 rgba(0, 0, 0, 0.06);

                .inner-card {
                    padding: 20px;
                }

                .type {
                    font-size:      20px;
                    font-style:     normal;
                    font-weight:    600;
                    line-height:    24px; /* 120% */
                    color:          #FF3D71;
                }

                .price {
                    padding:     10px 0 20px;
                    display:     flex;
                    gap:         10px;
                    align-items: flex-end;

                    & p {
                        font-size:       18px;
                        font-style:      normal;
                        font-weight:     500;
                        line-height:     31px; /* 172.222% */
                        color:           #8F9BB3;
                        text-decoration: line-through;
                    }

                    & strong {
                        font-size:      40px;
                        font-style:     normal;
                        font-weight:    600;
                        line-height:    46px; /* 115% */

                        & span {
                            font-size:   18px;
                            font-weight: 700;
                            line-height: 24px;
                        }
                    }
                }

                .details {
                    max-width:      350px;
                    font-size:      14px;
                    font-style:     normal;
                    line-height:    20px; /* 142.857% */
                    color:          #7D89B0;
                    padding-bottom: 30px;

                    & span {
                        padding:        0 6px;
                        border-radius:  11px;
                        background:     #7D89B0;
                        color:          #FFF;
                    }
                }

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

                &.pricing-best-deal {
                    border:             2px solid transparent;
                    background:         linear-gradient(white, white), linear-gradient(to right, #18ACFE, #FF4405, #FFF766, #7061EF, #66FFB2, #FFD89E) border-box;
                    background-clip:    content-box, border-box;
                }

                &:has(.best-deal) {
                    position:           relative;

                    .best-deal {
                        position:       absolute;
                        top:            -2px;
                        right:          -2px;
                        width:          max-content;
                        color:          #FFF;
                        border-radius:  0 20px;
                        background:     #FF3D71;
                        padding:        10px 20px;
                        z-index:        1;
                    }
                }
            }
        }
    }
}

#guarantee {
    padding-bottom: 100px;

    .guarantee-card {
        position:       relative;
        display:        flex;
        align-items:    center;
        gap:            20px;
        padding:        20px 10px;
        border-radius:  30px;
        background:     radial-gradient(317.38% 161.17% at -19.72% 107.89%, #FFF 0%, #FFD89E 97%);
        overflow:       hidden;

        .guarantee-info {
            display:        flex;
            flex-direction: column;
            gap:            10px;

            & h4 {
                font-size:      26px;
                font-style:     normal;
                font-weight:    600;
                line-height:    30px; /* 115.385% */
                color:          #2F1D49;
            }

            & p {
                max-width:      760px;
                font-size:      16px;
                font-style:     normal;
                font-weight:    400;
                line-height:    22px; /* 137.5% */
                color:          #2F1D49;
            }

            .sign {
                display:     flex;
                gap:         20px;
                align-items: center;

                & p {
                    font-size:   14px;
                    line-height: 20px; /* 142.857% */
                    color:       #000;
                }
            }
        }

        .logo {
            position:   absolute;
            right:      0;
            top:        0;
        }
    }
}

#brands {
    .container {
        padding-bottom: 100px;
        border-bottom:  1px solid #F1F0EF;

        & h3 {
            font-size:      26px;
            font-style:     normal;
            font-weight:    600;
            line-height:    30px; /* 115.385% */
            text-align:     center;
            color:          #2F1D49;
        }

        .brands {
            display:         flex;
            justify-content: center;
            align-items:     center;
            flex-wrap:       wrap;
            gap:             40px 124px;
            padding-top:     50px;

            & img {
                mix-blend-mode: multiply;
            }
        }
    }
}

#testimonials {
    .container {
        padding:       127px 0 100px;
        border-bottom: 1px solid #F1F0EF;

        .highlighted-heading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding-bottom: 20px;

            .highlighted-item {
                position: relative;
                display: inline-block;

                &:nth-child(2) {
                    bottom: 27px;
                }

                .title {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 4px;

                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);

                    & img {
                        filter: grayscale(100%);
                    }

                    & div {
                        font-size: 20px; /* todo 18px normaldi */
                        font-style: normal;
                        font-weight: 600;
                        line-height: 26px; /* 130% */
                        color: #344054;
                        text-align: center;
                    }
                }

                &:last-child {
                    .title {
                        & div {
                            width: 110px;
                        }
                    }
                }
            }
        }

        .card-wrapper {
            overflow-x: hidden;
            margin:   40px 0 0;

            .testimonial-cards {
                .testimonial-card {
                    max-width:      360px;
                    min-height:     270px;
                    height:         auto;
                    background:     #FFFFFF;
                    padding:        30px;
                    display:        flex;
                    flex-direction: column;
                    align-items:    center;
                    gap:            20px;
                    box-shadow:     0 14px 44px 0 rgba(0, 0, 0, 0.03);

                    .rate {
                        display: flex;
                        gap:     12px;

                        & svg {
                            width: 18px;

                            & path {
                                fill: #FAC515;
                            }
                        }
                    }

                    .content {
                        text-align: center;

                        .name {
                            font-size:      18px;
                            font-style:     normal;
                            font-weight:    600;
                            line-height:    24px; /* 133.333% */
                            text-transform: uppercase;
                            color:          #2F1D49;
                            padding-bottom: 4px;
                        }

                        .status {
                            font-size:      12px;
                            font-style:     normal;
                            font-weight:    400;
                            line-height:    18px; /* 150% */
                            color:          #2F1D49;
                            padding-bottom: 10px;
                        }

                        .feedback {
                            font-size:   14px;
                            font-style:  normal;
                            font-weight: 400;
                            line-height: 20px; /* 142.857% */
                            color:       #7D89B0;
                        }
                    }


                }
            }

            .nav-btns {
                display:            flex;
                align-items:        center;
                justify-content:    center;
                gap:                20px;
                padding-top:        30px;

                & svg {
                    width: 24px;
                }

                [aria-disabled="true"] {
                    cursor: default;

                    & svg {
                        & path {
                            stroke: #C4C9D7;
                        }
                    }
                }
            }
        }
    }
}

#informative {
    .container {
        padding:        100px 0;
        border-bottom:  1px solid #F1F0EF;

        .informative {
            display:         flex;
            justify-content: space-between;
            align-items:     baseline;

            .info-card {
                display:        flex;
                flex-direction: column;
                align-items:    center;
                gap:            20px;
                text-align:     center;

                & svg {
                    width: 54px;

                    & path {
                        fill: #12B76A;
                    }
                }

                &:nth-child(2) {
                    & svg {
                        width: 74px;
                    }
                }

                .card-desc {
                    max-width:      370px;
                    display:        flex;
                    flex-direction: column;
                    gap:            10px;
                    text-align:     center;

                    & h6 {
                        font-size:      20px;
                        font-style:     normal;
                        font-weight:    600;
                        line-height:    24px; /* 120% */
                        color:          #2F1D49;
                    }

                    & p {
                        font-size:      16px;
                        font-style:     normal;
                        font-weight:    400;
                        line-height:    22px; /* 137.5% */
                        color:          #7D89B0;
                    }
                }
            }
        }
    }
}

#faq {
    .container {
        padding-top: 100px;

        .section-title {
            padding-bottom: 20px;

            & a {
                color:           #FF3D71;
                text-decoration: none;
            }
        }
    }
}

#saleBanner {
    padding: 30px 0 50px;

    .sale-banner {
        background: #FDE272;
        padding:    40px 60px;
    }
}

@media screen and (max-width: 1280px) {
    #hero {
        .container {
            .hero {
                padding: 162px 0 0;
            }

            .opportunities {
                justify-content: center;
                flex-wrap:       wrap;
                padding:         20px 0 30px;
            }

            .pricing-cards {
                justify-content: center;
                flex-wrap:       wrap;
            }
        }
    }

    #guarantee {
        .guarantee-card {
            padding:  20px 20px 20px 10px;
        }
    }
}

@media screen and (max-width: 1024px) {
    #hero {
        .container {
            .hero {
                padding: 130px 0 0;
            }

            .pricing-cards {
                justify-content: center;
                flex-direction:  column;
                gap:             10px;

                .pricing-card {
                    order: 2;

                    &:has(.best-deal) {
                        order: 1;
                    }
                }
            }
        }
    }

    #guarantee {
        padding-bottom: 70px;

        .guarantee-card {
            .guarantee-info {
                & h4 {
                    font-size:  24px;
                }

                & p {
                    max-width: 600px;
                }

                .sign {
                    & p {
                        font-size:   12px;
                        line-height: 18px;
                    }
                }
            }

            .logo {
                display: none;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    #guarantee {
        .guarantee-card {
            flex-direction: column;
            padding:        20px;

            .guarantee-info {
                text-align: center;

                .sign {
                    & p {
                        font-size:   14px;
                        line-height: 20px;
                    }
                }
            }
        }
    }

    #testimonials {
        .container {
            padding: 40px 0;

            .highlighted-heading {
                gap:            10px;
                padding-bottom: 10px;

                .highlighted-item {
                    &:nth-child(2) {
                        bottom: 15px;
                    }

                    & img {
                        width:  150px;
                        height: 70px;
                    }

                    .title {
                        & svg {
                            width: 18px;
                        }

                        & img {
                            width:  18px;
                            height: 19px;
                        }

                        & div {
                            font-size:   13px;
                            line-height: 21px; /* 130% */
                            max-width:   75px;
                        }
                    }
                }
            }
        }
    }

    #informative {
        .container {
            padding: 50px 0;

            .informative {
                flex-direction: column;
                align-items:    center;
                gap:            50px;

                .info-card {
                    order: 2;

                    &:nth-child(2) {
                        order: 1;

                        .card-desc {
                            & h6 {
                                font-size:      26px;
                                line-height:    30px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 600px) {
    #guarantee {
        .guarantee-card {
            .guarantee-info {
                & h4 {
                    font-size:   22px;
                    line-height: 28px;
                }

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

                .sign {
                    flex-direction: column;
                }
            }
        }
    }
}

@media screen and (max-width: 480px) {
    #hero {
        .container {
            gap:            30px;
            padding-bottom: 40px;

            .hero {
                padding: 93px 0 0;

                & p {
                    max-width: 100%;
                }
            }

            .opportunities {
                padding: 0;
            }

            .pricing-cards {
                .pricing-card {
                    .price {
                        & strong {
                            font-size: 38px;
                        }

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

                    .details {
                        max-width:      100%;
                        font-size:      12px;
                        line-height:    18px; /* 142.857% */
                        padding-bottom: 20px;

                        & span {
                            font-size:      14px;
                            line-height:    20px;
                            padding:        0 6px;
                            border-radius:  13px;
                        }
                    }
                }
            }
        }
    }

    #guarantee {
        .guarantee-card {
            .logo {
                display: block;
                top:     auto;
                bottom:  -5px;
            }
        }
    }

    #brands {
        .container {
            padding-bottom: 50px;

            & h3 {
                font-size: 24px;
            }

            .brands {
                justify-content: space-evenly;
                gap:             40px 54px;
            }
        }
    }

    #testimonials {
        .container {
            padding:       50px 0;

            .highlighted-heading {
                gap:             10px;
                padding-bottom:  10px;

                .highlighted-item {
                    &:nth-child(2) {
                        bottom: 15px;
                    }

                    & img {
                        width:  102px;
                        height: 50px;
                    }

                    .title {
                        & svg {
                            width: 16px;
                        }

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

                        & div {
                            font-size:   11px;
                            line-height: 14px; /* 130% */
                            max-width:   60px;
                        }
                    }
                }
            }

            .section-title {
                padding-bottom: 32px;
            }

            .card-wrapper {
                .testimonial-cards {
                    .testimonial-card {
                        max-width: 100%;
                        width: 100%;
                    }
                }
            }
        }
    }

    #faq {
        .container {
            padding-top: 50px;

            .section-title {
                padding-bottom: 30px;
            }
        }
    }

    #saleBanner {
        padding: 0 0 50px;

        .sale-banner {
            padding: 0 0 20px;
        }
    }
}