body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #fafafa;
}

.wrapper-section {
  /* max-width: 1320px; */
  margin: 0 auto;
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  margin-top: 190px;
}

.sidebar {
  width: 406px;
  
}

.sidebar h2 {
  margin-bottom: 20px;
  font-size: 32px;
  line-height: 100%;
  font-weight: 600;
  color: #2E2E2E;
}

.sidebar p {
  font-size: 16px;
  color: #191515;
  margin-bottom: 50px;
  font-weight: 400;
  line-height: 24px;
}

.filter{
  padding: 0 20px;
  background-color: #EEEEEE;
  border-radius: 20px;
}

.filter h2{
  font-weight: 600;
  font-size: 16px;
  color: #191515;
  padding-top: 30px;
  padding-bottom: 10px;
  text-align: center;
  border-bottom: 1px solid #C3BFBF;
}

.filter-group {
  margin-bottom: 20px;
}

.filter-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 400;
  margin-top: 16px;
  color: #191515;
  line-height: 20px;
  font-size: 16px;
}

.filter-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #7070704D;
  border-radius: 24px;
  background: #fff;
  font-weight: 400;
  appearance: none; 
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); 
  background-repeat: no-repeat;
  background-position: right 18px center; 
  background-size: 16px;

}




.job-details .dot {
  padding: 0 4px;
}

html[lang="ar"] .filter-group select {
  background-position: left 18px center;
}

.filter__bttn {
  text-align: end;
}

.filter-button {
  width: 140px;
  padding:0 32px;
  border: none;
  border-radius: 25px;
  background: #666666;
  color: white;
  cursor: pointer;
  margin-top: 16px;
  font-weight: 600;
  font-size: 16px;
  line-height: 48px;
  margin-bottom: 20px;
}

.donot-see h4 {
  font-size: 32px;
  margin-top: 40px;
  line-height:100%;
  font-weight: 600;
  margin-bottom: 20px;
  color: #2E2E2E;
}

.donot-see p{
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;

}

.job-listings {
  flex: 1;
}

.job-listings a:hover {
  text-decoration: none;
  color: none;
}

.job-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid #AAAAAA;
}

.job-card h3 {
  margin: 0 0 10px;
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.job-details {
  font-size: 16px;
  color: #666;
  line-height: 24px;
}

/* pagination style */
.custom-pagination {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 40px 0;
}

.custom-pagination li {
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-pagination li a,
.custom-pagination li span {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #666;
  border-radius: 50%;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  transition: all 0.3s;
}



.custom-pagination li.active span {
  background-color: white;
  color: #666;
  border-color: #666;
}
.custom-pagination li span {
  background-color: white;
  color: #666;
  border-color: #666;
}
/* باقي الأرقام */
.custom-pagination li a {
  background-color: white;
  color: #666;
}

/* عند المرور على الأرقام */
/* .custom-pagination li a:hover {
  background-color: #666;
  color: white;
} */

/* الأسهم */
.custom-pagination li.arrow a,
.custom-pagination li.arrow span {
  background-color: #666;
  color: white;
  border-color: #666;
}

/* الأسهم عند التعطيل */
.custom-pagination li.disabled span {
  background-color: #666;
  color: white;
  border-color: #666;
  cursor: not-allowed;
}




  

@media(max-width:992px) {
  .wrapper-section {
    flex-direction: column;
    gap: 0;
    margin-top: 110px;
  }
  .sidebar {
    width: 100%;
  }
}