/* --- Global Styles & Color Palette --- */
:root {
    --primary-color: #2c3539; /* رمادي داكن (Charcoal) */
    --secondary-color: #ffc107; /* أصفر (Amber) */
    --background-color: #F0F0F0; /* رمادي فاتح جداً للخلفية */
    --white-color: #ffffff;
    --text-color: #555;
    --heading-color: #2c3539;
    --light-gray-border: #e0e0e0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Amiri', serif; direction: rtl; background-color: var(--background-color); color: var(--text-color); line-height: 1.7; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-weight: 700; color: var(--heading-color); }
section { padding: 60px 0; }
.section-title { font-size: 42px; font-weight: 700; color: var(--heading-color); text-align: center; margin-bottom: 50px; }

/* --- Header --- */
.main-header.scrolled-header { background-color: #f1f1f1; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 10px 0; }

/* --- Hero Section --- */
.hero { background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../images/backgroung.png') no-repeat center center / cover; color: var(--white-color); text-align: center; padding: 120px 0; min-height: 90vh; display: flex; flex-direction: column; justify-content: center; }
.hero-overlay-box { background-color: rgba(231, 234, 235, 0.2); padding: 40px; border-radius: 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.1); max-width: 1150px; margin: 0 auto; color: #000000; }
.hero h1 { font-size: 30px; text-align: right; margin-bottom: 20px; color: var(--black-color); }
.hero h2 { font-size: 58px; margin-bottom: 20px; color: var(--black-color); }
.hero p { font-size: 35px; max-width: 1000px; text-align: right; margin: 0 auto 40px; opacity: 0.9; }
.cta-button { background-color: var(--secondary-color); color: var(--heading-color); padding: 14px 35px; border-radius: 5px; text-decoration: none; font-weight: 700; font-size: 16px; transition: background-color 0.3s ease, transform 0.2s ease; display: inline-block; }
.cta-button:hover { background-color: #e0ac00; transform: translateY(-3px); }

/* --- NEW: Intro Section --- */
.intro-section { padding: 80px 0; background-color: #FFFFFF; text-align: center; }
.intro-text-box { background-color: #f8f9fa; padding: 45px; border-radius: 8px; max-width: 1100px; margin: 0 auto; border: 1px solid #e9ecef; }
.intro-paragraph { font-family: 'Amiri', serif; font-size: 26px; color: #555555; line-height: 1.8; margin: 0; }

/* --- NEW: Stats Bar Section --- */
.stats-section-bar { padding: 60px 0; background-color: #F8F8F8; }
.stats-bar-wrapper { display: flex; justify-content: space-around; align-items: center; background-color: #FFFFFF; padding: 40px 20px; border-radius: 12px; border: 1px solid #e9ecef; }
.stat-item { text-align: center; position: relative; padding: 0 40px; }
.stat-item:not(:last-child)::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background-color: #dee2e6; }
.stat-item .stat-number { font-size: 50px; font-weight: 700; color: #2c3539; margin-bottom: 5px; }
.stat-item .stat-label { font-size: 20px; color: #555555; margin: 0; }

/* --- Services Section --- */
.services-section { background-color: #F8F8F8; }
.services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 190px; }
.service-card { background-image: linear-gradient(to bottom, #fdfdfd, #f0f0f0); padding: 35px; border: 1px solid var(--light-gray-border); border-radius: 8px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.service-card i { font-size: 45px; color: var(--secondary-color); margin-bottom: 20px; }
.service-card h3 { margin-bottom: 15px; font-size: 22px; }
.service-card ul { list-style: none; padding: 0; margin: 20px 0; text-align: right; flex-grow: 1; }
.service-card ul li { margin-bottom: 12px; position: relative; padding-right: 25px; }
.service-card ul li::before { content: '\f058'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--secondary-color); position: absolute; right: 0; top: 2px; }
.cta-button.secondary { background-color: transparent; color: var(--secondary-color); border: 2px solid var(--secondary-color); margin-top: auto; }
.cta-button.secondary:hover { background-color: var(--secondary-color); color: var(--heading-color); }

/* --- Pillars Section --- */
.pillars-section { background-color: var(--white-color); }
.pillars-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.pillar-box { background-color: var(--background-color); padding: 40px 20px; border-radius: 15px; text-align: center; border: 1px solid var(--light-gray-border); transition: all 0.3s ease; }
.pillar-box:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.pillar-box i { font-size: 45px; color: var(--secondary-color); margin-bottom: 20px; }
.pillar-box h3 { font-size: 22px; color: var(--heading-color); }

/* --- NEW: Counters Section --- */
.counters-section { background: #f8f9fa; padding: 80px 0; text-align: center; }
.counter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.counter-box { padding: 20px; background: white; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.counter { font-size: 3rem; font-weight: bold; color: #2c3e50; margin-bottom: 10px; }
.counter-box p { font-size: 1.1rem; margin-bottom: 10px; }
.stars { color: var(--secondary-color); font-size: 1.2rem; }

/* --- NEW: Testimonials Section --- */
.testimonial-section { padding: 50px 0 80px 0; position: relative; }
.testimonial-slider { width: 100%; padding-top: 65px; padding-bottom: 65px; }
.testimonial-slider .swiper-slide { background-position: center; background-size: cover; width: 450px; transition: filter 0.5s, opacity 0.5s, transform 0.5s; filter: blur(4px); opacity: 0.5; transform: scale(0.8); }
.testimonial-slider .swiper-slide-active { filter: blur(0); opacity: 1; transform: scale(1); }
.testimonial-card { width: 100%; height: 98%; background: #D1D1D1; border: 1px solid #C0C0C0; padding: 40px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.testimonial-card .quote { font-size: 1.21rem; font-weight: 400; flex-grow: 1; }
.testimonial-card .author { font-size: 1.1rem; font-weight: 700; color: #555555; }
.swiper-pagination-bullet { background: #555555; opacity: 0.8; }
.swiper-pagination-bullet-active { background-color: var(--secondary-color); opacity: 1; }

/* --- Mission Section --- */
.mission-section { padding: 60px 0; }
.mission-wrapper { display: grid; grid-template-columns: 1.5fr 1.2fr; gap: 60px; align-items: center; }
.mission-text { order: 2; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.mission-text .section-title { color: var(--heading-color); text-align: right; font-size: 48px; margin-bottom: 20px; }
.mission-text p { font-size: 24px; line-height: 1.9; color: var(--text-color); text-align: right; max-width: 500px; }
.mission-image { order: 1; }
.mission-image img { width: 100%; height: auto; border-radius: 12px; object-fit: cover; }

/* --- About & Credentials Section --- */
.about-section { text-align: center; padding: 40px 20px; margin-bottom: 60px; background: transparent; }
.credentials-container { display: flex; justify-content: center; gap: 150px; flex-wrap: wrap; }
.credential-box { background-color: #D9D9D9; border: 1px solid #c0c0c0; border-radius: 8px; padding: 20px 40px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--heading-color); font-weight: 600; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; position: relative; }
.credential-box:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
.credential-box::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: var(--primary-color); color: var(--white-color); padding: 5px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; margin-bottom: 10px; }
.credential-box:hover::after { opacity: 1; visibility: visible; }

/* --- Social Media Section --- */
.social-section { background: var(--white-color); }
.social-wrapper { display: flex; justify-content: center; align-items: center; gap: 90px; flex-wrap: wrap; }
.social-wrapper .section-title { margin-bottom: 0; }
.social-icons { display: flex; gap: 90px; }
.social-icon { display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; border-radius: 50%; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.3s ease; }
.social-icon i { font-size: 60px; color: var(--white-color); }
.social-icon:hover { transform: translateY(-8px) scale(1.1); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.social-icon.whatsapp { background-color: #25D366; }
.social-icon.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-icon.snapchat { background-color: #FFFC00; }
.social-icon.snapchat i { color: #000000; }
.social-icon.tiktok { background-color: #010101; }

/* --- Contact & Map Section --- */
.contact-section { 
    background-color: #f8f8f8; 
}
.contact-details { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
    background-color: var(--white-color); 
    padding: 40px; 
    border-radius: 8px; 
    border: 1px solid var(--light-gray-border); 
}
.contact-info h3 { 
    margin-bottom: 20px; 
    font-size: 1.8rem; /* ✅ تكبير العنوان الرئيسي */
}
/* ✅ قاعدة جديدة لتكبير نصوص الفقرات */
.contact-info p {
    font-size: 1.2rem; /* تكبير نصوص الفقرات والأرقام */
    line-height: 1.8;  /* زيادة المسافة بين السطور لتحسين القراءة */
    margin-bottom: 1rem;
}
.contact-info a { 
    color: var(--secondary-color); 
    text-decoration: none; 
    /* سيرث حجم الخط من الفقرة p تلقائياً */
}
.contact-info a:hover { 
    text-decoration: underline; 
}
.contact-info hr { 
    border: none; 
    height: 1px; 
    background-color: var(--light-gray-border); 
    margin: 25px 0; 
}
.contact-map iframe { 
    border: 0; 
    border-radius: 8px; /* إضافة لمسة جمالية لحواف الخريطة */
}

/* تعديل للشاشات الصغيرة لتكون فوق بعضها */
@media (max-width: 768px) {
    .contact-details {
        grid-template-columns: 1fr; /* عمود واحد فقط في الجوال */
    }
}
/* --- Modal/Lightbox Styles --- */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.85); justify-content: center; align-items: center; }
.modal-content { margin: auto; display: block; max-width: 80%; max-height: 85vh; animation: zoomIn 0.4s ease; }
@keyframes zoomIn { from {transform: scale(0.8);} to {transform: scale(1);} }
.close-modal { position: absolute; top: 20px; left: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: color 0.3s; cursor: pointer; }
.close-modal:hover, .close-modal:focus { color: #bbb; }

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .mission-wrapper, .contact-details { grid-template-columns: 1fr; }
    .mission-image, .contact-map { order: 1; }
    .mission-text, .contact-info { order: 2; text-align: center; }
    .mission-text .section-title, .mission-text p { text-align: center; max-width: 100%; }
}
@media (max-width: 768px) {
    .hero h2 { font-size: 40px; }
    .hero p { font-size: 24px; }
    .services-container { gap: 30px; }
    .stats-bar-wrapper, .social-wrapper { flex-direction: column; gap: 40px; }
    .stat-item:not(:last-child)::after { display: none; }
    .testimonial-slider .swiper-slide { width: auto; }
    .testimonial-card .quote { font-size: 1.2rem; }
}
/* --- كود تأثير الظهور عند التمرير --- */

/* --- كود تأثير الظهور عند التمرير --- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  visibility: hidden;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}