.job-card {
     position: relative;
     display: flex;
     gap: 6px;
     padding: 15px;
     background: #fff;
     border: 1px solid #e9ecef;
     border-radius: 14px;
     overflow: hidden;
     height: 100%;
     transition: all .35s ease;
 }

 /* Left Border Animation */
 .job-card::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 4px;
     height: 100%;
     background: #28bf55;
     transform: scaleY(0);
     transition: .35s;
 }

 .job-card:hover::before {
     transform: scaleY(1);
 }

 .job-card:hover {
     transform: translateY(-8px);
     border-color: #28bf55;
     box-shadow: 0 15px 35px rgba(40, 191, 85, .15);
 }

 /* Logo */

 .job-logo-box {
     flex: 0 0 60px;
 }

 .job-logo {
     width: 60px;
     height: 60px;
     object-fit: contain;
     background: #fff;
     border: 1px solid #ececec;
     border-radius: 12px;
     padding: 8px;
     transition: .35s;
 }

 .job-card:hover .job-logo {
     transform: rotate(-5deg) scale(1.08);
     border-color: #28bf55;
 }

 /* Content */

 .job-content {
     flex: 1;
     min-width: 0;
 }

 /* Top Row */

 .job-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 10px;
 }

 .job-left {
     flex: 1;
     min-width: 0;
 }

 .job-title {
     font-size: 15px;
     font-weight: 700;
     color: #222;
     margin: 6px 0 4px;
     line-height: 1.35;

     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;

     transition: .3s;
 }

 .job-card:hover .job-title {
     color: #28bf55;
 }

 .salary {
     font-size: 14px;
     font-weight: 700;
     color: #28bf55;
     white-space: nowrap;
 }

 .job-badge {
     display: inline-block;
     padding: 4px 10px;
     border-radius: 20px;
     background: #eefaf2;
     color: #28bf55;
     font-size: 11px;
     font-weight: 600;
 }

 /* Meta */

 .job-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin: 8px 0;
     font-size: 12px;
     color: #666;
 }

 .job-meta span {
     color: #2ab553;
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .job-meta i {
     color: #28bf55;
 }

 /* Skills */

 .skills {
     font-size: 12px;
     color: #666;
     line-height: 1.5;

     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 /* Footer */

 .job-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 12px;
 }

 .apply-btn {
     display: flex;
     align-items: center;
     gap: 4px;
     background: #28bf55;
     color: #fff;
     padding: 3px 15px;
     border-radius: 30px;
     text-decoration: none;
     font-size: 11px;
     font-weight: 600;
     transition: .3s;
 }

 .apply-btn:hover {
     background: #1ca247;
     color: #fff;
 }

 .apply-btn i {
     transition: .3s;
 }

 .apply-btn:hover i {
     transform: translateX(5px);
 }

 .applied-btn {
     padding: 7px 14px;
     background: #eefaf2;
     color: #28bf55;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 600;
 }

 /* Shine Animation */

 .job-card::after {
     content: "";
     position: absolute;
     top: 0;
     left: -120%;
     width: 60%;
     height: 100%;
     background: linear-gradient(120deg,
             transparent,
             rgba(255, 255, 255, .65),
             transparent);
 }

 .job-card:hover::after {
     animation: shine .8s;
 }

 @keyframes shine {
     to {
         left: 140%;
     }
 }

 .pagination {
     gap: 6px;
     margin-top: 5px;
 }

 .pagination .page-item .page-link {
     border: 1px solid #e5e7eb;
     border-radius: 10px;
     min-width: 42px;
     height: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #016652;
     background: #fff;
     font-weight: 600;
     transition: all .3s ease;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
 }

 .pagination .page-item .page-link:hover {
     background: #016652;
     color: #fff;
     border-color: #016652;
 }

 .pagination .page-item.active .page-link {
     background: #016652;
     color: #fff;
     border-color: #016652;
 }

 .pagination .page-item.disabled .page-link {
     opacity: .5;
     cursor: not-allowed;
 }