* {
    margin: -6px;
    padding: 4px;
    box-sizing: border-box;
}
@font-face {
  font-family: 'Digi Darya';
  src: url('../font/digi-darya.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
    font-family: 'Digi Darya', Arial, sans-serif;
    background: linear-gradient(135deg, #e3f2fd, #c8e6c9);
    direction: rtl;
    text-align: right;
    color: #333;
    line-height: 1.6;
}

/* هدر سایت */
.site-header {
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.site-header h1 {
    color: #2E7D32;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.site-header p {
    color: #666;
    font-size: 1rem;
}

/* اسلایدر */
.slider-container {
    margin: 20px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* اسلایدر اصلی */
.slider {
    position: relative;
    height: 350px; /* ارتفاع بیشتر */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* نمایش کامل تصویر بدون بُریدن */
    object-position: center; /* مرکز قرار گیرد */
}

.slide {
    display: none;
    width: 100%;
    height: 100%;
}

.slide.active {
    display: block;
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.slider-nav button {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* دایره‌های اصلی */
.categories-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto;
}

.category-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s;
}

.category-circle:hover {
    transform: scale(1.05);
}

.category-circle img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: white;
    padding: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.category-circle span {
    margin-top: 8px;
    font-size: 0.8rem;
    text-align: center;
    color: #555;
}

/* کارت‌های آموزشی - اسلایدر */
.cards-container {
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    margin: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.back-btn {
    background: #FF5722;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.cards-slider {
    position: relative;
    overflow: hidden;
}

.cards-slider-wrapper {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.card {
    flex: 0 0 100%;
    min-width: 100%;
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
}

.card-img {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    margin-bottom: 15px;
    object-fit: cover;
}

.card h4 {
    color: #2E7D32;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.card p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}

.card a {
    display: inline-block;
    background: #2196F3;
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 15px;
    font-size: 0.8rem;
}

.cards-slider-nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 15px;
}

.cards-slider-nav button {
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* اسلایدر جملات سالمندان */
.elderly-messages-container {
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    margin: 20px auto;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    display: none; /* مخفی در حالت اولیه */
}

.elderly-messages-container:not(.hidden) {
    display: block; /* نمایش وقتی کلاس hidden حذف می‌شود */
}

#elderly-slider-wrapper {
    display: flex;
    transition: transform 0.3s ease-in-out;
    width: 100%;
    overflow: hidden; /* مخفی کردن اسلایدهای اضافی */
}

.elderly-slide {
    flex: 0 0 100%; /* هر اسلاید عرض کامل را اشغال کند */
    min-width: 100%;
    background: rgba(76, 175, 80, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin: 10px;
}


/* بخش سرگرمی - حدس کلمه */
.fun-container {
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    margin: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    text-align: center;
}

.word-guess-game h3 {
    color: #FF5722;
    margin-bottom: 20px;
}

.word-display {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.letter-box {
    width: 40px;
    height: 40px;
    border: 2px solid #2196F3;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    background: white;
}

.letter-box.empty {
    border-style: dashed;
    border-color: #ccc;
    color: transparent;
}

.letters-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin: 20px 0;
    max-width: 400px;
    margin: 20px auto;
}

.letter-btn {
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 0;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.letter-btn:hover {
    background: #45a049;
    transform: translateY(-2px);
}

.letter-btn.used {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.game-info {
    background: rgba(255, 255, 255, 0.8);
    padding: 15px;
    border-radius: 10px;
    margin: 20px 0;
}

.game-info p {
    margin: 5px 0;
    font-size: 0.9rem;
}

#new-word-btn {
    background: #FF5722;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 20px;
}

/* بخش اسلایدر جملات سالمندان - مناسب برای سالمندان */
.elderly-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #f1f8e9, #e8f5e9);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #4CAF50;
}

.elderly-slides-container {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elderly-slide {
    transition: all 0.5s ease;
    animation: slideIn 0.8s ease-out;
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    word-spacing: 3px;
    letter-spacing: 1px;
}

/* استایل مخصوص اسلایدهای کتاب */
.book-slide a:hover {
    background: #E64A19 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}

.book-slide a:active {
    transform: translateY(-1px);
}

@keyframes slideIn {
    from { 
        opacity: 0; 
        transform: scale(0.9) translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

/* دکمه‌های ناوبری برای سالمندان */
.elderly-slider-container .cards-slider-nav button {
    background: #2E7D32 !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 80px !important;
    height: 80px !important;
    cursor: pointer !important;
    font-size: 32px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
    transition: all 0.3s ease !important;
    margin: 0 20px !important;
    z-index: 1000 !important;
    position: relative !important;
    display: inline-block !important;
    text-align: center !important;
    line-height: 80px !important;
}

.elderly-slider-container .cards-slider-nav button:hover {
    background: #1B5E20;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.elderly-slider-container .cards-slider-nav button:active {
    transform: scale(0.95);
}

/* دکمه بازگشت برای سالمندان */
.elderly-slider-container .back-btn {
    background: #FF5722;
    color: white;
    border: none;
    padding: 20px 40px;
    border-radius: 30px;
    cursor: pointer;
    margin-bottom: 30px;
    font-size: 1.3rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.elderly-slider-container .back-btn:hover {
    background: #E64A19;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* بخش اسلایدر مادر و کودک - صورتی */
.mother-child-slides-container {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mother-child-slide {
    transition: all 0.5s ease;
    animation: slideIn 0.8s ease-out;
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    word-spacing: 3px;
    letter-spacing: 1px;
}

/* دکمه‌های ناوبری برای مادر و کودک - صورتی ملایم */
.elderly-slider-container .cards-slider-nav button {
    background: #F8BBD9 !important;
    color: #C2185B !important;
    border: 2px solid #F8BBD9 !important;
    border-radius: 50% !important;
    width: 70px !important;
    height: 70px !important;
    cursor: pointer !important;
    font-size: 28px !important;
    box-shadow: 0 4px 15px rgba(248, 187, 217, 0.3) !important;
    transition: all 0.3s ease !important;
    margin: 0 15px !important;
    z-index: 1000 !important;
    position: relative !important;
    display: inline-block !important;
    text-align: center !important;
    line-height: 70px !important;
}

.elderly-slider-container .cards-slider-nav button:hover {
    background: #F8BBD9 !important;
    color: #AD1457 !important;
    border-color: #F8BBD9 !important;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(248, 187, 217, 0.5) !important;
}

.elderly-slider-container .cards-slider-nav button:active {
    transform: scale(0.95);
}

/* بخش تنفس عمیق - اصلاح‌شده */
.breathing-container {
    text-align: center;
    padding: 20px;
}

.breathing-wrapper {
    position: relative;
    margin: 40px auto;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breathing-orbit {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breathing-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #009688;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 4s ease-in-out;
    z-index: 2;
    position: relative;
}

.breathing-controls {
    margin: 30px 0;
}

.start-btn {
    background: linear-gradient(135deg, #009688, #4CAF50);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.1rem;
    margin: 0 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.hidden {
    display: none;
}

.breathing-status {
    margin: 20px 0;
    min-height: 60px;
}

#breathing-instruction {
    font-size: 1.1rem;
    color: #333;
    margin: 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    display: inline-block;
}

.countdown {
    font-size: 2.5rem !important;
    color: #FF5722 !important;
    font-weight: bold;
}

.breathing-tips {
    background: rgba(255, 255, 255, 0.8);
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
}

.breathing-tips h4 {
    color: #009688;
    margin-bottom: 10px;
}

.breathing-tips ul {
    padding-right: 20px;
    margin: 0;
}

.breathing-tips li {
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #666;
}

/* انیمیشن‌های چرخش اصلاح‌شده */
@keyframes orbit-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg) translateX(60px) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg) translateX(60px) rotate(-360deg);
    }
}

@keyframes orbit-rotate-static {
    from {
        transform: translate(-50%, -50%) rotate(0deg) translateX(60px) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg) translateX(60px) rotate(-360deg);
    }
}

@keyframes orbit-rotate-shrink {
    from {
        transform: translate(-50%, -50%) rotate(0deg) translateX(60px) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg) translateX(60px) rotate(-360deg);
    }
}

/* واکنش‌گرایی */
@media (max-width: 480px) {
    .site-header h1 {
        font-size: 1.4rem;
    }
    
    .site-header p {
        font-size: 0.8rem;
    }
    
    .categories-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 15px;
    }
    
    .category-circle img {
        width: 50px;
        height: 50px;
    }
    
    .category-circle span {
        font-size: 0.7rem;
    }
    
    .letter-box {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }
    
    .letters-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 5px;
    }
}
/* بهبودهای مخصوص موبایل و سالمندان */
@media (max-width: 768px) {
    /* فونت‌ها بزرگ‌تر */
    body {
        font-size: 1.1rem; /* فونت اصلی بزرگ‌تر */
    }
    
    .site-header h1 {
        font-size: 2rem; /* عنوان هدر بزرگ‌تر */
        line-height: 1.3;
    }
    
    .site-header p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* دایره‌های دسته‌بندی - چیدمان تک‌ستونه */
    .categories-container {
        grid-template-columns: 1fr; /* تک‌ستون */
        gap: 25px; /* فاصله بیشتر */
        padding: 30px 20px;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .category-circle {
        flex-direction: row; /* افقی - دایره + متن در یک خط */
        justify-content: center;
        align-items: center;
        padding: 20px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s;
    }
    
    .category-circle:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    .category-circle img {
        width: 70px; /* دایره بزرگ‌تر */
        height: 70px;
        margin-left: 15px; /* فاصله از متن */
        flex-shrink: 0;
    }
    
    .category-circle span {
        font-size: 1.2rem; /* متن بزرگ‌تر */
        font-weight: 500;
        color: #2E7D32;
        text-align: right;
        margin: 0;
        flex: 1;
    }
    
    /* اسلایدر تصاویر */
    .slider {
        height: 350px; /* بلندتر */
    }
    
    .slider-nav button {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    
    /* کارت‌های آموزشی */
    .cards-container {
        padding: 25px;
        margin: 25px;
    }
    
    .card {
        padding: 25px;
        margin-bottom: 20px;
    }
    
    .card-img {
        height: 180px;
    }
    
    .card h4 {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
    
    .card p {
        font-size: 1.1rem;
        line-height: 1.7;
        margin-bottom: 20px;
    }
    
    .card a {
        padding: 12px 25px;
        font-size: 1rem;
    }
    
    /* بازی حدس کلمه */
    .letter-box {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
        gap: 15px;
    }
    
    .letters-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 9px;
        max-width: 102%;
        padding: 20px;
    }
    
    .letter-btn {
        padding: 18px;
        font-size: 1.3rem;
        border-radius: 12px;
    }
    
    /* تنفس عمیق */
    .breathing-wrapper {
        width: 250px;
        height: 250px;
        margin: 50px auto;
    }
    
    .breathing-circle {
        width: 120px;
        height: 120px;
    }
    
    #breathing-instruction {
        font-size: 1.4rem;
        padding: 20px;
    }
    
    .countdown {
        font-size: 3.5rem !important;
    }
    
    .start-btn {
        padding: 20px 40px;
        font-size: 1.3rem;
        border-radius: 40px;
    }
    
    /* نکات تنفس */
    .breathing-tips {
        padding: 25px;
        margin-top: 30px;
    }
    
    .breathing-tips h4 {
        font-size: 1.4rem;
    }
    
    .breathing-tips li {
        font-size: 1.1rem;
        margin-bottom: 12px;
        padding-right: 10px;
    }
    
    /* دکمه‌های بازگشت */
    .back-btn {
        padding: 15px 30px;
        font-size: 1.1rem;
        border-radius: 30px;
        margin-bottom: 30px;
    }
}

/* برای تبلت‌های کوچک */
@media (max-width: 480px) {
    .categories-container {
        gap: 20px;
        padding: 25px 15px;
    }
    
    .category-circle {
        padding: 25px;
    }
    
    .category-circle img {
        width: 60px;
        height: 60px;
    }
    
    .category-circle span {
        font-size: 1.1rem;
    }
    
    .slider {
        height: 350px;
    }
    
    .card {
        padding: 20px;
    }
    
    .card h4 {
        font-size: 1.3rem;
    }
    
    .card p {
        font-size: 1rem;
    }
    
    .letter-box {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
    
    .letter-btn {
        padding: 15px;
        font-size: 1.2rem;
    }
}

/* حالت‌های کنتراست بالا برای دسترسی بهتر */
@media (prefers-contrast: high) {
    .category-circle {
        background: #fff;
        border: 2px solid #000;
    }
    
    .card {
        background: #fff;
        border: 2px solid #000;
    }
    
    .letter-box {
        border-width: 3px;
    }
}

/* حالت‌های حرکتی کم برای کاربران حساس */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .category-circle:hover {
        transform: none;
    }
}
/* رنگ‌بندی واضح‌تر */
.category-circle span {
    color: #000; /* مشکی به جای خاکستری */
}

.card h4 {
    color: #000; /* عنوان‌ها مشکی */
}

.card p {
    color: #333; /* متن‌ها تیره‌تر */
}

/* حاشیه‌های واضح‌تر */
.card, .fun-container, .breathing-container {
    border: 2px solid #ddd;
}
/* دکمه‌ها و عناصر لمسی بزرگ‌تر */
button, .category-circle, .letter-btn {
    min-height: 50px;
    min-width: 50px;
    touch-action: manipulation;
}

/* فاصله بیشتر بین عناصر */
.letters-grid {
    gap: 15px;
}

.word-display {
    gap: 15px;
}

/* فونت‌های مخصوص سالمندان */
body {
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    font-weight: 400; /* وزن معمولی */
    letter-spacing: 0.5px; /* فاصله حروف */
}

h1, h2, h3, h4 {
    font-weight: 600; /* کمی بولد */
    line-height: 1.3;
}
/* دایره‌های اصلی - چیدمان جدید */
.categories-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 30px 20px;
    max-width: 600px;
    margin: 0 auto;
}

.category-circle {
    display: flex;
    flex-direction: column; /* عمودی - دایره بالا، متن پایین */
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 15px;
}

.category-circle:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.category-circle img {
    width: 90px; /* دایره بزرگ‌تر */
    height: 90px;
    border-radius: 50%; /* کاملاً دایره‌ای */
    object-fit: cover; /* عکس کاملاً داخل دایره */
    object-position: center; /* مرکز عکس */
    background: #fff; /* پس‌زمینه سفید */
    padding: 5px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    border: 3px solid rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
}

.category-circle span {
    font-size: 1rem; /* فونت مناسب */
    font-weight: 500;
    color: #2E7D32;
    text-align: center;
    line-height: 1.3;
    max-width: 100px;
    padding: 0 5px;
}

/* برای موبایل - تک‌ستون */
@media (max-width: 768px) {
    .categories-container {
        grid-template-columns: 1fr; /* تک‌ستون */
        gap: 30px;
        padding: 25px 15px;
    }
    
    .category-circle {
        flex-direction: column;
        padding: 20px;
    }
    
    .category-circle img {
        width: 100px; /* کمی بزرگ‌تر در موبایل */
        height: 100px;
        margin-bottom: 15px;
    }
    
    .category-circle span {
        font-size: 1.1rem; /* فونت بزرگ‌تر */
    }
}

/* برای تبلت‌های کوچک */
@media (max-width: 480px) {
    .categories-container {
        gap: 25px;
        padding: 20px 10px;
    }
    
    .category-circle img {
        width: 85px;
        height: 85px;
    }
    
    .category-circle span {
        font-size: 1rem;
    }
}
/* اسلایدر */
.slider-container {
    margin: 20px auto; /* مرکز قرار گیرد */
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 800px; /* حداکثر عرض */
}

/* دایره‌های اصلی */
.categories-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto; /* مرکز قرار گیرد */
}

/* کارت‌های آموزشی - اسلایدر */
.cards-container {
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    margin: 20px auto; /* مرکز قرار گیرد */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    max-width: 800px;
}

/* اسلایدر جملات سالمندان */
.elderly-slider-container {
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    margin: 20px auto; /* مرکز قرار گیرد */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    max-width: 800px;
}

/* بخش سرگرمی */
.fun-container {
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    margin: 20px auto; /* مرکز قرار گیرد */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 800px;
}

/* بخش تنفس عمیق */
.breathing-container {
    text-align: center;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}
/* استایل بخش اسلایدر مادر و کودک */
.mother-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #fce4ec, #f8bbd9);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #F8BBD9;
}

.mother-slides-wrapper {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mother-slide {
    display: none;
    transition: all 0.5s ease;
    animation: slideIn 0.8s ease-out;
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    word-spacing: 3px;
    letter-spacing: 1px;
}

.mother-slide.active {
    display: flex;
}

.mother-slider-nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 15px;
}

.mother-slider-nav button {
    background: #F8BBD9;
    color: #C2185B;
    border: 2px solid #F8BBD9;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    cursor: pointer;
    font-size: 28px;
    box-shadow: 0 4px 15px rgba(248, 187, 217, 0.3);
    transition: all 0.3s ease;
    margin: 0 15px;
    z-index: 1000;
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 70px;
}

.mother-slider-nav button:hover {
    background: #F8BBD9;
    color: #AD1457;
    border-color: #F8BBD9;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(248, 187, 217, 0.5);
}

.mother-slider-nav button:active {
    transform: scale(0.95);
}

/* استایل بخش اسلایدر سالمندان */
.elderly-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #f1f8e9, #e8f5e9);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #4CAF50;
}

.elderly-slides-wrapper {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elderly-slide {
    display: none;
    transition: all 0.5s ease;
    animation: slideIn 0.8s ease-out;
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    word-spacing: 3px;
    letter-spacing: 1px;
}

.elderly-slide.active {
    display: flex;
}

.elderly-slider-nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 15px;
}

.elderly-slider-nav button {
    background: #2E7D32;
    color: white;
    border: none;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    cursor: pointer;
    font-size: 32px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
    margin: 0 20px;
    z-index: 1000;
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 80px;
}

.elderly-slider-nav button:hover {
    background: #1B5E20;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.elderly-slider-nav button:active {
    transform: scale(0.95);
}

/* انیمیشن اسلاید */
@keyframes slideIn {
    from { 
        opacity: 0; 
        transform: scale(0.9) translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}
/* استایل بخش اسلایدر مادر و کودک - صورتی */
.mother-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #fce4ec, #f8bbd9);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #F8BBD9;
}

/* استایل بخش اسلایدر بارداران - بنفش */
.pregnant-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #E91E63;
}

/* استایل بخش اسلایدر نوجوانان - آبی */
.teen-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #2196F3;
}

/* استایل بخش اسلایدر جوانان - سبز یشمی */
.young-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #4CAF50;
}

/* استایل بخش اسلایدر عمومی - زرد و نارنجی */
.middle-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #fff8e1, #ffe0b2);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #FF9800;
}

/* استایل بخش اسلایدر سالمندان - سبز */
.elderly-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #f1f8e9, #e8f5e9);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #4CAF50;
}

