/* Arabic (RTL) Styles */

/* Import Cairo font */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

body {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,.common-btn,span, p, label, input, textarea, select,.main-menu a ,.accordion-button{
    font-family: 'Cairo', sans-serif !important;
}
/* General RTL adjustments */
/* Adjust margins and paddings for RTL */
/* Example: if you have .ml-auto for LTR, you might need .mr-auto for RTL */
/* This is a general approach, specific elements might need more granular adjustments */

/* Adjust text alignment for elements that might be forced LTR */
.text-left {
    text-align: right !important;
}

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

/* Adjust float properties */
.float-left {
    float: right !important;
}

.float-right {
    float: left !important;
}

/* Adjust positioning (left/right) */
[style*="left"] {
    right: var(--left, initial) !important;
    left: initial !important;
}

[style*="right"] {
    left: var(--right, initial) !important;
    right: initial !important;
}

/* Adjust specific elements if needed, e.g., menu items, form fields */
.main-menu ul.sub-menu {
    left: auto;
    right: -14px; /* Adjust as per your layout */
    text-align: right;
}

.main-menu ul.sub-menu li a::before {
    left: auto;
    right: 0;
}

.main-menu ul.sub-menu li a:hover::before {
    left: auto;
    right: 0;
}

.structa-mobile-menu ul li a {
    text-align: right;
}

.structa-mobile-menu ul .structa-item-has-children > a .structa-mean-expand {
    left: 0;
    right: auto;
    justify-content: flex-start;
}

.structa-mobile-menu ul .structa-item-has-children > a .structa-mean-expand:before {
    transform: rotate(180deg); /* Flip arrow for RTL */
}

.structa-mobile-menu ul .structa-item-has-children.structa-active > a .structa-mean-expand:before {
    transform: rotate(90deg); /* Flip arrow back for active state */
}

/* Adjust any other specific elements that need RTL treatment */
/* For example, if you have icons on the left of text, you might want them on the right */
/* .icon-left {
    margin-right: 10px;
    margin-left: 0;
} */
.odometer {
    direction: ltr;
}

h1, .h1 {
    font-size: 88px;
}