/**
 * RTL Support CSS
 * Handles RTL/LTR direction changes without affecting design
 * Uses CSS logical properties and direction-aware rules
 */

/* Base RTL direction */
html[dir="rtl"] {
    direction: rtl;
}

html[dir="ltr"] {
    direction: ltr;
}

/* RTL Body class for additional control */
body.rtl {
    direction: rtl;
}

body.ltr {
    direction: ltr;
}

/* ============================================
   Header & Navigation RTL Support
   ============================================ */

html[dir="rtl"] .header-area .main-nav .logo {
    float: right;
}

html[dir="rtl"] .header-area .main-nav .nav {
    float: left;
}

html[dir="rtl"] .header-area .main-nav .nav li {
    float: right;
}

html[dir="rtl"] .lang-toggle-btn {
    float: left;
    margin-left: 0;
    margin-right: 20px;
}

html[dir="ltr"] .lang-toggle-btn {
    float: right;
    margin-right: 0;
    margin-left: 20px;
}

/* Language toggle button positioning */
.lang-toggle-btn {
    background-color: #6D2025;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 30px;
    vertical-align: middle;
    display: inline-block;
    line-height: normal;
}

.lang-toggle-btn:hover {
    background-color: #8a2a30;
    transform: scale(1.05);
}

/* Adjust language toggle button when header scrolls */
.background-header .lang-toggle-btn {
    margin-top: 20px !important;
}

/* ============================================
   Contact Now Button Text Centering
   ============================================ */

/* Ensure the main-red-button text is centered */
.header-area .main-nav .nav li:last-child .main-red-button,
.background-header .main-nav .nav li:last-child .main-red-button {
    text-align: center !important;
    display: inline-block !important;
}

.header-area .main-nav .nav li:last-child .main-red-button a,
.background-header .main-nav .nav li:last-child .main-red-button a {
    text-align: center !important;
    display: inline-block !important;
    line-height: 40px !important;
    height: 40px !important;
    padding: 0 20px !important;
}

html[dir="rtl"] .background-header .main-nav {
    text-align: right;
}

html[dir="ltr"] .background-header .main-nav {
    text-align: left;
}

/* ============================================
   Banner Section RTL Support
   ============================================ */

html[dir="rtl"] .main-banner .row {
    direction: rtl;
}

html[dir="rtl"] .left-content {
    text-align: right;
}

html[dir="ltr"] .left-content {
    text-align: left;
}

html[dir="rtl"] .right-image {
    text-align: left;
}

html[dir="ltr"] .right-image {
    text-align: right;
}

/* ============================================
   About Section RTL Support
   ============================================ */

html[dir="rtl"] .about-us .left-image {
    float: right;
}

html[dir="ltr"] .about-us .left-image {
    float: left;
}

html[dir="rtl"] .about-us .services {
    float: left;
    text-align: right;
}

html[dir="ltr"] .about-us .services {
    float: right;
    text-align: left;
}

html[dir="rtl"] .item .icon {
    float: right;
    margin-right: 0;
    margin-left: 20px;
}

html[dir="ltr"] .item .icon {
    float: left;
    margin-left: 0;
    margin-right: 20px;
}

html[dir="rtl"] .item .right-text {
    text-align: right;
}

html[dir="ltr"] .item .right-text {
    text-align: left;
}

/* ============================================
   Services Section RTL Support
   ============================================ */

html[dir="rtl"] .our-services .left-image {
    float: right;
}

html[dir="ltr"] .our-services .left-image {
    float: left;
}

html[dir="rtl"] .our-services .section-heading {
    text-align: right;
}

html[dir="ltr"] .our-services .section-heading {
    text-align: left;
}

html[dir="rtl"] .progress-skill-bar {
    text-align: right;
}

html[dir="ltr"] .progress-skill-bar {
    text-align: left;
}

html[dir="rtl"] .progress-skill-bar span {
    left: 0 !important;
    right: auto !important;
}

html[dir="ltr"] .progress-skill-bar span {
    right: auto;
    left: 95%;
}

html[dir="rtl"] .filled-bar {
    left: auto !important;
    right: 0 !important;
}

html[dir="ltr"] .filled-bar {
    right: auto;
    left: 0;
}

html[dir="rtl"] .progress-skill-bar h4 {
    text-align: right;
}

html[dir="ltr"] .progress-skill-bar h4 {
    text-align: left;
}

/* ============================================
   Portfolio/Why Us Section RTL Support
   ============================================ */

html[dir="rtl"] .our-portfolio .item {
    text-align: right;
}

html[dir="ltr"] .our-portfolio .item {
    text-align: left;
}