/* استایل بخش اسلایدر سلامت روان - آبی کمرنگ */
.mental-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #e1f5fe, #b3e5fc);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #03A9F4;
}

/* استایل مشترک برای تمام اسلایدرها */
.slider-container-common {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-slide {
    display: none;
    transition: all 0.5s ease;
    animation: slideIn 0.8s ease-out;
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    word-spacing: 3px;
    letter-spacing: 1px;
    width: 100%;
    height: 100%;
}

.slider-slide.active {
    display: flex;
}

.slider-nav-common {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 15px;
}

.slider-nav-common button {
    background: #62635d;
    color: white;
    border: none;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    cursor: pointer;
    font-size: 28px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    margin: 0 15px;
    z-index: 1000;
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 70px;
}

.slider-nav-common button:hover {
    background: #1B5E20;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.slider-nav-common button:active {
    transform: scale(0.95);
}

/* انیمیشن اسلاید */
@keyframes slideIn {
    from { 
        opacity: 0; 
        transform: scale(0.9) translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

/* تغییر رنگ دکمه‌های ناوبری برای هر بخش */
.pregnant-slider-container .slider-nav-common button {
    background: #92158c;
}

.pregnant-slider-container .slider-nav-common button:hover {
    background: #C2185B;
}

.teen-slider-container .slider-nav-common button {
    background: #2196F3;
}

.teen-slider-container .slider-nav-common button:hover {
    background: #1976D2;
}

.young-slider-container .slider-nav-common button {
    background: #195f42;
}

.young-slider-container .slider-nav-common button:hover {
    background: #388e6a;
}

.middle-slider-container .slider-nav-common button {
    background: #FF9800;
}

.middle-slider-container .slider-nav-common button:hover {
    background: #F57C00;
}

.mental-slider-container .slider-nav-common button {
    background: #03A9F4;
}

.mental-slider-container .slider-nav-common button:hover {
    background: #0288D1;
}
/* استایل بخش اسلایدر بارداران - بنفش */
.pregnant-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #E91E63;
}

/* استایل بخش اسلایدر نوجوانان - آبی */
.teen-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #2196F3;
}

/* استایل بخش اسلایدر جوانان - سبز یشمی */
.young-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #4CAF50;
}

