/* style.css */

  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }

  main {
    min-height: 79vh !important;

  }
  .bg-red {
    background-color: var(--bs-primary) !important;
  }
  
  .text-primary {
    color: var(--bs-primary) !important;
  }
  
  .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
  }
  
  .btn-primary:hover {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }
  
  .accordion-button {
    background-color: var(--bs-light);
    color: var(--text-color);
  }
  
  .card {
    border-color: var(--bs-primary);
  }
  
  .card-title {
    font-size: 1.2rem;
  }
  

    /* General Styles */
    body {
      margin: 0;
      font-family: 'Poppins', sans-serif;
      color: #212529;
    }

    .top-bar {
      font-size: 0.9rem;
    }


    .navbar .nav-link {
      color: white;
      font-weight: 500;
      font-size: 0.95rem;
      margin-right: 15px;
      transition: color 0.3s ease;
    }

    .navbar .nav-link:hover {
      color: var(--bs-secondary);
    }

    /* Search Banner */
    .search-banner {
      position: relative;
      background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://www.emploi.ma/sites/all/themes/africawork3/img/homeSlider/wa/8.jpg') no-repeat center center / cover;
      min-height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }

    .search-banner h1 {
      font-size: 2.5rem;
      font-weight: 700;
      animation: fadeInDown 1s ease-in-out;
    }

    .search-banner input[type="text"], .search-banner select {
      padding: 10px 15px;
      border-radius: 30px;
      border: 2px solid #ddd;
      width: 100%;
      /*max-width: 300px; */
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .search-banner input[type="text"]:focus, .search-banner select:focus {
      border-color: var(--bs-primary);
      outline: none;
      box-shadow: 0px 4px 8px rgba(0, 74, 173, 0.3);
    }

    .search-banner button {
      padding: 10px 20px;
      border: none;
      font-weight: 600;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .search-banner button:hover {
      background-color: var(--bs-secondary);
    }

    /* Animations */
    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Sidebar */
    .sidebar {
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 10px;
    }

    /* Job Cards */
    .card {
      border: 1px solid #ddd;
      border-radius: 10px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      /* transform: translateY(-5px); */
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    }


    /* Responsive Adjustments */
    @media (max-width: 768px) {
      .search-banner h1 {
        font-size: 1.8rem;
      }

      .search-banner form {
        flex-direction: column;
        align-items: center;
        gap: 15px;
      }

      .navbar .nav-link {
        margin-right: 0;
        margin-bottom: 10px;
      }

      .card {
        margin-bottom: 20px;
      }
    }

    @media (max-width: 576px) {
      .search-banner h1 {
        font-size: 1.5rem;
      }
    }
    /* General Spacing */
    .accordion-item {
      margin-bottom: 10px;
    }
  
    .accordion-button {
      transition: background-color 0.3s ease;
    }
  
    .accordion-button:hover {
      background-color: #f1f1f1;
    }
  
    /* Sidebar */
    .bg-light {
      border: 1px solid #ddd;
    }
  
    /* Job Cards */
    .card {
      transition: transform 0.2s ease, box-shadow 0.3s ease;
    }
  
    .card:hover {
      /* transform: scale(1.02); */
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
  
    /* Pagination */
    .pagination .page-link {
      transition: background-color 0.3s ease, color 0.3s ease;
    }
  
    .pagination .page-link:hover {
      background-color: #ffd700;
      color: #fff;
    }
  
    /* Mobile Layout Adjustments */
    @media (max-width: 768px) {
        .search-section .col-md-3 {
        order: 2;
      }
  
      .search-section .col-md-9 {
        order: 1;
      }
  
      .accordion-button {
        font-size: 0.9rem;
      }
    }

    .card-body h6 {
        font-size: 1rem;
        font-weight: 600;
      }
      
   

      .job-card .card {
        border-radius: 12px;
      }
      
      .job-card .card-body h5 {
        font-size: 1.125rem; /* Slightly larger title for emphasis */
        font-weight: 600;
      }
      
      .job-card .card-body .btn-outline-primary {
        border-radius: 20px; /* Rounded button for elegance */
        font-size: 0.85rem;
      }
      
      .job-card .card-body small {
        font-size: 0.8rem;
      }