/**
 * RTL (Right-to-Left) Stylesheet for Arabic Version
 * Overrides and adjustments for Arabic language display
 */

/* HTML Document Direction */
html[lang="ar"] {
	direction: rtl;
	text-align: right;
	font-family:
		"Tajawal", "Segoe UI Arabic", "Arabic Typesetting", "Simplified Arabic",
		"Arial", sans-serif;
}

html[lang="ar"] body {
	text-align: center;
	font-family:
		"Tajawal", "Segoe UI Arabic", "Arabic Typesetting", "Simplified Arabic",
		"Arial", sans-serif;
}

/* Ensure language switcher text is white in Arabic view */
html[lang="ar"] .language-switcher a {
	color: white !important;
}

/* Ensure all text elements use Tajawal font for Arabic */
html[lang="ar"] p,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] li,
html[lang="ar"] div,
html[lang="ar"] a,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] label {
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
}

/* Hero section - ensure background image displays properly */
html[lang="ar"] .hero {
	text-align: center;
}

html[lang="ar"] .hero-pic {
	direction: ltr; /* Keep background image positioning normal */
}

html[lang="ar"] .hero-heading {
	direction: rtl; /* But text should be RTL */
	text-align: center;
}

html[lang="ar"] .hero h1,
html[lang="ar"] .hero p {
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
}

/* Text Alignment */
html[lang="ar"] .text-left {
	text-align: right !important;
}

html[lang="ar"] .text-right {
	text-align: left !important;
}

html[lang="ar"] p,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] li,
html[lang="ar"] span,
html[lang="ar"] div {
	text-align: center;
}

/* Margins & Padding Reversal */
html[lang="ar"] .ml-1 {
	margin-right: 0.25rem !important;
	margin-left: 0 !important;
}
html[lang="ar"] .ml-2 {
	margin-right: 0.5rem !important;
	margin-left: 0 !important;
}
html[lang="ar"] .ml-3 {
	margin-right: 1rem !important;
	margin-left: 0 !important;
}
html[lang="ar"] .ml-4 {
	margin-right: 1.5rem !important;
	margin-left: 0 !important;
}
html[lang="ar"] .ml-5 {
	margin-right: 3rem !important;
	margin-left: 0 !important;
}

html[lang="ar"] .mr-1 {
	margin-left: 0.25rem !important;
	margin-right: 0 !important;
}
html[lang="ar"] .mr-2 {
	margin-left: 0.5rem !important;
	margin-right: 0 !important;
}
html[lang="ar"] .mr-3 {
	margin-left: 1rem !important;
	margin-right: 0 !important;
}
html[lang="ar"] .mr-4 {
	margin-left: 1.5rem !important;
	margin-right: 0 !important;
}
html[lang="ar"] .mr-5 {
	margin-left: 3rem !important;
	margin-right: 0 !important;
}

html[lang="ar"] .pl-1 {
	padding-right: 0.25rem !important;
	padding-left: 0 !important;
}
html[lang="ar"] .pl-2 {
	padding-right: 0.5rem !important;
	padding-left: 0 !important;
}
html[lang="ar"] .pl-3 {
	padding-right: 1rem !important;
	padding-left: 0 !important;
}
html[lang="ar"] .pl-4 {
	padding-right: 1.5rem !important;
	padding-left: 0 !important;
}
html[lang="ar"] .pl-5 {
	padding-right: 3rem !important;
	padding-left: 0 !important;
}

html[lang="ar"] .pr-1 {
	padding-left: 0.25rem !important;
	padding-right: 0 !important;
}
html[lang="ar"] .pr-2 {
	padding-left: 0.5rem !important;
	padding-right: 0 !important;
}
html[lang="ar"] .pr-3 {
	padding-left: 1rem !important;
	padding-right: 0 !important;
}
html[lang="ar"] .pr-4 {
	padding-left: 1.5rem !important;
	padding-right: 0 !important;
}
html[lang="ar"] .pr-5 {
	padding-left: 3rem !important;
	padding-right: 0 !important;
}

/* Flexbox Direction Reversal */
html[lang="ar"] .flex-row {
	flex-direction: row-reverse;
}

html[lang="ar"] .justify-content-start {
	justify-content: flex-end !important;
}

html[lang="ar"] .justify-content-end {
	justify-content: flex-start !important;
}

html[lang="ar"] .justify-content-between {
	justify-content: space-between;
	direction: rtl;
}

/* Navigation Bar */
html[lang="ar"] .navbar {
	direction: rtl;
}

html[lang="ar"] .navbar-brand {
	margin-right: 0;
	margin-left: 1rem;
}

html[lang="ar"] .navbar-nav {
	direction: rtl;
}

html[lang="ar"] .navbar-nav .nav-item {
	text-align: right;
}

