/* Dahanak - RTL Custom Styles */
/* Cairo font loaded via <link> in HTML head for better performance */

/* ============================================================ */
/* PRELOADER FALLBACK — auto-hide after 2.5s even if JS fails    */
/* ============================================================ */
/* The template hides the preloader via $(window).on('load',...) — that
   event may not fire when an external resource (Google Maps API,
   third-party script, etc.) hangs. Force-hide via pure-CSS animation
   so the site is never stuck on the spinner. */
@keyframes hidePreloader {
    0%   { opacity: 1; visibility: visible; }
    99%  { opacity: 0; visibility: visible; }
    100% { opacity: 0; visibility: hidden;  display: none; }
}
.preloader {
    animation: hidePreloader 0.5s ease-out 2s forwards !important;
}

/* Hide jQuery ptTimeSelect popup (was leaking into footer because timePicker.css isn't linked) */
#ptTimeSelectCntr,
.ptTimeSelectCntrPopup,
.pt-time-select {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

body {
    font-family: 'Cairo', 'Open Sans', sans-serif;
    direction: rtl;
    text-align: right;
}

h1, h2, h3, h4, h5, h6,
.main-menu .navigation li a,
.sec-title span,
.sec-title h1,
.thm-btn,
.slide-content .title,
.slide-content .big-title {
    font-family: 'Cairo', 'Poppins', sans-serif !important;
}

.pull-left { float: right !important; }
.pull-right { float: left !important; }
.float-left { float: right !important; }
.float-right { float: left !important; }
.text-left { text-align: right !important; }
.text-right { text-align: left !important; }

/* Ensure header is above slider globally */
.header-area {
    position: relative !important;
    z-index: 999999 !important;
}

/* ============ 1. TOP BAR ============ */
.top-bar-area .flex-box-three { flex-direction: row-reverse; }
.top-left { float: right; text-align: right; }
.top-right { float: left; }
.top-menu { float: left !important; }
.top-menu li {
    float: right !important;
    border-right: none !important;
    border-left: 1px solid #5569aa;
    padding: 0 15px;
}
.top-menu li:last-child { border-left: 0px solid !important; }
.top-menu li a i { margin-left: 6px; margin-right: 0; }

/* ============ 2. HEADER UPPER ============ */
.header-upper-left { float: right; }
.header-upper-right { float: left; }
.header-upper .state-select-box { float: right !important; }
.header-upper .state-content { float: left !important; }

.state-content .state ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}
.state-content .state ul li {
    display: inline-flex !important;
    align-items: center;
    flex-direction: row; /* RTL: icon (first child) على اليمين, text (second) على اليسار */
    gap: 8px;
    float: none !important;
    position: static;
    padding: 4px 8px;
    margin: 0 0 0 15px;
    border: none;
    border-left: 1px solid #e4e4e4;
    min-height: 30px;
}
.state-content .state ul li:last-child {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
}
.state-content .state ul li .icon-box {
    position: static !important;
    top: auto !important;
    transform: none !important;
    right: auto !important;
    left: auto !important;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.state-content .state ul li .icon-box i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    color: #bc8f3d;
    font-size: 14px;
}
.state-content .state ul li .text-box {
    padding: 0;
}
.state-content .state ul li .text-box p {
    margin: 0;
    line-height: 1.4;
    font-size: 14px;
    color: #555;
}

.header-upper-right p { float: right !important; }
.header-upper-right .sociallinks-style-one { float: right !important; margin-left: 0; margin-right: 10px; }
.sociallinks-style-one li { float: right !important; margin-right: 0 !important; margin-left: 15px !important; }
.sociallinks-style-one li:last-child { margin-left: 0px !important; }

/* Phone numbers LTR direction in RTL pages — stronger than plaintext */
.state-content .state ul li .text-box p,
.single-footer-widget .footer-contact-info li .text-holder h5,
.single-footer-widget .footer-contact-info li .text-holder h5 a {
    direction: ltr !important;
    unicode-bidi: embed !important;
    display: inline-block;
    text-align: right;
}

/* ============ 3. HEADER LOWER ============ */
.header-lower-left { float: right; }
.header-lower-right { float: left; margin-right: 0; margin-left: -161px; }

.main-menu { float: right; }
.main-menu .navigation { float: right; }
.main-menu .navigation > li { float: right; margin-left: 0; margin-right: 30px; }
.main-menu .navigation > li:first-child { margin-right: 0px; }
.main-menu .navigation li a { text-align: right; }

/* Dropdown icon - separate from underline underline */
.main-menu .navigation > li.dropdown > a {
    position: relative;
    padding-left: 15px;
}
.main-menu .navigation > li.dropdown > a:after {
    content: "\f0d7" !important;
    font-family: FontAwesome !important;
    position: absolute !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: inline-block !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    margin-right: 5px !important;
    font-size: 12px;
    line-height: 14px;
    color: inherit;
}

.main-menu .navigation > li > ul { left: auto !important; right: 0px !important; }
.main-menu .navigation li ul li a { text-align: right; padding: 15px 15px 15px 15px !important; }
.main-menu .navigation li ul li a:before { right: auto; left: 15px; content: "\f104"; font-family: FontAwesome; }

.mainmenu-middle { float: left; }
.mainmenu-middle ul li {
    float: right !important;
    margin-right: 0;
    margin-left: 10px;
    border-right: none;
    border-left: 1px solid #e4e4e4;
    padding-right: 0;
    padding-left: 10px;
}
.mainmenu-middle ul li:last-child { margin-left: 0px; border-left: 0px solid; padding-left: 0px; }
.mainmenu-right-box { float: left; margin-left: 0; margin-right: 50px; }
.sticky-header .left-colum { float: right !important; }
.sticky-header .right-colum { float: left !important; }

/* ============ 4. BANNER SLIDER ============ */
.rev_slider_wrapper .slide-content {
    border-left: none;
    border-right: 3px solid var(--primary-color);
    padding-left: 0;
    padding-right: 30px;
    max-width: 550px;
}
.rev_slider_wrapper .slide-content .btns-box a.thm-btn.pdone { margin-right: 0; margin-left: 9px; }
.rev_slider_wrapper .slide-content.right-slide { margin-right: 50px !important; }

/* ============ 5. SERVICE ICONS ============ */
.single-service-item { float: right; padding-left: 65px; padding-right: 180px; }
.single-service-item .icon-holder { left: auto; right: 60px; }
.single-service-item .icon-holder .overlay-icon { left: 0; right: 0; text-align: center; }

.single-service-item .icon-holder .overlay-icon i {
    font-size: 36px !important;
    color: #bc8f3d !important;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 400ms ease;
}
.single-service-item:hover .icon-holder .overlay-icon i { color: var(--primary-color) !important; }

.single-service-item .text-holder { text-align: right; }
.single-service-item .text-holder a.readmore i { margin-right: 5px; margin-left: 0; }

/* Service page box icons */
.single-service-box .icon-holder { left: 3px; right: auto; }
.single-service-box .icon-holder:after { left: -4px; right: auto; }
.single-service-box .icon-holder i {
    font-size: 32px !important;
    color: #bc8f3d !important;
    line-height: 38px;
    transition: all 400ms ease;
}

/* ============ 6. FEATURED BOX ICONS ============ */
.single-featured-box .icon-holder { text-align: center; }
.single-featured-box .icon-holder i {
    font-size: 40px !important;
    color: #bc8f3d !important;
    line-height: 1;
    transition: all 400ms ease;
}
.single-featured-box:hover .icon-holder i { color: var(--primary-color) !important; }
.featured-content-box .single-featured-box { text-align: center; }

