/* ==========================================
   RESPONSIVE DESIGN (التوافق الشامل مع الهواتف الذكية والأجهزة اللوحية)
   ========================================== */

@media (max-width: 992px) {
    /* تعديلات على مستوى التباعد والعناوين في الشاشات اللوحية */
    .hero-title {
        font-size: 2.8rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    /* تفعيل وإظهار زر القائمة المنسدلة للهواتف (Hamburger Menu) */
    .menu-toggle {
        display: flex;
    }

    /* تحويل القائمة العلوية لتصبح منزلقة عمودياً بالـ JavaScript */
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-white);
        flex-direction: column;
        gap: 0;
        text-align: center;
        border-bottom: 1px solid var(--color-border);
        max-height: 0; /* مخفي افتراضياً */
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    /* كلاس يتم إضافته بالـ JS لفتح القائمة بحركة ناعمة */
    .nav-menu.open {
        max-height: 300px; 
    }

    .nav-link {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid #f5f5f7;
    }

    /* تحويل الهيكل الشبكي (Grids) إلى عمود واحد ليناسب مقاس الهاتف */
    .hero-container {
        flex-direction: column-reverse; /* صورة الهيرو في الأعلى للنظافة التصميمية */
        text-align: center;
        padding-top: 40px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .btn-secondary {
        margin-right: 0;
        width: 100%;
        max-width: 300px;
    }
    
    .btn-primary {
        width: 100%;
        max-width: 300px;
    }

    .features-grid, .products-grid, .steps-grid, .testimonials-grid, .contact-grid {
        grid-template-columns: 1fr; /* عمود واحد */
        gap: 30px;
    }

    .details-container {
        flex-direction: column; /* تحويل التخصيص في صفحة التفاصيل لصف واحد عمودي */
        padding-top: 100px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-description {
        margin: 0 auto 20px auto;
    }
}