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

        body {
            background: #f7f9fc;
            color: #1e293b;
        }

        /* =========================
           HERO
        ========================= */

        .hero {
            min-height: 590px;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;

            background:
                linear-gradient(
                    120deg,
                    rgba(13, 71, 161, 0.96),
                    rgba(37, 99, 235, 0.90)
                ),
                url('images/job-hero.jpg');

            background-size: cover;
            background-position: center;
        }

        .hero::before {
            content: "";
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
            top: -180px;
            right: -120px;
        }

        .hero::after {
            content: "";
            position: absolute;
            width: 350px;
            height: 350px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
            bottom: -180px;
            left: -100px;
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .company-logo {
            max-width: 190px;
            max-height: 70px;
            object-fit: contain;
            margin-bottom: 25px;
            background: #fff;
            padding: 10px 18px;
            border-radius: 12px;
        }

        .hero h1 {
            font-size: clamp(38px, 5vw, 64px);
            font-weight: 800;
            line-height: 1.1;
            color: #fff;
        }

        .hero h1 span {
            color: #ff6300;
        }

        .hero-text {
            max-width: 650px;
            font-size: 18px;
            line-height: 1.8;
            color: rgba(255,255,255,0.90);
        }

        .hero-buttons .btn {
            padding: 13px 28px;
            border-radius: 10px;
            /*font-weight: 600;*/
        }

        /* Hero Image */

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

        .hero-image {
            width: 100%;
            max-width: 500px;
            height: 400px;
            object-fit: cover;
            border-radius: 25px;
            box-shadow: 0 25px 60px rgba(0,0,0,0.25);
            border: 8px solid rgba(255,255,255,0.15);
        }

        .floating-card {
            position: absolute;
            background: #fff;
            color: #1e293b;
            padding: 15px 20px;
            border-radius: 14px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.18);
        }

        .floating-card.jobs {
            left: -25px;
            bottom: 30px;
        }

        .floating-card.users {
            right: -15px;
            top: 30px;
        }

        .floating-icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e8f0ff;
            color: #2563eb;
            font-size: 20px;
        }

        /* =========================
           SEARCH BOX
        ========================= */

        .search-section {
            position: relative;
            z-index: 10;
            margin-top: -55px;
        }

        .search-box {
            background: #fff;
            border-radius: 18px;
            padding: 28px;
            box-shadow: 0 15px 45px rgba(15, 23, 42, 0.12);
        }

        .search-box .form-control {
            height: 54px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
        }

        .search-box .form-control:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
        }

        .search-btn {
            height: 54px;
            border-radius: 10px;
            font-weight: 600;
        }

        /* =========================
           STATS
        ========================= */

        .stats-section {
            padding: 70px 0 30px;
        }

        .stat-card {
            background: #fff;
            border-radius: 18px;
            padding: 28px;
            border: 1px solid #edf0f5;
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 15px 35px rgba(15,23,42,0.10);
        }

        .stat-icon {
            width: 58px;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            background: #eff6ff;
            color: #2563eb;
            font-size: 26px;
        }

        .stat-number {
            font-size: 30px;
            font-weight: 800;
        }

        /* =========================
           SECTION TITLE
        ========================= */

        .section-title h2 {
            font-weight: 800;
            font-size: 34px;
        }

        .section-title p {
            color: #64748b;
        }

        /* =========================
           CATEGORY CARDS
        ========================= */

        .category-card {
            background: #fff;
            border: 1px solid #edf0f5;
            border-radius: 18px;
            padding: 30px 20px;
            height: 100%;
            transition: all 0.3s ease;
        }

        .category-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 18px 40px rgba(15,23,42,0.10);
            border-color: #bfdbfe;
        }

        .category-icon {
            width: 65px;
            height: 65px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            background: linear-gradient(
                135deg,
                #eff6ff,
                #dbeafe
            );
            color: #2563eb;
            font-size: 30px;
        }

        .category-card h5 {
            font-weight: 700;
        }

        /* =========================
           JOB CARDS
        ========================= */

        .job-card {
            background: #fff;
            border-radius: 18px;
            padding: 25px;
            height: 100%;
            border: 1px solid #edf0f5;
            transition: all 0.3s ease;
            position: relative;
        }

        .job-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 18px 45px rgba(15,23,42,0.11);
        }

        .job-title {
            font-weight: 700;
            color: #0f172a;
            line-height: 1.4;
        }

        .job-meta {
            color: #64748b;
            font-size: 14px;
        }

        .job-meta i {
            width: 20px;
            color: #2563eb;
        }

        .job-category {
            background: #eff6ff;
            color: #ffffff;
            padding: 7px 12px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 600;
        }

        .job-date {
            color: #94a3b8;
            font-size: 12px;
        }

        /* =========================
           CTA
        ========================= */

        .cta-section {
            padding: 80px 0;
        }

        .cta-box {
            border-radius: 28px;
            padding: 65px 40px;
            color: #fff;
            position: relative;
            overflow: hidden;

            background:
                linear-gradient(
                    135deg,
                    #0f3c9d,
                    #2563eb
                );
        }

        .cta-box::after {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(255,255,255,0.07);
            right: -100px;
            top: -100px;
        }

        .cta-content {
            position: relative;
            z-index: 2;
        }

        .cta-box h2 {
            font-size: 38px;
            font-weight: 800;
        }