/* استایل بخش اسلایدر عمومی - زرد و نارنجی */
.middle-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #fff8e1, #ffe0b2);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #FF9800;
}

/* استایل بخش اسلایدر سلامت روان - آبی کمرنگ */
.mental-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #e1f5fe, #b3e5fc);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #03A9F4;
}

/* استایل بخش اسلایدر سالمندان - سبز */
.elderly-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #f1f8e9, #e8f5e9);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #4CAF50;
}

/* استایل بخش اسلایدر مادر و کودک - صورتی */
.mother-slider-container {
    padding: 60px 20px;
    background: linear-gradient(135deg, #fce4ec, #f8bbd9);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1000px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    border: 3px solid #F8BBD9;
}

/* استایل مشترک برای تمام اسلایدرها */
.slider-container-common {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-slide {
    display: none;
    transition: all 0.5s ease;
    animation: slideIn 0.8s ease-out;
    font-family: 'Vazirmatn', 'Tahoma', sans-serif;
    word-spacing: 3px;
    letter-spacing: 1px;
    width: 100%;
    height: 100%;
}

.slider-slide.active {
    display: flex;
}

.slider-nav-common {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 15px;
}

.slider-nav-common button {
    background: #2E7D32;
    color: white;
    border: none;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    cursor: pointer;
    font-size: 28px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    margin: 0 15px;
    z-index: 1000;
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 70px;
}

/* تغییر رنگ دکمه‌های ناوبری برای هر بخش */
.pregnant-slider-container .slider-nav-common button {
    background: #E91E63;
}

.pregnant-slider-container .slider-nav-common button:hover {
    background: #C2185B;
}

.teen-slider-container .slider-nav-common button {
    background: #2196F3;
}

.teen-slider-container .slider-nav-common button:hover {
    background: #1976D2;
}

.young-slider-container .slider-nav-common button {
    background: #4CAF50;
}

.young-slider-container .slider-nav-common button:hover {
    background: #388E3C;
}

.middle-slider-container .slider-nav-common button {
    background: #FF9800;
}

.middle-slider-container .slider-nav-common button:hover {
    background: #F57C00;
}

.mental-slider-container .slider-nav-common button {
    background: #03A9F4;
}

.mental-slider-container .slider-nav-common button:hover {
    background: #0288D1;
}

.mother-slider-container .slider-nav-common button {
    background: #F8BBD9;
}

.mother-slider-container .slider-nav-common button:hover {
    background: #F06292;
}

.elderly-slider-container .slider-nav-common button {
    background: #4CAF50;
}

.elderly-slider-container .slider-nav-common button:hover {
    background: #388E3C;
}

.slider-nav-common button:hover {
    background: #1B5E20;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.slider-nav-common button:active {
    transform: scale(0.95);
}

/* انیمیشن اسلاید */
@keyframes slideIn {
    from { 
        opacity: 0; 
        transform: scale(0.9) translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}