.features {
    #header {
        #title-container {
            @media screen and (min-width: 1200px) {
                min-height: 748px;
                justify-content: start;

                background: url("../images/globe-bg-XeIIHXj.avif") no-repeat bottom left, url("../images/features-head-bg-lg-bClkXVB.avif") no-repeat bottom right;
            }

            .container {

                h1,
                h2,
                p {
                    margin: 0 auto;

                    @media screen and (min-width: 1200px) {
                        text-align: start;
                        margin: 0;
                    }
                }

                p {
                    font-size: 14px;
                    line-height: 21px;
                    margin: 0 auto;

                    @media screen and (min-width: 1200px) {
                        margin: 0;
                        max-width: 530px;
                        font-size: 16px;
                        line-height: normal;
                    }
                }

                .badge {
                    width: 100%;
                    box-sizing: border-box;

                    @media screen and (min-width: 1200px) {
                        width: auto;
                    }
                }

            }
        }
    }

    .all-features {
        .box {
            border: 1px solid #F3F3F3;

            @media screen and (min-width: 1200px) {
                padding: 90px;

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

            h2 {
                font-weight: 700;
            }

            h2,
            p {
                text-align: start;
            }

            &:nth-child(2n + 1) {

                h2,
                p {
                    max-width: 700px;
                }
            }


            .badge {
                background: white;
                font-weight: 400 !important;
                box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
            }

            &.purple-gradient {
                background: linear-gradient(180deg, #FBEFFF 0%, #fff 100%);

                @media screen and (min-width: 1200px) {
                    background: url("../images/ad-blocker-bg-giZg95S.avif") no-repeat bottom right, linear-gradient(180deg, #FBEFFF 0%, #fff 100%);
                }

                .badge {
                    color: #6113FA;
                }
            }

            &.blue-gradient {
                padding: 24px;
                background: linear-gradient(0deg, #e6effd 0%, #fff 100%);

                @media screen and (min-width: 1200px) {
                    padding: 90px 90px 90px 710px;
                    background: url("../images/no-log-shield-bg-0CQgvts.avif") no-repeat 146px center, linear-gradient(0deg, #e6effd 0%, #fff 100%);
                }

                .badge {
                    color: #133AFA;
                }
            }


            &.green-gradient {
                background: linear-gradient(180deg, #ecf6f3 0%, #fff 100%);

                h2,
                p {
                    max-width: 770px;
                }

                @media screen and (min-width: 1200px) {
                    background: url("../images/server-bg-z-Khb9I.avif") no-repeat right bottom, linear-gradient(180deg, #ecf6f3 0%, #fff 100%);
                }

                .badge {
                    color: #0E8E66;
                }
            }

            &.pink-gradient {
                background: linear-gradient(0deg, #fff1f1 0%, #fff 100%);

                h2,
                p {
                    max-width: 770px;
                }

                @media screen and (min-width: 1200px) {
                    padding: 90px 90px 90px 710px;
                    background: url("../images/no-access-block-bg-SJc0Fpv.avif") no-repeat left bottom, linear-gradient(0deg, #fff1f1 0%, #fff 100%);
                }

                .badge {
                    color: #FA1313;
                }
            }

            &.yellow-gradient {
                background: linear-gradient(180deg, #FFF9ED 0%, #fff 100%);

                h2,
                p {
                    max-width: 770px;
                }

                @media screen and (min-width: 1200px) {
                    background: url("../images/encryption-level-bg-AbYW0ju.avif") no-repeat right center, linear-gradient(180deg, #FFF9ED 0%, #fff 100%);
                }

                .badge {
                    color: #E59A02;
                }
            }

            &.cyan-gradient {
                background: linear-gradient(0deg, #E6FDFF 0%, #fff 100%);

                h2,
                p {
                    max-width: 770px;
                }

                @media screen and (min-width: 1200px) {
                    padding: 90px 90px 90px 710px;
                    background: url("../images/ad-free-bg-mCRB7F3.avif") no-repeat left bottom, linear-gradient(0deg, #E6FDFF 0%, #fff 100%);
                }

                .badge {
                    color: #00B295;
                }
            }

            &.orange-gradient {
                background: linear-gradient(180deg, #FFF4ED 0%, #fff 100%);

                h2,
                p {
                    max-width: 640px;
                }

                @media screen and (min-width: 1200px) {
                    background: url("../images/stay-secure-bg-VHSqRGE.avif") no-repeat right bottom, linear-gradient(180deg, #FFF4ED 0%, #fff 100%);
                }

                .badge {
                    color: #FA8713;
                }
            }

            &.blue2-gradient {
                background: linear-gradient(180deg, #E6FDFF 0%, #fff 100%);

                h2,
                p {
                    max-width: 640px;
                }

                @media screen and (min-width: 1200px) {
                    background: url("../images/hide-vpn-bg-OXTmpl0.avif") no-repeat right 100px bottom, linear-gradient(180deg, #E6FDFF 0%, #fff 100%);
                }

                .badge {
                    color: #0091B2;
                }
            }

            &.purple2-gradient {
                background: linear-gradient(0deg, #FFE6FA 0%, #fff 100%);

                h2,
                p {
                    max-width: 640px;
                }

                @media screen and (min-width: 1200px) {
                    padding: 90px 90px 90px 670px;
                    background: url("../images/safe-vpn-bg-lg-MxpYM4G.avif") no-repeat left bottom, linear-gradient(0deg, #FFE6FA 0%, #fff 100%);
                }

                .badge {
                    color: #FF4AD1;
                }
            }

            &.green2-gradient {
                background: linear-gradient(180deg, #E6FFEB 0%, #fff 100%);

                h2,
                p {
                    max-width: 640px;
                }

                @media screen and (min-width: 1200px) {
                    padding: 176px 90px;
                    background: url("../images/flexible-vpn-payment-bg-9md-6l8.avif") no-repeat right bottom, linear-gradient(180deg, #E6FFEB 0%, #fff 100%);
                }

                .badge {
                    color: #10931F;
                }
            }
        }
    }

    #no-limit {
        p {
            color: #C3B8D8;
            max-width: 1000px;
        }
    }
}