/* Google Translate Bar Remover - Ultra Strong Version */

/* CRITICAL: Hide the banner frame completely */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* CRITICAL: Keep body at top */
body {
    top: 0px !important;
    position: relative !important;
}

body.translated-ltr,
body.translated-rtl {
    top: 0px !important;
    margin-top: 0px !important;
    position: relative !important;
}

/* Hide all Google Translate iframes */
iframe.goog-te-banner-frame,
iframe.skiptranslate {
    display: none !important;
}

/* Remove top spacing */
html {
    margin-top: 0 !important;
}

html.translated-ltr,
html.translated-rtl {
    margin-top: 0 !important;
}

/* Hide tooltip and balloons */
#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
}

/* Hide powered by text */
.goog-logo-link {
    display: none !important;
}

.goog-te-gadget img {
    display: none !important;
}

/* ULTRA HIDE: All Google branding, icons, spinners */
.goog-te-spinner-pos,
.goog-te-spinner,
.goog-te-gadget span[style*="border"],
.goog-te-gadget span[style*="spinner"],
.goog-te-gadget>span>span,
.goog-te-gadget>span:not(:has(select)),
img[src*="translate.googleapis.com"],
img[src*="translate.google.com"],
img[src*="gstatic.com/images/branding"],
.goog-te-gadget span[style],
.skiptranslate>span,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

/* Hide "Powered by Google" text specifically & aggressively */
.goog-te-gadget {
    color: transparent !important;
    font-size: 0 !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ONLY show the dropdown select */
.goog-te-gadget .goog-te-combo {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
}

/* Keep widget in place and aligned */
#google_translate_element {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0 !important;
    line-height: 1;
}

/* FIX: Disable AOS animations when Google Translate is active to prevent invisible content */
body.translated-ltr [data-aos],
body.translated-rtl [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto !important;
}

/* Ensure scrolling works */
body.translated-ltr,
body.translated-rtl {
    overflow: auto !important;
}

/* === PREMIUM DROPDOWN STYLING === */

.goog-te-combo {
    /* Reset default styles */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* Box Styling */
    background-color: #ffffff !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 4px !important;
    padding: 8px 30px 8px 12px !important;

    /* Font Styling */
    font-family: 'Host Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0F0D0D !important;

    /* Layout */
    height: auto !important;
    line-height: 1.5 !important;
    outline: none !important;
    cursor: pointer !important;

    /* Transitions */
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;

    /* Custom Arrow Icon */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
}

/* Hover State */
.goog-te-combo:hover {
    border-color: #0056b3 !important;
    box-shadow: 0 4px 8px rgba(0, 86, 179, 0.1) !important;
    transform: translateY(-1px);
}

/* Focus State */
.goog-te-combo:focus {
    border-color: #0056b3 !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1) !important;
}

/* Fix for mobile text nodes occasionally leaking */
.goog-te-gadget span {
    display: none !important;
}

.goog-te-gadget .goog-te-combo {
    color: #333 !important;
}

/* === PREVENT ICONS FROM FLIPPING IN ARABIC (RTL) MODE === */

/* Prevent ALL SVG icons from flipping in RTL mode */
html.translated-rtl svg,
html[lang="ar"] svg,
body.translated-rtl svg {
    transform: scaleX(1) !important;
    direction: ltr !important;
}

/* Prevent icon images from flipping */
html.translated-rtl .icons img,
html[lang="ar"] .icons img,
body.translated-rtl .icons img,
html.translated-rtl img[src*="icons"],
html[lang="ar"] img[src*="icons"],
body.translated-rtl img[src*="icons"] {
    transform: scaleX(1) !important;
    direction: ltr !important;
}