html[lang="ar"] .navbar-nav .nav-link {
	padding-right: 1.5rem !important;
	padding-left: 0 !important;
}

/* Forms */
html[lang="ar"] form {
	text-align: right;
}

html[lang="ar"] .form-group label {
	text-align: right;
	display: block;
}

html[lang="ar"] .form-control,
html[lang="ar"] .form-control:focus {
	text-align: right;
	direction: rtl;
}

html[lang="ar"] .input-group-text {
	border-right: 1px solid #ced4da;
	border-left: none;
}

html[lang="ar"] .input-group-prepend {
	order: 2;
}

html[lang="ar"] .input-group-append {
	order: 1;
}

/* Buttons */
html[lang="ar"] .btn {
	text-align: center;
}

html[lang="ar"] .btn-icon-left .btn-icon {
	margin-right: 0.5rem;
	margin-left: 0;
}

html[lang="ar"] .btn-icon-right .btn-icon {
	margin-left: 0.5rem;
	margin-right: 0;
}

/* Cards */
html[lang="ar"] .card {
	text-align: right;
}

html[lang="ar"] .card-body {
	text-align: right;
}

/* Lists */
html[lang="ar"] ul,
html[lang="ar"] ol {
	padding-right: 1.5rem;
	padding-left: 0;
}

html[lang="ar"] li {
	text-align: right;
}

/* Floats */
html[lang="ar"] .float-left {
	float: right !important;
}

html[lang="ar"] .float-right {
	float: left !important;
}

/* Borders */
html[lang="ar"] .border-left {
	border-right: 1px solid #dee2e6 !important;
	border-left: none !important;
}

html[lang="ar"] .border-right {
	border-left: 1px solid #dee2e6 !important;
	border-right: none !important;
}

/* Modals */
html[lang="ar"] .modal-content {
	direction: rtl;
	text-align: right;
}

html[lang="ar"] .modal-header {
	text-align: right;
}

html[lang="ar"] .modal-title {
	text-align: right;
}

/* Alerts */
html[lang="ar"] .alert {
	text-align: right;
	direction: rtl;
}

/* Dropdowns */
html[lang="ar"] .dropdown-menu {
	text-align: right;
	left: auto !important;
	right: 0 !important;
}

html[lang="ar"] .dropdown-item {
	text-align: right;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
}

/* Pagination */
html[lang="ar"] .pagination {
	direction: rtl;
}

/* Tables */
html[lang="ar"] table {
	text-align: right;
}

html[lang="ar"] th,
html[lang="ar"] td {
	text-align: right;
}

/* Sidebar (if applicable) */
html[lang="ar"] .sidebar {
	float: left;
	margin-right: 0;
	margin-left: 1rem;
}

html[lang="ar"] .main-content {
	float: right;
	margin-left: 0;
	margin-right: 1rem;
}

/* Custom Components */

/* Hero Section */
html[lang="ar"] .hero {
	text-align: right;
}

html[lang="ar"] .hero-title {
	text-align: right;
}

html[lang="ar"] .hero-subtitle {
	text-align: right;
}

/* Newsletter Section */
html[lang="ar"] .newsletter-section {
	text-align: right;
}

html[lang="ar"] .newsletter-form {
	text-align: right;
}

/* Footer */
html[lang="ar"] footer {
	text-align: right;
}

html[lang="ar"] footer ul {
	text-align: right;
}

html[lang="ar"] .footer-nav li {
	text-align: right;
}

html[lang="ar"] .social-links {
	text-align: right;
	direction: rtl;
}

html[lang="ar"] .social-links a {
	margin-right: 0.5rem;
	margin-left: 0;
}

/* Breadcrumbs */
html[lang="ar"] .breadcrumb {
	direction: rtl;
	text-align: right;
}

html[lang="ar"] .breadcrumb-item::before {
	content: "/";
	display: inline-block;
	padding: 0 0.5rem;
}

/* Carousels */
html[lang="ar"] .carousel {
	direction: rtl;
}

html[lang="ar"] .carousel-control-prev {
	right: auto;
	left: 0;
}

html[lang="ar"] .carousel-control-next {
	left: auto;
	right: 0;
}

/* Custom scrollbar direction */
html[lang="ar"] {
	scrollbar-gutter: stable;
}

/* Grid Reversal */
html[lang="ar"] .row {
	direction: rtl;
}

html[lang="ar"] .col {
	text-align: right;
}

/* Utility Overrides */
html[lang="ar"] .text-center {
	text-align: center !important;
}

html[lang="ar"] .text-justify {
	text-align: justify !important;
}

/* Font weights and styles remain unchanged */
html[lang="ar"] strong,
html[lang="ar"] b,
html[lang="ar"] .bold {
	font-weight: 700;
}

