body[dir="rtl"] *{letter-spacing: normal !important;}

body[dir="rtl"]  .aboutus-bgs {

    margin-top: 0;
    background-image: url(../images/purposea-h.png), url(../images/vision-mission.png);
    background-position: top left, top right !important;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, 50%;
    width: 133vw;
    padding-left: 27vw;
    padding-right:0;
}

body[dir="rtl"] .aboutus-right{margin-left:0; margin-right:7%;}
body[dir="rtl"] .box-content-left{margin-left:10px; margin-right:0;}

body[dir="rtl"] .esg-divider{margin-right:0; margin-left:25px;

}

body[dir="rtl"]  .esg-left {margin-right:0; margin-left:25px;}

body[dir="rtl"] .viewport-wrapper{margin-right:0; margin-left:0;}
body[dir="rtl"] .stc-ir-viewport{overflow: hidden;}
body[dir="rtl"] .stc-col {padding:20px 140px 20px 20px;}

body[dir="rtl"]  .stc-node-point {

    right: -56.5px;
    left:0;

}


body[dir="rtl"] .stc-svg-overlay{

 
    right: -265px;
    left: auto;
  
}

body[dir="rtl"] .action-anchor {
    position: absolute;
    bottom: 65px;
    left: 53px;
    right:auto;
    z-index: 9999;
}
html[dir=rtl] p {
    letter-spacing: 0;
}

body[dir="rtl"] .content-page_journey-white p, body[dir="rtl"] .content-page_journey-white h1 {padding-right:80px !important; padding-left:0 !important;}

body[dir="rtl"] .stc-list-item::before{left:auto; right:0;}
body[dir="rtl"]  .stc-list-item{padding-left:0; padding-right:15px;}

body[dir="rtl"]  .stc-svg-overlay {
    /* Flip the SVG horizontally so the path starts from the right */
    transform: scaleX(-1);
    left: auto;
    right: 0;
}
body[dir="rtl"] .hero {
width: 100%;
    height: 100%;
    padding: 60px 10%;
    display: flex;
    justify-content: right;
    color: #1d1d1d;
}



body[dir="rtl"] .esg-bg {
    background: #4f008c url(../images/sustain-bg-ar.jpg) top left  no-repeat !important;
    background-size: contain !important;
    padding: 0 0 0 15% !important;
    min-width: 130vw;
}



body[dir="rtl"] .close-video {
    position: absolute;
    top: -45px;
    left: 0;
    right:auto;
    color: white;
    font-size: 35px;
    cursor: pointer;
    transition: transform 0.3s ease;
    background-color: #000;
    border: 0;
}


body[dir="rtl"] .close-video:hover {
    transform: rotate(90deg) scale(1.2);
}








body[dir="rtl"] .main-drop i {transform: rotate(57deg) !important;}


body[dir="rtl"] #home {
    width: 100vw;
    height: 100vh;
    background: url(../images/cover-pic1.jpg) 46% 34%  no-repeat !important;
    background-size: cover !important;
}

body[dir="rtl"] .ld-btn{text-decoration: none;;}

body[dir="rtl"] .reach-container{margin-bottom:3%; direction: ltr;}
body[dir="rtl"] .exec-cell li::before {right:-15px; left:auto;}
body[dir="rtl"] .page-title::after {right:0px; left:auto;}


