/* --- 1. الأساسيات --- */
body { margin: 0; background: #003223; font-family: 'Cairo', sans-serif; overflow-x: hidden; }

/* --- 2. الفواصل الملكية (العصافير والخطوط الذهبية) --- */
.divider-royal {
    height: 100px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(rgba(128, 0, 32, 0.65), rgba(128, 0, 32, 0.65)), 
                url('../photo-video/photo/zelidj.jpg') center/cover no-repeat fixed;
    border-top: 1px solid rgba(212, 175, 55, 0.4);
}
.gold-line-glow { flex: 1; max-width: 20%; height: 2px; background: linear-gradient(90deg, transparent, #d4af37, transparent); }

/* --- 3. القسم الثالث: آخر الأخبار (تصغير إطار الإعلانات) --- */
.news-section {
    position: relative; padding: 60px 20px;
    background: url('../photo-video/photo/zelidj.jpg') center/cover no-repeat fixed;
}
.royal-green-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 50, 35, 0.65); z-index: 1; }
.content-container { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; text-align: center; }

.banner-card { 
    width: 90%; max-width: 650px; margin: 0 auto;
    border: 4px solid #d4af37; border-radius: 20px; overflow: hidden; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.6); 
}
.ad-slide img { width: 100%; display: block; height: auto; object-fit: contain; }

.section-title-wrapper { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 40px; }
.gold-shiny-text { font-size: clamp(1.8rem, 5vw, 2.5rem); color: #d4af37; font-weight: 800; text-shadow: 0 0 15px rgba(212, 175, 55, 0.4); }

.banner-outer-wrapper { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 20px); }
.ctrl-btn { background: #d4af37; border: none; width: 45px; height: 45px; border-radius: 50%; color: #003223; cursor: pointer; transition: 0.3s; font-size: 1.1rem; flex-shrink: 0; }

.ad-details-area { margin-top: 30px; text-align: center; color: #f3e5ab; }
.btn-royal-link { display: inline-block; margin-top: 15px; padding: 12px 35px; border: 2px solid #d4af37; color: #d4af37; text-decoration: none; border-radius: 50px; font-weight: bold; }

/* --- 4. القسم الرابع: تاريخ الجمعية (منذ 1992) --- */
.history-section {
    position: relative; padding: 80px 20px;
    background: url('../photo-video/photo/classe4.jpg') center/cover no-repeat fixed;
}
.history-overlay-green { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 50, 35, 0.65); z-index: 1; }

.history-logo-wrapper { margin-bottom: 30px; display: flex; justify-content: center; }
.round-logo-frame { width: 150px; height: 150px; border-radius: 50%; border: 4px solid #d4af37; overflow: hidden; box-shadow: 0 0 20px rgba(212, 175, 55, 0.4); }
.round-logo-frame img { width: 100%; height: 100%; object-fit: cover; }

.history-title-wrapper-flex { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 30px; }
.instrument-box { font-size: 2.8rem; color: #d4af37; filter: drop-shadow(0 0 10px #d4af37); }

.accessible-text { font-family: 'Amiri', serif; font-size: clamp(1.4rem, 4vw, 1.8rem); line-height: 1.8; color: #fcf6ba; margin-bottom: 35px; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); }

/* زر تاريخ الجمعية (المعدل) */
.large-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 15px 45px; 
    background: #d4af37; color: #003223; text-decoration: none; 
    border-radius: 50px; font-weight: 900; font-size: 1.3rem; 
    transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.large-btn:hover { background: #fff; transform: translateY(-5px); }

/* --- 5. نظام التغريد والأنيميشن الشامل --- */
.bird-container, .singing-bird-box, .instrument-box {
    position: relative; display: inline-flex; animation: birdSway 0.8s infinite alternate ease-in-out;
}

.bird-container::before, .singing-bird-box::before, .instrument-box::before {
    content: '♪'; position: absolute; top: -15px; left: 50%; color: #f3e5ab; font-size: 1.1rem; opacity: 0; animation: noteFly 2s infinite linear;
}
.bird-container::after, .singing-bird-box::after, .instrument-box::after {
    content: '♫'; position: absolute; top: -20px; left: 20%; color: #f3e5ab; font-size: 1.1rem; opacity: 0; animation: noteFly 2s infinite linear 1s;
}

@keyframes birdSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes noteFly {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-45px) translateX(15px) rotate(25deg); opacity: 0; }
}

/* --- 6. التوافقية مع الهواتف (تحسين حجم الأزرار) --- */
@media (max-width: 768px) {
    /* تصغير زر اكتشف تاريخنا العريق للهواتف */
    .large-btn {
        padding: 10px 25px !important;
        font-size: 1rem !important;
        gap: 8px;
    }
    .large-btn i { font-size: 0.9rem; }

    /* تحسينات إضافية للهواتف */
    .instrument-box { font-size: 1.8rem; }
    .history-title-wrapper-flex { gap: 10px; }
    .round-logo-frame { width: 120px; height: 120px; }
    .gold-shiny-text { font-size: 1.8rem; }
}