html[lang="ar"] em,
html[lang="ar"] i {
	font-style: italic;
}

/* Links */
html[lang="ar"] a {
	text-decoration: none;
	color: inherit;
}

html[lang="ar"] a:hover {
	text-decoration: underline;
}

/* Ensure consistent spacing in RTL */
html[lang="ar"] * {
	box-sizing: border-box;
}

/* Icon alignment for RTL */
html[lang="ar"] .icon-before {
	margin-right: 0.5rem;
	margin-left: 0;
}

html[lang="ar"] .icon-after {
	margin-left: 0.5rem;
	margin-right: 0;
}

/* Header and Navigation RTL fixes */
html[lang="ar"] header .header-content {
	direction: rtl;
}

html[lang="ar"] .logo {
	margin-right: 26px;
	margin-left: 0;
	text-align: center;
}

html[lang="ar"] .log {
	text-align: center;
}

html[lang="ar"] .fixedlogo {
	margin-right: 20px !important;
	margin-left: 0 !important;
}

/* Ensure header links are white */
html[lang="ar"] .fixedlogo a,
html[lang="ar"] header a {
	color: #fff !important;
}

html[lang="ar"] .contact-btn {
	text-align: left !important;
	display: flex !important;
	align-items: center !important;
	gap: 20px !important;
	width: auto !important;
	flex-wrap: nowrap !important;
	white-space: nowrap !important;
}

/* Profile section RTL */
html[lang="ar"] .profile-section .padding-container {
	flex-direction: row-reverse;
}

html[lang="ar"] .profile-section .profile-col {
	margin-left: 2em;
	margin-right: 0;
	text-align: center;
}

/* Profile header */
html[lang="ar"] .profile-section .profile-header {
	text-align: center;
	direction: rtl;
	padding: 0 4rem;
	padding-bottom: 4em;
}

html[lang="ar"] .profile-section .profile-header h1,
html[lang="ar"] .profile-section .profile-header h4 {
	text-align: center;
	direction: rtl;
}

html[lang="ar"] .ProfileName {
    text-align: right !important;
    direction: rtl;
    margin-right: 0 !important;
    margin-bottom: 0.5rem !important;
}

html[lang="ar"] .ProfileName h1 {
    text-align: center !important;
    direction: rtl;
    margin-bottom: 0.5rem !important;
}

/* Mobile override for ProfileName */
@media screen and (max-width: 768px) {
	html[lang="ar"] .ProfileName {
		text-align: center !important;
		margin-bottom: 2rem !important;
	}
}

/* Profile content */
html[lang="ar"] .profile-section .profile-content {
	text-align: center;
	direction: rtl;
}

html[lang="ar"] .profile-section .profile-info {
	text-align: center;
	direction: rtl;
	left: auto;
	right: 0;
	padding: 0 4rem !important;
}

html[lang="ar"] .profile-section .profile-info span {
	text-align: center;
	direction: rtl;
	display: block;
}

html[lang="ar"] .profile-section .profile-bio {
	text-align: center;
	direction: rtl;
	left: auto;
	right: 0;
	padding: 2rem 4rem !important;
}

html[lang="ar"] .profile-section .profile-bio h1,
html[lang="ar"] .profile-section .profile-bio h2,
html[lang="ar"] .profile-section .profile-bio h3,
html[lang="ar"] .profile-section .profile-bio p {
	text-align: center;
	direction: rtl;
}

html[lang="ar"] #contentBio,
html[lang="ar"] #contentBio h1,
html[lang="ar"] #contentBio h2,
html[lang="ar"] #contentBio h3,
html[lang="ar"] #contentBio p {
	text-align: center;
	direction: rtl;
}

html[lang="ar"] #shortbio,
html[lang="ar"] .shortbio {
    text-align: center;
    direction: rtl;
    margin-right: 0 !important;
    margin-left: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 6rem;
}

/* Override inline font styles for Arabic */
html[lang="ar"] #shortbio,
html[lang="ar"] #contentBio {
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
}

/* Profile links */
html[lang="ar"] .profile-section .profile-links {
	direction: rtl;
}

/* Profiles slider - force LTR for carousel scrollLeft() to work correctly */
html[lang="ar"] .profiles-slider {
    direction: ltr;
}