/* Prevent service icons from flipping */
html.translated-rtl .service-main-boxarea .icons,
html[lang="ar"] .service-main-boxarea .icons,
body.translated-rtl .service-main-boxarea .icons,
html.translated-rtl .aboput-boxarea .icons,
html[lang="ar"] .aboput-boxarea .icons,
body.translated-rtl .aboput-boxarea .icons,
html.translated-rtl .others-boxarea .icons,
html[lang="ar"] .others-boxarea .icons,
body.translated-rtl .others-boxarea .icons {
    transform: scaleX(1) !important;
    direction: ltr !important;
}

/* Prevent header SVG icons from flipping */
html.translated-rtl .header-list svg,
html[lang="ar"] .header-list svg,
body.translated-rtl .header-list svg,
html.translated-rtl .tel-phn svg,
html[lang="ar"] .tel-phn svg,
body.translated-rtl .tel-phn svg {
    transform: scaleX(1) !important;
    direction: ltr !important;
}

/* Prevent Font Awesome icons from flipping */
html.translated-rtl .fa,
html[lang="ar"] .fa,
body.translated-rtl .fa,
html.translated-rtl .fa-solid,
html[lang="ar"] .fa-solid,
body.translated-rtl .fa-solid,
html.translated-rtl .fa-brands,
html[lang="ar"] .fa-brands,
body.translated-rtl .fa-brands,
html.translated-rtl .fab,
html[lang="ar"] .fab,
body.translated-rtl .fab {
    transform: scaleX(1) !important;
    direction: ltr !important;
}

/* Prevent arrow icons from flipping */
html.translated-rtl .fa-arrow-right,
html[lang="ar"] .fa-arrow-right,
body.translated-rtl .fa-arrow-right {
    transform: scaleX(1) !important;
    direction: ltr !important;
}

/* === FIX TOPBAR (HEADER-TOP-AREA) ICONS IN ARABIC === */

/* Fix topbar container for RTL */
html.translated-rtl .header-top-area,
html[lang="ar"] .header-top-area,
body.translated-rtl .header-top-area {
    direction: rtl !important;
}

html.translated-rtl .header-top-main,
html[lang="ar"] .header-top-main,
body.translated-rtl .header-top-main {
    direction: rtl !important;
}

/* Fix header list items in topbar - ensure icons and text align properly */
html.translated-rtl .header-list,
html[lang="ar"] .header-list,
body.translated-rtl .header-list {
    direction: rtl !important;
}

html.translated-rtl .header-list li,
html[lang="ar"] .header-list li,
body.translated-rtl .header-list li {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row-reverse !important;
    gap: 6px !important;
}

html.translated-rtl .header-list li a,
html[lang="ar"] .header-list li a,
body.translated-rtl .header-list li a {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row-reverse !important;
    gap: 6px !important;
}

/* Fix SVG icons in topbar header list */
html.translated-rtl .header-list li a svg,
html[lang="ar"] .header-list li a svg,
body.translated-rtl .header-list li a svg {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* Fix social icons area in topbar */
html.translated-rtl .hsocial-phn-area,
html[lang="ar"] .hsocial-phn-area,
body.translated-rtl .hsocial-phn-area {
    direction: rtl !important;
    flex-direction: row-reverse !important;
}

html.translated-rtl .header-links,
html[lang="ar"] .header-links,
body.translated-rtl .header-links {
    direction: ltr !important;
    margin: 0 0 0 24px !important;
}

/* Fix phone number in topbar */
html.translated-rtl .tel-phn,
html[lang="ar"] .tel-phn,
body.translated-rtl .tel-phn {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row-reverse !important;
    gap: 6px !important;
}

html.translated-rtl .tel-phn svg,
html[lang="ar"] .tel-phn svg,
body.translated-rtl .tel-phn svg {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* Fix Google Translate dropdown position in topbar */
html.translated-rtl #google_translate_element,
html[lang="ar"] #google_translate_element,
body.translated-rtl #google_translate_element {
    margin-right: 0 !important;
    margin-left: 15px !important;
}

/* === FIX ABOUT FORTUNE STARS SECTION IN RTL === */

/* Reverse the layout of aboput-boxarea in RTL mode */
html.translated-rtl .aboput-boxarea,
html[lang="ar"] .aboput-boxarea,
body.translated-rtl .aboput-boxarea {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: flex-start !important;
    gap: 20px !important;
}

/* Ensure icon stays on the right side in RTL */
html.translated-rtl .aboput-boxarea .icons,
html[lang="ar"] .aboput-boxarea .icons,
body.translated-rtl .aboput-boxarea .icons {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Content area takes remaining space */
html.translated-rtl .aboput-boxarea .content-area,
html[lang="ar"] .aboput-boxarea .content-area,
body.translated-rtl .aboput-boxarea .content-area {
    flex: 1 !important;
    text-align: right !important;
}

/* === FIX CHOOSE/ABOUT BOXAREA IN RTL === */

/* Reverse layout for choose-boxarea (used in about page) */
html.translated-rtl .choose-boxarea,
html[lang="ar"] .choose-boxarea,
body.translated-rtl .choose-boxarea {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: flex-start !important;
    gap: 20px !important;
}

/* Icon stays on right in RTL */
html.translated-rtl .choose-boxarea .icons,
html[lang="ar"] .choose-boxarea .icons,
body.translated-rtl .choose-boxarea .icons {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Content area alignment */
html.translated-rtl .choose-boxarea .content-area,
html[lang="ar"] .choose-boxarea .content-area,
body.translated-rtl .choose-boxarea .content-area {
    flex: 1 !important;
    text-align: right !important;
}

/* Fix call box area in RTL */
html.translated-rtl .call-boxarea,
html[lang="ar"] .call-boxarea,
body.translated-rtl .call-boxarea {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 15px !important;
}

html.translated-rtl .call-boxarea .content-area,
html[lang="ar"] .call-boxarea .content-area,
body.translated-rtl .call-boxarea .content-area {
    text-align: right !important;
}

/* === KEEP SLIDER/CAROUSEL NAVIGATION IN LTR === */

/* Keep swiper navigation buttons in LTR (don't reverse) */
html.translated-rtl .swiper-button-next,
html[lang="ar"] .swiper-button-next,
body.translated-rtl .swiper-button-next,
html.translated-rtl .swiper-button-prev,
html[lang="ar"] .swiper-button-prev,
body.translated-rtl .swiper-button-prev {
    direction: ltr !important;
}

/* Keep slider navigation positioning as is */
html.translated-rtl .swiper-button-next,
html[lang="ar"] .swiper-button-next,
body.translated-rtl .swiper-button-next {
    right: 10px !important;
    left: auto !important;
}

html.translated-rtl .swiper-button-prev,
html[lang="ar"] .swiper-button-prev,
body.translated-rtl .swiper-button-prev {
    left: 10px !important;
    right: auto !important;
}

/* === FIX TESTIMONIALS SECTION IN RTL === */

/* Apply RTL to testimonials section */
html.translated-rtl .testimonials-2,
html[lang="ar"] .testimonials-2,
body.translated-rtl .testimonials-2 {
    direction: rtl !important;
}

/* Testimonial box content in RTL */
html.translated-rtl .testimonial-boxarea,
html[lang="ar"] .testimonial-boxarea,
body.translated-rtl .testimonial-boxarea {
    text-align: right !important;
    direction: rtl !important;
}

/* Keep quote icon SVG from flipping */
html.translated-rtl .testimonial-boxarea .icons svg,
html[lang="ar"] .testimonial-boxarea .icons svg,
body.translated-rtl .testimonial-boxarea .icons svg {
    transform: scaleX(1) !important;
    direction: ltr !important;
}

/* Position quote icon on right side in RTL */
html.translated-rtl .testimonial-boxarea .icons,
html[lang="ar"] .testimonial-boxarea .icons,
body.translated-rtl .testimonial-boxarea .icons {
    display: flex !important;
    justify-content: flex-end !important;
}

/* Right-align testimonial text */
html.translated-rtl .testimonial-boxarea p,
html[lang="ar"] .testimonial-boxarea p,
body.translated-rtl .testimonial-boxarea p {
    text-align: right !important;
    direction: rtl !important;
}

/* Right-align testimonial author info */
html.translated-rtl .testimonial-boxarea .text,
html[lang="ar"] .testimonial-boxarea .text,
body.translated-rtl .testimonial-boxarea .text {
    text-align: right !important;
    direction: rtl !important;
}

/* Keep stars in LTR order but right-aligned */
html.translated-rtl .testimonial-boxarea ul,
html[lang="ar"] .testimonial-boxarea ul,
body.translated-rtl .testimonial-boxarea ul {
    direction: ltr !important;
    display: flex !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

/* ============================================ */
/* === RESPONSIVE RTL DESIGN FOR ALL DEVICES === */
/* ============================================ */

/* === MOBILE DEVICES (up to 767px) === */
@media (max-width: 767px) {
    /* ===== CRITICAL: FIX MOBILE HEADER ICONS & TEXT ALIGNMENT ===== */

    /* Fix SVG icons in mobile header - prevent them from appearing above text */
    html.translated-rtl .header-list li a svg,
    html[lang="ar"] .header-list li a svg,
    body.translated-rtl .header-list li a svg {
        display: inline-block !important;
        vertical-align: middle !important;
        margin-left: 4px !important;
        margin-right: 0 !important;
        transform: scaleX(1) !important;
        direction: ltr !important;
    }

    /* Fix header list items layout in mobile RTL */
    html.translated-rtl .header-list li,
    html[lang="ar"] .header-list li,
    body.translated-rtl .header-list li {
        display: inline-flex !important;
        align-items: center !important;
        flex-direction: row-reverse !important;
        gap: 4px !important;
    }

    html.translated-rtl .header-list li a,
    html[lang="ar"] .header-list li a,
    body.translated-rtl .header-list li a {
        display: inline-flex !important;
        align-items: center !important;
        flex-direction: row-reverse !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    /* Fix phone icon in mobile header */
    html.translated-rtl .tel-phn,
    html[lang="ar"] .tel-phn,
    body.translated-rtl .tel-phn {
        display: inline-flex !important;
        align-items: center !important;
        flex-direction: row-reverse !important;
        gap: 4px !important;
    }

    html.translated-rtl .tel-phn svg,
    html[lang="ar"] .tel-phn svg,
    body.translated-rtl .tel-phn svg {
        display: inline-block !important;
        vertical-align: middle !important;
        margin-left: 4px !important;
        margin-right: 0 !important;
        transform: scaleX(1) !important;
        direction: ltr !important;
    }

    /* Fix social icons in mobile header */
    html.translated-rtl .header-links li,
    html[lang="ar"] .header-links li,
    body.translated-rtl .header-links li {
        display: inline-flex !important;
        align-items: center !important;
    }

    html.translated-rtl .header-links li a i,
    html[lang="ar"] .header-links li a i,
    body.translated-rtl .header-links li a i {
        transform: scaleX(1) !important;
        direction: ltr !important;
    }

    /* Fix mobile offcanvas menu icons */
    html.translated-rtl .vl-offcanvas-info span a,
    html[lang="ar"] .vl-offcanvas-info span a,
    body.translated-rtl .vl-offcanvas-info span a {
        display: inline-flex !important;
        align-items: center !important;
        flex-direction: row-reverse !important;
        gap: 6px !important;
    }

    html.translated-rtl .vl-offcanvas-info span a i,
    html[lang="ar"] .vl-offcanvas-info span a i,
    body.translated-rtl .vl-offcanvas-info span a i {
        transform: scaleX(1) !important;
        direction: ltr !important;
        margin: 0 !important;
    }

    /* Fix mobile menu toggle button */
    html.translated-rtl .vl-header-action-item,
    html[lang="ar"] .vl-header-action-item,
    body.translated-rtl .vl-header-action-item {
        float: left !important;
    }

    /* Fix mobile navbar container */
    html.translated-rtl .vl-header-area .container,
    html[lang="ar"] .vl-header-area .container,
    body.translated-rtl .vl-header-area .container {
        direction: rtl !important;
    }

    /* Fix mobile logo alignment */
    html.translated-rtl .vl-logo,
    html[lang="ar"] .vl-logo,
    body.translated-rtl .vl-logo {
        text-align: right !important;
    }

    /* Mobile: About Fortune Stars Section */
    html.translated-rtl .aboput-boxarea,
    html[lang="ar"] .aboput-boxarea,
    body.translated-rtl .aboput-boxarea {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important;
    }

    html.translated-rtl .aboput-boxarea .content-area,
    html[lang="ar"] .aboput-boxarea .content-area,
    body.translated-rtl .aboput-boxarea .content-area {
        text-align: center !important;
    }

    html.translated-rtl .aboput-boxarea .icons,
    html[lang="ar"] .aboput-boxarea .icons,
    body.translated-rtl .aboput-boxarea .icons {
        justify-content: center !important;
    }

    /* Mobile: Choose/About Page Sections */
    html.translated-rtl .choose-boxarea,
    html[lang="ar"] .choose-boxarea,
    body.translated-rtl .choose-boxarea {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important;
    }

    html.translated-rtl .choose-boxarea .content-area,
    html[lang="ar"] .choose-boxarea .content-area,
    body.translated-rtl .choose-boxarea .content-area {
        text-align: center !important;
    }

    html.translated-rtl .choose-boxarea .icons,
    html[lang="ar"] .choose-boxarea .icons,
    body.translated-rtl .choose-boxarea .icons {
        justify-content: center !important;
    }

    /* Mobile: Call Box Area */
    html.translated-rtl .call-boxarea,
    html[lang="ar"] .call-boxarea,
    body.translated-rtl .call-boxarea {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
    }

    html.translated-rtl .call-boxarea .content-area,
    html[lang="ar"] .call-boxarea .content-area,
    body.translated-rtl .call-boxarea .content-area {
        text-align: center !important;
    }

    /* Mobile: Testimonials Section */
    html.translated-rtl .testimonials-2,
    html[lang="ar"] .testimonials-2,
    body.translated-rtl .testimonials-2 {
        padding: 20px 10px !important;
    }

    html.translated-rtl .testimonial-boxarea,
    html[lang="ar"] .testimonial-boxarea,
    body.translated-rtl .testimonial-boxarea {
        padding: 20px 15px !important;
    }

    html.translated-rtl .testimonial-boxarea .icons,
    html[lang="ar"] .testimonial-boxarea .icons,
    body.translated-rtl .testimonial-boxarea .icons {
        justify-content: center !important;
        margin-bottom: 15px !important;
    }

    html.translated-rtl .testimonial-boxarea p,
    html[lang="ar"] .testimonial-boxarea p,
    body.translated-rtl .testimonial-boxarea p {
        text-align: center !important;
        font-size: 14px !important;
    }

    html.translated-rtl .testimonial-boxarea .text,
    html[lang="ar"] .testimonial-boxarea .text,
    body.translated-rtl .testimonial-boxarea .text {
        text-align: center !important;
    }

    html.translated-rtl .testimonial-boxarea ul,
    html[lang="ar"] .testimonial-boxarea ul,
    body.translated-rtl .testimonial-boxarea ul {
        justify-content: center !important;
    }

    /* Mobile: Header & Navigation */
    html.translated-rtl .header-area,
    html[lang="ar"] .header-area,
    body.translated-rtl .header-area {
        text-align: right !important;
    }

    html.translated-rtl .mobile-menu,
    html[lang="ar"] .mobile-menu,
    body.translated-rtl .mobile-menu {
        direction: rtl !important;
        text-align: right !important;
    }

    /* Mobile: Service Boxes */
    html.translated-rtl .service-main-boxarea,
    html[lang="ar"] .service-main-boxarea,
    body.translated-rtl .service-main-boxarea {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important;
    }

    html.translated-rtl .service-main-boxarea .icons,
    html[lang="ar"] .service-main-boxarea .icons,
    body.translated-rtl .service-main-boxarea .icons {
        justify-content: center !important;
        margin: 0 auto 15px !important;
    }

    html.translated-rtl .service-main-boxarea .content-area,
    html[lang="ar"] .service-main-boxarea .content-area,
    body.translated-rtl .service-main-boxarea .content-area {
        text-align: center !important;
    }

    /* Mobile: Google Translate Dropdown */
    #google_translate_element {
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }

    .goog-te-combo {
        width: 100% !important;
        max-width: 200px !important;
        font-size: 13px !important;
        padding: 8px 25px 8px 10px !important;
    }
}

/* === TABLET DEVICES (768px to 1024px) === */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Tablet: About Fortune Stars Section */
    html.translated-rtl .aboput-boxarea,
    html[lang="ar"] .aboput-boxarea,
    body.translated-rtl .aboput-boxarea {
        gap: 15px !important;
    }

    html.translated-rtl .aboput-boxarea .icons,
    html[lang="ar"] .aboput-boxarea .icons,
    body.translated-rtl .aboput-boxarea .icons {
        flex-shrink: 0 !important;
        min-width: 60px !important;
    }

    /* Tablet: Choose/About Page Sections */
    html.translated-rtl .choose-boxarea,
    html[lang="ar"] .choose-boxarea,
    body.translated-rtl .choose-boxarea {
        gap: 15px !important;
    }

    html.translated-rtl .choose-boxarea .icons,
    html[lang="ar"] .choose-boxarea .icons,
    body.translated-rtl .choose-boxarea .icons {
        flex-shrink: 0 !important;
        min-width: 60px !important;
    }

    /* Tablet: Testimonials */
    html.translated-rtl .testimonials-2,
    html[lang="ar"] .testimonials-2,
    body.translated-rtl .testimonials-2 {
        padding: 30px 15px !important;
    }

    html.translated-rtl .testimonial-boxarea,
    html[lang="ar"] .testimonial-boxarea,
    body.translated-rtl .testimonial-boxarea {
        padding: 25px 20px !important;
    }

    html.translated-rtl .testimonial-boxarea p,
    html[lang="ar"] .testimonial-boxarea p,
    body.translated-rtl .testimonial-boxarea p {
        font-size: 15px !important;
    }

    /* Tablet: Service Boxes */
    html.translated-rtl .service-main-boxarea,
    html[lang="ar"] .service-main-boxarea,
    body.translated-rtl .service-main-boxarea {
        gap: 15px !important;
    }
}

/* === DESKTOP & LARGE SCREENS (1025px and above) === */
@media (min-width: 1025px) {

    /* Desktop: Maintain flex-direction row-reverse */
    html.translated-rtl .aboput-boxarea,
    html[lang="ar"] .aboput-boxarea,
    body.translated-rtl .aboput-boxarea {
        flex-direction: row-reverse !important;
        gap: 20px !important;
    }

    html.translated-rtl .choose-boxarea,
    html[lang="ar"] .choose-boxarea,
    body.translated-rtl .choose-boxarea {
        flex-direction: row-reverse !important;
        gap: 20px !important;
    }

    html.translated-rtl .call-boxarea,
    html[lang="ar"] .call-boxarea,
    body.translated-rtl .call-boxarea {
        flex-direction: row-reverse !important;
    }

    /* Desktop: Service boxes maintain RTL layout */
    html.translated-rtl .service-main-boxarea,
    html[lang="ar"] .service-main-boxarea,
    body.translated-rtl .service-main-boxarea {
        flex-direction: row-reverse !important;
    }
}

/* === EXTRA SMALL DEVICES (up to 480px) === */
@media (max-width: 480px) {

    /* Extra Small: Reduce padding and font sizes */
    html.translated-rtl .testimonial-boxarea,
    html[lang="ar"] .testimonial-boxarea,
    body.translated-rtl .testimonial-boxarea {
        padding: 15px 10px !important;
    }

    html.translated-rtl .testimonial-boxarea p,
    html[lang="ar"] .testimonial-boxarea p,
    body.translated-rtl .testimonial-boxarea p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    html.translated-rtl .testimonial-boxarea .text a,
    html[lang="ar"] .testimonial-boxarea .text a,
    body.translated-rtl .testimonial-boxarea .text a {
        font-size: 14px !important;
    }

    /* Extra Small: Google Translate Dropdown */
    .goog-te-combo {
        font-size: 12px !important;
        padding: 6px 20px 6px 8px !important;
    }

    /* Extra Small: Heading sizes */
    html.translated-rtl h1,
    html[lang="ar"] h1,
    body.translated-rtl h1 {
        font-size: 24px !important;
    }

    html.translated-rtl h2,
    html[lang="ar"] h2,
    body.translated-rtl h2 {
        font-size: 20px !important;
    }

    html.translated-rtl h3,
    html[lang="ar"] h3,
    body.translated-rtl h3 {
        font-size: 18px !important;
    }
}

/* === LANDSCAPE MOBILE (up to 767px in landscape) === */
@media (max-width: 767px) and (orientation: landscape) {

    html.translated-rtl .testimonial-boxarea,
    html[lang="ar"] .testimonial-boxarea,
    body.translated-rtl .testimonial-boxarea {
        padding: 15px 20px !important;
    }

    html.translated-rtl .aboput-boxarea,
    html[lang="ar"] .aboput-boxarea,
    body.translated-rtl .aboput-boxarea,
    html.translated-rtl .choose-boxarea,
    html[lang="ar"] .choose-boxarea,
    body.translated-rtl .choose-boxarea {
        flex-direction: row-reverse !important;
        text-align: right !important;
    }

    html.translated-rtl .aboput-boxarea .content-area,
    html[lang="ar"] .aboput-boxarea .content-area,
    body.translated-rtl .aboput-boxarea .content-area,
    html.translated-rtl .choose-boxarea .content-area,
    html[lang="ar"] .choose-boxarea .content-area,
    body.translated-rtl .choose-boxarea .content-area {
        text-align: right !important;
    }
}

/* === FIX FOR CONTAINERS AND ROWS IN RTL === */
html.translated-rtl .container,
html[lang="ar"] .container,
body.translated-rtl .container {
    direction: rtl !important;
}

html.translated-rtl .row,
html[lang="ar"] .row,
body.translated-rtl .row {
    direction: rtl !important;
}

/* === FIX BUTTONS AND LINKS IN RTL === */
html.translated-rtl .btn,
html[lang="ar"] .btn,
body.translated-rtl .btn,
html.translated-rtl .readmore,
html[lang="ar"] .readmore,
body.translated-rtl .readmore {
    direction: rtl !important;
}

/* === FIX FORMS IN RTL === */
html.translated-rtl input,
html[lang="ar"] input,
body.translated-rtl input,
html.translated-rtl textarea,
html[lang="ar"] textarea,
body.translated-rtl textarea,
html.translated-rtl select,
html[lang="ar"] select,
body.translated-rtl select {
    direction: rtl !important;
    text-align: right !important;
}

html.translated-rtl input::placeholder,
html[lang="ar"] input::placeholder,
body.translated-rtl input::placeholder,
html.translated-rtl textarea::placeholder,
html[lang="ar"] textarea::placeholder,
body.translated-rtl textarea::placeholder {
    text-align: right !important;
}