/**
 * RTL CSS File for Arabic language
 * Construction Company Portfolio Website
 */

/*--------------------------------------------------------------
# General RTL Overrides
--------------------------------------------------------------*/
body.rtl {
    direction: rtl;
    text-align: right;
}

body.rtl .text-left {
    text-align: right !important;
}

body.rtl .text-right {
    text-align: left !important;
}

body.rtl .float-left {
    float: right !important;
}

body.rtl .float-right {
    float: left !important;
}

body.rtl .me-1, 
body.rtl .me-2, 
body.rtl .me-3, 
body.rtl .me-4, 
body.rtl .me-5 {
    margin-right: 0 !important;
}

body.rtl .ms-1 {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

body.rtl .ms-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

body.rtl .ms-3 {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

body.rtl .ms-4 {
    margin-right: 1.5rem !important;
    margin-left: 0 !important;
}

body.rtl .ms-5 {
    margin-right: 3rem !important;
    margin-left: 0 !important;
}

body.rtl .me-1 {
    margin-left: 0.25rem !important;
    margin-right: 0 !important;
}

body.rtl .me-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

body.rtl .me-3 {
    margin-left: 1rem !important;
    margin-right: 0 !important;
}

body.rtl .me-4 {
    margin-left: 1.5rem !important;
    margin-right: 0 !important;
}

body.rtl .me-5 {
    margin-left: 3rem !important;
    margin-right: 0 !important;
}

body.rtl .ps-1, 
body.rtl .ps-2, 
body.rtl .ps-3, 
body.rtl .ps-4, 
body.rtl .ps-5 {
    padding-left: 0 !important;
}

body.rtl .pe-1, 
body.rtl .pe-2, 
body.rtl .pe-3, 
body.rtl .pe-4, 
body.rtl .pe-5 {
    padding-right: 0 !important;
}

body.rtl .ps-1 {
    padding-right: 0.25rem !important;
}

body.rtl .ps-2 {
    padding-right: 0.5rem !important;
}

body.rtl .ps-3 {
    padding-right: 1rem !important;
}

body.rtl .ps-4 {
    padding-right: 1.5rem !important;
}

body.rtl .ps-5 {
    padding-right: 3rem !important;
}

body.rtl .pe-1 {
    padding-left: 0.25rem !important;
}

body.rtl .pe-2 {
    padding-left: 0.5rem !important;
}

body.rtl .pe-3 {
    padding-left: 1rem !important;
}

body.rtl .pe-4 {
    padding-left: 1.5rem !important;
}

body.rtl .pe-5 {
    padding-left: 3rem !important;
}

body.rtl .text-md-end {
    text-align: left !important;
}

body.rtl .text-md-start {
    text-align: right !important;
}

body.rtl .text-lg-end {
    text-align: left !important;
}

body.rtl .text-lg-start {
    text-align: right !important;
}

/*--------------------------------------------------------------
# Header RTL
--------------------------------------------------------------*/
body.rtl .top-bar .contact-info .phone,
body.rtl .top-bar .contact-info .email {
    margin-right: 0;
}

body.rtl .top-bar .social-links {
    margin-left: 15px;
    margin-right: 0;
}

body.rtl .navbar-nav {
    padding-right: 0;
}

body.rtl .navbar-nav .nav-link::after {
    right: 0;
    left: auto;
}

body.rtl .dropdown-menu {
    text-align: right;
}

body.rtl .dropdown-item {
    text-align: right;
}

/*--------------------------------------------------------------
# Hero Section RTL
--------------------------------------------------------------*/
body.rtl .hero-overlay {
    background: linear-gradient(-90deg, var(--secondary-color) 30%, rgba(26, 43, 72, 0.7) 100%);
}

body.rtl .hero-content {
    text-align: right;
}

body.rtl .hero-image {
    left: 0;
    right: auto;
}

/*--------------------------------------------------------------
# About Section RTL
--------------------------------------------------------------*/
body.rtl .about-image::before {
    right: -20px;
    left: auto;
}

body.rtl .about-image::after {
    left: -20px;
    right: auto;
}

body.rtl .about-feature .icon {
    margin-left: 15px;
    margin-right: 0;
}

/*--------------------------------------------------------------
# Services Section RTL
--------------------------------------------------------------*/
body.rtl .service-content h3::after {
    right: 0;
    left: auto;
}

/*--------------------------------------------------------------
# Projects Section RTL
--------------------------------------------------------------*/
body.rtl .project-overlay .btn {
    align-self: flex-end;
}

/*--------------------------------------------------------------
# Testimonials Section RTL
--------------------------------------------------------------*/
body.rtl .testimonial-content {
    padding-right: 30px;
    padding-left: 0;
}

body.rtl .testimonial-content::before {
    right: 0;
    left: auto;
}

body.rtl .testimonial-author img {
    margin-left: 15px;
    margin-right: 0;
}

/*--------------------------------------------------------------
# Contact Section RTL
--------------------------------------------------------------*/
body.rtl .contact-info-box .icon {
    margin-left: 15px;
    margin-right: 0;
}

body.rtl .contact-form label {
    text-align: right;
}

/*--------------------------------------------------------------
# Footer RTL
--------------------------------------------------------------*/
body.rtl .footer-widget .widget-title::after {
    right: 0;
    left: auto;
}

body.rtl .footer-links li a:hover {
    padding-right: 10px;
    padding-left: 0;
}

body.rtl .contact-info .contact-item i {
    margin-left: 15px;
    margin-right: 0;
}

body.rtl .newsletter-form .form-control {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

body.rtl .newsletter-form .btn {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

body.rtl .footer-bottom-links a {
    margin-right: 15px;
    margin-left: 0;
}

body.rtl .back-to-top {
    left: 30px;
    right: auto;
}

/*--------------------------------------------------------------
# Responsive RTL
--------------------------------------------------------------*/
@media (max-width: 991px) {
    body.rtl .hero-overlay {
        background: linear-gradient(180deg, var(--secondary-color) 0%, rgba(26, 43, 72, 0.8) 100%);
    }
    
    body.rtl .navbar-toggler {
        margin-left: 0;
    }
} 