.flex-container {
  display: flex;
  flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

.hero-area {
    width: 100%;
    height: 100vh; /* vh = viewport height */
    position: relative;
    overflow: hidden;
}

/* تجعل السلايدر يأخذ كامل المساحة */
.hero-slider {
    width: 100%;
}

/* كل شريحة تملأ الشاشة */
.single-slider {
    width: 100%;
    position: relative;
}

/* الصور داخل كل شريحة */
.single-slider img {
    width: 100%;
    object-fit: cover; /* تغطي المساحة بدون تشويه */
    display: block;
    margin: 0 auto; /* توسيط أفقي للصورة */
}
.hero-image {
    display: block;
    width: 100vw;        /* 100% من عرض الشاشة */
    height: auto;
    border: 3px solid blue;
}
.aaa{
    border:2px solid #F00;
}