/* RTL Support for Arabic */

/* Almarai Font Face Definitions */
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/Almarai-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Almarai-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Almarai-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/Almarai-ExtraBold.ttf') format('truetype');
}

html[dir="rtl"] {
    direction: rtl;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: 'Almarai', sans-serif;
}

/* Apply Almarai font to Arabic text elements */
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] div,
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] label,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
    font-family: 'Almarai', sans-serif;
}

/* Ensure headings use Almarai as well */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'Almarai', sans-serif;
}

/* Ensure buttons use Almarai font */
html[dir="rtl"] .theme-btn,
html[dir="rtl"] .theme-btn-s2,
html[dir="rtl"] .theme-btn-s3,
html[dir="rtl"] .theme-btn-s4,
html[dir="rtl"] .theme-btn-s5,
html[dir="rtl"] .theme-btn *:not([class*="fa"]):not([class*="flaticon"]):not([class*="fi"]),
html[dir="rtl"] .theme-btn-s2 *:not([class*="fa"]):not([class*="flaticon"]):not([class*="fi"]),
html[dir="rtl"] .theme-btn-s3 *:not([class*="fa"]):not([class*="flaticon"]):not([class*="fi"]),
html[dir="rtl"] .theme-btn-s4 *:not([class*="fa"]):not([class*="flaticon"]):not([class*="fi"]),
html[dir="rtl"] .theme-btn-s5 *:not([class*="fa"]):not([class*="flaticon"]):not([class*="fi"]) {
    font-family: 'Almarai', sans-serif !important;
}

/* Preserve icon fonts - Font Awesome and Flaticon must keep their original fonts */
html[dir="rtl"] .fa,
html[dir="rtl"] [class*="fa-"],
html[dir="rtl"] i[class*="fa"] {
    font-family: "FontAwesome" !important;
}

html[dir="rtl"] [class^="flaticon-"],
html[dir="rtl"] [class*=" flaticon-"],
html[dir="rtl"] [class*="fi "],
html[dir="rtl"] i[class*="flaticon"],
html[dir="rtl"] i[class*="fi"] {
    font-family: Flaticon !important;
}

/* Navigation */
html[dir="rtl"] .navbar-nav {
    float: right;
}

html[dir="rtl"] .nav > li {
    float: right;
}

html[dir="rtl"] .navbar-nav > li {
    float: right;
}

/* Text alignment */
html[dir="rtl"] .text-left {
    text-align: right !important;
}

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

html[dir="rtl"] .text-center {
    text-align: center !important;
}

/* Floats */
html[dir="rtl"] .pull-left {
    float: right !important;
}

html[dir="rtl"] .pull-right {
    float: left !important;
}

/* Language switcher in topbar - Icon only */
.lang-switcher-topbar {
    margin: 0;
    flex-shrink: 0;
    order:2;
}

html[dir="rtl"] .lang-switcher-topbar {
    margin: 0;
    flex-shrink: 0;
}