body[dir="rtl"] .stakeholder-bg{background:#4f008c url(../images/stakeholder.png) top left no-repeat !important;}

body[dir="rtl"] .ld-viewport{justify-content: right;}

body[dir="rtl"] .stay-text{padding-right:80px; padding-left:0;}

body[dir="rtl"] .esg-bg {padding: 0 5% 0 25% !important;}

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


@media screen and (max-width: 1024px) {

    body[dir="rtl"] .circle-text text{font-size:12px !important;}

body[dir="rtl"] .brand-layout img{max-width:100% !important;}
body[dir="rtl"] .annual-report-text {
    color: #fff !important;
    font-size: 60px !important;
    position: absolute;
    left: auto !important;
    right: 34%;
    top: auto !important;
    line-height: 25px;
    bottom: 0 !important;
}

          body[dir="rtl"] .stat-card {
        margin: 0 !important;
        justify-content: right;
    }
   body[dir="rtl"] .stc-main-container::before {
        content: '';
        position: absolute;
        right: 0px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: rgba(255, 255, 255, 0.2);
    }

    body[dir="rtl"] .exec-cell li{padding-right:0px; padding-left:0px;         margin-right: 25px;}
body[dir="rtl"] .esg-bg{padding:0 !important;}
body[dir="rtl"] .exec-cell li::before{right:-20px !important;}

    body[dir="rtl"] .stay-text {padding-right: 0px; padding-left: 0px;}
    body[dir="rtl"] .button-container {
        margin-left: 80px;
    }
body[dir="rtl"] .content-page_journey-white p, body[dir="rtl"] .content-page_journey-white h1{padding-right:0 !important;}
body[dir="rtl"] .content-page_journey-white p{margin-bottom:15px;}

    body[dir="rtl"] .stc-year-box{text-align:right;}


      body[dir="rtl"]  .burger {
        top: 6px;
        left:5% !important;
        right:auto;
    }
}




body[dir="rtl"] .master-slider {
    display: flex; /* MUST be flex */
    width: 500vw;  /* MUST be wide enough for 5 slides */
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}

body[dir="rtl"]  .section-panel {
    width: 100vw;   /* Each panel takes full screen width */
    height: 100vh;
    flex-shrink: 0; /* Prevents panels from squishing */
}



@media (hover:hover){
 body[dir="rtl"]   .ld-card:hover .ld-media{
        transform:translateX(120%);
           filter:grayscale(0);
    }
}



@media (hover:hover){
  body[dir="rtl"]   .ld-card:hover .ld-info{
        opacity:1;
        transform:translateX(-46%);
        pointer-events:auto;
    }
}

/* Fix: Ensures the text stays visible on the path in Arabic mode */
body[dir="rtl"] .circle-text text {
    direction: ltr;
    unicode-bidi: isolate;
    fill: #fff;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Fix: Ensure the text-anchor starts at the beginning of the SVG path */
body[dir="rtl"] .circle-text textPath {
    text-anchor: start;
    startOffset: 0%;
}

/* Position the pulse/button for RTL flow if needed */

.ld-info{right:55px;}


@keyframes rotateText {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes pulse-ring-rtl {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}




body[dir="rtl"] .action-anchor .btn-chevron {
    transform: scaleX(-1) !important;
    display: inline-block; /* Ensure transform works */
}



body[dir="rtl"] .master-slider {
    display: flex;
    flex-direction: row; /* In RTL, this naturally flows Right -> Left */
    width: 500vw;
    height: 100vh;
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
    
    /* ADD THESE */
    direction: rtl; 
    justify-content: flex-start; 
    margin: 0;
    padding: 0;
}

body[dir="rtl"] .section-panel {
    width: 100vw; /* Ensure each panel takes exactly one screen width */
    height: 100vh;
    flex-shrink: 0;
    /* Ensure content inside doesn't break the layout */
    box-sizing: border-box; 
}

body[dir="rtl"] .stc-fab-details1 i {
    transform: scaleX(-1);
    display: inline-block; /* Required for transform to work on <i> tags */
}


body[dir="rtl"] .flag i{transform: scaleX(-1); display: inline-block;}

body[dir="rtl"] .stc-close-icon {right:auto;left: 20px;}



.letter {
  display: inline-block;
    direction: ltr;
}


body[dir="rtl"] .aboutus-right .stat-card {
    display: flex;
    flex-direction: column;
    align-items: normal;
    justify-content: flex-start;
    margin: 0;
}

body[dir="rtl"] .stc-val-icon-box img {
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1); /* For older browsers */
}

body[dir="rtl"] .purpose{margin-bottom:5px;}


/* --- RTL SPECIFIC OVERRIDES --- */
body[dir="rtl"] .stc-modal-overlay {
    left: auto;
    right: 0;
}

body[dir="rtl"] .stc-modal-sheet {
    left: auto;
    right: 0;
}

body[dir="rtl"] .stc-close-icon {
    right: auto;
    left: 30px; /* Moves close button to the top-left */
}

/* body[dir="rtl"] .brand-layout {
display:block;
} */

body[dir="rtl"] .text-block p {
    text-align: right; /* Changes justify/left to right for Arabic */
}

/* Fixes the icon flip for RTL */
body[dir="rtl"] .stc-val-icon-box img {
    transform: scaleX(-1);
}

/* Mobile Adjustments for RTL */
@media (max-width: 850px) {
   body[dir="rtl"] .brand-layout {
      flex-direction: column !important;
        text-align: right !important;
        gap: 20px !important;
    }

body[dir="rtl"] .stc-action-bar1 {
    display: flex;
    align-items: right;
    justify-content: right;
    margin: 5px 0% 0 0 !important;
}



}

body[dir="rtl"] .stc-btn-wrapper .flag i {
    transform: scaleX(1);
    display: inline-block;
}

body[dir="rtl"] .stc-modal-sheet{bottom:40px;}

body[dir="rtl"] .brand-layout img {
    margin-left: 60px;
    margin-right: 0;
}
body[dir="rtl"] .kfi-number-row{justify-content: right;}


body[dir="rtl"] .esg-letter{font-size:70px;}



 body[dir="rtl"]   .video-walk{

      /* 100% of the Viewport Width */
    height: 100vh;      /* 100% of the Viewport Height */
    position: absolute;
    top: 0;
    right: auto;
    left: 0;            /* Added to ensure it starts from the edge */
    bottom: 0;          /* Added to ensure it ends at the edge */
    object-fit: fill;   /* This forces the video to stretch to fit the box */

    
        }
[dir="rtl"] .about-title123 {
    color: #fff;
    padding: 10px 0;
    font-size: 40px;
    margin-top: 0%;
}
[dir="rtl"] .about-title12{  color: #fff;
    padding: 10px 0;
    font-size: 40px;
    margin-top: 4%;}
/* 1. Base RTL Settings */


/* Fix for the RTL Gap Issue */
[dir="rtl"] .panel-header {
    left: auto;
    right: 0;
    width: 100%; /* Ensures the header fills the collapsed panel width */
    display: flex;
    flex-direction: column; /* Stack Icon on top of Text */
    justify-content: center;
    align-items: center;
    gap: 15px; /* This creates the EXACT same space for every panel */
}

[dir="rtl"] .panel-header h3 {
    /* Change rotation to 90deg and set origin to center */
    transform: rotate(90deg);
    transform-origin: center;
    white-space: nowrap;
    margin: 0; 
    padding: 0;
    display: block;
    margin-left:86px;
    margin-top:-50px;
}

[dir="rtl"] .svg-icon {
    /* REMOVE the negative margin causing the gap difference */
    margin-right: 0 !important; 
    margin-left: 0 !important;
    
    /* Ensure the icon stays upright while the text rotates */
    transform: rotate(0deg); 
    display: block;
    position: static;
}


[dir="rtl"] .about-title {
    color: #fff;
    padding: 10px 0;
    font-size: 40px;

}

[dir="rtl"] .kfi-stats-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px 40px;
}



body[dir="rtl"] #bg0 { background-image: url('../images/over-view-ar.jpg') !important; }
body[dir="rtl"] #bg1 { background-image: url('../images/business-modal-ar.jpg') !important; }
body[dir="rtl"] #bg2 { background-image: url('../images/cover-pic1-ar.jpg') !important; }
body[dir="rtl"] #bg3 { background-image: url('../images/sustain-ar.jpg') !important; }
body[dir="rtl"] #bg4 { background-image: url('../images/governance-ar.jpg') !important; }
body[dir="rtl"] #bg5 { background-image: url('../images/financial1-ar.jpg') !important; }



@media screen and (max-width: 1024px) {




body[dir="rtl"] .stc-node-subtitle {
  
    letter-spacing: normal !important;

}

body[dir="rtl"] #bg0 { background-image: none !important;}
body[dir="rtl"] #bg1 { background-image: none !important; }
body[dir="rtl"] #bg2 { background-image: none !important;}
body[dir="rtl"] #bg3 { background-image: none !important;}
body[dir="rtl"] #bg4 { background-image: none !important;}
body[dir="rtl"] #bg5 { background-image: none !important;}

   body[dir="rtl"] .video-walk {
        bottom: 0;
        height: 394px;
        margin-left: 5%;
        max-width: 100%;
    }


body[dir="rtl"] #home {
        background: url(../images/cover-pic1.jpg) 33% 38% no-repeat !important;
        background-size: cover !important;
}

   body[dir="rtl"] .hero-video {
        top: 0% !important;
    }

body[dir="rtl"] .aboutus-right .stat-card{padding-right:20px;}
[dir="rtl"] .stc-purple-mobile{color:#4f008c !important;}

body[dir="rtl"] .stc-action-bar{margin:30px 0;}

body[dir="rtl"] .award-list-item::before{right:auto; left:20px;}
[dir="rtl"] .panel-header{gap:0 !important;}
[dir="rtl"] .panel-header h3 {
    transform: rotate(0deg);
    transform-origin: center;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    display: block;
    margin-left: 0px;
   margin-top: 0px;
}

body[dir="rtl"] .master-slider{padding:0 20px 0 0;}

body[dir="rtl"] .stack-header h1 {
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
    font-size: clamp(2rem, 5vh, 4rem);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: normal !important;
}



body[dir="rtl"] .stc-btn, 
body[dir="rtl"] .ld-role{    letter-spacing: normal !important;}

}




body[dir="rtl"] .stc-action-bar1 {
    display: flex;
    align-items: right;
    justify-content: right;
    margin: 5px 20% 0 0;
}

body[dir="rtl"] .esg-grid{

        display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 70px;
    max-width: 1800px;
    margin: 0 auto;
}



body[dir="rtl"]  .esg-text-item{font-size:16px;}


body[dir="rtl"] .esg-side-label h3{font-size:15px;}


 body[dir="rtl"] .shareholder-page1{padding:2%;/* background:url(../images/share-holder-ar.jpg) top left no-repeat; */ background-size: cover; width:130vw;position:relative;}
  body[dir="rtl"]  .business-model_bg{background:#4f008c url(../images/business-modal-ar.jpg) fixed top center no-repeat; background-size:cover;  position: relative; z-index: 1;}
      body[dir="rtl"]  .reach_bg{ background: #4f008c url(../images/reach2-ar.jpg) top center no-repeat; background-size:cover;  position: relative; z-index: 1;}
  body[dir="rtl"] .page-wrapper {padding:2vh 10% 2vh 30%;}


    body[dir="rtl"] .annual-report-text {
    color: #fff !important;
    font-size: 60px !important;
    position: absolute;
    right: auto;
    left:6%;
    top: 25%;
    line-height: 25px;
}

    /* Specific logic for RTL mode */
body[dir="rtl"] .main-drop {
    cursor: pointer;
    position: relative; /* Ensures it respects z-index */
    z-index: 100;       /* Brings it above the SVG circle text */
    pointer-events: auto !important;
}

body[dir="rtl"] .scene {
    /* Prevents the scene container from swallowing clicks intended for the button */
    pointer-events: none; 
}

body[dir="rtl"] .main-drop, 
body[dir="rtl"] .main-drop i {
    /* Re-enables clicks specifically for the button and icon */
    pointer-events: auto;
}

/* RTL Specific Adjustments */
body[dir="rtl"] .brand-layout {
    flex-direction: row; /* Flex automatically handles RTL, no need to flip */
    gap:0;
}

body[dir="rtl"] .text-block p {
    text-align: right; /* Avoid 'justify' if it's causing overflow */
    direction: rtl;
}

/* Ensure the close icon doesn't block text in RTL */
body[dir="rtl"] .stc-close-icon {
    right: auto;
    left: 30px;
}

body[dir="rtl"] .aboutus-left{background:linear-gradient(
272deg, #4f008ce0, #4f008c00) !important;}


body[dir="rtl"] .lt-card-name{font-size:13px !important;}


body[dir="rtl"] .esg-side-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 90px;
    align-items: flex-end;
    padding-left: 30px;
    padding-right:0;
    border-right:0;
    border-left: 2px solid var(--esg-border-ui);
}


body[dir="rtl"] .kfi-percentage.positive::before{margin-left:5px !important;}

body[dir="rtl"] a.pulse-scroller-btn {
    color: #fff !important;
  
    justify-content: center;
    gap: 20px;
}


body[dir="rtl"] a.pulse-scroller-btn:hover {
    color: #ff375e !important;
  
}

body[dir="rtl"] .stc-action-bar1 {
    display: flex;
    align-items: center;
    margin-right: 17%;
}


body[dir="rtl"] .hero-video-investment1{

position: absolute;
    top: 0;
  left: auto;
    right: 36%;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(272deg, #4f008c 0%, #4f008c 30%, #4f008c99 90%);
    z-index: 0;
    pointer-events: none;
}



body[dir="rtl"] .video-overlay1234{
    position: absolute;
    top: 0;
    right: 34%;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(271deg, #4f008c 0%, #4f008c 30%, #4f008c99 90%);
    z-index: 0;
    pointer-events: none;
}

body[dir="rtl"] .about-title-share {
    position: absolute;
    top: 0;
}


body[dir="rtl"] .flext-right-content-ar{position: absolute;
    bottom: 28px;}


    body[dir="rtl"] .exec-model-slide .text-white {font-size:40px !important;}


        body[dir="rtl"] .stc-panel-body h2.text-white, body[dir="rtl"] .stc-panel-body h2 span.coral-text{font-size: 30px !important;}