/* AboutUs Component */

                /* ─── shared ─────────────────────────────── */
                .ab-badge {
                    display: inline-flex; align-items: center; gap: 8px;
                    background: var(--secondary-color); color: #fff;
                    padding: 6px 20px; border-radius: 50px;
                    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3px;
                    margin-bottom: 20px;
                }
                .ab-rule {
                    margin-bottom: 20px;
                }
                .ab-rule::before {
                    content: ''; display: block;
                    width: 48px; height: 4px;
                    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
                    border-radius: 2px;
                }
                .ab-body-text { font-size: 0.97rem; color: #4b5563; line-height: 1.9; margin-bottom: 0; }

                /* Style1 helpers */
                .ab1-img-wrap { position: relative; padding: 0 0 28px 28px; }
                .ab1-img-accent {
                    position: absolute; bottom: 0; left: 0;
                    width: 82%; height: 76%; border-radius: 22px;
                    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                    opacity: 0.08; z-index: 0;
                }
                .ab1-img-box {
                    position: relative; z-index: 1;
                    border-radius: 22px; overflow: hidden;
                    box-shadow: 0 24px 64px rgba(0,0,0,0.11);
                }
                .ab1-img-box img { width: 100%; object-fit: cover; display: block; }
                .ab-feat-list { display: flex; flex-direction: column; gap: 0; }
                .ab-feat-row {
                    display: flex; align-items: flex-start; gap: 14px;
                    padding: 16px 0; border-bottom: 1px solid #f1f5f9;
                }
                .ab-feat-row:last-child { border-bottom: none; }
                .ab-feat-ico {
                    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
                    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                    display: flex; align-items: center; justify-content: center;
                    color: #fff; font-size: 1rem;
                }
                .ab-feat-row-title { font-size: 0.95rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 4px; }
                .ab-feat-row-text  { font-size: 0.84rem; color: #64748b; line-height: 1.6; margin: 0; }

                /* ─── Style 2 / 4 ────────────────────────── */
                .ab2-section { padding: 90px 0; }

                /* Image */
                .ab2-img-wrap { position: relative; padding: 0 0 32px 32px; }
                .ab2-img-accent {
                    position: absolute; bottom: 0; left: 0;
                    width: 80%; height: 74%; border-radius: 24px;
                    background: linear-gradient(145deg, var(--primary-color), var(--secondary-color));
                    opacity: 0.09; z-index: 0;
                }
                .ab2-img-box {
                    position: relative; z-index: 1;
                    border-radius: 24px; overflow: hidden;
                  
                }
                .ab2-img-box img { width: 100%; height: 650px; object-fit: cover; display: block; }

                /* Content */
                .ab2-title {
                    font-size: 2.2rem; font-weight: 800; line-height: 1.25; margin-bottom: 0;
                }
                .ab2-desc {
                    font-size: 0.97rem; color: #4b5563; line-height: 1.9; margin: 20px 0 36px;
                }

                /* ── ط§ظ„ط¬ط²ط، ط§ظ„ط¬ط¯ظٹط¯: ط¨ط·ط§ظ‚ط§طھ ط£ظپظ‚ظٹط© ── */
                .ab2-feats {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
                    gap: 14px;
                }
                .ab2-feat {
                    background: #f8fafc;
                    border-radius: 20px;
                    padding: 24px 16px 20px;
                    text-align: center;
                    border: 1.5px solid rgba(0,0,0,0.07);
                    border-bottom: 3px solid var(--primary-color);
                    transition: transform 0.35s ease, box-shadow 0.35s ease,
                                background-color 0.35s ease, border-color 0.35s ease;
                    cursor: default;
                }
                .ab2-feat:hover {
                    transform: translateY(-7px);
                    box-shadow: 0 18px 48px rgba(0,0,0,0.13);
                    background-color: var(--primary-color);
                    border-color: var(--primary-color);
                }

                .ab2-feat-icon {
                    width: 56px; height: 56px; border-radius: 16px;
                    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
                    display: flex; align-items: center; justify-content: center;
                    color: #fff; font-size: 1.25rem;
                    margin: 0 auto 16px;
                    transition: transform 0.4s ease, background-color 0.35s ease;
                    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
                }
                .ab2-feat:hover .ab2-feat-icon {
                    transform: rotate(-10deg) scale(1.1);
                    background: rgba(255,255,255,0.22) !important;
                    box-shadow: none;
                }

                .ab2-feat-title {
                    font-size: 0.95rem; font-weight: 700;
                    color: var(--secondary-color); margin-bottom: 8px;
                    transition: color 0.35s ease;
                }
                .ab2-feat:hover .ab2-feat-title {
                    color: #fff !important;
                }

                .ab2-feat-text,
                .ab2-feat-text p {
                    font-size: 0.82rem; color: #64748b; line-height: 1.65;
                    margin: 0; transition: color 0.35s ease;
                }
                .ab2-feat:hover .ab2-feat-text,
                .ab2-feat:hover .ab2-feat-text p,
                .ab2-feat:hover .ab2-feat-text * {
                    color: #fff !important;
                }