/* RTL Overrides */
html[dir="rtl"] {
text-align: right;
}
html[dir="rtl"] .ul-header-actions {
/* Adjust language switcher margin in RTL */
}
/* Flip direction-specific icons */
html[dir="rtl"] .flaticon-fast-forward-double-right-arrows-symbol::before,
html[dir="rtl"] .flaticon-right-arrow::before,
html[dir="rtl"] .flaticon-next::before,
html[dir="rtl"] .flaticon-left-arrow::before {
transform: scaleX(-1);
display: inline-block;
}
/* Swiper automatically handles dir="rtl", but Splide might need explicit options or CSS */
html[dir="rtl"] .splide__arrow--prev {
left: auto;
right: 1em;
transform: scaleX(-1);
}
html[dir="rtl"] .splide__arrow--next {
right: auto;
left: 1em;
transform: scaleX(-1);
}
html[dir="rtl"] .flaticon-back::before, html[dir="rtl"] .flaticon-next::before { transform: scaleX(-1); display: inline-block; } html[dir="rtl"] .ul-banner-2-slider-navigation button img { transform: scaleX(-1); }
html[dir="rtl"] .ul-testimonial-2-slider-nav {
left: 0;
right: auto;
}
html[dir="rtl"] .ul-testimonial-2-overview-reviewers img {
margin-left: 0;
margin-right: calc(0% - clamp(18px, 1.31vw, 25px));
}
html[dir="rtl"] .ul-testimonial-2-overview-reviewers img:first-child {
margin-right: 0;
}
/* Fix layout gap in library details / donation details */
html[dir="rtl"] .ul-donation-details {
margin-left: 0;
margin-right: clamp(20px, 2.63vw, 50px);
}
@media screen and (max-width: 991px) {
html[dir="rtl"] .ul-donation-details {
margin-right: 0;
}
}
/* Fix overlap in testimonial sliders */
html[dir="rtl"] .ul-testimonial-2-slider {
margin-left: 0;
margin-right: clamp(16px, 2.94vw, 56px);
}
@media screen and (max-width: 1399px) {
html[dir="rtl"] .ul-testimonial-2-slider {
margin-right: 15px;
}
}
@media screen and (max-width: 991px) {
html[dir="rtl"] .ul-testimonial-2-slider {
margin-right: 0;
}
}
/* Fix nested comments margin */
html[dir="rtl"] .ul-blog-details-review-replies {
margin-left: 0;
margin-right: clamp(20px, 6.04vw, 115px);
}
/* Fix footer widget title underline in RTL */
html[dir="rtl"] .ul-footer-widget-title::before,
html[dir="rtl"] .ul-footer-widget-title::after {
left: auto;
right: 0;
}
html[dir="rtl"] .ul-footer-widget-title::after {
left: auto;
right: 24px;
}
/* Cairo Font Family */
@font-face {
font-family: 'Cairo';
src: url('../fonts/cairo/Cairo-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cairo';
src: url('../fonts/cairo/Cairo-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cairo';
src: url('../fonts/cairo/Cairo-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cairo';
src: url('../fonts/cairo/Cairo-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cairo';
src: url('../fonts/cairo/Cairo-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cairo';
src: url('../fonts/cairo/Cairo-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cairo';
src: url('../fonts/cairo/Cairo-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cairo';
src: url('../fonts/cairo/Cairo-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
:root[dir="rtl"] {
--font-arabic: 'Cairo', sans-serif;
--font-primary: var(--font-arabic);
--font-quicksand: var(--font-arabic);
--font-caveat: var(--font-arabic);
}
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] optgroup,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] ::placeholder,
html[dir="rtl"] text,
html[dir="rtl"] tspan {
font-family: var(--font-arabic);
}
/* Cairo Line Height Overrides for Tight Elements */
html[dir="rtl"] .ul-about-2-stat .number,
html[dir="rtl"] .ul-stats-item .number,
html[dir="rtl"] .ul-testimonial-2-overview .rating,
html[dir="rtl"] .ul-blog .date .number,
html[dir="rtl"] .ul-blog .date .txt,
html[dir="rtl"] .ul-blog-details-actions .tags-wrapper a,
html[dir="rtl"] .ul-blog-details-actions .tags-wrapper button,
html[dir="rtl"] .ul-pricing-package-price {
line-height: 1.2 !important;
}
/* Reset letter spacing for Arabic text (cursive connections break with letter-spacing) */
html[dir="rtl"] * {
letter-spacing: normal !important;
}
/* Flip hero banner gradient for RTL */
html[dir="rtl"] .ul-banner-2-slide::before {
background: linear-gradient(258.36deg, rgba(var(--ul-primary-rgb), 0.9) 1.87%, rgba(var(--ul-primary-rgb), 0.1) 98.72%);
}
/* Flip general gradient variable for RTL */
:root[dir="rtl"] {
--ul-gradient: linear-gradient(270deg, var(--ul-primary) 0%, var(--ul-secondary) 100%);
}
/* Fix button layout for Arabic (icon on left, text on right, flip arrow) */
html[dir="rtl"] .ul-btn {
flex-direction: row-reverse;
padding-right: clamp(6px, 0.47vw, 9px) !important;
padding-left: clamp(12px, 0.89vw, 17px) !important;
}
html[dir="rtl"] .ul-btn i {
transform: scaleX(-1);
}
/* Force button icon orientation and position */
html[dir="rtl"] .ul-btn i {
transform: scaleX(-1) !important;
}
html[dir="rtl"] .ul-btn i::before {
transform: none !important;
}
/* Fix header top address tab shape for RTL */
html[dir="rtl"] .ul-header-2 .ul-header-top-left .address {
padding-left: clamp(15px, 1.21vw, 23px);
padding-right: 0;
}
html[dir="rtl"] .ul-header-2 .ul-header-top-left .address::before {
right: auto;
left: 0;
border-top-left-radius: 999px;
border-top-right-radius: 0;
}
html[dir="rtl"] .ul-about-tabs-nav button:first-child { text-align: right; }
html[dir="rtl"] .ul-about-tabs-nav button:last-child { text-align: left; }