.lang-switcher-topbar .lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: linear-gradient(135deg, #051829 0%, #0a2d4a 100%);
    color: #ffc934;
    text-decoration: none;
    border-radius: 50%;
    font-size: 0;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.lang-switcher-topbar .lang-btn:hover {
    background: linear-gradient(135deg, #fdc900 0%, #ffd700 100%);
    color: #051829;
    border-color: #fdc900;
    box-shadow: 0 4px 10px rgba(253, 201, 0, 0.3);
    transform: translateY(-2px) scale(1.1);
}

.lang-switcher-topbar .lang-btn i {
    font-size: 20px;
    line-height: 1;
}

@media (max-width: 767px) {
    .lang-switcher-topbar {
        margin-right: 10px;
        margin-left: 0;
    }
    
    html[dir="rtl"] .lang-switcher-topbar {
        margin-left: 10px;
        margin-right: 0;
    }
    
    .lang-switcher-topbar .lang-btn {
        width: 35px;
        height: 35px;
    }
    
    .lang-switcher-topbar .lang-btn i {
        font-size: 18px;
    }
}

/* Adjustments for RTL layout */
html[dir="rtl"] .col-lg-offset-1 {
    margin-right: 8.33333333%;
    margin-left: 0;
}

html[dir="rtl"] .col-lg-offset-2 {
    margin-right: 16.66666667%;
    margin-left: 0;
}

html[dir="rtl"] .col-md-offset-1 {
    margin-right: 8.33333333%;
    margin-left: 0;
}

html[dir="rtl"] .col-md-offset-2 {
    margin-right: 16.66666667%;
    margin-left: 0;
}

/* Container adjustments */
html[dir="rtl"] .container {
    direction: rtl;
}

/* Grid system adjustments */
html[dir="rtl"] .row {
    direction: rtl;
    margin-right: -15px;
    margin-left: -15px;
}

/* Fix Bootstrap columns in RTL */
html[dir="rtl"] [class*="col-"] {
    float: right;
}

html[dir="rtl"] .col-xs-1, html[dir="rtl"] .col-xs-2, html[dir="rtl"] .col-xs-3,
html[dir="rtl"] .col-xs-4, html[dir="rtl"] .col-xs-5, html[dir="rtl"] .col-xs-6,
html[dir="rtl"] .col-xs-7, html[dir="rtl"] .col-xs-8, html[dir="rtl"] .col-xs-9,
html[dir="rtl"] .col-xs-10, html[dir="rtl"] .col-xs-11, html[dir="rtl"] .col-xs-12 {
    float: right;
}

html[dir="rtl"] .col-sm-1, html[dir="rtl"] .col-sm-2, html[dir="rtl"] .col-sm-3,
html[dir="rtl"] .col-sm-4, html[dir="rtl"] .col-sm-5, html[dir="rtl"] .col-sm-6,
html[dir="rtl"] .col-sm-7, html[dir="rtl"] .col-sm-8, html[dir="rtl"] .col-sm-9,
html[dir="rtl"] .col-sm-10, html[dir="rtl"] .col-sm-11, html[dir="rtl"] .col-sm-12 {
    float: right;
}

/* Navigation menu */
html[dir="rtl"] .navbar-default .navbar-nav > li > a {
    text-align: right;
}

/* Buttons and links */
html[dir="rtl"] .theme-btn,
html[dir="rtl"] .theme-btn-s2,
html[dir="rtl"] .theme-btn-s3,
html[dir="rtl"] .theme-btn-s4 {
    direction: rtl;
}

/* Icons in RTL */
html[dir="rtl"] .fa-angle-right:before {
    content: "\f104"; /* fa-angle-left */
}

html[dir="rtl"] .offer-details .fa-angle-right:before {
    content: "\f104"; /* fa-angle-left */
}

/* Section titles */
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-title-s2,
html[dir="rtl"] .section-title-s3 {
    text-align: right;
}

/* Contact info */
html[dir="rtl"] .topbar-contact-info {
    direction: rtl;
}

html[dir="rtl"] .topbar-contact-info > div {
    text-align: right;
}

/* Topbar wrapper RTL fixes */
html[dir="rtl"] .topbar .row[style*="flex"] {
    direction: ltr; /* Keep LTR for flexbox to work correctly */
}

/* Fix for topbar row in RTL - Use flexbox order instead of direction */
html[dir="rtl"] .topbar-style-1 .container .row[style*="flex"] {
    direction: ltr;
}

html[dir="rtl"] .topbar-style-1 .container .row[style*="flex"] > .col:first-child {
    order: 2; /* Logo appears on right */
}

html[dir="rtl"] .topbar-style-1 .container .row[style*="flex"] > .col:last-child {
    order: 1; /* Contact info appears on left */
}

/* Fix flexbox issues in RTL - Keep same order but adjust alignment */
html[dir="rtl"] .topbar-contact-info-wrapper {
    direction: ltr; /* Keep LTR for flexbox to work correctly */
}

html[dir="rtl"] .topbar-contact-info-wrapper .topbar-contact-info {
    direction: rtl; /* RTL for content inside */
}

/* Reverse the order in topbar-contact-info-wrapper for RTL */
html[dir="rtl"] .topbar-contact-info-wrapper[style*="flex"] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .topbar-contact-info-wrapper .topbar-contact-info {
    order: 2; /* Contact info on left */
}

html[dir="rtl"] .topbar-contact-info-wrapper .lang-switcher-topbar {
    order: 1; /* Language button on right */
}

/* Ensure columns work correctly in RTL when not using flexbox */
html[dir="rtl"] .topbar .row:not([style*="flex"]) .col {
    float: right;
}

/* Footer */
html[dir="rtl"] .site-footer {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .site-footer .widget ul {
    text-align: right;
}

html[dir="rtl"] .site-footer .widget ul li {
    text-align: right;
}

/* Footer icons - Move to right side in RTL */
html[dir="rtl"] .site-footer .about-widget ul li {
    padding-left: 0;
    padding-right: 38px;
}

html[dir="rtl"] .site-footer .about-widget ul li i {
    left: auto;
    right: 0;
}

/* Footer info-box icons in twitter-feed-widget */
html[dir="rtl"] .site-footer .twitter-feed-widget i {
    padding-right: 0;
    padding-left: 5px;
}

html[dir="rtl"] .site-footer .twitter-feed-widget .info-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

html[dir="rtl"] .site-footer .twitter-feed-widget .info-box i {
    padding-right: 0;
    padding-left: 5px;
    order: 1;
}

html[dir="rtl"] .site-footer .twitter-feed-widget .info-box strong {
    order: 2;
}

/* Forms */
html[dir="rtl"] form {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] form label {
    text-align: right;
}

html[dir="rtl"] form input,
html[dir="rtl"] form textarea,
html[dir="rtl"] form select {
    text-align: right;
    direction: rtl;
}

/* Social links */
html[dir="rtl"] .social-links {
    direction: rtl;
}

/* Services grid - Keep LTR for carousel to work properly */
html[dir="rtl"] .services-grids {
    direction: ltr;
}

/* All Owl Carousel sliders need LTR direction to function properly */
html[dir="rtl"] .testimonials-slider,
html[dir="rtl"] .partners-slider,
html[dir="rtl"] .team-slider,
html[dir="rtl"] .testimoials-s2-slider,
html[dir="rtl"] .owl-carousel {
    direction: ltr;
}

/* Hero slider needs LTR direction to function properly */
html[dir="rtl"] .hero-slider,
html[dir="rtl"] .hero-slider-wrapper {
    direction: ltr !important;
}

/* Ensure hero slider container is properly set up */
html[dir="rtl"] .hero-slider-wrapper {
    position: relative;
    overflow: hidden;
}

html[dir="rtl"] .hero-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
}

/* Ensure hero section has proper height */
html[dir="rtl"] .hero {
    height: 680px !important;
    min-height: 680px !important;
    overflow: hidden !important;
}

@media (max-width: 991px) {
    html[dir="rtl"] .hero {
        height: 450px !important;
        min-height: 450px !important;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .hero {
        min-height: 420px !important;
        height: 420px !important;
    }
}

/* Ensure slick-list has proper height */
html[dir="rtl"] .hero .hero-slider .slick-list {
    height: 680px !important;
    min-height: 680px !important;
}

@media (max-width: 991px) {
    html[dir="rtl"] .hero .hero-slider .slick-list {
        height: 450px !important;
        min-height: 450px !important;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .hero .hero-slider .slick-list {
        min-height: 420px !important;
        height: 420px !important;
    }
}

/* Ensure hero slider slides are visible in RTL with full height */
html[dir="rtl"] .hero .slide {
    position: relative !important;
    z-index: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 680px !important;
    min-height: 680px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

@media (max-width: 991px) {
    html[dir="rtl"] .hero .slide {
        height: 450px !important;
        min-height: 450px !important;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .hero .slide {
        min-height: 420px !important;
        height: 420px !important;
    }
}

/* Show caption elements ONLY for the current/active slide */
html[dir="rtl"] .hero .hero-slider .slick-slide.slick-current .slide-caption > h2,
html[dir="rtl"] .hero .hero-slider .slick-slide.slick-current .slide-caption > p,
html[dir="rtl"] .hero .hero-slider .slick-slide.slick-current .slide-caption > .btns,
html[dir="rtl"] .hero .hero-slider .slick-slide.slick-active .slide-caption > h2,
html[dir="rtl"] .hero .hero-slider .slick-slide.slick-active .slide-caption > p,
html[dir="rtl"] .hero .hero-slider .slick-slide.slick-active .slide-caption > .btns {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 10;
    position: relative;
}

/* Ensure slide container and row are visible */
html[dir="rtl"] .hero .slide .container {
    position: relative !important;
    z-index: 2 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: table !important;
    height: 100% !important;
}

html[dir="rtl"] .hero .slide .row {
    position: relative !important;
    z-index: 2 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: table-cell !important;
    vertical-align: middle !important;
}

/* Ensure slide caption is visible */
html[dir="rtl"] .hero .slide-caption {
    position: relative !important;
    z-index: 3 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Default state: hide caption elements (same as style.css) */
html[dir="rtl"] .hero .hero-slider .slide-caption > h2,
html[dir="rtl"] .hero .hero-slider .slide-caption > p,
html[dir="rtl"] .hero .hero-slider .slide-caption > .btns {
    opacity: 0;
    color: #fff !important;
}

/* Ensure all slide caption children structure is correct - but don't force visibility */
html[dir="rtl"] .hero .slide-caption > h2,
html[dir="rtl"] .hero .slide-caption > p,
html[dir="rtl"] .hero .slide-caption > .btns {
    display: block !important;
}

/* Ensure slick slider components are visible */
html[dir="rtl"] .hero .hero-slider .slick-list {
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 680px !important;
}

html[dir="rtl"] .hero .hero-slider .slick-track {
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
}

@media (max-width: 991px) {
    html[dir="rtl"] .hero .hero-slider .slick-list {
        min-height: 450px !important;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .hero .hero-slider .slick-list {
        min-height: 420px !important;
    }
}

/* Note: slick-slide positioning is handled by the fade mode rules above */

/* Slick fade mode - slides need absolute positioning and opacity control */
html[dir="rtl"] .hero .hero-slider.slick-initialized .slick-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 680px !important;
    opacity: 0 !important;
    z-index: 0 !important;
    transition: opacity 1s ease !important;
}

html[dir="rtl"] .hero .hero-slider.slick-initialized .slick-slide.slick-active,
html[dir="rtl"] .hero .hero-slider.slick-initialized .slick-slide.slick-current {
    opacity: 1 !important;
    z-index: 1 !important;
}

@media (max-width: 991px) {
    html[dir="rtl"] .hero .hero-slider.slick-initialized .slick-slide {
        height: 450px !important;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .hero .hero-slider.slick-initialized .slick-slide {
        height: 420px !important;
    }
}

/* Ensure current slide is fully visible */
html[dir="rtl"] .hero .hero-slider .slick-slide.slick-current {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}

/* Allow Slick to control fade transitions properly */
html[dir="rtl"] .hero .hero-slider.slick-slider .slick-slide {
    pointer-events: auto !important;
}

/* Only show content of current/active slide - NOT first-child */
/* Remove forced visibility on first-child to allow proper slide transitions */

/* Ensure slide background images are loaded and visible */
html[dir="rtl"] .hero .slide[style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Fix animations for RTL - use fadeIn instead of fadeInLeftSlow */
html[dir="rtl"] .hero .hero-slider .slick-list .slick-current .slide-caption > h2 {
    -webkit-animation: fadeIn 1.5s 0.8s forwards !important;
    -moz-animation: fadeIn 1.5s 0.8s forwards !important;
    -o-animation: fadeIn 1.5s 0.8s forwards !important;
    -ms-animation: fadeIn 1.5s 0.8s forwards !important;
    animation: fadeIn 1.5s 0.8s forwards !important;
    animation-fill-mode: forwards !important;
    -webkit-animation-fill-mode: forwards !important;
}

html[dir="rtl"] .hero .hero-slider .slick-list .slick-current .slide-caption > p {
    -webkit-animation: fadeIn 1.5s 1.4s forwards !important;
    -moz-animation: fadeIn 1.5s 1.4s forwards !important;
    -o-animation: fadeIn 1.5s 1.4s forwards !important;
    -ms-animation: fadeIn 1.5s 1.4s forwards !important;
    animation: fadeIn 1.5s 1.4s forwards !important;
    animation-fill-mode: forwards !important;
    -webkit-animation-fill-mode: forwards !important;
}

html[dir="rtl"] .hero .hero-slider .slick-list .slick-current .slide-caption > .btns {
    -webkit-animation: fadeIn 1.5s 1.8s forwards !important;
    -moz-animation: fadeIn 1.5s 1.8s forwards !important;
    -o-animation: fadeIn 1.5s 1.8s forwards !important;
    -ms-animation: fadeIn 1.5s 1.8s forwards !important;
    animation: fadeIn 1.5s 1.8s forwards !important;
    animation-fill-mode: forwards !important;
    -webkit-animation-fill-mode: forwards !important;
}

/* Reset animation when slide changes */
html[dir="rtl"] .hero .hero-slider .slick-slide:not(.slick-current) .slide-caption > h2,
html[dir="rtl"] .hero .hero-slider .slick-slide:not(.slick-current) .slide-caption > p,
html[dir="rtl"] .hero .hero-slider .slick-slide:not(.slick-current) .slide-caption > .btns {
    opacity: 0 !important;
    animation: none !important;
    -webkit-animation: none !important;
}

/* Ensure hero section doesn't hide content - keep overflow hidden for slider but ensure content is visible */
html[dir="rtl"] .hero {
    position: relative;
    overflow: hidden; /* Required for slider fade effect */
}

html[dir="rtl"] .hero .hero-slider {
    position: relative;
    z-index: 1;
}

html[dir="rtl"] .hero-slider-wrapper {
    position: relative;
}

/* Ensure slick list and track work correctly - slick-list needs overflow hidden for slider to work */
html[dir="rtl"] .hero .hero-slider .slick-list {
    position: relative !important;
    overflow: hidden !important; /* Required for slider to work */
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 680px !important;
    min-height: 680px !important;
}

@media (max-width: 991px) {
    html[dir="rtl"] .hero .hero-slider .slick-list {
        height: 450px !important;
        min-height: 450px !important;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .hero .hero-slider .slick-list {
        min-height: 420px !important;
        height: 420px !important;
    }
}

html[dir="rtl"] .hero .hero-slider .slick-track {
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 680px !important;
    min-height: 680px !important;
    transform: none !important; /* Disable transform for fade mode */
}

@media (max-width: 991px) {
    html[dir="rtl"] .hero .hero-slider .slick-track {
        height: 450px !important;
        min-height: 450px !important;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .hero .hero-slider .slick-track {
        min-height: 420px !important;
        height: 420px !important;
    }
}

/* Ensure slider is interactive */
html[dir="rtl"] .hero .hero-slider {
    pointer-events: auto !important;
    user-select: none; /* Prevent text selection during drag */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

html[dir="rtl"] .hero .hero-slider .slick-list {
    pointer-events: auto !important;
    touch-action: pan-y; /* Enable touch scrolling */
}

html[dir="rtl"] .hero .hero-slider .slick-track {
    pointer-events: auto !important;
}

/* Ensure slides don't block interactions */
html[dir="rtl"] .hero .hero-slider .slick-slide {
    pointer-events: auto !important;
    cursor: default !important;
}

html[dir="rtl"] .hero .hero-slider .slick-slide.slick-active {
    pointer-events: auto !important;
}

/* Ensure arrows are always clickable */
html[dir="rtl"] .hero .slick-prev,
html[dir="rtl"] .hero .slick-next {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 99999 !important;
}

/* Ensure arrow buttons are not blocked */
html[dir="rtl"] .hero .slick-prev *,
html[dir="rtl"] .hero .slick-next * {
    pointer-events: none !important;
}

/* Projects grid */
html[dir="rtl"] .recent-projects-grids {
    direction: rtl;
}

/* News/Blog grid */
html[dir="rtl"] .news-grids {
    direction: rtl;
}

/* Entry meta - Blog post metadata */
html[dir="rtl"] .entry-meta ul {
    direction: rtl;
    padding-right: 0;
    text-align: right;
}

html[dir="rtl"] .entry-meta ul li {
    float: right !important;
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .entry-meta ul > li + li {
    margin-left: 0 !important;
    margin-right: 15px;
}

html[dir="rtl"] .entry-meta ul li i {
    padding-right: 0 !important;
    padding-left: 4px;
}

html[dir="rtl"] .entry-meta ul li a {
    text-align: right;
    direction: rtl;
}

/* Tags cloud and tag links */
html[dir="rtl"] .tags-cloud {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .tag-link {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .tag-link .badge {
    direction: ltr;
    margin-left: -3rem !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .blog-tags {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .blog-tags .fa-tags {
    margin-left: 5px !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .blog-tags a {
    direction: rtl;
    margin-left: 3px !important;
    margin-right: 0 !important;
}

/* Accordion */
html[dir="rtl"] .panel-heading {
    text-align: right;
}

html[dir="rtl"] .panel-body {
    text-align: right;
}

/* Slider arrows - Fix slick carousel arrows positioning */
/* Since carousels use LTR direction, arrows should work in LTR mode */
html[dir="rtl"] .slick-prev {
    right: auto !important;
    left: -25px;
}

html[dir="rtl"] .slick-next {
    left: auto !important;
    right: -25px;
}

html[dir="rtl"] .slider-arrow-s1 .slick-prev {
    right: auto !important;
    left: 10px;
}

html[dir="rtl"] .slider-arrow-s1 .slick-next {
    left: auto !important;
    right: 10px;
}

/* Hero slider arrows - Ensure they are visible and clickable */
html[dir="rtl"] .hero .slick-prev,
html[dir="rtl"] .hero .slick-next {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: absolute !important;
    cursor: pointer !important;
    background-color: #fdc900 !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 4px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Override slick-theme.css default styles */
html[dir="rtl"] .hero .slick-prev,
html[dir="rtl"] .hero .slick-next {
    background: #fdc900 !important;
    color: transparent !important;
}

html[dir="rtl"] .hero .slick-prev {
    right: auto !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

html[dir="rtl"] .hero .slick-next {
    left: auto !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

html[dir="rtl"] .hero .slick-prev:before,
html[dir="rtl"] .hero .slick-next:before {
    font-family: "FontAwesome" !important;
    opacity: 1 !important;
    color: #051829 !important;
    font-size: 20px !important;
    line-height: 45px !important;
    display: block !important;
    text-align: center !important;
}

html[dir="rtl"] .hero .slick-prev:before {
    content: "\f104" !important; /* fa-angle-left */
}

html[dir="rtl"] .hero .slick-next:before {
    content: "\f105" !important; /* fa-angle-right */
}

/* If arrows have inner i elements, hide them and use :before instead */
html[dir="rtl"] .hero .slick-prev i,
html[dir="rtl"] .hero .slick-next i {
    display: none !important;
}

html[dir="rtl"] .hero .slick-prev:hover,
html[dir="rtl"] .hero .slick-next:hover {
    background-color: #e4b500 !important;
}

@media screen and (min-width: 1600px) {
    html[dir="rtl"] .hero .slick-prev {
        left: 50px !important;
    }
    
    html[dir="rtl"] .hero .slick-next {
        right: 50px !important;
    }
}

/* Ensure arrows are visible on desktop, hidden on mobile as per original design */
@media (max-width: 991px) {
    html[dir="rtl"] .hero .slick-prev,
    html[dir="rtl"] .hero .slick-next {
        display: none !important;
    }
}

/* Mobile menu */
@media (max-width: 767px) {
    html[dir="rtl"] .navbar-collapse {
        text-align: right;
    }
    
    html[dir="rtl"] .navbar-nav {
        text-align: right;
    }
    
    /* Fix topbar on mobile in RTL */
    html[dir="rtl"] .topbar-style-1 .container .row[style*="flex"] {
        flex-direction: column;
    }
    
    html[dir="rtl"] .topbar .col-xs-3,
    html[dir="rtl"] .topbar .col-xs-9 {
        width: 100%;
        float: none;
        order: 0 !important;
    }
    
    html[dir="rtl"] .topbar-contact-info-wrapper {
        flex-direction: column;
        align-items: flex-start !important;
        direction: rtl;
    }
    
    html[dir="rtl"] .topbar-contact-info {
        width: 100%;
        margin-bottom: 10px;
        order: 0 !important;
    }
    
    html[dir="rtl"] .lang-switcher-topbar {
        align-self: flex-end;
        order: 0 !important;
    }
}

/* Fix for navigation bar in RTL */
html[dir="rtl"] .navigation {
    direction: rtl;
}

/* Position cart-contact (quote button) on the left in RTL */
html[dir="rtl"] .cart-contact {
    float: left;
    direction: rtl;
    right: auto;
    left: 0;
}

html[dir="rtl"] .get-quote {
    direction: rtl;
}

/* Additional fixes for layout stability */
html[dir="rtl"] .topbar-style-1 {
    direction: rtl;
}

html[dir="rtl"] .site-header {
    direction: rtl;
}

/* Clear floats in RTL */
html[dir="rtl"] .topbar::after,
html[dir="rtl"] .topbar .row::after {
    content: "";
    display: table;
    clear: both;
}

/* Fix for overlapping elements */
html[dir="rtl"] .topbar .col {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* Ensure proper spacing */
html[dir="rtl"] .topbar-contact-info-wrapper {
    width: 100%;
    box-sizing: border-box;
}

html[dir="rtl"] .topbar-contact-info {
    flex: 0 1 auto;
}

html[dir="rtl"] .lang-switcher-topbar {
    flex: 0 0 auto;
}

/* Fix flexbox issues in RTL - Keep same order but adjust alignment */
html[dir="rtl"] .topbar-contact-info-wrapper {
    direction: ltr; /* Keep LTR for flexbox to work correctly */
}

html[dir="rtl"] .topbar-contact-info-wrapper .topbar-contact-info {
    direction: rtl; /* RTL for content inside */
}

/* Reverse the order in topbar-contact-info-wrapper for RTL */
html[dir="rtl"] .topbar-contact-info-wrapper[style*="flex"] {
    flex-direction: row-reverse;
}

html[dir="rtl"] .topbar-contact-info-wrapper .topbar-contact-info {
    order: 2; /* Contact info on left */
}

html[dir="rtl"] .topbar-contact-info-wrapper .lang-switcher-topbar {
    order: 1; /* Language button on right */
}

.theme-btn-s2 {
    background-color: #1c2a55;
}
.section-title h2:before, .section-title-white h2:before, .section-title-s2 h2:before, .section-title-s5 h2:before, .section-title-s6 h2:before, .section-title-s7 h2:before {

    position: absolute;
    right: 0;

}

.theme-accordion-s1 .panel-heading a:before {
    font-family: "FontAwesome";
    content: "\f107";
    font-size: 20px;
    font-size: 1.33333rem;
    position: absolute;
    left: 25px;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}

.theme-accordion-s1 .panel-heading a:before {
    right: unset !important;

    left: 25px !important;

}

.site-footer .widget > h3:before, .site-footer .widget .footer-logo:before {
    right: 0;
}

.site-footer .quick-links-widget {
    padding-right: 0;
}

.site-footer .service-links-widget ul li:before {
    font-family: "FontAwesome";
    content: "\f104";
    color: #fdc900;
    position: absolute;
    left: 0;
    top: -3px;
}