body {
            background-color: #f5f5f5;
        }

        h1 {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }

        .input-group .form-control {
            border: none;
            border-right: 1px solid #ddd;
            padding: 15px;
            box-shadow: none;
        }

        .input-group .form-control:last-child {
            border-right: none;
        }

        .input-group .btn {
            padding: 15px 30px;
        }

        .card {
            border: none;
        }

        .card-body {
            padding: 25px;
            position: relative;
        }

        .card-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .text-muted {
            font-size: 14px;
        }

        .badge {
            font-size: 14px;
            padding: 8px 12px;
            border-radius: 5px;
        }

        .shadow-sm {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .btn-info {
            background-color: #ffff;
            color: #000;
            border-radius: 20px;
            font-weight: bold;
        }

        .btn-info:hover {
            background-color: #256a6a;
        }

        .job-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #f5f5f5;
        }

        .bg-success-light {
            background-color: #e9f5f4 !important;
            color: #2c7a7b !important;
        }

        .bg-warning-light {
            background-color: #fff8e5 !important;
            color: #d69e2e !important;
        }

        .text-center {
            text-align: center;
        }

        .rounded-pill {
            border-radius: 50px;
        }

        .border-left {
            border-left: 1px dotted #2c7a7b !important;
            padding-left: 10px;
        }

        /* View Switcher */
        .view-switcher {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 20px;
        }

        .view-switcher .btn {
            margin-left: 10px;
            border-radius: 50px;
            font-size: 16px;
            padding: 8px 12px;
            border: 1px solid #ddd;
        }

        .job-listing {
            display: block;
            transition: transform 0.2s ease;
        }

        .job-listings.grid-view .col-md-6 {
            display: block;
        }

        .job-listings.list-view .col-md-6 {
            display: block;
            width: 100%;
        }

        .job-listing.list-view .card-body {
            display: flex;
            align-items: center;
        }

        .job-listing.list-view .job-icon {
            width: 60px;
            height: 60px;
            margin-right: 15px;
        }

        .job-listing.list-view .card-title {
            font-size: 20px;
        }

        .job-listing.list-view .badge {
            font-size: 16px;
        }

        .job-listing.list-view .btn-info {
            font-size: 14px;
        }
   
        .btn-light.active {
            background-color: #2c7a7b;
            color: white;
        }

        .btn-light.active svg {
            fill: white;
        }

        .btn-light {
            border: 1px solid #ddd;
            /* Default border color */
        }

        .btn-light.active {
            border: 1px solid #2c7a7b;
            /* Border color when active */
        }


        
  .job-header {
               border-bottom: 1px solid #e9ecef;
               padding-bottom: 15px;
               margin-bottom: 15px;
           }

           .job-header img {
               width: 50px;
               height: 50px;
               object-fit: cover;
               border-radius: 50%;
               margin-right: 10px;
           }

           .job-title {
               font-size: 24px;
               font-weight: bold;
           }

           .job-meta {
               display: flex;
               align-items: center;
               margin-top: 10px;
           }

           .job-meta span {
               margin-right: 15px;
               color: #6c757d;
           }

           .job-meta i {
               margin-right: 5px;
           }

           .apply-btn {
               margin-top: 20px;
               text-align: left;

           }

           .job-overview {
               background-color: #EBF5F4;
               padding: 15px;
               border-radius: 20px;
           }

           .job-overview h5 {
               margin-bottom: 15px;
               font-weight: bold;
           }

           .job-overview ul {
               list-style-type: none;
               padding-left: 0;
           }

           .job-overview ul li {
               margin-bottom: 20px;
           }

           .job-overview ul li i {
               color: #28a745;
               margin-right: 5px;
           }

           .related-jobs {
               margin-top: 40px;
           }

           .related-jobs h5 {
               font-weight: bold;
               margin-bottom: 20px;
           }

           .related-job-card {
               border: 1px solid #e9ecef;
               border-radius: 10px;
               margin-bottom: 20px;
               padding: 15px;
               display: flex;
               align-items: center;
           }

           .related-job-card img {
               width: 50px;
               height: 50px;
               object-fit: cover;
               border-radius: 50%;
               margin-right: 15px;
           }

           .related-job-card .job-meta {
               flex-grow: 1;
           }

           .related-job-card .job-meta span {
               margin-right: 10px;
               color: #6c757d;
           }

           .related-job-card .job-meta i {
               margin-right: 5px;
           }

           .related-job-card .job-details-btn {
               margin-left: auto;
           }

           ul {
               list-style: none;
           }

           ul li {
               margin-bottom: 10px;
           }

           .share-job img {
               width: 30px !important;
               margin: 5px;
           }