/* إزالة الهوامش */
html, body {
    margin: 0;
    padding: 0;
}

/* البانر */
.banner-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 5;
    overflow: hidden;
    cursor:inherit;
}

/* الشرائح */
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
    font-size: clamp(10px, 3vw, 30px);
    font-weight: bold;
    color: #20bbb4;
}

/* صندوق النصوص */
.text-box {
    padding-top: clamp(40px, 3vw, 170px);
    padding-left: clamp(10px, 3vw, 30px);
    font-size: clamp(10px, 3vw, 30px);
    justify-content: center;
    align-items: center;
    text-align: center;
}

.text-box-2 {
    padding-top: 70px;
    padding-right: 100px;
    font-size: clamp(10px, 3vw, 36px);
    justify-content: center;
    align-items: center;
    text-align: center;
}

.dots-wrapper {
    width: 100%;
    background: #f5fbfa;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* النقاط */
.dots {
    position: static;
    bottom: clamp(0px, 2vw, 0px);
    left: 50%;
    transform: none;
    display: flex;
    gap: 12px;
    z-index: 5;
}

.dots span {
    width: clamp(8px, 2vw, 15px);
    height: clamp(6px, 2vh, 15px);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #20bbb4;
    background-color: #fff;
}

/* النقاط للشريحة النشطة */

.dots .active {
    width: 40px;
    border-radius: 20px;
    background-color: #20bbb4;
}

/* النصوص التوضيحية للصور */
.caption {
    position: absolute;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: clamp(14px, 2vw, 22px);
    font-weight: bold;
    color: #fff;
    background: rgba(0,0,0,0.45);
}

/* الشاشات الكبيرة */
@media (min-width: 1401px) {
    .banner-container {
    aspect-ratio: 16 /5;
    }
}

/* الشاشات المتوسطة (لابتوب / تابلت) */
@media (min-width: 1000px) and (max-width: 1400px) {
    .banner-container {
    aspect-ratio: 16 / 6;
    }
}

/* الشاشات المتوسطة (لابتوب / تابلت) */
@media (min-width: 601px) and (max-width: 1001px) {
    .banner-container {
    aspect-ratio: 16 / 6.5;
    }
}

/* الجوال */
@media (max-width: 600px) {
    .banner-container {
    aspect-ratio: 16 / 7;
    }
}