@extends('User.layout')
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Google Font -->
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
        rel="stylesheet">
<style>

    .investment-box {
        backdrop-filter: blur(10px);
        border-radius: 9px;
        padding: 5px 8px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
        transition: 0.3s ease;
        position: relative;
        overflow: hidden;
        width:217px;
        height: 100%;
    }

    .investment-box:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 30px rgba(23, 162, 184, 0.18);
    }

    .investment-title {
        font-size: 14px !important;
        font-weight: 700;
        color: #17a2b8;
        margin-bottom: 12px;
    }

    .arrow-down {
        font-size: 11px;
        color: #17a2b8;
        animation: bounceArrow 1.5s infinite;
    }

    .investment-amount {
        margin-top: 12px;
        font-size: 18px !important;
        font-weight: 800;
        color: #fff;
    }

    @keyframes bounceArrow {
        0%,100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(6px);
        }
    }

    /* MOBILE SPACING */
    @media (max-width: 767px) {
        .investment-box {
            padding: 22px 15px;
            width:100%;
        }

        .investment-amount {
            font-size: 22px;
        }
    }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg-dark: #071028;
            --card-bg: rgba(255, 255, 255, 0.08);
            --border: rgba(255, 255, 255, 0.12);
            --text: #ffffff;
            --muted: #a9b4d0;
            --line: rgba(255, 255, 255, 0.15);

            --purple: #8b5cf6;
            --blue: #3b82f6;
            --cyan: #06b6d4;
            --pink: #ec4899;

            --success: #22c55e;
            --danger: #ef4444;
        }




        /* Timeline */
        .timeline {5
            position: relative;
            padding-left: 38px;
        }

        /* Vertical Line */
        .timeline::before {
            content: "";
            position: absolute;
            left: 50%;
            top: -10px;
            width: 4px;
            height: 105%;
            border-radius: 30px;
            background:
                linear-gradient(to bottom,
                    var(--purple),
                    var(--blue),
                    var(--cyan),
                    var(--pink));
            box-shadow:
                0 0 15px rgba(139, 92, 246, 0.7),
                0 0 20px rgba(6, 182, 212, 0.4);
            animation: fillLine 2s ease forwards;
            transform-origin: top;
        }

        @keyframes fillLine {
            from {
                transform: scaleY(0);
            }

            to {
                transform: scaleY(1);
            }
        }

        .timeline-item {
            position: relative;
            padding: 22px 24px;
            margin-bottom: 11px;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(14px);
            transition: all .35s ease;
            overflow: hidden;
                 width: 100%;

        }


        .timeline-item:hover {
            transform: translateY(-6px) scale(1.01);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.35),
                0 0 25px rgba(139, 92, 246, 0.2);
        }

        /* Glowing Node */
        .timeline-item::before {
            content: "";
            position: absolute;
            left: -34px;
            top: 32px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: linear-gradient(135deg,
                    var(--purple),
                    var(--cyan));
            box-shadow:
                0 0 12px rgba(139, 92, 246, 0.8),
                0 0 18px rgba(6, 182, 212, 0.7);
            transition: .35s ease;
        }

        .timeline-item:hover::before {
            transform: scale(1.25);
        }

        .timeline-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 18px;
        }

        .timeline-left h5 {
            color: var(--text);
            font-size: 1.08rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .timeline-left p {
            color: var(--muted);
            margin: 0;
            line-height: 1.6;
            font-size: 0.92rem;
        }

        /* Status Icons */
        .status-icon {
            min-width: 52px;
            min-height: 52px;
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.4rem;
            transition: all .35s ease;
            flex-shrink: 0;
        }

        .status-success {
            color: #fff;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            box-shadow:
                0 0 20px rgba(34, 197, 94, 0.45);
        }

        .status-danger {
            color: #fff;
            background: linear-gradient(135deg, #ef4444, #dc2626);
            box-shadow:
                0 0 20px rgba(239, 68, 68, 0.4);
        }

        .timeline-item:hover .status-icon {
            transform: scale(1.08) rotate(4deg);
        }

        @media (max-width: 768px) {

            .roadmap-card {
                padding: 28px 22px;
                border-radius: 24px;
            }

            .roadmap-header h2 {
                font-size: 1.6rem;
            }

            .timeline {
                padding-left: 28px;
            }

            .timeline::before {
                left: 10px;
            }

            .timeline-item::before {
                left: -26px;
            }

            .timeline-content {
                align-items: flex-start;
            }

            .status-icon {
                min-width: 46px;
                min-height: 46px;
                font-size: 1.2rem;
            }
        }

        @media (max-width: 576px) {

            .timeline-content {
                flex-direction: row;
                gap: 14px;
            }

            .timeline-left h5 {
                font-size: 1rem;
            }

            .timeline-left p {
                font-size: .86rem;
            }

            .roadmap-header p {
                font-size: .88rem;
            }
        }
        /* =========================
   MOBILE UI IMPROVEMENTS
   REPLACE YOUR OLD MEDIA QUERIES
   ========================= */

@media (max-width: 768px) {


    .roadmap-card {
        /*padding: 24px 18px;*/
        border-radius: 24px;
    }

    .roadmap-header {
        margin-bottom: 30px;
    }

    .roadmap-header h2 {
        font-size: 1.55rem;
        line-height: 1.3;
    }

    .roadmap-header p {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .timeline {
        padding-left: 0;
    }

    /* Timeline vertical line */
    .timeline::before {
        left: 20px;
        width: 3px;
    }

    .timeline-item {
        padding: 18px 16px 18px 58px;
        margin-bottom: 18px;
        border-radius: 20px;
    }

    /* Timeline glowing node */
    .timeline-item::before {
        left: 12px;
        top: 24px;
        width: 16px;
        height: 16px;
    }

    .timeline-content {
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }

    .timeline-left {
        width: 100%;
    }

    .timeline-left h5 {
        font-size: 0.98rem;
        margin-bottom: 6px;
        line-height: 1.4;
    }

    .timeline-left p {
        font-size: 0.83rem;
        line-height: 1.6;
    }

    /* Better mobile icon */
    .status-icon {
        min-width: 42px;
        min-height: 42px;
        border-radius: 14px;
        font-size: 1rem;
    }

    /* Better hover behavior on touch devices */
    .timeline-item:hover {
        transform: translateY(-2px);
    }
}

/* EXTRA SMALL DEVICES */

@media (max-width: 480px) {

    body {
        padding: 16px 10px;
    }

    .roadmap-card {
        padding: 20px 14px;
        border-radius: 22px;
    }

    .roadmap-header h2 {
        font-size: 1.35rem;
    }

    .roadmap-header p {
        font-size: 0.82rem;
    }

    .timeline::before {
        left: 18px;
    }

    .timeline-item {
        padding: 16px 14px 16px 52px;
        margin-bottom: 16px;
    }

    .timeline-item::before {
        left: 10px;
        width: 15px;
        height: 15px;
    }

    .timeline-left h5 {
        font-size: 0.92rem;
    }

    .timeline-left p {
        font-size: 0.78rem;
    }

    .status-icon {
        min-width: 38px;
        min-height: 38px;
        font-size: 0.9rem;
        border-radius: 12px;
    }
}


.roadmap-card {

    position: relative;
    z-index: 2;

    width: 100%;
    /*max-width: 760px;*/

    padding: 10px;

    border-radius: 30px;

    /* DARK GLASS BG */
    background:
        linear-gradient(145deg,
            rgba(15, 23, 42, 0.82),
            rgba(2, 6, 23, 0.92));

    border: 1px solid rgba(255, 255, 255, 0.06);

    /* STRONG BLUR */
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);

    overflow: hidden;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(109, 40, 217, 0.18),
        0 0 50px rgba(8, 145, 178, 0.12);

    animation: fadeUp 1s ease;
}



.roadmap-card::before {

    content: "";

    position: absolute;

    top: -120px;
    left: -80px;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background: rgba(109, 40, 217, 0.25);

    filter: blur(70px);

    z-index: -1;
}
.timeline:after
{
    display:none !important;
}



.roadmap-card::after {

    content: "";

    position: absolute;

    bottom: -120px;
    right: -80px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background: rgba(8, 145, 178, 0.22);

    filter: blur(80px);

    z-index: -1;
}




.roadmap-card .timeline-item {

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.02));

    border: 1px solid rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(16px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 20px rgba(0, 0, 0, 0.25);

    transition: all .35s ease;
}



.roadmap-card .timeline-item:hover {

    transform: translateY(-5px);

    border-color: rgba(109, 40, 217, 0.25);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.45),
        0 0 18px rgba(109, 40, 217, 0.15);
}



