@import "fonts.css?v=903";
@import "colors.css?v=903";

@import "reset.css?v=903";
@import "button/button.css?v=903";
@import "header/header.css?v=903";
@import "footer/footer.css?v=903";
@import "accordion/accordion.css?v=903";
@import "pagination/pagination.css?v=903";
@import "pricing/thank-you.css?v=903";

html {
    scroll-padding-top: 100px;
    scroll-behavior:    smooth;
}

body {
    font-family: "Poppins", sans-serif;
    background:   url("../../img/bg-grid.svg") repeat-y center, #FEFDFC;

    &:has(.open-menu), &:has(.open-docs-list), &:has(.is-watch) {
        overflow: hidden;
    }

    .container {
        max-width: 1280px;
        margin:    0 auto;
    }

    & strong {
        font-weight: 600;
    }

    &:has(.discount-banner) {
        #hero {
            &:has(.faq-welcome) {
                padding: 0;
            }
        }

        .header-transparent {
            height: 157px;
        }
    }
}

.section-title {
    max-width:  865px;
    margin:     0 auto;
    text-align: center;

    & h1, h2, h3 {
        font-size:      26px;
        font-style:     normal;
        font-weight:    600;
        line-height:    30px; /* 115.385% */
        color:          #2F1D49;
        padding-bottom: 10px;
    }

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

.page-title {
    max-width:      890px;
    display:        flex;
    flex-direction: column;
    gap:            20px;
    text-align:     center;

    & h1 {
        font-size:      40px;
        font-style:     normal;
        font-weight:    600;
        line-height:    46px; /* 115% */
        color:          #2F1D49;
    }

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

.whole-content-link {
    position:       absolute;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
    text-indent:    -9999px;
    z-index:        2;
}

#saleBanner {
    .sale-banner {
        text-align: center;

        .banner-icon {
            padding-bottom: 10px;
        }

        .banner-content {
            max-width: 870px;
            margin:    0 auto;
            padding:   0 0 40px;

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

            .key-opportunities {
                display:         flex;
                align-items:     center;
                justify-content: center;
                gap:             10px;

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

                    & svg path {
                        stroke: #12B76A;
                    }
                }
            }
        }

        .banner-actions {
            display:        flex;
            flex-direction: column;
            align-items:    center;
            gap:            10px;

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

#chat {
    position:        fixed;
    bottom:          40px;
    right:           80px;

    width:           60px;
    height:          60px;
    border-radius:   30px;
    background:      #7061EF;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         100;

    & img {
        width: 40px;
    }
}

#try-buy-mobile {
    position:       fixed;
    bottom:         0;
    right:          0;
    width:          100%;
    height:         73px;
    background:     rgba(255, 255, 255, 0.94);
    box-shadow:     0 -6px 24px 0 rgba(0, 0, 0, 0.05);

    display:         none;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    z-index:         100;

    & button {
        width: 40%;
    }

    & a {
        width:      30%;
        text-align: center;
    }
}

.cookie-bar {
    position:   fixed;
    left:       0;
    bottom:     -75px;
    width:      100%;
    background: #FCFCFD;
    border-top: 1px solid #D0D5DD;
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
    padding:    12px 0;
    z-index:    1000;
    transition: all 250ms ease-in-out;

    &.show {
        visibility: visible;
        opacity:    1;
        bottom:     0;
    }

    .container {
        display:         flex;
        align-items:     center;
        justify-content: space-between;

        .cookie-text {
            display:     flex;
            align-items: center;

            & img {
                margin-right: 16px;
            }

            & p {
                font-size:   16px;
                font-style:  normal;
                font-weight: 400;
                line-height: 22px;
                color:       #2F1D49;
            }
        }

        .cookie-btns {
            display: flex;

            .btn {
                min-width: max-content;

                &:first-child {
                    min-width: 120px;
                }

                &:nth-child(2) {
                    margin: 0 8px 0;
                }
            }
        }
    }
}

.discount-banner {
    position:               relative;
    z-index:                3;
    padding:                120px 0 0;
    background-image:       url("../../img/banner.png");
    background-position:    bottom;
    background-size:        cover;
    background-repeat:      no-repeat;
    height:                 86px;

    .container {
        height:             86px;

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

            .discount-left {
                display:     flex;
                align-items: center;
                gap:         10px;

                & span {
                    display:        inline-flex;
                    align-items:    center;
                    border-radius:  10px;
                    background:     #FFE358;
                    padding:        0 10px;
                    height:         36px;

                    color:          #09133B;
                    font-size:      24px;
                    font-style:     normal;
                    font-weight:    700;
                    line-height:    24px; /* 99.875% */
                    letter-spacing: -1px;
                    text-transform: uppercase;
                }

                & p {
                    color:          #2F1D49;
                    font-size:      28px;
                    font-style:     normal;
                    font-weight:    700;
                    line-height:    32px;
                    letter-spacing: -1px;
                    text-transform: uppercase;
                }
            }

            .countdown {
                display:     flex;
                align-items: center;
                gap:         5px;

                .countdown-item {
                    border-radius:  10px;
                    background:     #2F1D49;
                    height:         36px;
                    padding:        0 10px;

                    display:        inline-flex;
                    align-items:    center;
                    gap:            5px;
                    color:          #FFF;
                    font-size:      16px;
                    font-style:     normal;
                    font-weight:    800;
                    line-height:    20px;
                    letter-spacing: -1px;
                    text-transform: uppercase;
                }

                .countdown-separator {
                    color:          #2F1D49;
                    font-size:      26px;
                    font-style:     normal;
                    font-weight:    800;
                    line-height:    26px; /* 100% */
                    letter-spacing: -1px;
                    text-transform: uppercase;
                }
            }

            .discount-right {
                display:        flex;
                align-items:    center;
                border-radius:  4px;
                background:     #F63D68;
                padding:        12px 24px;
                height:         20px;

                & a {
                    display:         flex;
                    align-items:     center;
                    gap:             10px;

                    color:           #FFF;
                    text-align:      center;
                    font-size:       14px;
                    font-style:      normal;
                    font-weight:     500;
                    line-height:     18px; /* 129.67% */
                    text-transform:  uppercase;
                    text-decoration: none;
                }
            }
        }
    }
}


