* {
            font-family: 'Inter', sans-serif;
        }

        body {

            background:
                linear-gradient(135deg,
                    #eef4ff 0%,
                    #f8fbff 100%);

            min-height: 100vh;
        }

        .hero-section {

            padding-top: 70px;
            padding-bottom: 70px;
        }

        .main-card {

            border: 0;
            border-radius: 28px;

            overflow: hidden;

            background: #fff;

            box-shadow:
                0 20px 60px rgba(13, 110, 253, .10);
        }

        .left-panel {

            background:
                linear-gradient(135deg,
                    #2e7d32,
                    #09220b);

            color: #fff;

            height: 100%;

            padding: 60px 40px;

            position: relative;
        }

        .left-panel::before {

            content: '';

            position: absolute;

            width: 260px;
            height: 260px;

            background: rgba(255, 255, 255, .08);

            border-radius: 50%;

            top: -80px;
            right: -80px;
        }

        .left-panel::after {

            content: '';

            position: absolute;

            width: 180px;
            height: 180px;

            background: rgba(255, 255, 255, .06);

            border-radius: 50%;

            bottom: -60px;
            left: -60px;
        }

        .brand-icon {

            width: 75px;
            height: 75px;

            border-radius: 20px;

            background: rgba(255, 255, 255, .15);

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

            font-size: 30px;

            margin-bottom: 25px;
        }

        .feature-box {

            background: rgba(255, 255, 255, .10);

            border-radius: 18px;

            padding: 16px 18px;

            margin-bottom: 15px;

            backdrop-filter: blur(8px);
        }

        .feature-box i {

            font-size: 20px;
        }

        .right-panel {

            padding: 50px;
        }

        .page-title {

            font-size: 32px;
            font-weight: 700;

            color: #1f2937;
        }

        .page-subtitle {

            color: #6b7280;
            margin-bottom: 35px;
        }

        .search-wrapper {

            background: #f8fafc;

            border: 1px solid #e5e7eb;

            border-radius: 18px;

            padding: 8px;
        }

        .search-input {

            border: 0 !important;

            background: transparent !important;

            height: 58px;

            font-size: 16px;
        }

        .search-input:focus {

            box-shadow: none !important;
        }

        .track-btn {

            height: 58px;

            border-radius: 14px;

            padding: 0 30px;

            font-weight: 600;
        }

        .result-card {

            border: 0;

            border-radius: 22px;

            overflow: hidden;

            box-shadow:
                0 10px 30px rgba(0, 0, 0, .06);
        }

        .status-badge {

            padding: 10px 18px;

            border-radius: 30px;

            font-size: 13px;
            font-weight: 600;
        }

        .info-card {

            background: #f8fafc;

            border-radius: 18px;

            padding: 18px;
        }

        .info-label {

            color: #6b7280;

            font-size: 13px;
            margin-bottom: 6px;
        }

        .info-value {

            font-weight: 600;

            color: #111827;
        }

        .timeline {

            position: relative;

            margin-left: 20px;

            padding-left: 35px;

            border-left: 2px dashed #d1d5db;
        }

        .timeline-step {

            position: relative;

            margin-bottom: 35px;
        }

        .timeline-step::before {

            content: '';

            position: absolute;

            left: -45px;
            top: 5px;

            width: 20px;
            height: 20px;

            border-radius: 50%;

            background: #d1d5db;

            border: 4px solid #fff;

            box-shadow: 0 0 0 3px #dbeafe;
        }

        .timeline-step.completed::before {

            background: #198754;
        }

        .timeline-step.active::before {

            background: #0d6efd;
        }

        .timeline-title {

            font-weight: 600;

            color: #111827;
        }

        .timeline-status {

            font-size: 13px;

            color: #6b7280;
        }

        @media(max-width:991px) {

            .left-panel {

                padding: 40px 30px;
            }

            .right-panel {

                padding: 35px 25px;
            }

            .page-title {

                font-size: 26px;
            }
        }