.row {
    margin: 0;
}

body {
    background: #000000;
    min-height: 100vh;
    margin: 0;
    padding: 0;

    .pricing-header-section {
        text-align: center;

        .main-title {
            font-family: Inter;
            font-weight: 500;
            font-style: Medium;
            font-size: 48px;
            line-height: 48px;
            letter-spacing: -6%;
            text-align: center;
            color: #ffffff;
        }

        .subtitle {
            font-family: 'IBM Plex Sans';
            font-weight: 500;
            font-style: Medium;
            font-size: 14px;
            line-height: 100%;
            letter-spacing: -2%;
            text-align: center;
            color: #FFC857;
            margin-bottom: 32px;
        }

        .toggle-container {
            display: inline-flex;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50px;
            padding: 4px;
            backdrop-filter: blur(10px);
            border: 1px solid #555555;
            height: 53px;
            margin-bottom: 15px;

            .toggle-button {
                width: 173;
                height: 37;
                opacity: 1;
                gap: 8px;
                border-radius: 32px;
                padding-top: 8px;
                padding-right: 12px;
                padding-bottom: 8px;
                padding-left: 12px;
                background: #000000;
                border: none;
                color: #ffffff;
                font-family: IBM Plex Sans;
                font-weight: 200;
                font-style: Regular;
                font-size: 16px;
                line-height: 100%;
                letter-spacing: -1%;
                text-align: center;

                .discount {
                    width: 39;
                    height: 20;
                    opacity: 1;
                    gap: 8px;
                    margin-left: 8px;
                    border-radius: 64px;
                    padding-top: 2px;
                    padding-right: 4px;
                    padding-bottom: 2px;
                    padding-left: 4px;
                    background: #F75891;
                    color: #ffffff;
                }
            }

            .toggle-button.active {
                border-radius: 32px;
                padding-top: 8px;
                padding-right: 12px;
                padding-bottom: 8px;
                padding-left: 12px;
                font-family: IBM Plex Sans;
                font-weight: 600;
                font-style: SemiBold;
                font-size: 16px;
                line-height: 100%;
                letter-spacing: -1%;
                text-align: center;
                color: #F75891;
                background: #ffffff;
            }
        }
    }

    .pricing-cards-section {
        .pricing-card {
            height: auto;
            border-radius: 12px;
            border: 2px solid transparent;
            background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),
                linear-gradient(90deg, #F75891 0%, #FF1C58 25%, #FFC857 49.52%, #00DDFF 76.44%, #0048B7 100%);
            background-origin: border-box;
            background-clip: padding-box, border-box;
            position: relative;
            z-index: 10;
            margin: 14px;

            .pricing-header {
                background-color: #FFFFFF;
                height: 200px;
                border-radius: 10px;

                .plan-name {
                    display: flex;
                    font-family: Inter;
                    font-weight: 700;
                    font-style: Bold;
                    font-size: 20px;
                    line-height: 100%;
                    letter-spacing: -1%;
                    text-align: left;
                    color: #313539;
                    justify-content: start;
                }

                .plan-desc {
                    display: flex;
                    font-family: IBM Plex Sans;
                    font-weight: 400;
                    font-style: Regular;
                    font-size: 12px;
                    letter-spacing: -1%;
                    text-align: left;
                    color: #313539;
                    justify-content: start;
                    margin-bottom: 0px;
                }

                .card-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    padding: 15px;
                    height: 100px;
                    /* background-color: #ffffff; */

                    .plan-info {
                        flex: 1;
                        flex-direction: column;
                        text-align: left;
                        align-items: center;
                        justify-content: start;
                    }

                    .price {
                        text-align: right;
                        margin-bottom: 0;

                        .amount {
                            font-family: Inter;
                            font-weight: 500;
                            font-style: Medium;
                            font-size: 24px;
                            line-height: 100%;
                            letter-spacing: -6%;
                            text-align: right;
                            color: #0B0C0D;
                            margin-bottom: 5px;
                        }

                        .period {
                            font-family: 'IBM Plex Sans';
                            font-weight: 400;
                            font-style: Regular;
                            font-size: 12px;
                            line-height: 100%;
                            letter-spacing: -1%;
                            text-align: right;
                            color: #0B0C0D;
                        }
                    }
                }

                .card-actions {
                    margin: 0px 20px;

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

                        .btn-primary {
                            background: #ff4d8d;
                            color: #ffffff;
                            border: none;
                            width: 160px;
                            min-height: 40px;
                            border-radius: 30px;
                            font-family: 'Inter', sans-serif;
                            font-size: 16px;
                            font-weight: 600;
                            cursor: pointer;
                            transition: all 0.3s ease;
                            width: 100%;
                            margin-bottom: 12px;
                        }

                        .btn-primary:hover {
                            background: #ff3d7d;
                            transform: translateY(-2px);
                            box-shadow: 0 8px 20px rgba(255, 77, 141, 0.4);
                        }

                        .action-info {
                            display: flex;
                            flex-direction: column;
                            gap: 4px;
                        }

                        .save-annualy {
                            font-family: IBM Plex Sans;
                            font-weight: 400;
                            font-style: Regular;
                            font-size: 12px;
                            line-height: 100%;
                            letter-spacing: -1%;
                            text-align: right;
                            color: #0B0C0D;
                        }
                    }

                    .trial-text {
                        font-family: IBM Plex Sans;
                        font-weight: 700;
                        font-style: Bold;
                        font-size: 14px;
                        line-height: 100%;
                        letter-spacing: -2%;
                        color: #313539;
                        margin: 0;
                        margin-left: 25px;
                        text-align: left;
                    }
                }
            }

            .card-body {
                border-radius: 10px;
                width: 100%;

                .features-list {
                    list-style: none;
                    padding: 25px 10px;
                    margin: 0;

                    li {
                        display: flex;
                        align-items: flex-start;
                        margin-bottom: 12px;
                        font-family: 'Inter', sans-serif;
                        font-size: 14px;
                        color: #C3C3C3;
                        line-height: 1.4;
                        text-align: left;

                        i {
                            color: #a0a0a0;
                            margin-right: 12px;
                            margin-top: 2px;
                            font-size: 16px;
                            flex-shrink: 0;
                        }
                    }
                }
            }
        }
    }

    .enterprise-section {

        .enterprise-card {
            width: 100%;
            height: 220px;
            background: #ffffff;
            border: 2px solid transparent;
            border-radius: 16px;
            backdrop-filter: blur(20px);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),
                linear-gradient(90deg, #F75891 0%, #FF1C58 25%, #FFC857 49.52%, #00DDFF 76.44%, #0048B7 100%);
            background-origin: border-box;
            background-clip: padding-box, border-box;
            margin-right: 20px;

            .enterprise-title {
                height: 220px;
                border-radius: 12px;
                border-width: 2px;
                background: #FFFFFF;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .plan-name {
                    font-family: Inter;
                    font-weight: 700;
                    font-style: Bold;
                    font-size: 20px;
                    line-height: 100%;
                    letter-spacing: -1%;
                    color: #313539;
                }

                .plan-desc {
                    font-family: IBM Plex Sans;
                    font-weight: 400;
                    width: 165px;
                    font-size: 16px;
                    line-height: 100%;
                    letter-spacing: -1%;
                    color: #525b66;
                }
            }

            .enterprise-content {
                border-radius: 12px;
                height: 220px;
                padding: 0 50px;
                background: #000000;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .features-list {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    gap: 15px;
                }

                .feature-row {
                    display: flex;
                    align-items: flex-start;
                    flex-wrap: wrap;
                    gap: 15px;

                    .feature-item {
                        display: flex;
                        align-items: flex-start;
                        padding: 4px 0;

                        i {
                            color: #a0a0a0;
                            margin-right: 12px;
                            margin-top: 2px;
                            font-size: 16px;
                            flex-shrink: 0;
                        }

                        span {
                            font-family: IBM Plex Sans;
                            font-weight: 400;
                            font-style: Regular;
                            font-size: 14px;
                            line-height: 100%;
                            letter-spacing: -1%;
                            color: #C3C3C3;
                        }
                    }
                }

                .sales-talk-btn {
                    width: 160px;
                    height: 40px;
                    border-radius: 32px;
                    padding: 8px;
                    background: #F75891;
                    font-family: IBM Plex Sans;
                    font-weight: 700;
                    font-style: Bold;
                    font-size: 16px;
                    line-height: 100%;
                    letter-spacing: -2%;
                    text-align: center;
                    color: #ffffff;
                    border: none;
                    margin-top: 15px;
                }
            }
        }
    }

    .compare-plans-section {
        background: #000;

        .section-title {
            font-family: Inter;
            font-weight: 500;
            font-style: Medium;
            font-size: 40px;
            line-height: 40px;
            letter-spacing: -6%;
            text-align: center;
            color: #ffffff;
            margin-bottom: 32px;
        }

        .plan-column {
            display: flex;
            flex-direction: column;
            height: 100%;

            .plan-heading {
                margin-left: auto;
                margin-right: auto;
                background: #ffffff;
                width: 75%;
                height: 40px;
                opacity: 1;
                gap: 8px;
                padding: 8px;
                border-top-left-radius: 12px;
                border-top-right-radius: 12px;
                border-top-width: 1px;
                border-right-width: 1px;
                border-left-width: 1px;


                .plan-heading-text {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: Inter;
                    font-weight: 700;
                    font-style: Bold;
                    font-size: 20px;
                    line-height: 100%;
                    letter-spacing: -1%;
                    color: #313539;
                }
            }

            .plan-features {
                background: #0B0C0D;
                border-radius: 16px;
                padding: 24px 20px;
                border: 1px solid rgba(255, 255, 255, 0.15);
                color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 100%;
                opacity: 1;
                border-radius: 12px;
                border-width: 1px;
                height: auto;
                flex-grow: 1;

                .plan-features-list {
                    height: auto;

                    .plan-features-list-item {
                        opacity: 1;
                        margin-bottom: 30px;

                        .section-label {
                            font-family: 'Inter', sans-serif;
                            font-weight: 600;
                            font-style: SemiBold;
                            font-size: 16px;
                            line-height: 100%;
                            letter-spacing: -1%;
                            color: #ffffff;
                            margin-bottom: 10px;
                        }

                        .section-value {
                            font-family: 'Inter', sans-serif;
                            font-weight: 400;
                            font-style: Regular;
                            font-size: 16px;
                            line-height: 100%;
                            letter-spacing: -1%;
                            color: #c3c3c3c3;
                        }
                    }
                }
            }

            .plan-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 160px;
                height: 40px;
                gap: 8px;
                border-radius: 32px;
                padding: 8px;
                background: #F75891;
                margin-top: 24px;
                color: #ffffff;
                margin-left: auto;
                margin-right: auto;
                border: none;
            }

            .trial-note {
                margin-top: 12px;
                text-align: center;
                font-size: 12px;
                color: #aaa;
            }
        }
    }

    .security-section {
        background: #000;

        h3 {
            font-family: Inter;
            font-weight: 500;
            font-size: 40px;
            line-height: 40px;
            letter-spacing: -6%;
            text-align: center;
            color: #FFFFFF;
            margin-bottom: 40px;
        }

        .security-items {
            display: flex;
            justify-content: space-between;
            gap: 10px;

            .security-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                width: 100%;
                height: 117px;
                border-radius: 8px;
                padding: 24px;
                background: #0B0C0D;
                border: 1px solid #525B66;

                p {
                    font-family: IBM Plex Sans;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 100%;
                    letter-spacing: -1%;
                    text-align: center;
                    color: #C3C3C3;
                }
            }
        }
    }

    .faq-section {

        h3 {
            font-family: Inter;
            font-weight: 500;
            font-size: 40px;
            line-height: 40px;
            letter-spacing: -6%;
            text-align: center;
            color: #FFFFFF;
            margin-bottom: 40px;
        }

        .faq-accordion {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .faq-item {
            background: #0B0C0D;
            border: 1px solid #525B66;
            border-radius: 8px;
            overflow: hidden;
        }

        .faq-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 20px 24px;
            background: transparent;
            border: none;
            cursor: pointer;
            text-align: left;
            outline: none;
            box-shadow: none;
        }

        .faq-header:focus,
        .faq-header:active,
        .faq-header:focus-visible {
            outline: none;
            box-shadow: none;
            background: transparent;
        }

        .faq-question {
            font-family: Inter, sans-serif;
            font-weight: 500;
            font-size: 16px;
            line-height: 16px;
            color: #C3C3C3;
            transition: color 0.25s ease;
        }

        .faq-item.open .faq-question {
            color: #FFFFFF;
        }

        .faq-chevron {
            flex-shrink: 0;
            margin-left: 16px;
            color: #C3C3C3;
            transition: transform 0.3s ease, color 0.25s ease;
        }

        .faq-item.open .faq-chevron {
            transform: rotate(180deg);
            color: #FFFFFF;
        }

        .faq-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, padding 0.35s ease;
            padding: 0 24px;
        }

        .faq-item.open .faq-body {
            max-height: 300px;
            padding: 0 24px 20px;
        }

        .faq-body p {
            font-family: 'IBM Plex Sans', sans-serif;
            font-weight: 400;
            font-size: 16px;
            line-height: 1.3;
            color: #C3C3C3;
            margin: 0;
        }
    }

    @media (max-width: 1300px) {
        .started {
            flex-wrap: wrap;
            gap: 0 !important;
        }

        .trial-text {
            margin: 0 !important;
        }

    }

    @media (max-width: 991px) {
        .pricing-cards-section {
            justify-content: center;

            .pricing-card {
                width: 350px;
            }
        }

        .main-title {
            font-size: 36px;
        }

        .pricing-cards-section .row {
            justify-content: center;
        }

        .col-lg-3 {
            max-width: 50%;
            flex: 0 0 50%;
        }

        .enterprise-section {
            .enterprise-card {
                height: unset;
                margin: 0;

                .enterprise-content {
                    overflow-y: hidden;
                    overflow-x: hidden;
                }
            }
        }

        .compare-plans-section {
            margin: 25px 0;

            .plans-grid {
                grid-template-columns: 1fr;
            }
        }

        .security-section {
            margin: 25px 0;

            .security-items {
                flex-wrap: wrap;
            }
        }

        .faq-section {
            margin: 25px 0;
        }
    }

    @media (max-width: 576px) {
        .row>* {
            padding: 0;
        }

        .main-title {
            font-size: 28px;
        }

        .subtitle {
            font-size: 16px;
        }

        .toggle-container {
            flex-direction: column;
            width: 100%;
            max-width: 280px;
        }

        .toggle-button {
            width: 100%;
            justify-content: center;
        }

        .col-lg-3 {
            max-width: 100%;
            flex: 0 0 100%;
        }

        .pricing-card {
            margin-bottom: 20px;
        }

        .price .amount {
            font-size: 36px;
        }

        .pricing-header-section {
            .toggle-container {
                height: unset;
            }
        }

        .enterprise-section {
            .enterprise-card {
                height: unset;
                margin: 0;

                .enterprise-content {
                    overflow-y: hidden;
                    overflow-x: scroll;
                    height: unset;
                }
            }
        }

        .compare-plans-section {
            margin: 25px 0;

            .plans-grid {
                grid-template-columns: 1fr;
            }
        }

        .security-section {
            margin: 25px 0;

            .security-items {
                flex-wrap: wrap;
            }
        }

        .faq-section {
            margin: 25px 0;
        }
    }

    @media (max-width: 1200px) {
        .plans-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 576px) {
        .plans-grid {
            grid-template-columns: 1fr;
        }

        .section-title {
            font-size: 28px;
        }
    }
}