/*
 * =====================================================
 *  Arabic (RTL) Frontend Fixes
 *  Covers:
 *   1. Navbar services dropdown – scrollable when items overflow
 *   2. Floating images overlapping header – z-index & spacing
 *   3. Hero main image text-box visibility
 *   4. Articles/blog section – italic text & stacked elements
 *   5. Hero main image position on homepage
 *   6. Font consistency across all pages (Cairo)
 * =====================================================
 */

/* ==========================================================
   1. NAVBAR — Services & all mega-menu / sub-menu scrollable
      Problem: many services stack vertically with no scroll
   ========================================================== */

/* Regular dropdown submenu – scrollable */
[dir="rtl"] .tp-header-dropdown nav ul li .tp-submenu,
[dir="rtl"] .tp-submenu.submenu {
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* Custom scrollbar for webkit */
    scrollbar-width: thin;
    scrollbar-color: #00a651 transparent;
}

[dir="rtl"] .tp-submenu.submenu::-webkit-scrollbar,
[dir="rtl"] .tp-header-dropdown nav ul li .tp-submenu::-webkit-scrollbar {
    width: 4px;
}

[dir="rtl"] .tp-submenu.submenu::-webkit-scrollbar-track,
[dir="rtl"] .tp-header-dropdown nav ul li .tp-submenu::-webkit-scrollbar-track {
    background: transparent;
}

[dir="rtl"] .tp-submenu.submenu::-webkit-scrollbar-thumb,
[dir="rtl"] .tp-header-dropdown nav ul li .tp-submenu::-webkit-scrollbar-thumb {
    background-color: #00a651;
    border-radius: 4px;
}

/* Mega-menu wrapper – scrollable when content overflows vertically */
[dir="rtl"] .tp-megamenu-wrapper {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #00a651 transparent;
}

[dir="rtl"] .tp-megamenu-wrapper::-webkit-scrollbar {
    width: 4px;
}
[dir="rtl"] .tp-megamenu-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
[dir="rtl"] .tp-megamenu-wrapper::-webkit-scrollbar-thumb {
    background-color: #00a651;
    border-radius: 4px;
}

/* Keep the mega-menu positioned properly so it doesn't go off-screen */
[dir="rtl"] .tp-megamenu-wrapper.mega-menu {
    right: 0;
    left: 0;
}

/* ==========================================================
   2. FLOATING IMAGES — stop overlapping with page header
      Problem: absolute-positioned images bleed over the header
   ========================================================== */

/* Make sure the header always stays on top */
[dir="rtl"] #header-sticky,
[dir="rtl"] header {
    z-index: 999 !important;
}

/* Page inner hero / banner area – push it below sticky header */
[dir="rtl"] .tp-page-title-area,
[dir="rtl"] .tp-breadcrumb-area,
[dir="rtl"] .page-title-area,
[dir="rtl"] .it-breadcrumb-area {
    padding-top: 130px !important;
    position: relative;
    z-index: 1;
}

/* Floating / decorative thumb images on inner pages */
[dir="rtl"] .dgm-about-thumb-1,
[dir="rtl"] .it-hero-thumb,
[dir="rtl"] .tp-service-details-thumb,
[dir="rtl"] .tp-project-details-thumb {
    z-index: 1 !important;
    position: relative !important;
}

/* Ensure section backgrounds don't bleed into header */
[dir="rtl"] .tp-service-area,
[dir="rtl"] .tp-portfolio-area,
[dir="rtl"] .it-service-area {
    position: relative;
    z-index: 2;
}

/* ==========================================================
   3. HERO TEXT-BOX — fix visibility / overlapping in RTL
      The .dgm-hero-text-box is sometimes hidden or off-screen
   ========================================================== */

[dir="rtl"] .dgm-hero-text-box {
    right: auto !important;
    left: 20px !important;
    bottom: 30px !important;
    position: absolute !important;
    z-index: 10 !important;
    max-width: 280px;
    background-size: cover;
    background-repeat: no-repeat;
}

[dir="rtl"] .dgm-hero-text-box img {
    /* The small icon/shape image inside the text-box */
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: 60px;
    display: block;
    margin-bottom: 10px;
}

