.bg-gray {
    background-color: rgb(230, 229, 229);
    width: 100%;
    margin: 0; /* Removes any default container padding */
    padding: 20px 0; /* Optional padding for content */
  }
  .card-image {
    object-fit: cover; /* Ensures the image covers the specified dimensions */
    width: 100%; /* Makes sure the image spans the full width of the card */
    height: 200px; /* Fixed height for uniform card sizes */
}
.job-card.selected {
    background-color: #f8f6f2; /* Light blue background */
    border-left: 4px solid #FFCC11; /* Blue left border */
    padding-left: 10px; /* Add extra left padding */
}
.job-list {
    max-height: 600px; /* Adjust the height as needed */
    overflow-y: auto;  /* Enable vertical scrolling */
}
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-height: 400px; /* تحديد ارتفاع البطاقات */
    overflow: hidden; /* إخفاء المحتوى الزائد */
    border: 1px solid #ddd;
    border-radius: 8px;
    /* padding: 10px; */
}
.card-industry {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-height: 600px; /* تحديد ارتفاع البطاقات */
    overflow: hidden; /* إخفاء المحتوى الزائد */
    border: 1px solid #ddd;
    border-radius: 8px;
    /* padding: 10px; */
}

.card-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* عدد الأسطر المسموح بها */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis; /* لإضافة النقاط الثلاث */
    height: 6em; /* (عدد الأسطر) × (ارتفاع السطر) */
    line-height: 1.5em; /* ارتفاع السطر */
    margin-bottom: 10px;
}
.card-text-industry {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6; /* Increased from 4 to 6 lines */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis; /* Adds ellipsis (...) */
    height: 9em; /* 6 lines × 1.5em per line */
    line-height: 1.5em;
    margin-bottom: 10px;
}
.btn-outline-theme,
.btn-outline-theme:focus {
  color: var(--contrast-color);
  font-size: 14px;
  padding: 8px 30px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
  border: 2px solid var(--accent-color);
}
.btn-outline-theme:hover,
.btn-outline-theme:focus:hover {
  color: var(--default-color);
  background: var(--accent-color);
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-button-next,
.swiper-button-prev {
    background: rgba(128, 128, 128, 0.5); /* خلفية رمادية شفافة */
    border-radius: 50%; /* يجعل الأزرار دائرية */
    width: 35px; /* عرض الزر */
    height: 35px; /* ارتفاع الزر */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; /* لون السهم */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* ظل خفيف */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* تأثير عند التمرير */
}

/* تأثير عند التمرير فوق الأزرار */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.1); /* تكبير الزر قليلاً */
    background: rgba(128, 128, 128, 0.7); /* جعل الخلفية أقل شفافية عند التمرير */
}

/* حجم السهم داخل الزر */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 14px; /* تصغير حجم السهم */
    color: white; /* لون السهم */
}

/* ضبط موقع الأزرار */
.swiper-button-next {
    right: 10px; /* تحريك الزر لليمين */
}

.swiper-button-prev {
    left: 10px; /* تحريك الزر لليسار */
}