@media screen and (min-width: 1681px) {
    body {
        .container {
            width: 1520px;
        }
    }

    .page-title {
        max-width: 100%;

        & h1 {
            max-width: 880px;
            margin:    0 auto;
        }
    }
}

@media screen and (max-width: 1280px) {
    body {
        .container {
            max-width: calc(100vw - 160px);
        }
    }

    .discount-banner {
        height:             110px;
        background-size:    cover;

        .container {
            height: 110px;

            .row {
                height: 110px;

                .discount-left {
                    flex-direction: column;

                    & p {
                        line-height: 40px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1200px) {
    .discount-banner {
        height:             186px;
        background-size:    cover;
        padding-bottom:     20px;

        .container {
            height: 186px;

            .row {
                height:         186px;
                flex-direction: column;
                gap:            10px;

                .discount-left {
                    flex-direction: row;

                    & p {
                        line-height: 82px;
                    }
                }

                .count-container {
                    width: 100%;

                    .countdown {
                        width:           100%;
                        justify-content: center;

                        .countdown-item {
                            flex:             1;
                            justify-content:  center;
                        }
                    }
                }

                .save-btn {
                    width: 100%;

                    .discount-right {
                        margin-top: 10px;

                        & a {
                            width:           100%;
                            display:         flex;
                            justify-content: center;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1024px) {
    body {
        .container {
            max-width: calc(100vw - 80px);
            margin:    0 auto;
        }
    }

    .section-title {
        max-width:  700px;

        & h1, h2, h3 {
            font-size:   24px;
            line-height: 30px;
        }

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

@media screen and (max-width: 768px) {
    body {
        &:has(.discount-banner) {
            .header-transparent {
                height: 73px;
            }
        }
    }

    .section-title {
        max-width: 600px;

        & h1, h2, h3 {
            font-size: 22px;
            line-height: 28px;
        }
    }

    .page-title {
        max-width:  600px;

        & h1 {
            font-size:   32px;
            line-height: 36px;
        }

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

    #saleBanner {
        .sale-banner {
            .banner-content {
                max-width: 650px;

                .key-opportunities {
                    flex-wrap: wrap;
                    gap:       10px;
                }
            }
        }
    }

    #chat {
        bottom:          40px;
        right:           40px;

        width:           56px;
        height:          56px;
        border-radius:   28px;

        & img {
            width: 34px;
        }
    }

    .cookie-bar {
        bottom: -150px;

        .container {
            flex-direction: column;
            max-width:      calc(100vw - 160px);

            .cookie-text {
                margin-bottom: 12px;

                & p {
                    font-size: 14px;
                }
            }

            .cookie-btns {
                width: 100%;

                & .btn {
                    &:last-child {
                        margin-left: auto;
                    }
                }
            }
        }
    }

    .discount-banner {
        padding: 100px 0 20px;
    }
}

@media screen and (max-width: 600px) {
    .discount-banner {
        height: 155px;

        .container {
            .row {
                height: 150px;

                .discount-left {
                    & span {
                        display: none;
                    }

                    & p {
                        line-height: 40px;
                    }
                }

                .countdown {
                    .countdown-item {
                        gap:  3px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 480px) {
    body {
        background: url("../../img/bg-grid-mobile.svg") repeat-y center, #FEFDFC;

        .container {
            max-width: calc(100vw - 40px);
        }
    }

    .section-title {
        max-width:  330px;

        & h1, h2, h3 {
            font-size:   18px;
            line-height: 24px;
        }

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

    .page-title {
        max-width: 100%;
        gap:       10px;

        & h1 {
            font-size:   22px;
            line-height: 28px;
        }

        & p {
            font-size:   12px;
            font-weight: 500;
            line-height: 18px;
        }
    }

    #saleBanner {
        .sale-banner {
            padding: 0 0 20px;

            .banner-icon {
                padding: 20px 20px 0 20px;

                & svg {
                    width:  54px;
                    height: 54px;
                }
            }

            .banner-content {
                max-width: 100%;

                & h4 {
                    font-size:  24px;
                    padding:    10px 20px 30px;
                }

                .key-opportunities {
                    flex-wrap:       wrap;
                    align-items:     center;
                    justify-content: center;
                }
            }
        }
    }

    #chat {
        bottom:         96px;
        right:          20px;

        width:          52px;
        height:         52px;
        border-radius:  26px;

        & img {
            width: 30px;
        }
    }

    #try-buy-mobile {
        display: flex;
    }

    .cookie-bar {
        .container {
            max-width: calc(100vw - 40px);
        }
    }

    .discount-banner {
        .container {
            .row {
                .countdown {
                    .countdown-item {
                        font-size:      14px;
                        line-height:    20px;
                        padding:        0 3px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 350px) {
    .discount-banner {
        .container {
            .row {
                .discount-left {
                    & p {
                        font-size:   24px;
                        line-height: 30px;
                    }
                }
            }
        }
    }
}