[dir="rtl"] .dgm-hero-text-box p {
    font-family: 'Cairo', sans-serif !important;
    font-size: 15px;
    line-height: 1.6;
    color: #111013;
    margin-bottom: 10px;
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .dgm-hero-arrow {
    left: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    position: absolute !important;
}

/* Responsive – smaller screens */
@media (max-width: 991px) {
    [dir="rtl"] .dgm-hero-text-box {
        left: 10px !important;
        bottom: 15px !important;
        max-width: 220px;
    }
}

@media (max-width: 575px) {
    [dir="rtl"] .dgm-hero-text-box {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        max-width: 100%;
        margin-top: 20px;
    }
}

/* ==========================================================
   4. ARTICLES / BLOG SECTION — fix italic titles + stacking
      Problem: titles appear italic, bottom elements overlap
   ========================================================== */

/* Remove any unintentional italic from blog section titles */
[dir="rtl"] .dgm-blog-title-sm,
[dir="rtl"] .dgm-blog-title-sm *,
[dir="rtl"] .dgm-blog-meta h4,
[dir="rtl"] .dgm-blog-meta h4 *,
[dir="rtl"] .creative-blog-title-sm,
[dir="rtl"] .tp-blog-title,
[dir="rtl"] .tp-blog-title *,
[dir="rtl"] .ar-blog-title,
[dir="rtl"] .ar-blog-title * {
    font-style: normal !important;
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;       /* Arabic doesn't use letter-spacing */
}

/* Fix italic subtitles / category spans */
[dir="rtl"] .dgm-blog-category span,
[dir="rtl"] .dgm-blog-meta span,
[dir="rtl"] .tp-blog-meta span,
[dir="rtl"] .creative-blog-meta span {
    font-style: normal !important;
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0 !important;
}

/* Fix stacking / overflow at the bottom of blog items */
[dir="rtl"] .dgm-blog-item {
    overflow: visible;
    position: relative;
    z-index: 2;
}

[dir="rtl"] .dgm-blog-content-wrap {
    align-items: flex-start !important;
}

/* The blog thumb container on mobile was overflowing */
[dir="rtl"] .dgm-blog-thumb {
    flex-shrink: 0;
}

/* Blog section bottom area – clear float & prevent overlap */
[dir="rtl"] .dgm-blog-main,
[dir="rtl"] .dgm-blog-area,
[dir="rtl"] .tp-blog-section {
    overflow: visible;
}

/* Any section title inside blog that uses a decorative font */
[dir="rtl"] .tp-section-title-grotesk,
[dir="rtl"] .tp-section-title {
    font-family: 'Cairo', sans-serif !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
}

/* Fix bottom-stacking issue: ensure blog section wrapper doesn't overflow */
[dir="rtl"] .blog-section,
[dir="rtl"] [class*="blog-section"] {
    position: relative;
    z-index: 2;
    overflow: visible !important;
}

/* ==========================================================
   5. HERO MAIN IMAGE POSITION — homepage (RTL)
      Problem: .dgm-hero-thumb is mis-positioned in Arabic
   ========================================================== */

[dir="rtl"] .dgm-hero-thumb {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 2 !important;
    max-width: 55% !important;
}

[dir="rtl"] .dgm-hero-thumb .anim-zoomin-wrap,
[dir="rtl"] .dgm-hero-thumb .anim-zoomin {
    width: 100%;
    height: 100%;
}

[dir="rtl"] .dgm-hero-thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Responsive adjustments for hero thumb */
@media (max-width: 1399px) {
    [dir="rtl"] .dgm-hero-thumb {
        max-width: 50% !important;
    }
}

@media (max-width: 1199px) {
    [dir="rtl"] .dgm-hero-thumb {
        max-width: 48% !important;
    }
}

@media (max-width: 991px) {
    [dir="rtl"] .dgm-hero-thumb {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        max-width: 100% !important;
        margin-top: 30px;
    }
    [dir="rtl"] .dgm-hero-text-box {
        display: none !important;
    }
}

@media (max-width: 575px) {
    [dir="rtl"] .dgm-hero-ptb {
        padding-top: 130px !important;
    }
}

/* ==========================================================
   6. FONT CONSISTENCY — Cairo for all Arabic pages
      Applies globally in RTL mode
   ========================================================== */

[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] th,
[dir="rtl"] label,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] button,
[dir="rtl"] select {
    font-family: 'Cairo', sans-serif !important;
}

/* Headings */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: 'Cairo', sans-serif !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
}

/* Prevent decorative LTR fonts from appearing in RTL mode */
[dir="rtl"] .tp-section-title,
[dir="rtl"] .tp-section-title-grotesk,
[dir="rtl"] .dgm-hero-title,
[dir="rtl"] .dgm-service-title,
[dir="rtl"] .dgm-project-title,
[dir="rtl"] .tp-service-title,
[dir="rtl"] .tp-portfolio-title,
[dir="rtl"] .tp-project-title,
[dir="rtl"] .tp-team-title,
[dir="rtl"] .tp-counter-title,
[dir="rtl"] .tp-faq-title,
[dir="rtl"] .tp-contact-title,
[dir="rtl"] .tp-pricing-title,
[dir="rtl"] .tp-testimonial-title {
    font-family: 'Cairo', sans-serif !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
}

/* ==========================================================
   7. RESPONSIVE — General RTL fixes at small screens
   ========================================================== */

@media (max-width: 1199px) {
    /* Prevent horizontal overflow */
    [dir="rtl"] .dgm-hero-ptb,
    [dir="rtl"] .dgm-hero-top {
        overflow: hidden;
    }
}

@media (max-width: 767px) {
    /* Stack hero content cleanly */
    [dir="rtl"] .dgm-hero-content {
        margin-bottom: 30px !important;
    }

    /* Blog items on mobile */
    [dir="rtl"] .dgm-blog-content {
        min-width: 100% !important;
    }

    /* Submenu full-width on mobile (handled by off-canvas, hide desktop menu) */
    [dir="rtl"] .tp-header-menu {
        display: none !important;
    }
}