.roadmap-header h2 {

    color: #ffffff;

    font-weight: 800;

    letter-spacing: -.5px;

    text-shadow:
        0 0 18px rgba(109, 40, 217, 0.3);
}



.timeline-left h5 {
    color: #f8fafc;
}

.timeline-left p {
    color: #94a3b8;
}




.status-success {

    background:
        linear-gradient(135deg,
            #15803d,
            #166534);

    box-shadow:
        0 0 18px rgba(22, 163, 74, 0.35);
}

.status-danger {

    background:
        linear-gradient(135deg,
            #b91c1c,
            #991b1b);

    box-shadow:
        0 0 18px rgba(220, 38, 38, 0.3);
}

.table>:not(caption)>*>* {

    background-color: #a3dae4 !important;

}

      .rank-table-card{
        background: #a3dae4;
        border-radius: 20px;
        padding: 18px;
        box-shadow: 0 4px 18px rgba(0,0,0,0.06);
        border: 1px solid #e9ecef;
    }

    .rank-table{
        min-width: 700px;
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    .rank-table thead th{
        background: #17a2b8;
        color: #0000000;
        font-size: 14px;
        font-weight: 700;
        padding: 14px 12px;
        border: none;
        white-space: nowrap;
    }

    .rank-table thead th:first-child{
        border-radius: 12px 0 0 12px;
    }

    .rank-table thead th:last-child{
        border-radius: 0 12px 12px 0;
    }

    .rank-table tbody tr{
        background: #f8fbfc;
        transition: 0.3s ease;
    }

    .rank-table tbody tr:hover{
        transform: translateY(-2px);
        background: #eef9fb;
    }

    .rank-table tbody td{
        padding: 14px 12px;
        vertical-align: middle;
        border-top: 1px solid #edf2f7;
        border-bottom: 1px solid #edf2f7;
        font-size: 14px;
        font-weight: 600;
        color: #2d3436;
    }

    .rank-table tbody td:first-child{
        border-left: 1px solid #edf2f7;
        border-radius: 12px 0 0 12px;
        min-width: 220px;
    }

    .rank-table tbody td:last-child{
        border-right: 1px solid #edf2f7;
        border-radius: 0 12px 12px 0;
    }

    .rank-name{
        padding: 8px 14px;
        border-radius: 10px;
        color: #fff;
        font-weight: 700;
        display: inline-block;
        font-size: 13px;
        line-height: 1.4;
    }

    .executive{
        background: linear-gradient(135deg,#17a2b8,#138496);
    }

    .assistant{
        background: linear-gradient(135deg,#20c997,#198754);
    }

    .sales{
        background: linear-gradient(135deg,#0d6efd,#0b5ed7);
    }

    .developer{
        background: linear-gradient(135deg,#6f42c1,#5a32a3);
    }

    .gm{
        background: linear-gradient(135deg,#fd7e14,#e46c0a);
    }

    .sgm{
        background: linear-gradient(135deg,#dc3545,#bb2d3b);
    }

    .dp{
        background: linear-gradient(135deg,#6610f2,#520dc2);
    }

    .sdp{
        background: linear-gradient(135deg,#198754,#157347);
    }

    .director{
        background: linear-gradient(135deg,#212529,#000);
    }

    @media(max-width:768px){

        .rank-table thead th,
        .rank-table tbody td{
            font-size: 12px;
            padding: 10px 8px;
        }

        .rank-name{
            font-size: 11px;
            padding: 7px 10px;
        }

    }

    .level-plan-title {
        font-weight: 700;
        color:White;

    }

    .level-plan-subtitle {

        font-size: 14px;
        color:#ccc;
    }

    @media (max-width: 576px) {
        .form-select,
        .btn {
            width: 100%;
        }
    }

    .salary-header {
        width: 100%;
    }

    .salary-title {
        font-size: clamp(18px, 2vw, 28px);
        white-space: nowrap;
    }

    .salary-report-btn {
        border-radius: 12px;
        padding: 10px 18px;
        white-space: nowrap;
    }

    @media (max-width: 576px) {

        .salary-report-btn {
            padding: 8px 12px;
            font-size: 14px;
        }

        .salary-title {
            font-size: 18px;
        }
    }
</style>



<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">

<style>
    body {
        background: #07131f;
        font-family: 'Inter', sans-serif;
    }

    .salary-card {
        background:#07131f !important;

        border: 1px solid rgba(255, 255, 255, 0.08);

        border-radius: 30px;
        padding: 30px;

        backdrop-filter: blur(20px);

        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.35),
            0 0 40px rgba(0, 210, 255, 0.06);

        overflow: hidden;
        position: relative;
    }

    .salary-card::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(0, 210, 255, 0.08);
        top: -120px;
        left: -120px;
        filter: blur(70px);
    }

    .salary-card::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(58, 123, 213, 0.08);
        bottom: -120px;
        right: -120px;
        filter: blur(70px);
    }

    .salary-header {
        position: relative;
        z-index: 2;
        margin-bottom: 35px;
    }

    .salary-title {
        color: #fff;
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 8px;
    }

    .salary-subtitle {
        color: #9caec7;
        font-size: 14px;
    }

    .form-select,
    .btn-search {
        height: 48px;
        border-radius: 14px;
    }

    .form-select {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .form-select:focus {
        box-shadow: none;
        border-color: rgba(0, 210, 255, 0.4);
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
    }

    .form-select option {
        background: #07131f;
        color: #fff;
    }

    .btn-search {
        background: linear-gradient(135deg, #00d2ff, #3a7bd5);
        border: none;
        color: #fff;
        font-weight: 700;
    }

    .timeline-wrapper {
        position: relative;
        z-index: 2;
    }

    .timeline-item {
        background:
            linear-gradient(145deg,
                rgba(255, 255, 255, 0.04),
                rgba(255, 255, 255, 0.02));

        border: 1px solid rgba(255, 255, 255, 0.06);

        border-radius: 24px;

        padding: 24px;
        margin-bottom: 22px;

        transition: 0.3s ease;
    }

    .timeline-item:hover {
        transform: translateY(-4px);

        box-shadow:
            0 16px 30px rgba(0, 0, 0, 0.35),
            0 0 25px rgba(0, 210, 255, 0.06);
    }

    .timeline-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }

    .timeline-title {
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 6px;
    }

    .timeline-desc {
        color: #9caec7;
        font-size: 14px;
        margin-bottom: 0;
    }

    .status-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;

        border-radius: 16px;

        display: flex;
        align-items: center;
        justify-content: center;

        color: #fff;
        font-size: 22px;
    }

    .status-success {
        background: linear-gradient(135deg, #16a34a, #15803d);

        box-shadow:
            0 0 20px rgba(22, 163, 74, 0.35);
    }

    .status-danger {
        background: linear-gradient(135deg, #dc2626, #991b1b);

        box-shadow:
            0 0 20px rgba(220, 38, 38, 0.35);
    }

    .investment-grid {
        margin-top: 24px;
    }

    .investment-card {
        background:
            linear-gradient(135deg,
                rgba(0, 210, 255, 0.12),
                rgba(58, 123, 213, 0.12));

        border: 1px solid rgba(255, 255, 255, 0.06);

        border-radius: 22px;

        padding: 24px 18px;

        text-align: center;

        transition: 0.3s ease;
        height: 100%;
    }

    .investment-card:hover {
        transform: translateY(-4px);
    }

    .investment-label {
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 14px;
    }

    .investment-arrow {
        color: #7dd3fc;
        font-size: 28px;
        margin-bottom: 14px;
    }

    .investment-target {
        color: #fff;
        font-size: 24px;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .investment-current {
        color: #9caec7;
        font-size: 13px;
    }

    @media(max-width: 991px) {

        .salary-header {
            gap: 20px;
        }
    }

    @media(max-width: 767px) {

        .salary-card {
            padding: 22px 18px;
            border-radius: 24px;
        }

        .salary-title {
            font-size: 22px;
        }

        .timeline-top {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .status-icon {
            width: 42px;
            height: 42px;
            min-width: 42px;
            font-size: 18px;
            border-radius: 12px;
        }

        .investment-target {
            font-size: 20px;
        }
    }

    @media(max-width: 576px) {

        .salary-title {
            font-size: 20px;
        }

        .timeline-title {
            font-size: 16px;
        }

        .timeline-desc {
            font-size: 13px;
        }

        .investment-card {
            padding: 18px 14px;
        }
    }
</style>
@section('content')


<div class="d-flex justify-content-between align-items-center flex-nowrap gap-2 mb-3 salary-header">

    <div class="flex-grow-1 min-width-0">
        <h3 class="fw-bold mb-0 text-dark salary-title text-truncate">
            Salary Structure
        </h3>
    </div>

    <div class="flex-shrink-0">
        <a href="{{ route('user.salary_report') }}"
           class="btn btn-info text-white fw-semibold shadow-sm salary-report-btn">

          Report
        </a>
    </div>

</div>
    <div class="row justify-content-center">

        <div class="col-12 col-xl-10">

            <div class="salary-card">

                <!-- HEADER -->
                <div
                    class="salary-header d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-4">

                    <!-- LEFT -->
                    <div>

                        <h2 class="salary-title">
                            Become Eligible To Get Salary Monthly
                        </h2>

                        <p class="salary-subtitle mb-0">
                            To become first time salary achiever there is no time period
                        </p>

                    </div>

                    <!-- RIGHT -->
                    <div class="col-12 col-lg-auto">

                        <div class="row g-3">

                            <div class="col-12 col-sm-4">
                                <select class="form-select">
                                    <option>January</option>
                                    <option>February</option>
                                    <option>March</option>
                                </select>
                            </div>

                            <div class="col-12 col-sm-4">
                                <select class="form-select">
                                    <option>2026</option>
                                    <option>2025</option>
                                </select>
                            </div>

                            <div class="col-12 col-sm-4">
                                <button class="btn btn-search w-100">
                                    Search
                                </button>
                            </div>

                        </div>

                    </div>

                </div>

                <!-- TIMELINE -->
                <div class="timeline-wrapper">

                    <!-- ITEM -->
                    <div class="timeline-item">

                        <div class="timeline-top">

                            <div>

                                <h5 class="timeline-title">
                                    1. One Lakh Self Advance
                                </h5>

                            </div>

                            <div class="status-icon status-success">
                                <i class="ti tabler-check"></i>
                            </div>

                        </div>

                    </div>

                    <!-- ITEM -->
                    <div class="timeline-item">

                        <div class="timeline-top">

                            <div>

                                <h5 class="timeline-title">
                                    2. Three Compulsory Direct Referrals
                                </h5>

                                <p class="timeline-desc">
                                    With Minimum 1 Lakh Investment
                                </p>

                            </div>

                            <div class="status-icon status-danger">
                                <i class="ti tabler-x"></i>
                            </div>

                        </div>

                    </div>

                    <!-- ITEM -->
                    <div class="timeline-item">

                        <div class="timeline-top mb-4">

                            <div>

                                <h5 class="timeline-title">
                                    3. Team Volume
                                </h5>

                            </div>

                            <div class="status-icon status-success">
                                <i class="ti tabler-check"></i>
                            </div>

                        </div>

                        <div class="row g-4 investment-grid">

                            <!-- CARD -->
                            <div class="col-12 col-md-4">

                                <div class="investment-card">

                                    <div class="investment-label">
                                        One Leg
                                    </div>

                                    <div class="investment-arrow">
                                        <i class="ti tabler-arrow-down"></i>
                                    </div>

                                    <div class="investment-target">
                                        ₹15 Lakh
                                    </div>

                                    <div class="investment-current">
                                        Current : ₹15,20,000
                                    </div>

                                </div>

                            </div>

                            <!-- CARD -->
                            <div class="col-12 col-md-4">

                                <div class="investment-card">

                                    <div class="investment-label">
                                        Second Leg
                                    </div>

                                    <div class="investment-arrow">
                                        <i class="ti tabler-arrow-down"></i>
                                    </div>

                                    <div class="investment-target">
                                        ₹5 Lakh
                                    </div>

                                    <div class="investment-current">
                                        Current : ₹5,40,000
                                    </div>

                                </div>

                            </div>

                            <!-- CARD -->
                            <div class="col-12 col-md-4">

                                <div class="investment-card">

                                    <div class="investment-label">
                                        Remaining Legs
                                    </div>

                                    <div class="investment-arrow">
                                        <i class="ti tabler-arrow-down"></i>
                                    </div>

                                    <div class="investment-target">
                                        ₹5 Lakh
                                    </div>

                                    <div class="investment-current">
                                        Current : ₹5,10,000
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>





<div class="col-lg-12 mt-3">
        <div class="rank-table-card">
<h5 class="text-center fw-bold">Salary Upgradations</h5>
        <div class="table-responsive">

            <table class="table rank-table align-middle mb-0">

                <thead>
                    <tr>
                        <th>Become</th>
                        <th>One Leg</th>
                        <th>One Leg</th>
                        <th>Remining Leg</th>
                        <th>Salary</th>

                    </tr>
                </thead>

                <tbody>

                    <tr>
                        <td>
                            <div class="rank-name executive">
                                Executive Officer
                            </div>
                        </td>
                        <td>15 Lakhs</td>
                        <td>5 Lakhs</td>
                        <td>5Lakhs</td>
                        <td>₹15,000</td>

                    </tr>

                    <tr>
                        <td>
                            <div class="rank-name assistant">
                                Assistance Sales Manager
                            </div>
                        </td>
                        <td>30 Lakhs</td>
                        <td>10 Lakhs</td>
                        <td>10 Lakhs</td>
                        <td>₹30,000</td>

                    </tr>

                    <tr>
                        <td>
                            <div class="rank-name sales">
                                Sales Manager
                            </div>
                        </td>
                        <td>60 Lakhs</td>
                        <td>20 Lakhs</td>
                        <td>20 Lakhs</td>
                        <td>₹60,000</td>

                    </tr>

                    <tr>
                        <td>
                            <div class="rank-name developer">
                                Development Officer
                            </div>
                        </td>
                        <td>120 Lakhs</td>
                        <td>40 Lakhs</td>
                        <td>40 Lakhs</td>
                        <td>₹1,00,000</td>

                    </tr>

                    <tr>
                        <td>
                            <div class="rank-name gm">
                                General Manager
                            </div>
                        </td>
                        <td>240 Lakhs</td>
                        <td>80 Lakhs</td>
                        <td>80 Lakhs</td>
                        <td>₹2,00,000</td>

                    </tr>

                    <tr>
                        <td>
                            <div class="rank-name sgm">
                                Senior General Manager
                            </div>
                        </td>
                        <td>480 Lakhs</td>
                        <td>160 Lakhs</td>
                        <td>160 Lakhs</td>
                        <td>₹3,00,000</td>

                    </tr>

                    <tr>
                        <td>
                            <div class="rank-name dp">
                                Deputy President
                            </div>
                        </td>
                        <td>960 Lakhs</td>
                        <td>320 Lakhs</td>
                        <td>320 Lakhs</td>
                        <td>₹4,00,000</td>

                    </tr>

                    <tr>
                        <td>
                            <div class="rank-name sdp">
                                Senior Deputy President
                            </div>
                        </td>
                        <td>1920 Lakhs</td>
                        <td>640 Lakhs</td>
                        <td>640 Lakhs</td>
                        <td>₹5,00,000</td>

                    </tr>

                    <tr>
                        <td>
                            <div class="rank-name director">
                                Director
                            </div>
                        </td>
                        <td>2840 Lakhs</td>
                        <td>1280 Lakhs</td>
                        <td>1280 Lakhs</td>
                        <td>₹10,00,000</td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>

@endsection