.title-event {
  color: var(--black-color);
  font-size: 64px;
  font-weight: 500;
  line-height: 76.8px;
  margin: 0;
  padding-bottom: 20px;

}


.event-banner {
  position: relative;
  background-image: url('frontend/assets/css/event-index.css');
  background-size: cover;
  background-position: center;
  height: 400px;
  border-radius: 15px;
  box-shadow: 0 4px 10px var(--shadow-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  text-align: center;
}

.event-banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.event-banner-logo {
  max-width: 150px;
  margin-bottom: 20px;
}

.event-banner-text {
  color: #093252;
  font-size: 30px;
font-weight: 300;
line-height: 61.2px;
text-align: center;
}

@media (max-width: 767px) {
  .event-banner-text {
    font-size: 25px; /* حجم الخط للشاشات الصغيرة */
    line-height: 40px; /* تقليل ارتفاع السطر */
  }
}

@media (max-width: 576px) {
  .event-banner-text {
    font-size: 25px; /* حجم أصغر للشهوات الأقل من 576px */
    line-height: 30px; /* تقليل إضافي لارتفاع السطر */
  }
}

.event-card {
  background-color: var(--body-background-color);
  border-color: var(--border-card-courses);
  border-radius: 15px;
  box-shadow: 0 4px 10px var(--shadow-color2);
  padding: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card img {
  object-fit: cover;
  border-radius: 10px;
}

.event-card h5 {
  margin-top: 15px;
  color: var(--title-color-page);
}

.event-card p {
  margin-top: 10px;
  color: var(--p-color);
  font-weight: 400;
  padding: 0px;
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px var(--shadow-color);
}

.event-date {
  font-weight: bold;
  margin-top: 10px;
  color: var(--primary-color);
}


.text-style {
  font-size: 48px;
  color: var(--black-color);
  font-weight: 500;
  line-height: 76.8px;


}



.card-img-top-wrapper {
  height: 200px;
  /* يمكنك تعديل الارتفاع حسب التصميم */
  overflow: hidden;
  position: relative;
}

.card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* يجعل الصورة تغطي كامل المساحة */
}