/*Job List*/



/*View Page*/
 .job-banner {
            background: linear-gradient(135deg, #09215d, #084298);
            color: #fff;
            padding: 55px 0 80px;
        }

        .job-banner h1 {
            font-weight: 700;
            margin-top: 10px;
        }

        .job-category {
            display: inline-block;
            background: rgba(255,255,255,.15);
            padding: 7px 14px;
            border-radius: 30px;
            margin-bottom: 5px;
            color: #ffffff;
        }

        .job-container {
            margin-top: -45px;
            position: relative;
        }

        /* CARDS */

        .job-main-card,
        .sidebar-card,
        .related-jobs-card {
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 5px 25px rgba(0,0,0,.07);
        }

        .job-main-card {
            padding: 30px;
        }

        .sidebar-card {
            padding: 25px;
            position: sticky;
            top: 20px;
        }

        /* JOB INFORMATION */

        .job-info {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
            margin-bottom: 30px;
        }

        .info-box {
            background: #f4f7ff;
            padding: 16px;
            border-radius: 10px;
            border: 1px solid #e7edff;
        }

        .info-box i {
            color: #0d47a1;
            margin-right: 7px;
            width: 18px;
        }

        .info-label {
            font-size: 12px;
            color: #777;
            margin-bottom: 4px;
        }

        .info-value {
            font-weight: 600;
            color: #222;
        }

        /* SECTIONS */

        .section-title {
            font-size: 21px;
            font-weight: 700;
            margin: 30px 0 12px;
            color: #222;
        }

        .section-content {
            color: #555;
            line-height: 1.7;
        }

        /* SKILLS */

        .skills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .skill {
            background: #eef4ff;
            color: #0d47a1;
            padding: 7px 12px;
            border-radius: 20px;
            font-size: 13px;
        }

        /* APPLY */

        .apply-btn {
            display: block;
            width: 100%;
            background: linear-gradient(135deg, #0d47a1, #2563eb);
            color: #fff;
            text-align: center;
            padding: 13px;
            border-radius: 9px;
            text-decoration: none;
            font-weight: 700;
            border: none;
        }

        .apply-btn:hover {
            background: #0b3d91;
            color: #fff;
        }

        /* RELATED JOBS */

        .related-jobs-card {
            padding: 22px;
        }

        .related-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            padding-bottom: 12px;
            border-bottom: 1px solid #eee;
        }

        .related-heading h5 {
            margin: 0;
            font-weight: 700;
            font-size: 18px;
        }

        .related-heading h5 i {
            color: #0d47a1;
            margin-right: 6px;
        }

        .related-heading span {
            font-size: 12px;
            color: #777;
        }

        .related-job-item {
            padding: 16px 0;
            border-bottom: 1px solid #eee;
        }

        .related-job-item:last-child {
            border-bottom: none;
        }

        .related-job-title {
            color: #222;
            font-size: 15px;
            font-weight: 700;
            text-decoration: none;
        }

        .related-job-title:hover {
            color: #0d47a1;
        }

        .related-meta {
            color: #777;
            font-size: 12px;
            margin-top: 6px;
        }

        .related-meta i {
            color: #0d47a1;
            width: 15px;
        }

        .related-tag {
            display: inline-block;
            background: #eef4ff;
            color: #0d47a1;
            padding: 4px 8px;
            border-radius: 15px;
            font-size: 11px;
            margin-top: 8px;
        }

        .related-view {
            display: block;
            color: #0d47a1;
            font-size: 12px;
            font-weight: 600;
            text-decoration: none;
            margin-top: 10px;
        }

        /* MOBILE */

        @media(max-width: 767px) {

            .job-info {
                grid-template-columns: 1fr;
            }

            .job-main-card {
                padding: 20px;
            }

            .job-banner {
                padding: 40px 0 70px;
            }

            .job-banner h1 {
                font-size: 28px;
            }

        }
        /*End View*/
/*        .navbar-brand {*/
/*            font-size: 25px;*/
/*            font-weight: 700;*/
/*            color: #0d6efd !important;*/
/*        }*/

        .hero {
            background: linear-gradient(135deg, #09215d, #084298);
            color: white;
            padding: 90px 20px;
        }

/*        .hero h1 {*/
/*            font-size: 42px;*/
/*            font-weight: 700;*/
/*        }*/

/*        .search-box {*/
/*            background: white;*/
/*            padding: 20px;*/
/*            border-radius: 12px;*/
/*            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.12);*/
/*        }*/

/*        .category-card,*/
/*        .job-card {*/
/*            background: white;*/
/*            border: 1px solid #e9ecef;*/
/*            border-radius: 12px;*/
/*            padding: 25px;*/
/*            height: 100%;*/
/*            transition: 0.3s;*/
/*        }*/

/*        .category-card:hover,*/
/*        .job-card:hover {*/
/*            transform: translateY(-5px);*/
/*            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);*/
/*        }*/

/*        .category-icon {*/
/*            font-size: 35px;*/
/*            color: #0d6efd;*/
/*        }*/

/*        .job-title {*/
/*            font-size: 19px;*/
/*            font-weight: 600;*/
/*            color: #212529;*/
/*        }*/

/*        .job-meta {*/
/*            font-size: 14px;*/
/*            color: #6c757d;*/
/*        }*/

        
        /* =========================
           FOOTER
        ========================= */

        footer {
            background: #0f172a;
            color: #fff;
            padding: 55px 0 25px;
        }

        footer h4 {
            font-weight: 800;
        }

        footer h6 {
            font-weight: 700;
            margin-bottom: 18px;
        }

        footer a {
            transition: 0.2s;
        }

        footer a:hover {
            color: #fff !important;
            padding-left: 4px;
        }

/*Login*/
        .login-wrapper {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 15px;
        }

        .login-card {
            width: 100%;
            max-width: 610px;
            background: #fff;
            border-radius: 15px;
            padding: 35px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        }

        .login-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: #e7f0ff;
            color: #0d6efd;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            margin: 0 auto 20px;
        }

        .form-control {
            padding: 12px;
        }
 

        Registration 
        .register-body {
            background: #f5f6fa;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .register-card {
            width: 100%;
            max-width: 550px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.08);
            padding: 35px;
        }

        .register-title {
            font-weight: 700;
            margin-bottom: 5px;
        }

        .register-subtitle {
            color: #777;
            margin-bottom: 25px;
        }

        .form-label {
            font-weight: 600;
        }

        .btn-register {
            width: 100%;
            padding: 11px;
            font-weight: 600;
            background: linear-gradient(135deg, #09215d, #084298);
        }

        .login-link {
            text-align: center;
            margin-top: 20px;
        }

/* =====================================================*/
/*           SIDEBAR*/
/*        ===================================================== */

        .sidebar {

            position: fixed;

            top: 0;
            left: 0;

            width: 250px;
            height: 100vh;

            background: #111827;

            color: #fff;

            z-index: 1000;

            overflow-y: auto;
        }


        .sidebar-logo {

            height: 70px;

            display: flex;

            align-items: center;

            padding: 0 22px;

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


        .sidebar-logo i {

            font-size: 28px;

            margin-right: 10px;

            color: #60a5fa;
        }


        .sidebar-logo span {

            font-size: 21px;

            font-weight: 700;
        }


        .sidebar-menu {
            background: linear-gradient(135deg, #09215d, #084298);
            padding: 20px 12px;
        }


        .menu-title {

            color: #9ca3af;

            font-size: 11px;

            text-transform: uppercase;

            font-weight: 700;

            padding: 10px 12px;

            letter-spacing: 1px;
        }


        .sidebar-menu a {

            display: flex;

            align-items: center;

            gap: 12px;

            text-decoration: none;

            color: #d1d5db;

            padding: 12px 14px;

            margin-bottom: 5px;

            border-radius: 8px;

            font-size: 14px;

            transition: 0.2s;
        }


        .sidebar-menu a i {

            font-size: 18px;

            width: 22px;
        }


        .sidebar-menu a:hover {

            background:#2563eb70;

            color: #fff;
        }


        .sidebar-menu a.active {

            background: #2563eb;

            color: #fff;
        }


        .logout-link {

            color: #fca5a5 !important;
        }


        .logout-link:hover {

            background: #7f1d1d !important;

            color: #fff !important;
        }

.profile-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.08);
        }
 
        .profile-icon {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: #fff;
            color: #dc3545;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            font-size: 40px;
        }

        .profile-body {
            padding: 35px;
        }

        .form-label {
            font-weight: 600;
        }

        .btn-update {
            background: linear-gradient(135deg, #09215d, #084298);
            border: none;
            padding: 10px 25px;
        }

        .btn-update:hover {
            background: #bb2d3b;
        }

        .role-badge {
            display: inline-block;
            background: rgba(255,255,255,0.2);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
        }


/*Add Job*/
 .job-card {
                border: none;
                border-radius: 15px;
                box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
            }
    
            .job-header {
                background: linear-gradient(135deg, #dc3545, #b02a37);
                color: #fff;
                padding: 25px 30px;
                border-radius: 15px 15px 0 0;
            }
    
            .job-body {
                padding: 30px;
            }
    
            .section-title {
                font-size: 18px;
                font-weight: 600;
                color: #333;
                border-bottom: 1px solid #eee;
                padding-bottom: 10px;
                margin-bottom: 20px;
            }
    
            .form-label {
                font-weight: 600;
            }
    
            .required {
                color: #dc3545;
            }
    
            textarea {
                min-height: 130px;
                resize: vertical;
            }
    
            .btn-save {
                background: linear-gradient(135deg, #09215d, #084298);
                border: none;
                padding: 10px 25px;
            }
    
            .btn-save:hover {
                background: #084298;
            }
            
            
        /*Manage Job*/    
        
        .page-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.07);
        }

        .page-header {
            background: linear-gradient(135deg, #09215d, #084298); 
            color: #fff;
            padding: 22px 25px;
            border-radius: 15px 15px 0 0;
        }

        .table th {
            background: #f8f9fa;
            white-space: nowrap;
        }

        .table td {
            vertical-align: middle;
        }

        .job-title {
            font-weight: 600;
            color: #333;
        }

        .job-description {
            max-width: 280px;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;
        }

        .badge-active {
            background: #198754;
        }

        .badge-inactive {
            background: #6c757d;
        }

        .action-btn {
            width: 35px;
            height: 35px;

            display: inline-flex;

            align-items: center;

            justify-content: center;
        }

        .filter-card {
            background: #f8f9fa;

            border: 1px solid #eee;

            border-radius: 10px;

            padding: 15px;
        }
        
        /*End MAnage*/
        /*End Job*/    
        /* =====================================================*/
        /*   MAIN AREA*/
        /*===================================================== */

        /*.main-content {*/

        /*    margin-left: 250px;*/

        /*    min-height: 100vh;*/
        /*}*/


        /* =====================================================*/
        /*   TOPBAR*/
        /*===================================================== */

        .topbar {

            height: 70px;

            background: #fff;

            border-bottom: 1px solid #e5e7eb;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 0 30px;

            position: sticky;

            top: 0;

            z-index: 900;
        }


        .topbar-title {

            font-size: 20px;

            font-weight: 700;

            color: #111827;
        }


        .admin-profile {

            display: flex;

            align-items: center;

            gap: 10px;
        }


        .admin-avatar {

            width: 40px;

            height: 40px;

            border-radius: 50%;

            background: #2563eb;

            color: #fff;

            display: flex;

            align-items: center;

            justify-content: center;

            font-weight: 700;
        }


        .admin-info {

            line-height: 1.2;
        }


        .admin-info strong {

            font-size: 14px;
        }


        .admin-info small {

            color: #6b7280;

            font-size: 12px;
        }


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

        .content {

            padding: 30px;
        }


        .welcome-box {

            background: linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            );

            color: #fff;

            border-radius: 14px;

            padding: 25px;

            margin-bottom: 25px;
        }


        .welcome-box h3 {

            margin-bottom: 6px;

            font-weight: 700;
        }


        .welcome-box p {

            margin: 0;

            opacity: 0.9;
        }


         =====================================================
           DASHBOARD CARDS
        ===================================================== 

        .dashboard-card {

            background: #fff;

            border-radius: 12px;

            padding: 20px;

            border: 1px solid #e5e7eb;

            height: 100%;

            transition: 0.2s;
        }


        .dashboard-card:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 20px rgba(0,0,0,0.06);
        }


        .card-icon {

            width: 50px;

            height: 50px;

            border-radius: 10px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 23px;

            margin-bottom: 15px;
        }


        .icon-blue {

            background: #dbeafe;

            color: #2563eb;
        }


        .icon-green {

            background: #dcfce7;

            color: #16a34a;
        }


        .icon-orange {

            background: #ffedd5;

            color: #ea580c;
        }


        .icon-purple {

            background: #f3e8ff;

            color: #9333ea;
        }


        .icon-red {

            background: #fee2e2;

            color: #dc2626;
        }


        .icon-cyan {

            background: #cffafe;

            color: #0891b2;
        }


        .card-number {

            font-size: 28px;

            font-weight: 700;

            color: #111827;
        }


        .card-label {

            color: #6b7280;

            font-size: 14px;

            margin-top: 2px;
        }


        /* =====================================================*/
        /*   TABLE CARDS*/
        /*===================================================== */

        .section-card {

            background: #fff;

            border: 1px solid #e5e7eb;

            border-radius: 12px;

            overflow: hidden;
        }


        .section-header {

            padding: 18px 20px;

            border-bottom: 1px solid #e5e7eb;

            display: flex;

            justify-content: space-between;

            align-items: center;
        }


        .section-header h5 {

            margin: 0;

            font-weight: 700;
        }


        .table {

            margin-bottom: 0;
        }


        .table th {

            background: #f9fafb;

            font-size: 12px;

            text-transform: uppercase;

            color: #6b7280;

            white-space: nowrap;
        }


        .table td {

            vertical-align: middle;

            font-size: 13px;
        }


        /* =====================================================*/
        /*   RESPONSIVE*/
        /*===================================================== */
        
        @media (max-width: 576px) {
            .navbar-brand img{
               width: 200px; 
            }
    .hero-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px;
    }

    .hero-buttons .btn {
        flex: 1 1 0;
        white-space: nowrap;
        font-size: 14px;
        
    }

    .hero-buttons .btn i {
        margin-right: 4px !important;
    }
}

        @media (max-width: 991px) {

            .sidebar {

                width: 220px;
            }

            .main-content {

                margin-left: 220px;
            }

        }


        @media (max-width: 767px) {

            .sidebar {

                position: relative;

                width: 100%;

                height: auto;
            }

            .main-content {

                margin-left: 0;
            }

            .topbar {

                position: relative;

                padding: 0 15px;
            }

            .content {

                padding: 15px;
            }

        }