body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #f4f7fb;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: 70px 20px;
        }

        h1 {
            text-align: center;
            font-size: 36px;
            margin-bottom: 50px;
        }

        /* =========================
   MAIN WRAPPER
========================= */

        .pricing-wrapper {
            border: 2px solid #0d6efd;
            border-radius: 16px;
            background: #fff;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.05);
        }

        /* =========================
        TABS
        ========================= */

        .tabs {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .tab {
            position: relative;
            padding: 30px 20px;
            text-align: center;
            cursor: pointer;
            border-right: 1px solid #eee;
            transition: all .3s ease;
        }

        .tab:last-child {
            border-right: none;
        }

        .tab h3 {
            margin: 0;
            font-size: 18px;
        }

        .tab .price {
            font-size: 24px;
            font-weight: 700;
            margin: 8px 0 14px;
            color: #0d6efd;
        }

        .tab button {
            padding: 8px 18px;
            border: none;
            border-radius: 6px;
            background: #0d6efd;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            transition: .3s;
        }

        .tab button:hover {
            opacity: .9;
        }

        .package-description {
            background: #eef5ff;
            border: 1px solid #dbe7ff;
            color: #1b3f8b;
            padding: 14px 18px;
            border-radius: 8px;
            font-size: 14px;
            text-align: center;
            margin-bottom: 35px;
            font-weight: 500;
        }

        /* ACTIVE TAB */

        .tab.active {
            background: #f8fbff;
        }

        .tab.active::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: #0d6efd;
        }

        /*
.tab.active::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:4px;
    background:#0d6efd;
} */

        /* =========================
   CONTENT AREA
========================= */

        .content-area {
            padding: 50px;
            border-top: 2px solid #0d6efd;
            position: relative;
        }

        /* FIXED TAB CONTENT (NO ABSOLUTE POSITIONING) */

        .tab-content {
            display: none;
            animation: fadeIn .3s ease;
        }

        .tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* =========================
        FEATURE GRID
        ========================= */

        .features-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }

        .feature-box {
            padding: 25px;
            border: 1px solid #f1f1f1;
            border-radius: 12px;
            background: #fafbff;
            transition: .3s;
        }

        .feature-box:hover {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        }

        .feature-title {
            font-weight: 600;
            margin-bottom: 15px;
        }

        .feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .feature-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            font-size: 14px;
        }

        .check {
            width: 22px;
            height: 22px;
            background: #e7f1ff;
            color: #0d6efd;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 13px;
            font-weight: bold;
            flex-shrink: 0;
        }

        /* =========================
        RESPONSIVE
        ========================= */

        /* Tablet */
        @media(max-width:992px) {

            .container {
                padding: 50px 20px;
            }

            .tabs {
                grid-template-columns: repeat(2, 1fr);
            }

            .tab {
                padding: 25px 15px;
            }

            .content-area {
                padding: 40px 25px;
            }

            .features-row {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }
        }

        /* Mobile */
        @media(max-width:600px) {

            h1 {
                font-size: 24px;
                margin-bottom: 30px;
            }

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

            .tab {
                padding: 20px 15px;
                position: relative;
            }

            .tabs {
                gap: 10px;
            }

            .tab {
                border: 1px solid #e6edf7;
                border-radius: 10px;
                margin-bottom: 8px;
            }

            .tab {
                padding-right: 40px;
            }


            /* mobile arrow */

            /* mobile arrow */

            .tab::after {
                content: "";
                position: absolute;
                right: 18px;
                top: 24px;
                /* fixed position instead of 50% */
                width: 9px;
                height: 9px;
                border-right: 2px solid #0d6efd;
                border-bottom: 2px solid #0d6efd;
                transform: rotate(45deg);
                transition: transform .25s ease;
            }

            .tab.active::after {
                transform: rotate(-135deg);
            }

            .tab h3 {
                font-size: 16px;
            }

            .tab .price {
                font-size: 20px;
            }

            .tab button {
                width: 100%;
            }

            .tab {
                cursor: pointer;
            }

            .tab-content {
                cursor: default;
            }

            .content-area {
                padding: 25px 15px;
            }

            .features-row {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .feature-box {
                padding: 20px;
                /* height: 40px; */
            }

            .feature-title {
                font-size: 15px;
            }

            .feature-list li {
                font-size: 13px;
            }


            /* New change */

            .package-description {
                text-align: left;
                font-size: 13px;
                line-height: 1.5;
            }

            .feature-list li {
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .feature-title {
                margin-bottom: 0;
            }

            .tab-content {
                transition: all .25s ease;
            }

            .content-area {
                padding: 0;
                border-top: none;
                display: none;
            }

            .tab-content {
                display: none;
                padding: 20px;
                border-top: 1px solid #eee;
                background: #fff;
            }

            .tab-content.active {
                display: block;
            }

            /* Mobile accordion sections */

            /* clean mobile accordion */

            .features-row {
                display: block;
                gap: 0;
            }

            .feature-box {
                padding: 0;
                margin-bottom: 8px;
                border-radius: 10px;
                overflow: hidden;
            }

            .feature-title {
                padding: 12px 14px;
                font-size: 14px;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                /* background:#f5f7fb; */
            }

            .feature-title::after {
                content: "▼";
                font-size: 11px;
                color: #0d6efd;
                transition: transform .2s ease;
            }

            .feature-box.open .feature-title::after {
                transform: rotate(180deg);
            }

            .feature-list {
                height: 0;
                overflow: hidden;
                padding: 0 14px;
                background: #fff;
                transition: height .25s ease;
            }

            .feature-box.open .feature-list {
                padding: 8px 14px 10px;
                border-top: 1px solid #eee;
            }

            .feature-list li {
                font-size: 13px;
                padding: 5px 0;
            }

            li {
                text-align: left;
            }
        }