html[dir="rtl"] .our-portfolio .hidden-content {
    text-align: right;
}

html[dir="ltr"] .our-portfolio .hidden-content {
    text-align: left;
}

/* Portfolio images always centered regardless of direction */
html[dir="rtl"] .our-portfolio .showed-content,
html[dir="ltr"] .our-portfolio .showed-content {
    text-align: center !important;
}

html[dir="rtl"] .our-portfolio .showed-content img,
html[dir="ltr"] .our-portfolio .showed-content img {
    display: block;
    margin: 0 auto;
    text-align: center;
}

/* Why Us section heading always centered regardless of direction */
html[dir="rtl"] #whyus .section-heading,
html[dir="ltr"] #whyus .section-heading {
    text-align: center !important;
}

html[dir="rtl"] #whyus .section-heading h2,
html[dir="ltr"] #whyus .section-heading h2 {
    text-align: center !important;
}

/* Center the heading row using flexbox - works for both RTL and LTR */
html[dir="rtl"] #whyus > .container > .row:first-child,
html[dir="ltr"] #whyus > .container > .row:first-child {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    direction: ltr !important;
}

/* Reset offset and center the column */
html[dir="rtl"] #whyus .col-lg-6.offset-lg-3,
html[dir="ltr"] #whyus .col-lg-6.offset-lg-3 {
    margin-left: auto !important;
    margin-right: auto !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

/* ============================================
   Contact Section RTL Support
   ============================================ */

html[dir="rtl"] .contact-us .section-heading {
    text-align: right;
}

html[dir="ltr"] .contact-us .section-heading {
    text-align: left;
}

html[dir="rtl"] .phone-info {
    text-align: right;
}

html[dir="ltr"] .phone-info {
    text-align: left;
}

html[dir="rtl"] .phone-info h4 {
    text-align: right;
}

html[dir="ltr"] .phone-info h4 {
    text-align: left;
}

/* ============================================
   Footer RTL Support
   ============================================ */

html[dir="rtl"] footer {
    text-align: right;
}

html[dir="ltr"] footer {
    text-align: left;
}

/* ============================================
   General Text Alignment
   ============================================ */

html[dir="rtl"] .section-heading {
    text-align: right;
}

html[dir="ltr"] .section-heading {
    text-align: left;
}

html[dir="rtl"] p {
    text-align: right;
}

html[dir="ltr"] p {
    text-align: left;
}

/* ============================================
   Bootstrap Grid RTL Support
   ============================================ */

html[dir="rtl"] .row {
    direction: rtl;
}

html[dir="ltr"] .row {
    direction: ltr;
}

/* ============================================
   Menu & Navigation RTL
   ============================================ */

html[dir="rtl"] .menu-trigger {
    float: left;
}

html[dir="ltr"] .menu-trigger {
    float: right;
}

html[dir="rtl"] .header-area .main-nav .nav li a {
    padding-right: 0;
    padding-left: 20px;
}

html[dir="ltr"] .header-area .main-nav .nav li a {
    padding-left: 0;
    padding-right: 20px;
}

/* ============================================
   Smooth Transitions
   ============================================ */

* {
    transition: text-align 0.3s ease, direction 0.3s ease;
}

/* ============================================
   Owl Carousel RTL Support
   ============================================ */

html[dir="rtl"] .owl-carousel {
    direction: rtl;
}

html[dir="rtl"] .owl-carousel .owl-item {
    float: right;
}

html[dir="ltr"] .owl-carousel {
    direction: ltr;
}

html[dir="ltr"] .owl-carousel .owl-item {
    float: left;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 991px) {
    html[dir="rtl"] .header-area .main-nav .nav {
        text-align: right;
    }
    
    html[dir="ltr"] .header-area .main-nav .nav {
        text-align: left;
    }
    
    html[dir="rtl"] .lang-toggle-btn {
        float: none;
        display: block;
        margin: 10px auto;
    }
    
    html[dir="ltr"] .lang-toggle-btn {
        float: none;
        display: block;
        margin: 10px auto;
    }
}

/* ============================================
   Animation Direction Fix
   ============================================ */

html[dir="rtl"] .wow {
    animation-direction: normal;
}

/* Ensure icons and images don't flip */
html[dir="rtl"] img,
html[dir="rtl"] .fa,
html[dir="rtl"] i {
    transform: none;
}

/* Phone and email icons positioning */
html[dir="rtl"] .phone-info .fa {
    margin-right: 0;
    margin-left: 10px;
}

html[dir="ltr"] .phone-info .fa {
    margin-left: 0;
    margin-right: 10px;
}