/* ============ 7. FACT COUNTER ============ */
.single-fact-counter { float: right; }

/* ============ 8. CAROUSEL (BEFORE/AFTER) - FIXED ============ */
.latest-project-area {
    overflow: visible !important;
    padding-bottom: 30px;
}
.latest-project-area .sec-title {
    text-align: center;
}
.latest-project-area .sec-title .border {
    margin: 2px auto 13px;
}
.latest-project-area .row {
    display: flex;
    flex-wrap: wrap;
    position: static; /* أزيل position:relative حتى لا يحتوي أزرار الكروسيل absolute */
    align-items: flex-start;
}
.latest-project-area .row > [class*="col-"] {
    float: none !important;
}
.latest-project-area .left-content { text-align: right; }
.latest-project-area .right-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.latest-project-area .left-content a i { margin-left: 5px; margin-right: 0; }

/* شاهد المزيد - تدفق طبيعي داخل العمود */
.latest-project-area .left-content > a {
    position: static;
    display: inline-block;
    margin-top: 20px;
}
/* عكس سهم شاهد المزيد لـ RTL */
.latest-project-area .left-content > a i.fa-angle-right:before {
    content: "\f104";
}

/* أزرار الكروسيل - أسفل الصور، محاذية لليسار في RTL على الكومبيوتر */
.owl-nav-style-one .owl-nav {
    display: block !important;
    text-align: left !important;
    margin-top: 15px;
    position: static !important;
    top: auto !important;
    transform: none !important;
    right: auto !important;
}

@media (min-width: 992px) {
    .latest-project-area .left-content {
        position: relative !important;
        padding-bottom: 60px !important;
    }
    .latest-project-area .left-content > a {
        position: absolute !important;
        right: 15px !important;
        bottom: 0 !important;
        margin: 0 !important;
        display: inline-block !important;
    }
    .latest-project-area .owl-nav-style-one .owl-controls {
        position: absolute !important;
        right: -33.333% !important;
        width: 33.333% !important;
        left: auto !important;
        bottom: 0 !important;
        display: block !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    .owl-nav-style-one .owl-nav {
        display: block !important;
        text-align: left !important;
        margin: 0 !important;
        position: static !important;
    }
}
/* ضبط موضع وتوسيط الأسهم تماماً داخل الشكل الدائري لـ Owl Carousel */
.owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
}
.projects-carousel.owl-carousel { direction: ltr; }

/* ============ 9. TESTIMONIALS - COMPLETELY REBUILT ============ */
.customer-feedback {
    position: relative;
    overflow: visible;
}
.customer-feedback .thumb-box.style2 {
    text-align: center;
    margin-bottom: 30px;
}
.customer-feedback .thumb-box.style2 li {
    display: inline-block !important;
    float: none !important;
    margin: 0 8px !important;
}
.customer-feedback .thumb-box.style2 li a .img-holder {
    border-radius: 50%;
    overflow: hidden;
    width: 70px;
    height: 70px;
    border: 3px solid transparent;
    transition: all 300ms ease;
}
.customer-feedback .thumb-box.style2 li a.active .img-holder {
    border-color: #bc8f3d;
}
.customer-feedback .thumb-box.style2 li a.active .img-holder:before { display: none; }
.customer-feedback .bx-wrapper .bx-viewport {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto;
    right: 0;
    border-radius: 8px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
}
.single-testimonial-content {
    display: flex;
    flex-direction: row-reverse; /* نقل الاسم والحي لليمين بصرياً والنص لليسار */
    align-items: center;
    padding: 35px 40px;
    max-width: 900px;
    margin: 0 auto;
}
.single-testimonial-content .text-box {
    float: none !important;
    width: 72%;
    text-align: right;
    padding: 0 30px 0 0; /* إضافة حشوة من اليمين بدلاً من اليسار */
    position: relative;
}
.single-testimonial-content .text-box:before { display: none; }
.single-testimonial-content .text-box:after {
    content: "\f10d" !important;
    font-family: FontAwesome !important;
    font-size: 50px !important;
    color: #bc8f3d !important;
    opacity: 0.12;
    position: absolute;
    top: -15px;
    right: -10px;
}
.single-testimonial-content .text-box p {
    color: #555;
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    font-style: italic;
}
.single-testimonial-content .name-box {
    float: none !important;
    width: 28%;
    text-align: center;
    padding: 0;
    border-left: 1px solid #eee; /* تحويل الخط الرأسي ليكون على يسار الاسم */
    border-right: none !important;
    padding-left: 25px; /* إضافة حشوة من اليسار بدلاً من اليمين */
    padding-right: 0 !important;
}
.single-testimonial-content .name-box h4 {
    color: #bc8f3d;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
}
.single-testimonial-content .name-box p {
    color: #888;
    font-size: 14px;
    margin: 0;
}
/* Testimonial nav arrows — positioned BESIDE the card (left & right) */
.customer-feedback .col-md-12.col-sm-12 {
    position: relative;
}
/* The card-shape lives on the .bx-wrapper (single visible box).
   Internal slides keep transparent so they don't stack as ghost cards. */
.customer-feedback .bx-wrapper {
    max-width: 900px !important;
    margin: 0 auto !important;
    position: relative;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
}
.customer-feedback .bx-viewport {
    border-radius: 12px !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    overflow: hidden !important;
}
.customer-feedback .bxslider {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.customer-feedback .bxslider > li {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.customer-feedback .slider-pager:not(:has(.thumb-box)) {
    position: static;
}
.customer-feedback ul.nav-link {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    pointer-events: none;          /* arrows clickable but ul itself passthrough */
    z-index: 5;
}
.customer-feedback ul.nav-link li {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block !important;
    float: none !important;
    margin: 0 !important;
    pointer-events: auto;
}
/* Prev button — on the RIGHT side in RTL (start of reading direction) */
.customer-feedback ul.nav-link li#slider-prev {
    right: -30px;
    left: auto;
}
/* Next button — on the LEFT side in RTL */
.customer-feedback ul.nav-link li#slider-next {
    left: -30px;
    right: auto;
}
.customer-feedback ul.nav-link li a {
    display: flex;
    width: 48px;
    height: 48px;
    background: #fff;
    border: 2px solid #bc8f3d;
    color: #bc8f3d;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 300ms ease;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.customer-feedback ul.nav-link li a:hover {
    background: #bc8f3d;
    border-color: #bc8f3d;
    color: #fff;
    transform: scale(1.08);
}

/* Make the testimonial card visually balanced — content only,
   no background/shadow here (lives on .bx-wrapper). */
