:root { --color-primary: #0b2c24; --color-primary-2: #23413a; --color-primary-3: #071a16; --color-secondary: #d4a04c; --color-secondary-2: #6a5026; --color-secondary-3: #ddb370; --color-secondary-4: #f6ecdb; --color-white: #fbf6ed; --color-white-2: #e7eae9; } body { font-family: "Readex Pro", sans-serif; scroll-behavior: smooth; box-sizing: border-box; margin: auto 0; } section { padding: 4rem 0; } .font-display { font-family: "Readex Pro", serif; } .btn-primary { background: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-primary-3) 100% ); transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(5, 150, 105, 0.3); } .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } /* Animation for sections */ .section-animate { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .section-animate.visible { opacity: 1; transform: translateY(0); } /* Smooth scroll behavior */ html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--color-white); } ::-webkit-scrollbar-thumb { background: var(--color-primary-2); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary-2); } /* Image hover effects */ .group:hover .group-hover\:scale-110 { transform: scale(1.1); } /* Line clamp for news descriptions */ .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Form focus styles */ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary-2); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1); } /* Animation keyframes */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 3s ease-in-out infinite; } /* Swiper */ /* Make arrow smaller */ .swiper-button-prev::after, .swiper-button-next::after { content: " " !important; /* default is 27px */ } .custom-arrow i { color: #34d399; /* emerald-400 */ } .custom-arrow i { width: 18px; height: 18px; } .custom-arrow { width: 44px; height: 44px; border-radius: 9999px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; transition: 0.25s ease; } .custom-arrow:hover { background: rgba(255, 255, 255, 0.35); transform: scale(1.1); } .dot-indicator { background-color: rgba(255, 255, 255, 0.4); } .dot-active { background-color: #34d399; /* emerald-400 */ } .custom-nav { width: 48px; height: 48px; border-radius: 1000px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; transition: 0.25s ease; } .custom-nav:hover { background: rgba(255, 255, 255, 0.35); transform: scale(1.1); } /* ============================================================ RTL / Arabic language support ============================================================ */ /* Apply Cairo when Arabic is active; keep Readex Pro for English */ html[dir="rtl"] body, body.lang-ar { font-family: "Cairo", "Readex Pro", sans-serif; } /* Flip swiper slider navigation arrows in RTL (swiper itself flips its internal layout when dir="rtl" is set on , but our custom absolute-positioned arrows use left/right which we need to mirror) */ html[dir="rtl"] .left-arrow i[data-lucide="chevron-left"] { left: auto; right: 0.75rem; transform: translateY(-50%) scaleX(-1); } html[dir="rtl"] .right-arrow i[data-lucide="chevron-right"] { right: auto; left: 0.75rem; transform: translateY(-50%) scaleX(-1); } /* Mirror arrow icons inside buttons/links in RTL so they still point "forward" in reading direction */ html[dir="rtl"] i[data-lucide="arrow-right"], html[dir="rtl"] i[data-lucide="arrow-up-right"], html[dir="rtl"] i[data-lucide="chevron-right"] { transform: scaleX(-1); } /* Tailwind utility classes that use directional values — provide RTL overrides for the handful used in this project */ html[dir="rtl"] .md\:text-left { text-align: right; } html[dir="rtl"] .text-left { text-align: right; } html[dir="rtl"] .text-right { text-align: left; } html[dir="rtl"] .md\:text-right { text-align: left; } /* Absolute-positioned decorative elements that reference left/right */ html[dir="rtl"] .absolute.-right-8 { right: auto; left: -2rem; } html[dir="rtl"] .absolute.-left-4 { left: auto; right: -1rem; } html[dir="rtl"] .absolute.bottom-4.left-4 { left: auto; right: 1rem; } html[dir="rtl"] .absolute.top-4.left-4 { left: auto; right: 1rem; } html[dir="rtl"] .absolute.top-4.right-4 { right: auto; left: 1rem; } /* Flex -space-x-2 (overlap avatars) — mirror so last image stays on top visually */ html[dir="rtl"] .-space-x-2 > * + * { margin-right: -0.5rem; margin-left: 0; } /* Language dropdown menu alignment — flush to the inline-end edge of its anchor in both LTR and RTL (Tailwind CDN may not ship logical props) */ .lang-menu { right: 0; } html[dir="rtl"] .lang-menu { right: auto; left: 0; } .lang-switcher .lang-toggle, .lang-menu [data-lang] { cursor: pointer; } /* Navbar ordering: in RTL the logo should stay on the right (start), links on the left (end) — flex row-reverse is NOT needed because writing direction already flips flex; just ensure gap spacing */ html[dir="rtl"] .lang-switcher .lang-toggle i[data-lucide="chevron-down"] { transform: none; } /* Prevent scrollbar flash from text-align change */ html[dir="rtl"] { text-align: right; } /* Form inputs read RTL naturally; just ensure placeholders align */ html[dir="rtl"] input::placeholder, html[dir="rtl"] textarea::placeholder { text-align: right; } /* Numbers, dates, emails should stay LTR even in Arabic context */ html[dir="rtl"] [data-ltr], html[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }