/* تنظیمات کلی */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden; /* جلوگیری از اسکرول افقی */
    font-family: sans-serif; /* فونت پیش‌فرض */
}

/* کانتینر اصلی */
.slider-container {
    padding-top: 20px;
    width: 100%;
    max-width: 100%;
    height: 60vh; /* ارتفاع اسلایدر، قابل تنظیم */
    position: relative;
    overflow: hidden; /* مهم: جلوگیری از نمایش محتوای خارج از کانتینر */
    margin: 0 auto; /* مرکز کردن در صفحه */
}

/* اسلایدر داخلی که اسلایدها را نگه می‌دارد */
.slider {
    width: 100%; /* عرض کامل */
    height: 100%; /* ارتفاع کامل */
    display: flex; /* چیدمان انعطاف‌پذیر */
    position: relative; /* برای موقعیت‌دهی absolute اسلایدها */
}

/* هر اسلاید */
.slide {
    width: 100%; /* هر اسلاید 100% عرض کانتینر را اشغال می‌کند */
    height: 100%; /* هر اسلاید 100% ارتفاع کانتینر را اشغال می‌کند */
    position: absolute; /* موقعیت‌دهی بر اساس کانتینر */
    top: 0;
    left: 0;
    opacity: 0; /* پیش‌فرض مخفی */
    visibility: hidden; /* کاملاً مخفی */
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out; /* انیمیشن نرم */
    z-index: 1; /* لایه بندی پایه */
}

/* استایل برای اسلاید فعال */
.slide.active {
    opacity: 1; /* نمایش */
    visibility: visible; /* قابل مشاهده */
    z-index: 2; /* در لایه بالاتر */
}

/* عکس درون اسلاید */
.slide img {
    width: 100%; /* عرض کامل */
    height: 100%; /* ارتفاع کامل */
    object-fit: cover; /* پوشاندن کل ناحیه بدون تغییر نسبت ابعاد */
    display: block; /* حذف فضای خالی احتمالی زیر تصویر */
}

/* استایل برای کانتینر متن روی اسلاید */
.slider-text {
    position: absolute; /* موقعیت‌دهی نسبت به .slide */
    bottom: 20%; /* فاصله از پایین اسلاید (مثلا 20 درصد) */
    left: 50%; /* شروع از وسط */
    transform: translateX(-50%); /* تنظیم دقیق وسط */
    width: 80%; /* عرض متن، مثلا 80 درصد اسلاید */
    max-width: 600px; /* حداکثر عرض متن */
    text-align: center; /* چیدمان متن در وسط */
    color: white; /* رنگ متن سفید برای خوانایی روی تصاویر */
    background-color: rgba(0, 0, 0, 0.5); /* پس‌زمینه نیمه‌شفاف مشکی برای خوانایی بهتر */
    padding: 15px 20px; /* فضای داخلی */
    border-radius: 8px; /* گوشه‌های گرد */
    z-index: 4; /* بالای تصویر اسلاید */
        animation: fadeInText 1s ease-out forwards; /* 1 ثانیه طول می‌کشد، با انیمیشن ease-out، در انتها ثابت می‌ماند */

}

@keyframes fadeInText {
  from {
    opacity: 0;
    transform: translateY(10px); /* کمی از پایین شروع می‌شود */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* به موقعیت اصلی برمی‌گردد */
  }
}

.slider-text p {
    margin: 5px 0; /* فاصله بین خطوط متن */
    font-size: 1.1em; /* اندازه فونت */
    line-height: 1.4; /* فاصله بین خطوط */
}

/* اگر بخواهی متن‌ها کمی متفاوت باشند */
.slider-text p:first-child {
    font-weight: bold; /* خط اول پررنگ‌تر */
    font-size: 1.3em;
}

/* اگر تصویر کمی تاریک باشد، می‌توانی پس‌زمینه متن را تیره‌تر کنی */
/* .slider-text { background-color: rgba(0, 0, 0, 0.7); } */

/* برای موبایل */
@media (max-width: 768px) {
      .slider-text {
        bottom: 10%; /* پایین‌تر */
        width: 90%; /* پهن‌تر */
        max-width: calc(100% - 30px); /* حاشیه امن */
        padding: 10px 15px;
        left: 5%; /* همچنان از وسط شروع می‌کنیم */
        margin: 0 auto;
        /* **حالت ریسپانسیو: جابجایی بیشتر به سمت چپ** */
        /* مقدار translateX را منفی‌تر و بزرگتر می‌کنیم */
        transform: translateX(-75%); /* این مقدار را تنظیم کنید تا به نتیجه دلخواه برسید */
        box-sizing: border-box;
    }
    .slider-text p {
        font-size: 1em;
    }
    .slider-text p:first-child {
        font-size: 1.15em;
    }
}


/* نقاط نشانگر */
.slider-dots {
    position: absolute; /* موقعیت‌دهی مطلق */
    bottom: 15px; /* 15 پیکسل از پایین */
    left: 50%; /* وسط افقی */
    transform: translateX(-50%); /* تنظیم دقیق وسط */
    display: flex; /* چیدمان افقی */
    gap: 10px; /* فاصله بین نقاط */
    z-index: 3; /* روی همه عناصر دیگر */
}

/* هر نقطه */
.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.6); /* رنگ نیمه شفاف */
    border-radius: 50%; /* دایره‌ای کردن */
    cursor: pointer; /* تغییر نشانگر موس */
    transition: background-color 0.3s ease; /* انیمیشن رنگ */
}

/* نقطه فعال */
.dot.active {
    background-color: #fff; /* رنگ سفید */
}

/* واکنش‌گرا (Responsive) */
@media (max-width: 768px) {
    .slider-container {
        height: 22vh; /* ارتفاع کمتر برای موبایل */
    }
    .slider-dots {
        bottom: 10px; /* نقاط کمی بالاتر */
    }
    .dot {
        width: 10px;
        height: 10px;
    }
}