.customer-feedback .single-testimonial-content {
    padding: 45px 50px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.customer-feedback .single-testimonial-content .text-box p {
    font-size: 17px !important;
    line-height: 2 !important;
    font-family: 'Cairo', sans-serif !important;
    color: #444 !important;
    font-style: normal !important;
}
.customer-feedback .single-testimonial-content .name-box h4 {
    font-family: 'Cairo', sans-serif !important;
    font-size: 19px !important;
    color: var(--primary-color) !important;
}
.customer-feedback .single-testimonial-content .name-box p {
    font-family: 'Cairo', sans-serif !important;
    color: #bc8f3d !important;
    font-size: 14px !important;
}
/* Slightly larger thumbnails with a hover halo */
.customer-feedback .thumb-box.style2 {
    margin-bottom: 40px !important;
}
.customer-feedback .thumb-box.style2 li a .img-holder {
    width: 80px !important;
    height: 80px !important;
    border-width: 4px !important;
    opacity: 0.6;
    transition: all 300ms ease;
}
.customer-feedback .thumb-box.style2 li a:hover .img-holder {
    opacity: 1;
    transform: scale(1.05);
}
.customer-feedback .thumb-box.style2 li a.active .img-holder {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(188, 143, 61, 0.35);
}

/* Mobile — show arrows below the card again on small screens */
@media (max-width: 767px) {
    .customer-feedback ul.nav-link {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        text-align: center !important;
        margin-top: 25px !important;
        height: 50px;
    }
    .customer-feedback ul.nav-link li {
        position: relative;
        display: inline-block !important;
        top: auto;
        right: auto !important;
        left: auto !important;
        transform: none;
        margin: 0 6px !important;
    }
    .customer-feedback .single-testimonial-content {
        padding: 30px 25px !important;
    }
}

/* ============ 10. CALLO TO ACTION ============ */
.callto-action-text { text-align: right; }
.callto-action-text ul li i { padding-right: 0; padding-left: 15px; }
.callto-action-text .text-holder .founder-text {
    padding-left: 0;
    padding-right: 50px;
    border-left: none;
    border-right: 2px solid #ddd;
}
.callto-action-text .text-holder .founder-text:before { left: auto; right: 20px; }

/* ============ 11. ACCORDION ============ */
/* Flip the icon position for RTL */
.accordion-box .accordion .accord-btn:after,
.accordion-box .accordion .accord-btn::after {
    right: auto !important;
    left: 30px !important;
    /* Replace Flaticon font (which renders as empty boxes if font fails to
       load) with Font Awesome — universally reliable. */
    font-family: 'FontAwesome' !important;
    content: "\f067" !important;     /* fa-plus */
    font-size: 16px !important;
    font-weight: normal !important;
    color: #bc8f3d !important;
    width: 28px;
    height: 28px;
    line-height: 28px !important;
    border-radius: 50%;
    background: rgba(188, 143, 61, 0.10);
    text-align: center;
    transition: all 300ms ease;
}
.accordion-box .accordion .accord-btn.active:after,
.accordion-box .accordion .accord-btn.active::after {
    content: "\f068" !important;     /* fa-minus */
    color: #fff !important;
    background: #bc8f3d !important;
}
.accordion-box .accordion .accord-content { padding: 15px 40px 25px 30px; }

/* ============ 12. FORMS ============ */
.appointment-form input,
.appointment-form textarea,
.contact-form input,
.contact-form textarea,
.appointment-form select { text-align: right; }
.newsletter-form input { text-align: right; }

/* توحيد ارتفاع وتباعد جميع حقول نموذج التقدير */
.appointment-form input[type="text"],
.appointment-form input[type="tel"],
.appointment-form select {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 10px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 14px !important;
    color: #555 !important;
    display: block !important;
    line-height: normal !important;
    vertical-align: middle !important;
    background: #fff !important;
}
.appointment-form select {
    cursor: pointer !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

/* ============ 13. BREADCRUMB ============ */
.breadcrumb-bottom .left { float: right !important; }
.breadcrumb-bottom .right { float: left !important; }
.breadcrumb-bottom .left ul li { float: right; margin-left: 10px; margin-right: 0; }
.breadcrumb-bottom .left ul li i.fa-angle-right:before { content: "\f104"; }

/* ============ 14. BLOG ============ */
.single-blog-post { text-align: right; }

/* ============ 15. FOOTER ============ */
.single-footer-widget { text-align: right; }
.footer-bottom { text-align: right; }
.footer-bottom .copyright-text { float: right !important; text-align: right; }
.footer-bottom .footer-menu { float: left !important; }
.footer-bottom .footer-menu ul li { float: right; margin-right: 0; margin-left: 20px; }
.single-footer-widget .footer-contact-info li {
    padding-left: 0;
    padding-right: 35px;
}
.single-footer-widget .footer-contact-info li .icon-holder {
    left: auto;
    right: 0;
    float: none;
}
.single-footer-widget .footer-contact-info li .text-holder { margin-right: 0; margin-left: 0; }
.usefull-links li a i {
    margin-left: 5px;
    margin-right: 0;
    padding-left: 9px;
    padding-right: 0;
}
.usefull-links li a i.fa-angle-right:before { content: "\f104"; }
.fa-tiktok:before { content: "\f03d"; }
.socialicon-style-two li { float: right !important; margin-right: 0 !important; margin-left: 10px !important; }
.socialicon-style-two li:last-child { margin-left: 0px !important; }

/* ============ 16. READMORE RTL ============ */
.readmore i.fa-angle-right:before { content: "\f104"; }
.left-content a i.fa-angle-right:before { content: "\f104"; }

/* ============ 17. STATE BOX ============ */
.state-select-box .icon-holder { right: auto; left: 10px; }
.state-select-box select { padding: 10px 15px 10px 35px; text-align: right; }

/* ============ 18. RTL UI ============ */
.thm-btn { text-align: center; }
.outer-search-box .seach-toggle { text-align: center; }
.working-area .text-holder { text-align: right; }
.working-area .text-holder a i { margin-right: 5px; margin-left: 0; }
.price-filter .price-slider-amount { text-align: right; }
.shop-products .single-shop-item { text-align: right; }
.filter-list { text-align: center; }
.single-team-member { text-align: center; }

/* ============ 19. WHATSAPP FLOAT ============ */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    left: auto;
    z-index: 9999;
    background: #25d366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}
.whatsapp-float:hover { background: #128C7E; color: #fff; transform: scale(1.1); }

/* Scroll-to-top: موضعه على اليسار الفيزيائي (لا يتداخل مع زر الواتساب على اليمين) */
.scroll-to-top {
    right: auto !important;
    left: 20px !important;
}

.mobile-whatsapp-sticky {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #25d366;
    color: #fff;
    text-align: center;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    z-index: 9998;
    text-decoration: none;
}
.mobile-whatsapp-sticky:hover { color: #fff; background: #128C7E; }
@media (max-width: 767px) {
    .mobile-whatsapp-sticky { display: block; }
    .whatsapp-float { bottom: 75px !important; right: 15px !important; left: auto !important; }
    .scroll-to-top { bottom: 75px !important; left: 15px !important; right: auto !important; }
}

/* ============ 20. CUSTOM COMPONENTS ============ */
.service-box-custom {
    background: #f9f6f2;
    padding: 40px 30px;
    border-radius: 5px;
    margin-bottom: 30px;
    text-align: center;
    transition: all 0.3s;
}
.service-box-custom:hover { background: #bc8f3d; color: #fff; }
.service-box-custom:hover h3,
.service-box-custom:hover p { color: #fff; }
.service-box-custom .icon { font-size: 48px; color: #bc8f3d; margin-bottom: 20px; }
.service-box-custom:hover .icon { color: #fff; }
.service-box-custom h3 { color: #2c2c2c; margin-bottom: 15px; font-size: 20px; }

.trust-badge { text-align: center; padding: 20px; }
.trust-badge .icon { font-size: 36px; color: #bc8f3d; margin-bottom: 10px; }
.trust-badge h4 { font-size: 16px; color: #2c2c2c; margin-bottom: 5px; }
.trust-badge p { font-size: 13px; color: #888; }

.step-box { text-align: center; padding: 30px 15px; position: relative; }
.step-box .step-number {
    width: 50px; height: 50px; line-height: 50px;
    background: #bc8f3d; color: #fff; border-radius: 50%;
    font-size: 20px; font-weight: 700; margin: 0 auto 15px;
}
.step-box h4 { color: #2c2c2c; font-size: 16px; margin-bottom: 10px; }
.step-box p { color: #888; font-size: 14px; }

.price-card { background: #fff; border: 2px solid #f0f0f0; border-radius: 5px; padding: 30px; text-align: center; transition: all 0.3s; margin-bottom: 30px; }
.price-card:hover { border-color: #bc8f3d; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.price-card h3 { color: #2c2c2c; }
.price-card .price { font-size: 28px; color: #bc8f3d; font-weight: 700; margin: 15px 0; }

.before-after-box { position: relative; margin-bottom: 30px; }
.before-after-box .row {
    display: flex !important;
    flex-direction: row !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}
.before-after-box .row > div {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 2px !important;
    float: none !important;
    position: relative !important;
}
.before-after-box img { width: 100%; display: block; border-radius: 4px; cursor: pointer; transition: transform 0.3s ease; }
.before-after-box img:hover { transform: scale(1.02); }
.before-after-box .label { position: absolute; top: 10px; padding: 5px 15px; font-size: 12px; font-weight: 600; color: #fff; border-radius: 3px; z-index: 5; }
.before-after-box .label-before { right: 12px; background: #c0392b; }
.before-after-box .label-after { left: 12px; background: #27ae60; }

/* Premium Glassmorphism Lightbox Modal */
.image-lightbox-modal {
    display: none;
    position: fixed;
    z-index: 1000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(10, 20, 30, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
    align-items: center;
    justify-content: center;
}
.image-lightbox-modal.show {
    display: flex;
    opacity: 1;
}
.image-lightbox-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.image-lightbox-modal.show .image-lightbox-content {
    transform: scale(1);
}
.image-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 1000001;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-lightbox-close:hover {
    color: #bc8f3d;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Lightbox Badge */
.lightbox-badge {
    position: absolute;
    bottom: 30px;
    right: 50%;
    transform: translateX(50%);
    padding: 8px 24px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    border-radius: 30px;
    font-family: 'Cairo', sans-serif;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000002;
    transition: background-color 0.3s ease;
}
.lightbox-badge.before {
    background-color: #c0392b; /* Red */
}
.lightbox-badge.after {
    background-color: #27ae60; /* Green */
}

/* Lightbox Arrows */
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 40px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1000002;
    user-select: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.lightbox-arrow:hover {
    color: #bc8f3d;
    background: rgba(255, 255, 255, 0.2);
    border-color: #bc8f3d;
    transform: translateY(-50%) scale(1.1);
}
.lightbox-arrow-right {
    right: 40px;
}
.lightbox-arrow-left {
    left: 40px;
}

/* Responsive adjustments for mobile lightboxes */
@media (max-width: 767px) {
    .lightbox-arrow {
        width: 45px;
        height: 45px;
        font-size: 28px;
    }
    .lightbox-arrow-right {
        right: 15px;
    }
    .lightbox-arrow-left {
        left: 15px;
    }
    .lightbox-badge {
        bottom: 20px;
        font-size: 14px;
        padding: 6px 18px;
    }
}

/* ============================================================ */
/* SERVICE DETAIL PAGES — EQUAL-HEIGHT CARDS in card grids       */
/* ============================================================ */
/* The .row defaults to flex (Bootstrap 4) but each col only takes its
   content height by default. Force every col to stretch full height and
   every card type inside to fill its col so neighbours line up. */

.service-detail .row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch !important;
}
.service-detail .row > [class*="col-"] {
    display: flex !important;
    flex-direction: column;
}
/* Every card flavour stretches the column it lives in */
.service-detail .service-box-custom,
.service-detail .price-card,
.service-detail .step-box,
.service-detail .before-after-box,
.service-detail .row > [class*="col-"] > div[style] {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* Push the description text to bottom-align nicely inside flex cards */
.service-detail .service-box-custom > h3,
.service-detail .price-card > h3,
.service-detail .step-box > h4 {
    flex: 0 0 auto;
}
.service-detail .service-box-custom > p,
.service-detail .price-card > p,
.service-detail .step-box > p {
    flex: 1 1 auto;
    margin-bottom: 0 !important;
}
/* Icon area stays at fixed size at the top */
.service-detail .service-box-custom .icon,
.service-detail .step-box .step-number {
    flex: 0 0 auto;
}

/* Color swatches (inline-styled divs in row > col-md-4) — equalise too */
.service-detail .row > [class*="col-"] > div[style*="background:#"],
.service-detail .row > [class*="col-"] > div[style*="background: #"] {
    margin-bottom: 0 !important;  /* let the col gap handle spacing */
}
.service-detail .row > [class*="col-"] > div[style*="background:#"] h5,
.service-detail .row > [class*="col-"] > div[style*="background: #"] h5 {
    flex: 0 0 auto;
    min-height: 24px;
}
.service-detail .row > [class*="col-"] > div[style*="background:#"] p,
.service-detail .row > [class*="col-"] > div[style*="background: #"] p {
    flex: 1 1 auto;
    margin: 0 !important;
}

/* Bring back consistent vertical gap between rows of cards */
.service-detail .row + .row {
    margin-top: 0;
}
.service-detail .row > [class*="col-"] {
    margin-bottom: 25px;
}

/* Mobile — stack and reset to natural heights */
@media (max-width: 767px) {
    .service-detail .row {
        display: block !important;
    }
    .service-detail .row > [class*="col-"] {
        display: block !important;
        margin-bottom: 20px;
    }
    .service-detail .service-box-custom,
    .service-detail .price-card,
    .service-detail .step-box,
    .service-detail .row > [class*="col-"] > div[style] {
        height: auto;
        display: block !important;
    }
}

.cta-section { background: linear-gradient(135deg, #0a1d30 0%, #143352 100%); padding: 60px 0; text-align: center; color: #fff; }
.cta-section h2 { color: #fff; font-size: 28px; margin-bottom: 15px; }
.cta-section p { color: #ddd; font-size: 16px; margin-bottom: 25px; }
.cta-section .cta-btn { display: inline-block; background: #25d366; color: #fff; padding: 15px 40px; border-radius: 50px; font-size: 18px; font-weight: 600; transition: all 0.3s; text-decoration: none; }
.cta-section .cta-btn:hover { background: #128C7E; color: #fff; }

/* ============ H2 in dark/video sections ============ */
.video-galley-content .title h2 { color: #fff !important; }

/* ============ Native SELECT RTL fix ============ */
select[dir="rtl"] {
    text-align: right;
    text-align-last: right;
    -moz-text-align-last: right;
    padding-right: 12px;
    padding-left: 28px;
}

.color-swatch { display: inline-block; width: 40px; height: 40px; border-radius: 50%; margin: 5px; border: 2px solid #ddd; cursor: pointer; transition: all 0.3s; }
.color-swatch:hover { transform: scale(1.2); border-color: #2c2c2c; }

.filter-list { text-align: center; margin-bottom: 30px; }
.filter-list li { display: inline-block; margin: 0 5px 10px; cursor: pointer; padding: 8px 20px; border: 2px solid #e0d6cc; border-radius: 30px; font-size: 14px; transition: all 0.3s; }
.filter-list li.active,
.filter-list li:hover { background: #bc8f3d; color: #fff; border-color: #bc8f3d; }

/* ============ 22. CONTACT PAGE ============ */
/* Prevent blue box from stretching to match map height */
.contact-info-area > .container > .row { align-items: flex-start !important; }
.contact-author-info.contact-info { margin-right: 0; margin-left: -30px; }

/* ============ 21. RESPONSIVE RTL ============ */

/* Tablet: 992-1199px */
@media (max-width: 1199px) {
    .header-lower-right { margin-left: 0; }
    .latest-project-area .right-content { margin-right: 0 !important; }
    .owl-nav-style-one .owl-nav { text-align: center; }
    .single-service-item { padding-left: 65px; padding-right: 180px; }
    .single-service-item .icon-holder { left: auto; right: 60px; }
}

/* Small tablet / mobile menu: ≤991px */
@media (max-width: 991px) {
    /* Ensure the mobile menu and header sit in front of the slider and all other elements */
    .header-area,
    .header-lower,
    .header-lawer-content,
    .header-lower-right,
    .main-menu,
    .main-menu .navbar-collapse,
    .main-menu .navbar-collapse .navigation {
        z-index: 999999 !important;
        position: relative !important;
    }
    .main-menu .collapse {
        max-height: none !important;
        overflow: visible !important;
    }
    .forcefullwidth_wrapper_tp_banner,
    .rev_slider_wrapper,
    .rev_slider,
    .tp-simpleresponsive,
    .tp-revslider-mainul,
    .tp-revslider-slidesli {
        z-index: 1 !important;
    }

    .header-lower-left,
    .header-lower-right { float: none !important; }
    .header-upper-left,
    .header-upper-right { float: none !important; }
    .main-menu .navigation > li { margin-right: 15px; }
    .footer-bottom .copyright-text,
    .footer-bottom .footer-menu { float: none !important; text-align: center; }
    
    /* Mobile navigation RTL */
    .main-menu { float: none !important; }
    .main-menu .navbar-collapse > .navigation > li > a,
    .main-menu .navbar-collapse .navigation li ul li a { text-align: right !important; }
    .main-menu .navbar-collapse .navigation li ul li a:before {
        content: "\f104" !important;
        left: auto !important;
        right: 10px !important;
    }
    /* Dropdown expand button on the left side */
    .main-menu .navbar-collapse > ul li.dropdown .dropdown-btn {
        right: auto !important;
        left: 10px !important;
    }
    /* Flip dropdown icon for RTL */
    .main-menu .navbar-collapse .navigation li.dropdown .dropdown-btn {
        transform: scaleX(-1);
    }
    /* Header state wider for tablet */
    .state-content { width: auto !important; max-width: 100%; }
    .state-content .state ul { text-align: center; }

    /* ============ ISSUE 2: TOP BAR MOBILE CENTERING ============ */
    .top-bar-area {
        padding: 5px 0 !important;
    }
    .top-bar-area .flex-box-three {
        display: block !important;
        text-align: center !important;
        float: none !important;
    }
    .top-left {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 5px !important;
        float: none !important;
    }
    .top-left p {
        display: inline-block !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        float: none !important;
    }
    .top-right {
        width: 100% !important;
        text-align: center !important;
        float: none !important;
        display: inline-block !important;
    }
    .top-menu {
        float: none !important;
        display: inline-block !important;
        padding: 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    .top-menu li {
        float: none !important;
        display: inline-block !important;
        padding: 0 12px !important;
        border-left: 1px solid #5569aa !important;
        border-right: none !important;
        line-height: normal !important;
    }
    .top-menu li:last-child {
        border-left: none !important;
    }

    /* ============ ISSUE 3: HIDE WHITE CONTACT BLOCK ============ */
    .header-area .header-upper {
        display: none !important;
    }

    /* ============ ISSUE 4: PERFECT ALIGNMENT FOR HAMBURGER & QUOTE BUTTONS ============ */
    .header-lawer-content {
        padding: 10px 0 10px !important;
    }
    .header-lower-right {
        margin-top: 15px !important;
        margin-bottom: 10px !important;
        height: 48px !important;
        position: relative !important;
        display: block !important;
        float: none !important;
    }
    .main-menu .navbar-header {
        float: none !important;
        position: static !important;
        width: auto !important;
        margin: 0 !important;
    }
    
    /* Center Top Bar & Hide Header Upper */
    .header-upper { display: none !important; }
    .top-bar-area .flex-box-three { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
    .top-bar-area .top-left { padding-bottom: 8px !important; }
    .top-bar-area .top-right { float: none !important; display: inline-block !important; }
    .top-bar-area .top-menu { float: none !important; margin: 0 !important; padding: 0 !important; }
    .top-bar-area .top-menu li { display: inline-block !important; margin: 0 5px !important; }
    

    /* Hamburger menu button to the LEFT in RTL - Perfectly Sized and Centered */
    .main-menu .navbar-header .navbar-toggle {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        height: 48px !important;
        width: 48px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        border: 1px solid #eaeaea !important;
        background-color: #fcfcfc !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
        z-index: 99 !important;
    }
    .main-menu .navbar-header .navbar-toggle .icon-bar {
        display: block !important;
        background: #000000 !important;
        width: 22px !important;
        height: 2px !important;
        margin: 3px 0 !important;
    }
    /* Quote button "أرسل صورة الأثاث" to the RIGHT in RTL - Perfectly Sized and Centered */
    .mainmenu-right-box {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        height: 48px !important;
        z-index: 99 !important;
        float: none !important;
    }
    .mainmenu-right-box .thm-btn {
        padding: 0 15px !important;
        line-height: 46px !important;
        height: 48px !important;
        font-size: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        border-radius: 4px !important;
        margin: 0 !important;
    }

    /* ============ ISSUE 5: SLIDER MOBILE OVERHAUL ============ */
    .rev_slider_wrapper,
    .rev_slider_wrapper .rev_slider {
        margin-top: 0 !important;
    }
    .rev_slider_wrapper .tp-caption {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        top: auto !important;
    }
    .rev_slider_wrapper .slide-content.right-slide,
    .rev_slider_wrapper .slide-content.left-slide {
        margin: 0 15px !important;
        width: calc(100% - 30px) !important;
        max-width: none !important;
        box-sizing: border-box !important;
        text-align: right !important;
        padding-right: 15px !important;
        padding-left: 0 !important;
        border-right: 3px solid var(--primary-color) !important;
        border-left: none !important;
        right: auto !important;
        left: auto !important;
        position: static !important;
    }
    .rev_slider_wrapper .slide-content .title,
    .rev_slider_wrapper .slide-content.right-slide .title,
    .rev_slider_wrapper .slide-content.left-slide .title {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    .rev_slider_wrapper .slide-content .big-title,
    .rev_slider_wrapper .slide-content.right-slide .big-title,
    .rev_slider_wrapper .slide-content.left-slide .big-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
        display: block !important;
    }
    .rev_slider_wrapper .slide-content .text,
    .rev_slider_wrapper .slide-content.right-slide .text,
    .rev_slider_wrapper .slide-content.left-slide .text {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
        display: block !important;
    }
    .rev_slider_wrapper .slide-content .text br,
    .rev_slider_wrapper .slide-content.right-slide .text br,
    .rev_slider_wrapper .slide-content.left-slide .text br {
        display: none !important;
    }
    .rev_slider_wrapper .slide-content .btns-box,
    .rev_slider_wrapper .slide-content.right-slide .btns-box,
    .rev_slider_wrapper .slide-content.left-slide .btns-box {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        margin-top: 15px !important;
        line-height: normal !important;
        height: auto !important;
    }
    .rev_slider_wrapper .slide-content .btns-box a.thm-btn,
    .rev_slider_wrapper .slide-content.right-slide .btns-box a.thm-btn,
    .rev_slider_wrapper .slide-content.left-slide .btns-box a.thm-btn {
        margin: 0 !important;
        padding: 0 16px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 13px !important;
        border-radius: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Service items */
    .single-service-item {
        padding-right: 150px !important;
        padding-left: 20px !important;
        text-align: right;
    }
    .single-service-item .icon-holder { left: auto !important; right: 30px !important; }

    /* Featured boxes (paint types) */
    .single-featured-box { text-align: center; }

    /* Footer */
    .single-footer-widget { text-align: right; }
    .footer-contact-info li { padding-right: 35px !important; padding-left: 0 !important; }

    /* Latest project area */
    .latest-project-area { padding-bottom: 20px; }
    .latest-project-area .row {
        flex-direction: column !important;
    }
    .latest-project-area .left-content {
        position: static !important;
        padding-bottom: 0 !important;
    }
    .latest-project-area .left-content > a {
        display: block !important;
        margin: 15px auto 0 !important;
        float: none !important;
        text-align: center !important;
        width: max-content !important;
    }
    .latest-project-area .right-content { margin-right: 0 !important; margin-left: 0 !important; margin-top: 30px; }
    
    .latest-project-area .owl-nav-style-one .owl-controls {
        position: static !important;
        width: 100% !important;
        display: block !important;
        margin-top: 15px !important;
        padding: 0 !important;
    }
    .owl-nav-style-one .owl-nav {
        text-align: center !important;
        margin-top: 15px !important;
        position: static !important;
    }

    /* Testimonials */
    .customer-feedback .bx-wrapper .bx-viewport { margin-right: 0; margin-left: 0 !important; max-width: 100% !important; margin: 0 auto !important; }
    .single-testimonial-content { flex-direction: column; padding: 25px 20px; }
    .single-testimonial-content .text-box { width: 100%; padding-right: 0 !important; padding-left: 0 !important; }
    .single-testimonial-content .text-box:after { right: 0; }
    .single-testimonial-content .name-box { width: 100%; border-right: none !important; border-left: none !important; padding-right: 0 !important; padding-left: 0 !important; padding-top: 15px; }
    .customer-feedback ul.nav-link { text-align: center !important; position: relative !important; left: auto !important; top: auto !important; margin-top: 15px; padding: 0 !important; max-width: 100% !important; }
}

/* Mobile: ≤767px */
@media (max-width: 767px) {
    .main-menu .navigation > li { margin-right: 0; }
}

/* Small phone: ≤480px */
@media (max-width: 480px) {
    .rev_slider_wrapper .slide-content.right-slide,
    .rev_slider_wrapper .slide-content.left-slide {
        margin-right: 10px !important;
        margin-left: 10px !important;
        width: calc(100% - 20px) !important;
        padding-right: 10px !important;
    }
    .rev_slider_wrapper .slide-content .big-title,
    .rev_slider_wrapper .slide-content.right-slide .big-title,
    .rev_slider_wrapper .slide-content.left-slide .big-title {
        font-size: 20px !important;
    }
    .rev_slider_wrapper .slide-content .btns-box,
    .rev_slider_wrapper .slide-content.right-slide .btns-box,
    .rev_slider_wrapper .slide-content.left-slide .btns-box {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    .rev_slider_wrapper .slide-content .btns-box a.thm-btn,
    .rev_slider_wrapper .slide-content.right-slide .btns-box a.thm-btn,
    .rev_slider_wrapper .slide-content.left-slide .btns-box a.thm-btn {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ============================================ */
/* SERVICE DETAIL PAGES - typography & arrows  */
/* ============================================ */

/* Headings in service detail were tightly stacked with no margin and using
   the wrong font (Poppins doesn't render Arabic well).
   Force Cairo, give them spacing, and a clear dark color. */
.service-detail h1,
.service-detail h2,
.service-detail h3,
.service-detail h4,
.service-detail h5,
.service-detail h6 {
    font-family: 'Cairo', sans-serif !important;
    color: #0a1d30 !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    margin: 0 0 18px 0 !important;
    text-align: right !important;
}
.service-detail h1 { font-size: 32px !important; }
.service-detail h2 { font-size: 26px !important; margin-top: 30px !important; }
.service-detail h3 { font-size: 22px !important; margin-top: 25px !important; }
.service-detail h4 { font-size: 18px !important; }

.service-detail p,
.service-detail li {
    font-family: 'Cairo', sans-serif !important;
    color: #555 !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
    margin-bottom: 12px !important;
}
.service-detail ul {
    padding-right: 20px !important;
    padding-left: 0 !important;
    list-style-position: inside;
}
.service-detail ul li {
    margin-bottom: 8px !important;
}
.service-detail strong {
    color: #0a1d30 !important;
    font-weight: 700 !important;
}
.service-detail .container {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* Before/After labels */
.service-detail .before-after-box {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.service-detail .before-after-box img {
    display: block;
    width: 100%;
    height: auto;
}
.service-detail .before-after-box .label {
    position: absolute;
    top: 12px;
    right: 12px;          /* RTL: label on the right */
    left: auto;
    padding: 6px 16px;
    border-radius: 4px;
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    z-index: 2;
}
.service-detail .before-after-box .label-before { background: #d9534f; }
.service-detail .before-after-box .label-after  { background: #28a745; }

/* ============================================ */
/* SIDEBAR (page-links) - arrow direction & RTL */
/* ============================================ */

/* Original: arrow positioned at right with content "\f178" (long-arrow-right).
   For Arabic RTL, position it on the LEFT and flip to "\f177" (long-arrow-left). */
.left-sidebar .single-sidebar .page-links li a {
    font-family: 'Cairo', sans-serif !important;
    text-align: right !important;
    padding: 15px 30px 15px 47px !important;  /* leave room for arrow on left */
}
.left-sidebar .single-sidebar .page-links li a:before {
    right: auto !important;
    left: 0 !important;
    content: "\f177" !important;              /* long-arrow-left */
    transform: translate3d(30px, 0px, 0px) !important;
}
.left-sidebar .single-sidebar .page-links li a:hover:before,
.left-sidebar .single-sidebar .page-links li a.active:before {
    transform: translate3d(0px, 0px, 0px) !important;
}

/* Sidebar widget titles and contact text - apply Cairo */
.left-sidebar .single-sidebar .title h3,
.left-sidebar .single-sidebar h3,
.left-sidebar .single-sidebar .text p,
.left-sidebar .single-sidebar ul li {
    font-family: 'Cairo', sans-serif !important;
    text-align: right !important;
}
.left-sidebar .single-sidebar .title { text-align: right !important; }

/* Fix breadcrumb h1 on service pages — keep clean Cairo rendering */
.breadcrumb-area .breadcrumbs h1 {
    font-family: 'Cairo', sans-serif !important;
}
.breadcrumb-bottom .left ul li,
.breadcrumb-bottom .left ul li a {
    font-family: 'Cairo', sans-serif !important;
}

/* Inline "fa-angle-right" inside sidebar lists — flip to angle-left for RTL */
.left-sidebar .single-sidebar ul li a i.fa-angle-right:before {
    content: "\f104" !important;  /* angle-left */
}

/* ================================================================ */
/* PHONE NUMBERS — force LTR rendering in Arabic RTL context        */
/* ================================================================ */

/* Apply LTR direction wherever a phone number or tel: link appears.
   Without this, the BiDi algorithm reverses "+966 54 104 8234" to read
   right-to-left and the user sees "8234 104 54 966+". */
a[href^="tel:"],
a[href^="https://wa.me/"],
a[href^="http://wa.me/"],
a[href*="wa.me/"],
.phone-number,
.contact-author-info ul li .text-holder p,
.state-content .text-box p,
.header-area .text-box p,
.footer-area .footer-contact-info p,
.contact-info p,
.contact-author-info.contact-info ul li .text-holder p {
    direction: ltr !important;
    unicode-bidi: embed !important;
}

/* Inline span around the label keeps RTL so the Arabic label flows normally */
.contact-author-info ul li .text-holder p span,
.contact-author-info.contact-info ul li .text-holder p span,
.state-content .text-box p span,
.footer-area .footer-contact-info p span {
    direction: rtl !important;
    unicode-bidi: embed !important;
    display: inline-block;
}

/* ================================================================ */
/* SIDEBAR CONTACT BOX — icon position (icon BEFORE number = right) */
/* ================================================================ */

/* Original LTR rule positions icon on LEFT with padding-left:40px.
   Flip for RTL: icon on RIGHT, padding-right:40px. */
.contact-author-info ul li {
    padding-left: 0 !important;
    padding-right: 50px !important;
    text-align: right !important;
}
.contact-author-info ul li .icon-holder {
    left: auto !important;
    right: 0 !important;
    top: 4px !important;
}
.contact-author-info ul li .text-holder {
    text-align: right !important;
}
.contact-author-info ul li .text-holder p {
    font-family: 'Cairo', sans-serif !important;
    text-align: right !important;
    color: #555 !important;
}
/* Number itself on its own line should align with the label (right edge in RTL) */
.contact-author-info ul li .text-holder p a,
.contact-author-info ul li .text-holder p {
    color: var(--primary-color) !important;
    font-weight: 600 !important;
}
.contact-author-info ul li .text-holder p span {
    color: #222 !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
}

/* Same treatment for the .contact-author-info.contact-info variant
   used on contact.html and similar pages */
.contact-author-info.contact-info ul li {
    padding-left: 0 !important;
    padding-right: 50px !important;
    text-align: right !important;
}
.contact-author-info.contact-info ul li .icon-holder {
    left: auto !important;
    right: 0 !important;
}
.contact-author-info.contact-info ul li .text-holder p {
    font-family: 'Cairo', sans-serif !important;
    text-align: right !important;
}

/* Header top contact list (phone & email) — same direction fix */
.state-content .text-box p {
    text-align: right !important;
}
.state-content li,
.header-upper-left .state li {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;   /* icon first (right side in RTL), text after */
}

/* Footer phone numbers */
.footer-area .footer-contact-info p,
.footer-area .footer-contact-info p a {
    direction: ltr !important;
    unicode-bidi: embed !important;
    display: inline-block;
    text-align: right !important;
}

/* ================================================================ */
/* CONTACT PAGE (contact.html) — compact breadcrumb + layout fix    */
/* ================================================================ */

/* The breadcrumb header was 247px top padding + 122px bottom padding.
   That's why the navy block at the top was so tall. Trim it. */
.contact-info-area + section,
section.breadcrumb-area {
    padding-top: 140px !important;     /* enough to clear the fixed header */
    padding-bottom: 60px !important;
    margin-top: -100px !important;     /* keep overlap with sticky header */
}
.breadcrumb-area .breadcrumbs h1 {
    font-family: 'Cairo', sans-serif !important;
    font-size: 36px !important;
    line-height: 1.4 !important;
}
.breadcrumb-bottom {
    bottom: -28px !important;
}
.breadcrumb-bottom .inner-content {
    padding: 14px 25px !important;
}

/* Contact info area — even spacing */
.contact-info-area {
    padding: 90px 0 80px !important;
}

/* Stop the row from forcing both columns to equal height */
.contact-info-area .row {
    align-items: flex-start !important;
}
.contact-info-area > .container > .row > [class*="col-"] {
    align-self: flex-start !important;
}

/* Navy contact card — match LTR layout exactly */
.contact-author-info.contact-info {
    background: var(--primary-color);
    margin-right: 0 !important;
    margin-left: 0 !important;
    height: auto !important;
    overflow: hidden;
}
.contact-author-info.contact-info .img-holder {
    overflow: hidden;
}
.contact-author-info.contact-info .img-holder img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
}

/* Carousel content area inside the navy card */
.contact-author-info.contact-info .contact-carousel {
    padding: 25px 25px 25px !important;
}
.contact-author-info.contact-info .contact-carousel .single-info-box .title {
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.contact-author-info.contact-info .contact-carousel .single-info-box .title h3 {
    color: #fff !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Owl carousel nav arrows — same look as LTR (top-right corner) */
.contact-author-info.contact-info .contact-carousel .owl-nav {
    position: absolute !important;
    top: 25px !important;
    left: 25px !important;          /* RTL: arrows on the LEFT */
    right: auto !important;
    margin: 0 !important;
    display: flex !important;
    gap: 8px;
    z-index: 5;
}
.contact-author-info.contact-info .contact-carousel .owl-nav button {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: #fff !important;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px !important;
    line-height: 1 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 250ms ease;
}
.contact-author-info.contact-info .contact-carousel .owl-nav button:hover {
    background: #bc8f3d !important;
    border-color: #bc8f3d !important;
}
.contact-author-info.contact-info .contact-carousel .owl-dots {
    display: none !important;
}

/* Owl carousel base — reset any stretching, force visible.
   owl.carousel.css has `.owl-carousel { display: none; }` until JS adds
   `.owl-loaded`. If JS fails or hasn't fired yet, content stays hidden.
   Force visible at all times. */
.contact-author-info.contact-info .contact-carousel,
.contact-author-info.contact-info .contact-carousel.owl-carousel,
.contact-author-info.contact-info .contact-carousel.owl-carousel.owl-loaded,
.contact-author-info.contact-info .contact-carousel:not(.owl-loaded) {
    display: block !important;
    margin: 0 !important;
    position: relative;
    visibility: visible !important;
    opacity: 1 !important;
}
.contact-author-info.contact-info .contact-carousel .owl-stage-outer {
    overflow: hidden;
    display: block !important;
    direction: ltr !important;       /* Owl uses negative translateX — needs LTR coords */
}
.contact-author-info.contact-info .contact-carousel .owl-stage,
.contact-author-info.contact-info .contact-carousel .owl-item {
    direction: ltr !important;
}
/* Re-flip content inside each item back to RTL */
.contact-author-info.contact-info .contact-carousel .owl-item .single-info-box {
    direction: rtl !important;
    text-align: right !important;
}
.contact-author-info.contact-info .contact-carousel .single-info-box {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* When Owl IS loaded, show only the active slide; otherwise show all (safe
   fallback). Stack them so only one is visible at a time. */
.contact-author-info.contact-info .contact-carousel:not(.owl-loaded) .single-info-box {
    /* fallback: show first one only, hide the rest with sibling rule */
}
.contact-author-info.contact-info .contact-carousel:not(.owl-loaded) .single-info-box ~ .single-info-box {
    display: none !important;
}

/* Card title and text — readable on dark navy */
.contact-author-info.contact-info .contact-carousel .title {
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.contact-author-info.contact-info .contact-carousel .title h3 {
    color: #fff !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}
.contact-author-info.contact-info ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.contact-author-info.contact-info ul li {
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    padding: 14px 50px 14px 0 !important;
    margin: 0 !important;
    position: relative;
    display: block !important;
}
.contact-author-info.contact-info ul li:last-of-type {
    border-bottom: none !important;
}
.contact-author-info.contact-info ul li .icon-holder {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 16px !important;
}
.contact-author-info.contact-info ul li .icon-holder i {
    font-size: 22px !important;
    color: #bc8f3d !important;
}
.contact-author-info.contact-info ul li .text-holder p {
    color: #e6ecff !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: right !important;
    direction: ltr;
    unicode-bidi: plaintext;
}
.contact-author-info.contact-info ul li .text-holder p span {
    color: #fff !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: block;
    margin-bottom: 2px;
    direction: rtl;
}

/* Social icons row — match LTR (flat white icons, no circles) */
.contact-author-info.contact-info .social-icon {
    padding-top: 18px !important;
    margin-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,0.10);
    text-align: right !important;     /* RTL: icons on the right side */
}
.contact-author-info.contact-info .social-icon li {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.contact-author-info.contact-info .social-icon li:not(:last-child) {
    margin-left: 18px !important;     /* gap between icons (RTL) */
    margin-right: 0 !important;
}
.contact-author-info.contact-info .social-icon li a {
    color: #fff !important;
    font-size: 16px !important;
    transition: color 250ms ease;
    background: transparent !important;
    width: auto;
    height: auto;
    border-radius: 0;
    padding: 0;
}
.contact-author-info.contact-info .social-ic

/* ================================================================ */
/* WHITESPACE & RESPONSIVE FIXES — Full Site Audit                  */
/* ================================================================ */

/* ---- 1. SERVICE DETAIL: sticky sidebar + remove gap ---- */
/* Make the sidebar stick to the top as user scrolls through long content.
   This eliminates the huge empty whitespace below the sidebar. */
.service-detail .col-md-4 .left-sidebar {
    position: sticky !important;
    top: 100px;               /* offset below fixed header */
    margin-right: 0 !important;
}
/* Remove the excessive margin-bottom from left-sidebar on these pages */
.service-detail .left-sidebar {
    margin-bottom: 0 !important;
}
/* Tighten the service-detail container padding */
.service-detail .container {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* ---- 2. SECTION SPACING: reduce excessive sec-pd-one ---- */
.sec-pd-one {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
}

/* ---- 3. BREADCRUMB AREA: reduce oversized hero band ---- */
section.breadcrumb-area {
    padding-top: 120px !important;
    padding-bottom: 40px !important;
    margin-top: -80px !important;
}
.breadcrumb-bottom {
    bottom: -22px !important;
}

/* ---- 4. CTA SECTION: tighten padding ---- */
.cta-section {
    padding: 45px 0 !important;
}

/* ---- 5. FOOTER spacing ---- */
.footer-area {
    padding-top: 60px !important;
}

/* ---- 6. Before-After Gallery (before-after.html) ---- */
.gallery-items .before-after-box {
    margin-bottom: 20px !important;
}

/* ---- 7. FAQ sections spacing ---- */
.faq-appointment-area.sec-pd-one {
    padding-top: 50px !important;
    padding-bottom: 40px !important;
}

/* ================================================================ */
/* MOBILE RESPONSIVE — max-width: 767px                             */
/* ================================================================ */
@media (max-width: 767px) {

    /* -- Breadcrumb: compact on mobile -- */
    section.breadcrumb-area {
        padding-top: 90px !important;
        padding-bottom: 30px !important;
        margin-top: -60px !important;
    }
    .breadcrumb-area .breadcrumbs h1 {
        font-size: 24px !important;
    }
    .breadcrumb-bottom .inner-content {
        padding: 10px 15px !important;
    }
    .breadcrumb-bottom .left,
    .breadcrumb-bottom .right {
        float: none !important;
        text-align: center !important;
        display: block !important;
    }
    .breadcrumb-bottom .right {
        margin-top: 8px !important;
    }

    /* -- Service Detail: stack sidebar below content -- */
    .service-detail .col-md-4 .left-sidebar {
        position: static !important;   /* unstick on mobile */
        margin-top: 30px !important;
    }
    .service-detail .container {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }
    .service-detail h1 {
        font-size: 24px !important;
    }
    .service-detail h2 {
        font-size: 20px !important;
        margin-top: 20px !important;
    }
    .service-detail h3 {
        font-size: 18px !important;
        margin-top: 18px !important;
    }
    .service-detail p,
    .service-detail li {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }
    /* Reduce the spacing between content divs */
    .service-detail div[style*="margin-top:40px"] {
        margin-top: 25px !important;
    }

    /* -- Sec-pd-one: less padding on mobile -- */
    .sec-pd-one {
        padding-top: 40px !important;
        padding-bottom: 30px !important;
    }

    /* -- CTA section: compact -- */
    .cta-section {
        padding: 30px 15px !important;
    }
    .cta-section h2 {
        font-size: 20px !important;
    }
    .cta-section p {
        font-size: 14px !important;
    }
    .cta-section .cta-btn {
        padding: 12px 28px !important;
        font-size: 16px !important;
    }

    /* -- Before/After boxes in service pages -- */
    .service-detail .before-after-box {
        margin-bottom: 15px !important;
    }

    /* -- Before/After gallery page -- */
    .gallery-items .col-md-6 {
        width: 100% !important;
        padding: 0 10px !important;
    }
    .gallery-items .before-after-box {
        margin-bottom: 15px !important;
    }
    .before-after-box .row > div {
        padding: 1px !important;
    }

    /* -- Filter list: scrollable on mobile -- */
    .filter-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px !important;
        margin-bottom: 20px !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }
    .filter-list li {
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 6px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* -- Step boxes: 2-column grid on mobile -- */
    .step-box {
        padding: 20px 10px !important;
    }
    .step-box .step-number {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 16px !important;
    }

    /* -- Color swatches: smaller on mobile -- */
    .color-swatch {
        width: 35px !important;
        height: 35px !important;
    }

    /* -- Service box cards: full width + less padding -- */
    .service-box-custom {
        padding: 20px 15px !important;
        margin-bottom: 15px !important;
    }

    /* -- Footer: tighter spacing -- */
    .footer-area {
        padding-top: 40px !important;
    }
    .single-footer-widget {
        margin-bottom: 25px !important;
    }
    .footer-bottom .copyright-text,
    .footer-bottom .footer-menu {
        float: none !important;
        text-align: center !important;
    }

    /* -- Top bar: compact -- */
    .top-bar-area {
        padding: 10px 0 !important;
    }
    .top-bar-area p {
        font-size: 12px !important;
    }

    /* -- Left sidebar excessive margin fix -- */
    .left-sidebar {
        margin-right: 0 !important;
        margin-bottom: 30px !important;
    }

    /* -- WhatsApp float button: keep visible -- */
    .whatsapp-float {
        bottom: 70px !important;
        right: 15px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 26px !important;
    }

    /* -- Mobile sticky WhatsApp bar -- */
    .mobile-whatsapp-sticky {
        font-size: 14px !important;
        padding: 10px !important;
    }
}

/* ================================================================ */
/* TABLET RESPONSIVE — 768px to 991px                               */
/* ================================================================ */
@media (min-width: 768px) and (max-width: 991px) {

    section.breadcrumb-area {
        padding-top: 100px !important;
        padding-bottom: 35px !important;
        margin-top: -70px !important;
    }
    .breadcrumb-area .breadcrumbs h1 {
        font-size: 28px !important;
    }

    .service-detail .container {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }
    .service-detail .col-md-4 .left-sidebar {
        position: static !important;
        margin-top: 25px !important;
    }

    .sec-pd-one {
        padding-top: 50px !important;
        padding-bottom: 35px !important;
    }

    .cta-section {
        padding: 40px 20px !important;
    }

    /* Left sidebar large margin on tablet */
    .left-sidebar {
        margin-right: 0 !important;
        margin-bottom: 60px !important;
    }
}