html[dir="rtl"] {

    body {
        direction: rtl;
    }

    /* Flip text-left helpers to start-aligned in RTL context */
    .text-left {
        text-align: right;
    }

    .text-right {
        text-align: left;
    }

    /* Button icons: flip the horizontal direction of arrow icons inside buttons */
    .btn i.fa-arrow-right,
    .btn i.fa-solid.fa-arrow-right {
        transform: scaleX(-1);
        display: inline-block;
    }


    /* ==========================================================================
       2. HEADER & NAVIGATION
       ========================================================================== */

    /*
     * The site-header::before pseudo creates a solid colour strip that extends
     * from the viewport edge to the container edge — on the LEFT in LTR.
     * In RTL the logo moves to the right, so the strip belongs on the RIGHT.
     */
    .site-header::before {
        left: auto;
        right: 0;
    }

    @media screen and (max-width: 1540px) {
        .site-header::before {
            width: calc((100vw - 1350px + 2rem) / 2);
        }
    }

    @media screen and (max-width: 1350px) {
        .site-header::before {
            width: 2rem;
        }
    }

    /* Flip the drop-shadow direction on the logo */
    .site-header .header-wrap .site-logo {
        filter: drop-shadow(-4px 1px 3px rgba(0, 0, 0, 0.75));
    }

    /*
     * The logo background clip-path creates a left-anchored shape in LTR:
     *   polygon(0 0, 100% 0, 80% 100%, 0 100%)  → right edge slants inward
     * In RTL the logo is on the right side, so the left edge should slant inward:
     *   polygon(0 0, 100% 0, 100% 100%, 20% 100%)
     * Also flip the horizontal extension anchor from right:0 → left:0.
     */
    .site-header .header-wrap .site-logo::before {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
        left: 0;
        right: 0;
    }

    /*
     * Active navigation item highlight pill:
     *  – border-bottom-left-radius → border-bottom-right-radius
     *  – skewX(-14deg)             → skewX(14deg)
     */
    .site-header .header-wrap .main-navigation ul li.current-menu-item>a::before,
    .site-header .header-wrap .main-navigation ul li.current_page_item>a::before {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 15px;
        transform: skewX(14deg);
    }


    /* ==========================================================================
       3. PRODUCTION HEADER
       ========================================================================== */

    /*
     * The production menu wrapper is fixed to the top-right corner.
     * In RTL it should anchor to the top-left.
     */
    .production-header-menu .production-menu-wrap {
        right: auto;
        left: 0;
    }

    .production-header-menu .production-menu-wrap .p-menu {
        right: auto;
        left: 70%;
    }

    /* The dropdown list was right-aligned in LTR – left-align it for RTL */
    .production-header-menu .production-menu-wrap .p-menu ul {
        text-align: right;
    }

    /* The hover underline grows from the right in LTR – grow from left in RTL */
    .production-header-menu .production-menu-wrap .p-menu a::after {
        right: auto;
        left: 0;
    }

    /* Page title label: move from right side to left side */
    .production-header-menu .p-current-page-title {
        right: auto;
        left: 81px;
    }

    /* Fixed social icons strip: right side → left side */
    .production-social {
        right: auto;
        left: 1rem;
    }

    .production-social a {
        padding: 0.01rem 0.4rem;
    }


    /* ==========================================================================
       4. HOMEPAGE – CHOOSE SECTION
       ========================================================================== */

    /*
     * The decorative card corners use bottom-LEFT rounding in LTR.
     * Flip to bottom-RIGHT for RTL.
     */
    .choose-sec .boxs-wrap .box-link .box::before {
        border-radius: 7px 7px 85px 7px;
    }

    .choose-sec .boxs-wrap .box-link .box::after {
        border-radius: 4px 4px 80px 4px;
    }

    /* Hover tilt: flip the horizontal offset direction */
    .choose-sec .boxs-wrap .box-link:hover .box::before {
        left: auto;
        right: -1rem;
        top: -1rem;
        transform: rotate(-3deg);
    }



    /* ==========================================================================
       5. GAMES HERO SECTION
       ========================================================================== */

    /* The hero title skews slightly left in LTR – mirror for RTL */
    .games-hero-sec .main-title-game-page {
        transform: skewX(2deg);
    }

    /* Flip the highlight on the hero title span */
    .games-hero-sec .main-title-game-page span::before {
        left: -7px;
        right: -3px;
    }

    /* Flip the decorative star shape from top-right → top-left */
    .games-hero-sec .main-title-game-page span::after {
        right: auto;
        left: -33px;
        transform: rotate(-105deg);
    }


    /* ==========================================================================
       6. OUR GAME SECTION
       ========================================================================== */

    /* Decorative section-title star shape: top-right → top-left */
    .our-game .section-title span::before {
        left: -10px;
        right: -6px;
    }

    .our-game .section-title span::after {
        right: auto;
        left: -47%;
        transform: rotate(-62deg);
        top: -65px;
    }

    /* Flip the floating game-box icons */
    .our-game .box-wrap .game-box .icon-1 {
        left: auto;
        right: -10%;
    }

    .our-game .box-wrap .game-box .icon-2 {
        right: auto;
        left: -10%;
    }


    /* ==========================================================================
       7. ABOUT US SECTION (used on game pages / about-us.php hero area)
       ========================================================================== */

    /* Flip the section title highlight span */
    .about-us-section .section-wrap .section-title span::before {
        left: -7px;
        right: -3px;
    }

    /* Flip the decorative star shape */
    .about-us-section .section-wrap .section-title span::after {
        right: auto;
        left: -38px;
        transform: rotate(-12deg) scaleX(-1);
    }


    /* ==========================================================================
       8. ABOUT US PAGE (.about-us-sec)
       ========================================================================== */

    /* The vector image peeks from the left in LTR – flip to right in RTL */
    .about-us-sec .vector {
        left: auto;
        right: -5%;
        transform: translateY(-50%) rotate(180deg);
    }


    /* ==========================================================================
       9. STATS SECTION
       ========================================================================== */

    /* Decorative pattern image: right → left */
    .stats-sec .patren {
        right: auto;
        left: -5.5%;
        transform: scaleX(-1);
    }

    /* The large background "#" text: shift from left-quarter to right-quarter */
    .stats-sec .stats-wrap .stat-box::before {
        left: auto;
        right: 25%;
        transform: translate(50%, -55%) skewX(11deg);
    }


    /* ==========================================================================
       10. OUR SOME GAME SECTION
       ========================================================================== */

    /*
     * The image clipped with a right-slanting shape in LTR:
     *   polygon(0 0, 100% 0, 83% 100%, 0 100%)
     * Mirror for RTL – slant on the left edge:
     *   polygon(17% 0, 100% 0, 100% 100%, 0 100%)
     */
    .our-some-game .wrapper .image-box .image-clip {
        clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%);
    }

    /* Content inside the clipped image – re-centre with RTL offset */
    .our-some-game .wrapper .image-box .image-clip .image-box-content {
        left: auto;
        right: 45%;
        transform: translate(50%, -50%);
    }

    /* Flip the floating icon positions */
    .our-some-game .wrapper .icon-1 {
        right: auto;
        left: 56px;
    }

    .our-some-game .wrapper .icon-2 {
        left: auto;
        right: 43px;
    }


    /* ==========================================================================
       11. THE CORE SECTION
       ========================================================================== */

    /*
     * The "pill" shaped boxes have bottom-LEFT rounded corners in LTR.
     * Flip all three layers (main, ::before, ::after) to bottom-RIGHT for RTL.
     */
    .the-core-section .core-wrap .core-box {
        border-radius: 4px 4px 60px 4px;
    }

    .the-core-section .core-wrap .core-box::before {
        border-radius: 7px 7px 85px 7px;
    }

    .the-core-section .core-wrap .core-box::after {
        border-radius: 4px 4px 60px 4px;
    }

    /* Hover tilt: mirror the translation direction */
    .the-core-section .core-wrap .core-box:hover::before {
        transform: scaleY(0.96) rotate(-3deg) translate(1rem, -1rem);
    }

    /* Pattern hover images: swap left/right positions */
    .the-core-section .core-wrap .core-box .pattern-hover-1 {
        right: auto;
        left: -4%;
        /* reset the clip-path animation origin so it reveals from the correct side */
        clip-path: inset(0 100% 0 0);
    }

    .the-core-section .core-wrap .core-box:hover .pattern-hover-1 {
        transform: scaleX(-1);
        clip-path: inset(0 0 0 0);
    }

    .the-core-section .core-wrap .core-box .pattern-hover-2 {
        left: auto;
        right: 6%;
        transform: scaleX(-1);
    }


    /* ==========================================================================
       12. VALUES SECTION
       ========================================================================== */

    /* The decorative "apt" image at top-right of the title → top-left in RTL */
    .values-section .section-title .apt-val {
        left: -30%;
        transform: scaleX(-1);
        right: auto;
    }

    /* Flip the value card media clip-path for a symmetric look in RTL */
    .values-section .values-row .value-box .value-media {
        clip-path: polygon(0 0, 84% 0, 100% 100%, 16% 100%);
    }


    /* ==========================================================================
       13. DEEP TEAM SECTION
       ========================================================================== */

    /* Title patterns */
    .deep-team-sec .section-title .pat-2 {
        right: auto;
        left: 85%;
        width: 30%;
        bottom: -31%;
    }

    .deep-team-sec .section-title .pat-1 {
        top: -24%;
        left: -16%;
        width: 20%;
    }

    /*
     * Team person cards – same pill shape fix as core section.
     */
    .deep-team-sec .core-wrap .core-box {
        border-radius: 4px 4px 60px 4px;
    }

    .deep-team-sec .core-wrap .core-box::before {
        border-radius: 7px 7px 85px 7px;
    }

    .deep-team-sec .core-wrap .core-box::after {
        border-radius: 4px 4px 60px 4px;
    }

    /* Hover tilt: mirror for RTL */
    .deep-team-sec .core-wrap .core-box:hover::before {
        transform: scaleY(0.96) rotate(-3deg) translate(1.5rem, -1.5rem);
    }

    /* Person image: reposition with RTL offset */
    .deep-team-sec .core-wrap .core-box .team-person {
        left: auto;
        right: 43%;
        transform: translateX(50%);
    }

    /* Name badge: swap sides */
    .deep-team-sec .core-wrap .core-box .about-name-box {
        right: auto;
        left: 9%;
    }

    /* Arrow pattern decoration: swap sides */
    .deep-team-sec .core-wrap .core-box .patern-arrow {
        right: auto;
        left: 16%;
    }

    /* Position badge: swap sides */
    .deep-team-sec .core-wrap .core-box .about-postion-box {
        left: auto;
        right: 12%;
        border-radius: 1px 1px 15px 1px;
    }

    /* Mirror the hover rotation of the position badge */
    .deep-team-sec .core-wrap .core-box:hover .about-postion-box {
        transform: rotate(-2.5deg);
    }


    /* ==========================================================================
       14. TO CONTACT US SECTION
       ========================================================================== */

    /* Decorative vector: right → left */
    .to-contact-us-sec .vectore {
        right: auto;
        left: 0;
        transform: scaleX(-1);
    }

    /* Floating icons: mirror positions */
    .to-contact-us-sec .icon-1 {
        left: auto;
        right: 3rem;
    }

    .to-contact-us-sec .icon-3 {
        right: auto;
        left: 8rem;
    }


    /* ==========================================================================
       15. OUR TEAM SECTION
       ========================================================================== */

    /* The section uses padding-inline-start which is already RTL-aware – no fix needed. */


    /* ==========================================================================
       16. JOIN TEAM / CAREERS SECTION
       ========================================================================== */

    /* Decorative patterns: mirror horizontal positions */
    .join-team-sec .pattren-1 {
        right: auto;
        left: 3%;
        transform: scaleX(-1);
    }

    .join-team-sec .pattren-2 {
        right: auto;
        left: -3%;
        transform: scaleX(-1);
    }

    .join-team-sec .internship-title img {
        right: auto;
        left: -2%;
        transform: scaleX(-1);
        top: -17%;
    }

    .join-team-sec .internship-box .pattern-5 {
        left: auto;
        right: -2%;
        transform: scaleX(-1);
    }

    /* Special box style pill corners: flip bottom-left → bottom-right */
    .special-box-style {
        border-radius: 4px 4px 60px 4px;
    }


    /* ==========================================================================
       17. MAP SECTION
       ========================================================================== */

    /* Decorative side pattern: right → left */
    .map-sec .sec-pattern {
        right: auto;
        left: 3%;
    }

    /* Title pattern: left → right */
    .map-sec .title-wrap .second-section-title .pattern {
        left: auto;
        right: -9%;
        transform: scaleX(-1);
    }


    /* ==========================================================================
       18. FAQ SECTION
       ========================================================================== */

    /* FAQ title decorative patterns: mirror both */
    .faq-sec .second-section-title .pattern_1 {
        left: auto;
        right: -4%;
        transform: scaleX(-1);
        top: -22%;
    }

    .faq-sec .second-section-title .pattern_2 {
        right: auto;
        left: -5%;
        transform: scaleX(-1);
    }

    /* The chevron rotate on open – mirror so it still points correctly */
    .faq-sec .special-box-style .toggle-box .question-box.active i {
        transform: rotate(180deg);
    }


    /* ==========================================================================
       19. BUTTONS & ICONS
       ========================================================================== */

    /*
     * The hover animation on primary buttons rotates icons -30deg (LTR).
     * Mirror to +30deg in RTL (icons already face left via the scaleX rule above,
     * so we keep them consistent with a positive rotation).
     */
    .main-btn:hover i,
    .secound-btn:hover i,
    .games-btn:hover i {
        transform: rotate(30deg);
    }


    /* ==========================================================================
       20. NEWS WORD TAG
       ========================================================================== */

    /*
     * The "news-word" label has a slanted parallelogram background.
     * Mirror the clip-path and swap the horizontal offsets for RTL.
     */
    .news-word::before {
        left: -10px;
        right: -6px;
        clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
    }


    /* ==========================================================================
       21. BLOG LIST & PAGINATION
       ========================================================================== */

    /* Active page number clip-path: mirror the parallelogram */
    .pagination .nav-links .current {
        clip-path: polygon(0% 0%, 81% 0%, 100% 100%, 24% 100%);
    }


    /* ==========================================================================
       22. BLOG SINGLE / RELATED SLIDER
       ========================================================================== */

    /*
     * Splide carousel: swap the prev/next arrow positions and icon content.
     * In RTL, "prev" means going right and "next" means going left.
     */
    .related-blogs-sec .splide .splide__arrows .splide__arrow--prev {
        left: auto;
        right: -65px;
    }

    .related-blogs-sec .splide .splide__arrows .splide__arrow--next {
        right: auto;
        left: -65px;
    }

    /* Swap arrow icon glyphs (Font Awesome chevron-right ↔ chevron-left) */
    .related-blogs-sec .splide .splide__arrows .splide__arrow--prev::after {
        content: "\f054";
        /* fa-chevron-right → becomes visually "previous" in RTL */
    }

    .related-blogs-sec .splide .splide__arrows .splide__arrow--next::after {
        content: "\f053";
        /* fa-chevron-left  → becomes visually "next" in RTL */
    }

    .related-blogs-sec .splide .splide__arrows .splide__arrow--prev:disabled {
        right: -90px;
        left: auto;
    }

    .related-blogs-sec .splide .splide__arrows .splide__arrow--next:disabled {
        left: -90px;
        right: auto;
    }


    /* ==========================================================================
       23. GAME PAGES – INDIVIDUAL GAMES
       ========================================================================== */

    /* ── Game banner decorative puzzle icons ── */
    .jackaro-banner-sec .puzzles-icon-1,
    .carrom-banner-sec .puzzles-icon-1,
    .tribal-knights-banner-sec .puzzles-icon-1,
    .game-banner-sec .puzzles-icon-1 {
        right: auto;
        left: 3%;
    }

    .jackaro-banner-sec .puzzles-icon-2,
    .carrom-banner-sec .puzzles-icon-2,
    .tribal-knights-banner-sec .puzzles-icon-2,
    .game-banner-sec .puzzles-icon-2 {
        left: auto;
        right: 25%;
    }

    .jackaro-banner-sec .puzzles-icon-3,
    .carrom-banner-sec .puzzles-icon-3,
    .tribal-knights-banner-sec .puzzles-icon-3,
    .game-banner-sec .puzzles-icon-3 {
        left: auto;
        right: -5%;
    }

    /* Tribal Knights banner pattern */
    .tribal-knights-banner-sec .pattren {
        right: auto;
        left: -2%;
    }

    /* ── Jackaro overview pattern ── */
    .jackaro-overview-sec .pattren {
        right: auto;
        left: 30%;
    }

    /* ── Jackaro CTA card section ── */

    /* Flip the gradient card background (red→black becomes black→red from left) */
    .jackaro-cta-card-sec .wrapper .card-side {
        order: 1;
    }

    /* ── Jackaro Marbles section ── */

    /*
     * The marbles image box uses a left-open clipping:
     *   polygon(24% 0, 100% 0, 100% 100%, 0 100%)
     * Mirror for RTL – right-open clip:
     *   polygon(0 0, 76% 0, 100% 100%, 0 100%)
     */
    .jackaro-marbles-sec .wrapper .img-box {
        clip-path: polygon(0 0, 76% 0, 100% 100%, 0 100%);
    }

    /* ── Jackaro slider ── */

    /* Decorative patterns around the slider: swap sides */
    .jackaro-slider-sec .pattren-1 {
        left: auto;
        right: 26%;
    }

    .jackaro-slider-sec .pattren-2 {
        right: auto;
        left: 20%;
        transform: rotate(-45deg);
    }

    /* Swap Swiper navigation icon glyphs */
    .jackaro-slider-sec .jackaro-controls .swiper-button-prev::before {
        content: "\f054";
        /* chevron-right as "previous" in RTL */
    }

    .jackaro-slider-sec .jackaro-controls .swiper-button-next::before {
        content: "\f053";
        /* chevron-left as "next" in RTL */
    }

    /* ── Carrom slider ── */

    .carrom-slider-sec .carrom-arrow.carrom-prev::before {
        content: "\f054";
    }

    .carrom-slider-sec .carrom-arrow.carrom-next::before {
        content: "\f053";
    }


    /* ==========================================================================
       24. PRODUCTION SECTIONS
       ========================================================================== */

    /*
     * The form submit arrow SVG points to the upper-right in LTR.
     * Flip it horizontally so it points to the upper-left in RTL.
     */
    .form-sec .wrapper .form-box div.wpforms-container-full button.submit-arrow-btn::after {
        transform: scaleX(-1) rotate(0deg);
    }

    .form-sec .wrapper .form-box div.wpforms-container-full button.submit-arrow-btn:hover::after {
        transform: scaleX(-1) rotate(45deg);
    }

    /* Company info: text alignment for RTL */
    .company-info-sec .wrapper .information-box .title,
    .company-info-sec .wrapper .information-box .info {
        text-align: right;
    }

    /* Production team: video person name & position text alignment */
    .production-our-team-sec .team-box .person .name,
    .production-our-team-sec .team-box .person .position {
        text-align: right;
    }

    /* Mirror the mobile production menu position for RTL */
    body.p-menu-open .production-header-menu .production-menu-wrap .p-menu {
        left: 70%;
        right: auto;
    }


    /* ==========================================================================
       25. AWARDS & PROJECTS
       ========================================================================== */

    /*
     * Award float image is centred via left:50% + translateX(-50%).
     * Mirror for RTL: right:50% + translateX(50%).
     */
    .awards-archive-sec .award .award-info .image-for-award-wrap .award-float {
        left: auto;
        right: 50%;
        transform: translateX(50%) translateY(19%);
    }

    /* Swap splide prev/next arrow glyphs in award/project sliders */
    .slider-award-sec .more-award-splide .splide__arrow--prev::before,
    .slider-award-sec .more-project-splide .splide__arrow--prev::before,
    .slider-project-sec .more-award-splide .splide__arrow--prev::before,
    .slider-project-sec .more-project-splide .splide__arrow--prev::before {
        content: "\f054";
    }

    .slider-award-sec .more-award-splide .splide__arrow--next::before,
    .slider-award-sec .more-project-splide .splide__arrow--next::before,
    .slider-project-sec .more-award-splide .splide__arrow--next::before,
    .slider-project-sec .more-project-splide .splide__arrow--next::before {
        content: "\f053";
    }

    /* Award hero text alignment */
    .award-hero-sec .wrapper .post-info,
    .project-hero-sec .wrapper .post-info {
        text-align: right;
    }


    /* ==========================================================================
       26. CAREER SINGLE PAGE & APPLY MODAL
       ========================================================================== */

    /* Single career page: fix list indentation direction */
    .single-career-page .career-single-content ul,
    .single-career-page .career-single-content ol {
        padding-left: 0;
        padding-right: 1.5rem;
    }

    /* Career hero text */
    .single-career-page .career-single-hero h1,
    .single-career-page .career-single-hero .team-lead,
    .single-career-page .career-single-hero .job-location {
        text-align: right;
    }

    /* Modal close button: top-right → top-left */
    .career-apply-modal__close {
        right: auto;
        left: 1.25rem;
    }

    /* Modal title: give breathing room on the left for the close button */
    .career-apply-modal__title {
        margin-right: 0;
        margin-left: 2.5rem;
        text-align: right;
    }

    .career-apply-modal__team-lead,
    .career-apply-modal__location {
        text-align: right;
    }

    /* WPForms inside modal */
    #careerApplyModal .wpforms-submit-container {
        text-align: right;
    }

    #careerApplyModal .wpforms-field-label {
        text-align: right;
    }

    #careerApplyModal input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=button]):not([type=image]),
    #careerApplyModal select,
    #careerApplyModal textarea {
        text-align: right;
    }

    #careerApplyModal select {
        /* move the dropdown arrow to the left for RTL */
        background-position: left 12px center !important;
        padding-left: 32px !important;
        padding-right: 12px !important;
    }


    /* ==========================================================================
       27. FOOTER
       ========================================================================== */

    /*
     * The footer uses padding-inline-* and margin-inline-* throughout,
     * which are already RTL-aware. Only physical overrides are needed below.
     */

    /* Conditions links row: reverse reading direction for RTL */
    .site-footer .footer-wrap .content-box .conditions-wrap {
        justify-content: flex-end;
    }

    .about-us-section .section-wrap .img-wrap .about-dote-img {
        bottom: 63%;
        left: 100%;
    }

    .about-us-section .section-wrap .img-wrap .about-name-box {
        top: 34%;
        left: 3%;
    }

    .about-us-section .section-wrap .img-wrap .about-arrow-img {
        top: 48%;
        left: 8%;
    }

    .about-us-section .section-wrap .img-wrap .about-position-box {
        left: -6%;
    }

    .deep-team-sec .core-wrap .core-box .patern-arrow {
        transform: scaleX(-1);
    }

    .deep-team-sec .core-wrap .core-box .hover-shape {
        transform: scaleX(-1);
        left: 83%;
    }

    /* ==========================================================================
       28. MOBILE RESPONSIVE
       ========================================================================== */

    @media (max-width: 768px) {

        /* ── Header: mobile nav slides from the RIGHT in LTR → slide from LEFT in RTL ── */
        .site-header .container .header-wrap .main-navigation {
            right: auto;
            left: -101%;
        }

        .site-header .container .header-wrap .burger-menu.open~.main-navigation {
            left: 0;
            right: auto;
        }

        /* ── Production header: mobile full-screen menu ── */
        .production-header-menu .production-menu-wrap .p-menu {
            left: 0;
            right: 0;
        }

        /* ── Related blogs slider arrows: tighter mobile positions ── */
        .related-blogs-sec .splide .splide__arrows .splide__arrow--prev {
            right: -20px;
            left: auto;
        }

        .related-blogs-sec .splide .splide__arrows .splide__arrow--next {
            left: -20px;
            right: auto;
        }

        /* ── Contact us section floating icons ── */
        .to-contact-us-sec .container .icon-1 {
            left: auto;
            right: 4%;
        }

        .to-contact-us-sec .container .icon-2 {
            left: auto;
            right: 83%;
        }

        .to-contact-us-sec .container .icon-3 {
            right: auto;
            left: 65%;
        }

        /* ── Join team decorative patterns ── */
        .join-team-sec .pattren-1 {
            right: auto;
            left: 12%;
        }

        .join-team-sec .internship-title img {
            right: auto;
            left: -5%;
        }

        /* ── Jackaro banner puzzle icons (mobile overrides) ── */
        .jackaro-banner-sec .puzzles-icon-1,
        .carrom-banner-sec .puzzles-icon-1,
        .tribal-knights-banner-sec .puzzles-icon-1,
        .game-banner-sec .puzzles-icon-1 {
            right: auto;
            left: 2%;
        }

        .jackaro-banner-sec .puzzles-icon-2,
        .carrom-banner-sec .puzzles-icon-2,
        .tribal-knights-banner-sec .puzzles-icon-2,
        .game-banner-sec .puzzles-icon-2 {
            left: auto;
            right: 41%;
        }

        .jackaro-banner-sec .puzzles-icon-3,
        .carrom-banner-sec .puzzles-icon-3,
        .tribal-knights-banner-sec .puzzles-icon-3,
        .game-banner-sec .puzzles-icon-3 {
            left: auto;
            right: -5%;
        }

        /* ── Jackaro slider (mobile) ── */
        .jackaro-slider-sec .pattren-1 {
            right: auto;
            left: 1%;
        }

        .jackaro-slider-sec .pattren-2 {
            right: auto;
            left: 6%;
        }

        /* ── Career modal close ── */
        .career-apply-modal__close {
            left: 1rem;
            right: auto;
        }

        .career-apply-modal__title {
            margin-left: 2.5rem;
            margin-right: 0;
        }

        /* ── Our some game: mobile icon-2 ── */
        .our-some-game .wrapper .icon-2 {
            left: auto;
            right: 2%;
        }

        /* ── Map section: mobile pattern ── */
        .map-sec .sec-pattern {
            right: auto;
            left: 3%;
        }

        /* ── FAQ title patterns: mobile ── */
        .faq-sec .second-section-title .pattern_1 {
            left: auto;
            right: 17%;
        }

        .faq-sec .second-section-title .pattern_2 {
            right: auto;
            left: 11%;
        }
    }



    .site-header .header-wrap .main-navigation ul li.current_page_item>a::before {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 0;
        transform: skewX(-14deg);
    }
}

.company-info-sec .wrapper .information-box .info {
    text-align: right;
    direction: ltr;
}