:root { --brand-navy: #2f3541; --brand-navy-800: #262b36; --brand-navy-900: #1f232b; --brand-cyan: #c1a47e; --brand-cyan-strong: #b49164; --brand-sand: #f5f1e8; --brand-gray-100: #f7f8fb; --brand-gray-200: #e7ebf2; --brand-gray-400: #9aa5b5; --brand-gray-500: #6c7482; --brand-gray-700: #394152; --brand-success: #22c55e; --shadow-soft: 0 10px 30px -12px rgba(47, 53, 65, 0.22); --shadow-card: 0 16px 44px -18px rgba(31, 35, 43, 0.3); --radius-lg: 1.25rem; --radius-xl: 1.75rem; } * { box-sizing: border-box; } html { overflow-x: hidden; } body { font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: radial-gradient(circle at 25% 20%, #faf7f1 0, #f7f4ee 35%, #f3f1ea 65%, #f1efe9 100%); color: var(--brand-gray-700); min-height: 100vh; overflow-x: hidden; } a { color: var(--brand-cyan-strong); } .nav-custom { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--brand-gray-200); position: sticky; top: 0; z-index: 60; box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.35); } .nav-custom .brand-icon { background: linear-gradient(135deg, var(--brand-cyan), var(--brand-cyan-strong)); padding: 0.6rem; border-radius: 0.85rem; color: #fff; box-shadow: var(--shadow-soft); } .nav-custom .brand-text { font-size: 1.3rem; font-weight: 800; color: var(--brand-navy); letter-spacing: -0.02em; } .nav-custom .nav-link-custom { color: var(--brand-gray-500); font-weight: 600; transition: color 0.2s ease, transform 0.2s ease; text-decoration: none; } .nav-custom .nav-link-custom:hover { color: var(--brand-cyan-strong); transform: translateY(-1px); } .btn-staff-login { background: linear-gradient(135deg, var(--brand-cyan-strong), var(--brand-cyan)); color: #fff !important; padding: 0.55rem 1.2rem; border-radius: 999px; font-weight: 700; transition: all 0.2s ease; box-shadow: var(--shadow-soft); border: none; } .btn-staff-login:hover { opacity: 0.95; color: #fff !important; transform: translateY(-1px); } .btn-language-dropdown { border: 1px solid var(--brand-gray-200); color: var(--brand-gray-700); background: #fff; font-weight: 700; border-radius: 999px; padding: 0.4rem 0.9rem; display: inline-flex; align-items: center; gap: 0.45rem; } .btn-language-dropdown:hover, .btn-language-dropdown:focus { border-color: var(--brand-cyan-strong); color: var(--brand-cyan-strong); background: #fff; } .language-dropdown .dropdown-menu { border: 1px solid var(--brand-gray-200); border-radius: 0.85rem; box-shadow: var(--shadow-soft); } .language-dropdown .dropdown-item { font-weight: 600; color: var(--brand-gray-700); } .language-dropdown .dropdown-item.active, .language-dropdown .dropdown-item:active { background: rgba(193, 164, 126, 0.16); color: var(--brand-navy); } .lang-flag { display: inline-block; line-height: 1; } .hero-section { background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(247, 244, 238, 0.25)), url("images/hero-madina.jpg") center/cover no-repeat; color: #fdfbf7; padding: 5.25rem 0 4.25rem; position: relative; overflow: hidden; min-height: 320px; } .hero-section .hero-bg, .hero-section .hero-overlay { position: absolute; inset: 0; pointer-events: none; } .hero-section .hero-overlay { background: radial-gradient(circle at 70% 50%, rgba(193, 164, 126, 0.08), transparent 38%), radial-gradient(circle at 10% 80%, rgba(47, 53, 65, 0.05), transparent 32%); } .hero-section .hero-bg .blob1, .hero-section .hero-bg .blob2 { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.16; } .hero-section .hero-bg .blob1 { width: 22rem; height: 22rem; background: #c1a47e; top: -4rem; right: -6rem; } .hero-section .hero-bg .blob2 { width: 26rem; height: 26rem; background: #b49164; bottom: -6rem; left: -8rem; } .hero-section h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 900; line-height: 1.3; margin-bottom: 1.25rem; color: #fdfbf7; text-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); } .hero-section .subtitle { font-size: 1.05rem; color: rgba(255, 255, 255, 0.9); max-width: 48rem; margin: 0 auto 2.2rem; line-height: 1.8; text-shadow: 0 8px 20px rgba(0, 0, 0, 0.32); } .hero-accent { color: #fdfbf7; background: rgba(47, 53, 65, 0.35); padding: 0.2em 0.6em; border-radius: 0.5em; display: inline-block; text-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); } .hero-cta { background: linear-gradient(135deg, rgba(47,53,65,0.95), rgba(38,43,54,0.95)); color: #fdfbf7; padding: 0.85rem 2.1rem; border-radius: 0.95rem; font-weight: 800; display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; transition: all 0.3s ease; box-shadow: var(--shadow-card); letter-spacing: 0.01em; } .hero-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 45px -22px rgba(0, 0, 0, 0.4); color: #fdfbf7; } .hero-badge { background: rgba(47, 53, 65, 0.48); border: 1px solid rgba(47, 53, 65, 0.55); color: #fdfbf7; text-shadow: 0 8px 18px rgba(0,0,0,0.28); padding: 0.85rem 1.6rem; border-radius: 0.95rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; } .hero-badge .dot { width: 10px; height: 10px; background: var(--brand-success); border-radius: 50%; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.15); } .section-title-border { border-right: 4px solid var(--brand-cyan-strong); padding-right: 1rem; } .section-title-border h2 { font-size: 1.95rem; font-weight: 800; color: var(--brand-navy); } .section-title-border p { color: var(--brand-gray-500); margin-top: 0.35rem; } .card-requirement { background: #fff; padding: 1.6rem; border-radius: var(--radius-lg); border: 1px solid var(--brand-gray-200); box-shadow: var(--shadow-soft); height: 100%; } .card-requirement .icon-wrap { width: 3.4rem; height: 3.4rem; background: linear-gradient(135deg, var(--brand-cyan), var(--brand-cyan-strong)); color: #fff; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; box-shadow: 0 12px 25px -15px rgba(193, 164, 126, 0.8); } .card-requirement h3 { font-size: 1.22rem; font-weight: 800; color: var(--brand-navy); margin-bottom: 0.45rem; } .card-requirement p { color: var(--brand-gray-500); font-size: 0.95rem; line-height: 1.7; } .alert-campaign { background: linear-gradient(135deg, #fef9c3, #fff5d1); border-right: 4px solid #f59e0b; padding: 1.6rem; border-radius: 0 1.2rem 1.2rem 0; display: flex; align-items: flex-start; gap: 1rem; box-shadow: 0 10px 22px -18px rgba(0, 0, 0, 0.35); } .alert-campaign h4 { color: #92400e; font-weight: 800; font-size: 1.12rem; margin-bottom: 0.25rem; } .alert-campaign p { color: #b45309; line-height: 1.7; margin-bottom: 0; } .steps-connector { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: var(--brand-gray-200); z-index: -1; } .step-card { background: #fff; border-radius: var(--radius-lg); border: 1px solid #e5e7eb; padding: 1.4rem 1.1rem 1.8rem; box-shadow: var(--shadow-soft); position: relative; height: 100%; } .step-circle { width: 3.6rem; height: 3.6rem; background: linear-gradient(135deg, var(--brand-cyan-strong), var(--brand-cyan)); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; margin: 0 auto 1.1rem; box-shadow: 0 14px 30px -16px rgba(193, 164, 126, 0.9); border: 8px solid #f8fafc; } .step-card h3 { font-size: 1.15rem; font-weight: 800; color: var(--brand-navy); margin-bottom: 0.65rem; } .step-card p { color: var(--brand-gray-500); font-size: 0.95rem; line-height: 1.7; } .contact-section { background: #fff; border-radius: var(--radius-xl); border: 1px solid var(--brand-gray-200); box-shadow: var(--shadow-card); overflow: hidden; } .contact-info { padding: 2rem; } .contact-info .contact-item { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; } .contact-info .contact-icon { width: 3.1rem; height: 3.1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-icon.phone { background: #eff6ff; color: var(--brand-cyan-strong); } .contact-icon.whatsapp { background: #ecfdf3; color: #16a34a; } .contact-icon.email { background: #fef2f2; color: #ef4444; } .contact-info .contact-label { font-size: 0.78rem; color: var(--brand-gray-400); text-transform: uppercase; font-weight: 800; letter-spacing: 0.08em; } .contact-info .contact-value { font-size: 1.1rem; font-weight: 800; color: var(--brand-gray-700); } .contact-info .contact-value a { color: inherit; text-decoration: none; } .contact-info .contact-value a:hover { color: var(--brand-cyan-strong); } body[dir="rtl"] .contact-info .contact-item { flex-direction: row-reverse; text-align: right; justify-content: flex-start; gap: 1rem; } body[dir="rtl"] .contact-info .contact-label, body[dir="rtl"] .contact-info .contact-value { text-align: right; } .contact-info .contact-icon { order: 0; } body[dir="rtl"] .contact-info .contact-icon { order: 1; } .contact-info .contact-text { display: flex; flex-direction: column; gap: 0.15rem; } .contact-value.ltr, .contact-value .ltr { direction: ltr; unicode-bidi: bidi-override; text-align: left; } .contact-cta-panel { background: linear-gradient(135deg, #f6f1e7, #efe6d7); color: var(--brand-navy); padding: 3rem 3.5rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; } .contact-cta-panel h3 { font-size: 1.45rem; font-weight: 800; margin: 0; color: var(--brand-navy); } .contact-cta-panel p { color: rgba(57, 65, 82, 0.9); margin: 0; line-height: 1.8; } .btn-download-template { background: linear-gradient(135deg, var(--brand-cyan), var(--brand-cyan-strong)); color: #fff; padding: 1rem 1.9rem; border-radius: 1rem; font-weight: 800; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; transition: all 0.25s ease; box-shadow: 0 12px 30px -14px rgba(193, 164, 126, 0.9); } .btn-download-template:hover { transform: translateY(-3px); box-shadow: 0 22px 38px -18px rgba(193, 164, 126, 1); color: #fff; } .btn-outline-virgo { border-color: var(--brand-cyan-strong); color: var(--brand-cyan-strong); padding: 0.8rem 1.8rem; font-weight: 800; border-width: 2px; } .btn-outline-virgo:hover { background: var(--brand-cyan-strong); color: #fff; border-color: var(--brand-cyan-strong); } .footer-custom { background: #fff; color: var(--brand-gray-500); margin-top: 3rem; box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05); border-top: 1px solid var(--brand-gray-200); } .footer-custom .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; } .footer-custom .footer-contact-group { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .footer-custom .footer-contact-link { color: var(--brand-gray-500); text-decoration: none; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.2s ease; } .footer-custom .footer-contact-link:hover { color: var(--brand-cyan); } .footer-custom .footer-social-group { display: flex; align-items: center; gap: 0.8rem; } .footer-custom .footer-social-link { color: var(--brand-gray-400); text-decoration: none; font-size: 1.1rem; transition: color 0.2s ease, transform 0.2s ease; } .footer-custom .footer-social-link:hover { color: var(--brand-cyan-strong); transform: translateY(-1px); } .footer-custom .footer-brand-link { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; transition: opacity 0.2s ease; } .footer-custom .footer-brand-link:hover { opacity: 0.9; } .footer-custom .footer-brand-name { font-size: 1.1rem; font-weight: 800; color: var(--brand-navy); white-space: nowrap; } .footer-custom .footer-brand-wordmark { display: none; color: var(--brand-cyan-strong); font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; } .footer-custom .footer-brand-logo { height: 3rem; width: auto; } .footer-custom .footer-copyright { text-align: center; margin: 1.4rem 0 0; color: var(--brand-gray-400); font-size: 0.9rem; } body[dir="rtl"] .footer-custom .footer-row { flex-direction: row-reverse; } .card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; } .card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); } .fade-in { animation: fadeIn 0.6s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .nav-mobile-toggler { min-width: 44px; min-height: 44px; -webkit-tap-highlight-color: transparent; color: var(--brand-gray-700); } .nav-mobile-toggler:hover { background: var(--brand-gray-100); color: var(--brand-navy); } .nav-mobile-menu { padding-bottom: 0.5rem; } .nav-mobile-link { display: block; padding: 0.75rem 0.5rem; color: var(--brand-gray-700); font-weight: 600; text-decoration: none; border-radius: 0.5rem; min-height: 44px; line-height: 1.4; display: flex; align-items: center; transition: background 0.2s ease, color 0.2s ease; } .nav-mobile-link:hover { background: var(--brand-gray-100); color: var(--brand-cyan-strong); } .nav-mobile-login { min-height: 40px; padding: 0.4rem 1rem; font-weight: 700; } @media (max-width: 991px) { .nav-custom { position: static; } .contact-cta-panel { padding: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-custom .footer-row { justify-content: center; } } @media (max-width: 767px) { .hero-section { padding: 3.5rem 1rem 2.75rem; } .hero-section h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); margin-bottom: 1rem; } .hero-section .subtitle { font-size: 0.95rem; margin-bottom: 1.5rem; padding: 0 0.5rem; } .hero-section .d-flex.flex-wrap { flex-direction: column; align-items: center; gap: 0.75rem; } .hero-cta, .hero-badge { width: 100%; max-width: 280px; justify-content: center; padding: 0.75rem 1.25rem; } .section-title-border { border-right: none; border-bottom: 4px solid var(--brand-cyan-strong); padding-right: 0; padding-bottom: 0.5rem; margin-bottom: 1rem; } body[dir="rtl"] .section-title-border { border-right: none; border-bottom: 4px solid var(--brand-cyan-strong); padding-left: 0; } .section-title-border h2 { font-size: 1.55rem; } .card-requirement { padding: 1.25rem; } .contact-section .row.g-0 { flex-direction: column; } .contact-info { padding: 1.5rem 1rem; } .contact-cta-panel { padding: 1.5rem 1rem; border-top: 1px solid var(--brand-gray-200); } .contact-cta-panel h3 { font-size: 1.25rem; } .btn-download-template { width: 100%; max-width: 280px; margin: 0 auto; display: flex; } .alert-campaign { flex-direction: column; gap: 0.75rem; padding: 1.25rem; border-right: none; border-bottom: 4px solid #f59e0b; border-radius: 0 0 1rem 1rem; } body[dir="rtl"] .alert-campaign { border-left: none; } .footer-custom .footer-row { text-align: center; gap: 1rem; } .footer-custom .footer-contact-group, .footer-custom .footer-social-group, .footer-custom .footer-brand-link { justify-content: center; width: 100%; } .footer-custom .container { padding-left: 1rem; padding-right: 1rem; } main.container { padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 575.98px) { .nav-custom .brand-text { font-size: 1.1rem; } .nav-custom .brand-icon { padding: 0.5rem; } .nav-custom .brand-icon i { font-size: 1.25rem !important; } .hero-section { padding: 3rem 0.75rem 2rem; } .step-card { padding: 1.25rem 1rem; } .step-circle { width: 3rem; height: 3rem; font-size: 1.25rem; border-width: 6px; } }