html[lang="ar"] .profiles-slider .section-heading {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .profiles-slider .item {
    direction: rtl;
}

html[lang="ar"] .profiles-slider .carTitle,
html[lang="ar"] .profiles-slider .carTitleoption {
    direction: rtl;
    text-align: center;
    font-family: 'Tajawal', 'Segoe UI Arabic', sans-serif !important;
}

html[lang="ar"] .profile-section .profile-links p {
	text-align: right;
	direction: rtl;
}

/* Section headings */
html[lang="ar"] .section-heading {
	text-align: center;
}

html[lang="ar"] .section-title h3 {
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
}

/* Resources intro section */
html[lang="ar"] .resources-intro {
	text-align: right;
}

html[lang="ar"] .resources-intro p {
	text-align: right;
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
}

/* Footer alignment */
html[lang="ar"] .footer .connect {
	border-left: 1px solid #fff;
	border-right: none;
	padding: 0 0 0 3rem;
}

html[lang="ar"] .footer-logo {
	text-align: center;
}

/* Book page */
html[lang="ar"] .content-padding {
	text-align: right;
}

/* Ensure all links use Tajawal */
html[lang="ar"] a,
html[lang="ar"] a:hover,
html[lang="ar"] a:focus {
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
}
/* ============================================
   POPUP RTL STYLES
   ============================================ */

/* Popup overlay and container */
html[lang="ar"] .popup-overlay {
	direction: rtl;
}

html[lang="ar"] .popup {
	direction: rtl;
	text-align: right;
}

html[lang="ar"] .popup-content {
	text-align: right;
}

/* Popup header */
html[lang="ar"] .popup-content-header {
	text-align: right;
	padding: 20px;
}

html[lang="ar"] .popup-content-header h2,
html[lang="ar"] .popup-content-header p {
	text-align: right;
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
}

/* Book cover in popup - float to left in RTL */
html[lang="ar"] .book-cover {
	float: left !important;
    margin-left: 0px;
    margin-right: 20px;
    margin-top: -30px;
}

/* Popup body */
html[lang="ar"] .popup-content-body {
	text-align: right;
	padding: 20px;
}

html[lang="ar"] .popup-content-body h3 {
	text-align: right;
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
}

html[lang="ar"] .popup-content-body p {
	text-align: right;
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
}

html[lang="ar"] .popup-content-body a {
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
}

/* Popup close button */
html[lang="ar"] .popup .close {
	left: 10px !important;
	right: auto !important;
}

/* Email input in popup */
html[lang="ar"] .popup #emailInput {
	text-align: right;
	direction: rtl;
}

/* ============================================
   MIDDLE BANNER (CONVERSATIONS SECTION) RTL
   ============================================ */

/* Section heading alignment */
html[lang="ar"] .drag-slider .section-heading {
	text-align: center;
	direction: rtl;
}

html[lang="ar"] .drag-slider .section-title {
	text-align: center;
}

html[lang="ar"] .drag-slider .section-title h3 {
	text-align: center;
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
}

html[lang="ar"] .drag-slider .section-title p {
	text-align: center;
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
	padding: 20px 65px;
}

/* ============================================
   PROFILE CARDS RTL STYLES
   ============================================ */

/* Profile card container */
html[lang="ar"] .interviews {
	direction: rtl;
}

html[lang="ar"] .item2,
html[lang="ar"] .item22,
html[lang="ar"] .more_video_post {
	text-align: center;
	direction: rtl;
}

/* Profile card text container */
html[lang="ar"] .textContainer {
	text-align: center;
}

/* Profile card image */
html[lang="ar"] .roundedImage {
	margin: 0 auto;
}

/* Profile card text */
html[lang="ar"] .ppp {
	text-align: center;
	padding: 20px;
}

html[lang="ar"] .carTitle {
	text-align: center;
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
	font-size: 1.7rem;
}

html[lang="ar"] .carTitleoption {
	text-align: center;
	font-family: "Tajawal", "Segoe UI Arabic", sans-serif !important;
}

/* Profile card hover effects */
html[lang="ar"] .item2:hover .ppp,
html[lang="ar"] .item22:hover .ppp {
	transform: none;
}

/* Book page RTL styles */
html[lang="ar"] .bookcover {
	float: left !important;
	margin-left: 80px !important;
	margin-right: 80px !important;
}

html[lang="ar"] .buybtns {
	direction: rtl;
}

html[lang="ar"] .buybtns li {
	float: right !important;
}

html[lang="ar"] .buybtns li a {
	margin-left: 5px !important;
	margin-right: 0 !important;
}

html[lang="ar"] .pbook {
	text-align: right;
	direction: rtl;
}

html[lang="ar"] .section-title,
html[lang="ar"] .titlebook {
	text-align: right;
	direction: rtl;
}

html[lang="ar"] .taglinetxt {
	text-align: right;
	direction: rtl;
}

html[lang="ar"] .redbandbanner {
	text-align: right;
	direction: rtl;
}

@media only screen and (max-width: 470px) {
	html[lang="ar"] .bookcover {
		float: unset !important;
		margin-left: 0px !important;
		margin-right: 0px !important;
	}
}