/* Color Variables */
:root {
    --main-color: #5d67b9;        /* Base (your #6c76c7 darkened 10%) */
    --main-color-light: #4a54a6;  /* Light variant (darker for better contrast) */
    --main-color-dark: #2a3270;   /* Rich dark variant */
    
    /* Transparency variants (adjusted to new base) */
    --main-color-10: rgba(93, 103, 185, 0.1);
    --main-color-20: rgba(83, 93, 175, 0.2);
    --main-color-50: rgba(74, 84, 166, 0.5);
  
    /* State colors (for buttons/hover effects) */
    --main-color-hover: #4e58a0;    /* -15% lightness */
    --main-color-active: #414b8d;   /* -25% lightness */
    --main-color-disabled: #7d87c9; /* +15% lightness */
    
    --bs-success: #28a745; /* Keep or change this to your preferred success color */
    --bs-success-rgb: 40, 167, 69;
    
    /* Text/bg/border variants */
    --bs-success-text-emphasis: #19692c;
    --bs-success-bg-subtle: #d4edda;
    --bs-success-border-subtle: #c3e6cb;
    
    /* Button variants */
    --bs-btn-success-color: #fff;
    --bs-btn-success-bg: var(--bs-success);
    --bs-btn-success-border-color: var(--bs-success);
    --bs-btn-success-hover-color: #fff;
    --bs-btn-success-hover-bg: #218838;
    --bs-btn-success-hover-border-color: #1e7e34;
    --bs-btn-success-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-success-active-color: #fff;
    --bs-btn-success-active-bg: #1e7e34;
    --bs-btn-success-active-border-color: #1c7430;
    --bs-btn-success-disabled-color: #fff;
    --bs-btn-success-disabled-bg: var(--bs-success);
    --bs-btn-success-disabled-border-color: var(--bs-success);
    
    /* Alert variants */
    --bs-alert-success-color: #0f5132;
    --bs-alert-success-bg: #d1e7dd;
    --bs-alert-success-border-color: #badbcc;
    --bs-alert-success-link-color: #0c4128;
    
    /* Badge variants */
    --bs-badge-success-color: #fff;
    --bs-badge-success-bg: var(--bs-success);
    
    /* Form validation */
    --bs-form-valid-color: var(--bs-success);
    --bs-form-valid-border-color: var(--bs-success);
    --bs-form-valid-feedback-color: var(--bs-success);
    --bs-form-valid-feedback-bg: var(--bs-success-bg-subtle);

    
    /* Base warning color */
    --bs-warning: #f49d3c;
    --bs-warning-rgb: 244, 157, 60;

    /* Text colors */
    --bs-warning-text-emphasis: #c47e30;
    --bs-warning-bg-subtle: #fef1e3;
    --bs-warning-border-subtle: #fde3c7;

    /* Button variants */
    --bs-btn-warning-color: #000;
    --bs-btn-warning-bg: #f49d3c;
    --bs-btn-warning-border-color: #f49d3c;
    --bs-btn-warning-hover-color: #000;
    --bs-btn-warning-hover-bg: #e08d2c;
    --bs-btn-warning-hover-border-color: #d58528;
    --bs-btn-warning-focus-shadow-rgb: 244, 157, 60;
    --bs-btn-warning-active-color: #000;
    --bs-btn-warning-active-bg: #d58528;
    --bs-btn-warning-active-border-color: #c97d24;
    --bs-btn-warning-disabled-color: #000;
    --bs-btn-warning-disabled-bg: #f49d3c;
    --bs-btn-warning-disabled-border-color: #f49d3c;

    /* Alert variants */
    --bs-alert-warning-color: #66421c;
    --bs-alert-warning-bg: #fef1e3;
    --bs-alert-warning-border-color: #fde3c7;
    --bs-alert-warning-link-color: #533519;

    /* Badge variants */
    --bs-badge-warning-color: #000;
    --bs-badge-warning-bg: #f49d3c;
    --primary-color: #4e73df;
    --secondary-color: #f8f9fc;
    --accent-color: #2e59d9;

    --bs-danger: #dc3545;
    --bs-danger-rgb: 220, 53, 69;

    /* You can also define your own shades if needed: */
    --bs-danger-hover-bg: #c82333; /* hover ~10% darker */
    --bs-danger-hover-border: #bd2130; /* border on hover */
    --bs-danger-active-bg: #bd2130; /* active ~15% darker */
    --bs-danger-active-border: #b21f2d; /* active border */
    }

    .btn-danger {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--bs-danger); /* default #dc3545 */
        --bs-btn-border-color: var(--bs-danger);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #c82333; /* ~10% darker */
        --bs-btn-hover-border-color: #bd2130; /* ~12% darker */
        --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: #bd2130; /* ~15% darker */
        --bs-btn-active-border-color: #b21f2d; /* ~18% darker */
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: var(--bs-danger);
        --bs-btn-disabled-border-color: var(--bs-danger);
    }
    
    .btn-outline-danger {
        --bs-btn-color: var(--bs-danger); /* #dc3545 */
        --bs-btn-border-color: var(--bs-danger);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--bs-danger);
        --bs-btn-hover-border-color: var(--bs-danger);
        --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--bs-danger);
        --bs-btn-active-border-color: var(--bs-danger);
        --bs-btn-disabled-color: var(--bs-danger);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--bs-danger);
        --bs-gradient: none;
    }

    .btn-success {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--bs-success);
        --bs-btn-border-color: var(--bs-success);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #218838; /* 10% darker */
        --bs-btn-hover-border-color: #1e7e34; /* 12% darker */
        --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: #1e7e34; /* 15% darker */
        --bs-btn-active-border-color: #1c7430; /* 18% darker */
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: var(--bs-success);
        --bs-btn-disabled-border-color: var(--bs-success);
    }
      /* Outline Success Button */
    .btn-outline-success {
        --bs-btn-color: var(--bs-success);
        --bs-btn-border-color: var(--bs-success);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--bs-success);
        --bs-btn-hover-border-color: var(--bs-success);
        --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--bs-success);
        --bs-btn-active-border-color: var(--bs-success);
        --bs-btn-disabled-color: var(--bs-success);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--bs-success);
        --bs-gradient: none;
    }

    .btn-warning {
        --bs-btn-color: #000;
        --bs-btn-bg: var(--bs-warning);
        --bs-btn-border-color: var(--bs-warning);
        --bs-btn-hover-color: #000;
        --bs-btn-hover-bg: #e08d2c; /* 10% darker */
        --bs-btn-hover-border-color: #d58528; /* 12% darker */
        --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
        --bs-btn-active-color: #000;
        --bs-btn-active-bg: #d58528; /* 15% darker */
        --bs-btn-active-border-color: #c97d24; /* 18% darker */
        --bs-btn-disabled-color: #000;
        --bs-btn-disabled-bg: var(--bs-warning);
        --bs-btn-disabled-border-color: var(--bs-warning);
    }
      
    /* Outline Warning Button */
    .btn-outline-warning {
        --bs-btn-color: var(--bs-warning);
        --bs-btn-border-color: var(--bs-warning);
        --bs-btn-hover-color: #000;
        --bs-btn-hover-bg: var(--bs-warning);
        --bs-btn-hover-border-color: var(--bs-warning);
        --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
        --bs-btn-active-color: #000;
        --bs-btn-active-bg: var(--bs-warning);
        --bs-btn-active-border-color: var(--bs-warning);
        --bs-btn-disabled-color: var(--bs-warning);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--bs-warning);
        --bs-gradient: none;
    }


    /* Background Colors */
    .main-bg {
        background-color: var(--main-color) !important;
    }
    .main-bg-light {
        background-color: var(--main-color-light) !important;
    }
    .main-bg-dark {
        background-color: var(--main-color-dark) !important;
    }
    .main-bg-gradient {
        background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-light) 100%) !important;
    }

    /* Text Colors */
    .main-text {
        color: var(--main-color) !important;
    }
    .main-text-light {
        color: var(--main-color-light) !important;
    }
    .main-text-dark {
        color: var(--main-color-dark) !important;
    }

    /* Border Colors */
    .main-border {
        border-color: var(--main-color) !important;
    }
    .main-border-light {
        border-color: var(--main-color-light) !important;
    }
    .main-border-dark {
        border-color: var(--main-color-dark) !important;
    }

    /* Button Styles */
    .btn-main {
        background-color: var(--main-color);
        border-color: var(--main-color);
        color: white;
    }
    .btn-main:hover {
        background-color: var(--main-color-light);
        border-color: var(--main-color-light);
        color: white;
    }

    .hover-main:hover {
       color: var(--main-color-light);
    }
    .btn-outline-main {
        color: var(--main-color);
        border-color: var(--main-color) !important;
    }
    .btn:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon):not(.btn-hover-outline)
    {
        border-color: var(--main-color) !important;
        border: 1px solid var(--main-color);
    }
    .btn-outline-main:hover {
        background-color: var(--main-color);
        color: white;
    }

    .btn-main:disabled,
    .btn-main.disabled {
        background-color: var(--main-color-disabled);
        border-color: var(--main-color-disabled);
        cursor: not-allowed;
        opacity: 0.8;
        color: white;
    }
    /* Alert Styles */
    .alert-main {
        background-color: var(--main-color-10);
        border-color: var(--main-color-20);
        color: var(--main-color-dark);
    }

    /* Badge Styles */
    .badge-main {
        background-color: var(--main-color);
        color: white;
        font-weight: 500;
    }

    /* Utility Classes */
    .main-shadow {
        box-shadow: 0 0.5rem 1rem rgba(67, 77, 171, 0.15) !important;
    }
    .main-shadow-sm {
        box-shadow: 0 0.125rem 0.25rem rgba(67, 77, 171, 0.075) !important;
    }
    .main-shadow-lg {
        box-shadow: 0 1rem 3rem rgba(67, 77, 171, 0.175) !important;
    }

    /* Hover Effects */
    .hover-main:hover {
        color: var(--main-color) !important;
    }

    .hover-main-bg:hover {
        background-color: var(--main-color) !important;
        color: white !important;
    }

    /* Focus Styles */
    .main-focus:focus {
        border-color: var(--main-color-light);
        box-shadow: 0 0 0 0.25rem var(--main-color-20);
    }

    .pagination .page-link {
        color: white;
    }

    .page-link {
        background-color: var(--main-color);
        color: white;
        border-color: var(--main-color);
    }
    
    .page-link:hover {
        background-color: var(--main-color-light);
        border-color: var(--main-color-light);
    }
    
    .page-item.disabled .page-link {
        background-color: var(--main-color-disabled);
        border-color: var(--main-color-disabled);
        color: white;
        opacity: 0.65;
    }
    
    body {
        margin: 0;
        font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.6;
        color: #676766;
        text-align: left;
        background-color: #fff;
    }
    .job-banner {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .green-gradient {
        background-image: linear-gradient(90deg, #57bbc8, #37b4c4 43%, #2c5e64);
    }
    .custom-list-item-card {
        border-radius: 20px;
        margin-bottom: 1rem;
        width: 100%;
    }
    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(0, 24, 53, .125);
        border-radius: .25rem;
        margin-bottom: 16px;
    }
    .custom-list-item-card {
        box-shadow: 0 0 30px rgba(0, 0, 0, .1607843137254902);
    }
    .custom-list-item-card.offer-list-item:hover {
        transform: scale(1.04);
    }
    .offer-detail header {
        background-color: #f8f9fa;
        border-radius: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, .1607843137254902);
    }
    .offer-detail header.job-offer-header {
        height: 100%;
        border: 1px solid #51adb9;
        box-shadow: none;
    }
    .offer-detail .btn-job-apply {
        background-color: #51adb9;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
    }

    .btn-max-rounded, .subcategories_list>button {
        border-radius: 500px;
    }

    /* Header Styles */
    header {
        transition: all 0.3s ease;
    }

    .nav-link {
        transition: all 0.2s ease;
        position: relative;
        font-size: medium
    }

    .nav-link:hover {
        color: #7A84D6 !important;
    }

    .nav-link:after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 50%;
        background-color: #7A84D6;
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .nav-link:hover:after {
        width: 50%;
    }

    .dropdown-item {
        transition: all 0.2s ease;
    }

    .dropdown-item:hover {
        background-color: rgba(67, 77, 171, 0.1);
    }

    /* Active state for nav links */
    .nav-link.text-primary {
        font-weight: 600 !important;
    }

    .nav-link.text-primary:after {
        width: 50%;
        background-color: #7A84D6;
    }

    /* home page css */
    .hero-section {
        padding: 50px;
        position: relative;
        background-color: #bed0e2;
    }

    .search-card {
        height: 545px; /* Fixed height for the card */
        overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
    }
    
    .search-step {
        min-height: 400px; /* Minimum height for each step */
        display: flex;
        flex-direction: column;
    }
    
    /* Custom scrollbar for the card */
    .search-card::-webkit-scrollbar {
        width: 8px;
    }
    
    .search-card::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .search-card::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }
    
    .search-card::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    .search-progress {
        display: flex;
        justify-content: space-between;
        position: relative;
        padding: 0 20px;
    }
    
    .search-progress:before {
        content: '';
        position: absolute;
        top: 15px;
        left: 0;
        right: 0;
        height: 2px;
        background: #e9ecef;
        z-index: 0;
    }
    
    .progress-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 1;
    }
    
    .progress-step span {
        width: 30px;
        height: 30px;
        background: #e9ecef;
        color: #6c757d;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-bottom: 5px;
        transition: all 0.3s ease;
    }
    
    .progress-step small {
        font-size: 0.7rem;
        color: #6c757d;
    }
    
    .progress-step.active span {
        background: #7A84D6;
        color: white;
    }
    
    .progress-step.active small {
        color: #7A84D6;
        font-weight: bold;
    }
    
    .search-step {
        display: none;
    }
    
    .search-step.active {
        display: block;
        animation: fadeIn 0.3s ease;
    }
    
    .btn-category {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 10px !important;
        transition: all 0.3s ease;
        width: 100% !important;
    }
    
    .btn-category:hover{
        border-color: #7A84D6;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(67, 77, 171, 0.1);
    }

    .subcategory-btn {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 10px !important;
        transition: all 0.3s ease;
        width: 100% !important;
    }
    
    .subcategory-btn:hover{
        border-color: #7A84D6;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(67, 77, 171, 0.1);
    }
    
    
    .category-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-image-container {
        position: relative;
        height: 100%;
        padding: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .floating-animation {
        animation: float 6s ease-in-out infinite;
        position: relative;
        z-index: 1; /* Ensure the image stays above the container but below badges */
        height: auto;
    }

    .floating-badge {
        position: absolute;
        color: white;
        padding: 10px 15px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        animation: float 4s ease-in-out infinite;
        z-index: 2; /* Ensure badges stay above the image */
    }

    .floating-badge:first-of-type {
        top: 20%;
        left: 0;
        animation-delay: 0.5s;
    }

    .floating-badge:last-of-type {
        bottom: 20%;
        right: 0;
        animation-delay: 1s;
    }

    .badge-icon {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0px); }
    }

    .service-card {
        border-radius: 16px;
        transition: all 0.3s ease;
        background: white;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        cursor: pointer;
    }
    
    .hover-scale:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
    
    .icon-bg {
        width: 70px;
        height: 70px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .city-card {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        aspect-ratio: 1/1;
        background: #fff;
    }
    
    .city-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    }
    
    .city-image {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .city-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    .city-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    }
    
    .city-info {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1.5rem;
        color: white;
        z-index: 2;
    }
    
    .city-info h3 {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    
    .city-link {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .city-info {
            padding: 1rem;
        }
        
        .city-info h3 {
            font-size: 1rem;
        }
    }

    /* search page */
    
    .job-banner {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
        height: 500px !important;
        display: flex;
        align-items: center;
        position: relative;
    }
    
    .job-banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
        opacity: 0.15;
    }
    
    .search-form {
        background: white;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        position: relative;
        z-index: 1;
    }
    
    .search-form .form-control, 
    .search-form .select2-selection {
        height: 50px;
        border-radius: 8px !important;
        border: 1px solid #e0e0e0;
    }
    
    .search-form .btn-primary {
        height: 50px;
        border-radius: 8px;
        font-weight: 600;
        background: var(--primary-color);
        border: none;
        transition: all 0.3s;
    }
    
    .search-form .btn-primary:hover {
        background: var(--accent-color);
        transform: translateY(-2px);
    }
    
    .filter-sidebar {
        background: white;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        height: 100%;
    }
    
    .filter-sidebar h5 {
        color: var(--text-dark);
        font-weight: 600;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--secondary-color);
    }
    
    .pagination .page-item.active .page-link {
        background: var(--primary-color);
        border-color: var(--primary-color);
    }
    
    /* .pagination .page-link {
        color: var(--primary-color);
    } */

    .job-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid #f0f0f0;
    }
    
    .job-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }
    
    .job-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 1.5rem 1.5rem 0;
    }
    
    .company-logo {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        border: 1px solid #f5f5f5;
        overflow: hidden;
    }
    
    .logo-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .job-meta {
        display: flex;
        gap: 0.5rem;
    }
    
    .post-time {
        font-size: 0.8rem;
        color: #64748b;
    }
    
    .job-type {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 20px;
        font-weight: 500;
    }
    
    .part-time {
        background-color: #e0f2fe;
        color: #0369a1;
    }
    
    .full-time {
        background-color: #dcfce7;
        color: #166534;
    }
    
    .job-card-body {
        padding: 1.5rem;
    }
    
    .job-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #1e293b;
    }
    
    .job-title a {
        color: inherit;
        text-decoration: none;
        transition: color 0.2s;
    }
    
    .job-title a:hover {
        color: #3b82f6;
    }
    
    .company-name {
        color: #64748b;
        margin-bottom: 1rem;
        font-size: 0.95rem;
    }
    
    .job-location {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #64748b;
        margin-bottom: 1rem;
        font-size: 0.9rem;
    }
    
    .job-description {
        color: #475569;
        margin-bottom: 1.5rem;
        line-height: 1.5;
        font-size: 0.95rem;
    }
    
    .job-tags {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .contract-type, .remote-tag {
        font-size: 0.75rem;
        padding: 0.35rem 0.75rem;
        border-radius: 20px;
        font-weight: 500;
    }
    
    .contract-type {
        background-color: #ede9fe;
        color: #7c3aed;
    }
    
    .remote-tag {
        background-color: #f0fdf4;
        color: #16a34a;
        border: 1px solid #bbf7d0;
    }
    
    .job-card-footer {
        display: flex;
        padding: 0 1.5rem 1.5rem;
        gap: 1rem;
    }
    
    .no-results {
        text-align: center;
        padding: 3rem 1rem;
    }
    
    .no-results-icon {
        margin-bottom: 1.5rem;
        color: #cbd5e1;
    }
    
    .no-results h3 {
        font-size: 1.5rem;
        color: #1e293b;
        margin-bottom: 0.5rem;
    }
    
    .no-results p {
        color: #64748b;
        margin-bottom: 1.5rem;
    }
    
    .modern-pagination {
        margin-top: 3rem;
    }
    
    .animate-bounce {
        animation: bounce 2s infinite;
    }
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .job-card-footer {
            flex-direction: column;
        }
        
        .job-card-header {
            flex-direction: column;
            gap: 1rem;
        }
        
        .job-meta {
            align-self: flex-end;
        }
    }

    .no-arrow::after {
        display: none !important;
    }
    
    /* job offer details */
    .offer-hero {
        color: white;
        padding: 3rem 0;
        margin-bottom: 2rem;
    }
    
    .company-logo-container {
        width: 120px;
        height: 120px;
        border: 3px solid rgba(255,255,255,0.2);
        border-radius: 50%;
        padding: 5px;
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(5px);
    }
    
    .candidat-logo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .job-description-content, .profile-content {
        line-height: 1.8;
    }
    
    .job-description-content ul, .profile-content ul {
        padding-left: 1.5rem;
    }
    
    .job-description-content li, .profile-content li {
        margin-bottom: 0.5rem;
    }
    
    .icon-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .bg-primary-light {
        background-color: rgba(13, 110, 253, 0.1);
    }
    
    .bg-gradient-alert {
        background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
    }
    
    .sticky-top {
        z-index: 1;
    }
    
    @media (max-width: 768px) {
        .offer-hero {
            padding: 2rem 0;
        }
        
        .company-logo-container {
            width: 80px;
            height: 80px;
            margin-bottom: 1rem;
        }
    }

    .job-meta-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .meta-item {
        padding: 0.75rem;
        border-radius: 8px;
        background: rgba(0,0,0,0.02);
    }
    
    .meta-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    @media (max-width: 576px) {
        .meta-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }
        
        .meta-item p.text-end {
            text-align: left !important;
            margin-left: 3rem; /* Align with text */
        }
    }


    /* /gest condidature */
    .application-container {
        background-color: #f5f7ff;
        min-height: 100vh;
    }
    
    .application-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 3rem 0;
        margin-bottom: 2rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .application-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        overflow: hidden;
        transition: transform 0.3s ease;
    }
    
    .application-card:hover {
        transform: translateY(-5px);
    }
    
    .card-header {
        color: white;
        padding: 1.5rem;
    }
    
    .form-section {
        padding: 2rem;
    }
    
    .form-label {
        font-weight: 600;
        color: var(--dark-text);
        margin-bottom: 0.5rem;
    }
    
    .form-control, .form-select {
        border-radius: 8px;
        padding: 0.75rem 1rem;
        border: 1px solid #e0e0e0;
        transition: all 0.3s;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.15);
    }
    
    .btn-apply {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        border: none;
        padding: 0.75rem 2rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        transition: all 0.3s;
    }
    
    .btn-apply:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
    }
    
    .offer-card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .offer-header {
        display: flex;
        align-items: center;
        padding: 1.5rem;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    .offer-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid white;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .offer-content {
        padding: 1.5rem;
        flex-grow: 1;
    }
    
    .offer-title {
        color: var(--primary-color);
        margin-bottom: 1.5rem;
    }
    
    .offer-description {
        background-color: var(--light-bg);
        padding: 1.5rem;
        border-radius: 8px;
    }
    
    .offer-details {
        background-color: var(--light-bg);
        padding: 1.5rem;
        border-radius: 8px;
    }
    
    .detail-item {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    .detail-item:last-child {
        border-bottom: none;
    }
    
    .detail-label {
        font-weight: 600;
        color: var(--dark-text);
    }
    
    .detail-value {
        color: var(--main-color);
        font-weight: 500;
    }
    
    .file-upload {
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 100%;
    }
    
    .file-upload-input {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    
    .file-upload-label {
        display: block;
        padding: 1rem;
        background-color: white;
        border: 1px dashed #ddd;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .file-upload-label:hover {
        border-color: var(--accent-color);
        background-color: rgba(76, 201, 240, 0.05);
    }
    
    .file-upload-icon {
        font-size: 1.5rem;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }
    
    @media (max-width: 992px) {
        .offer-card {
            margin-top: 2rem;
        }
    }


    /* blg css */
    .blog-card {
        transition: all 0.3s ease;
        border-radius: 12px;
    }
    
    .blog-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .shadow-hover {
        transition: box-shadow 0.3s ease;
    }
    
    .shadow-hover:hover {
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    }
    
    .hover-lift {
        transition: all 0.2s ease;
    }
    
    .hover-lift:hover {
        transform: translateY(-2px);
        background-color: #f8f9fa !important;
    }
    
    .input-group-glass {
        background: rgba(255,255,255,0.8);
        backdrop-filter: blur(5px);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .input-group-glass .form-control {
        background: transparent;
        border: 1px solid rgba(0,0,0,0.1);
    }

    .bg-gradient-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .duration-500 {
        transition-duration: 500ms;
    }
    
    .rounded-pill {
        border-radius: 50rem !important;
    }

    /* prestation  */
    .prestation-hero {
        padding: 6rem 2rem;
        color: white;
        position: relative;
    }
    
    .profile-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid white;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .prestation-description {
        line-height: 1.8;
        font-size: 1.05rem;
        color: #555;
    }
    
    .skill-badge {
        background: #f0f7ff;
        color: #0066cc;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 500;
        border: 1px solid #d0e3ff;
    }
    
    .degree-badge {
        background: #fff0f6;
        color: #cc0066;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 500;
        border: 1px solid #ffd0e5;
    }
    
    .education-card {
        background: #f9f9f9;
        transition: all 0.3s ease;
        border: 1px solid #eee;
    }
    
    .education-card:hover {
        background: #f0f0f0;
        transform: translateY(-3px);
    }
    
    .education-icon {
        width: 40px;
        height: 40px;
        background: #0066cc;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .gallery-item {
        overflow: hidden;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    
    .gallery-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .gallery-item img {
        transition: transform 0.5s ease;
    }
    
    .gallery-item:hover img {
        transform: scale(1.05);
    }