@import url('variables.css');

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

[dir="rtl"] .navbar-link::after {
    left: auto;
    right: 0;
}

[dir="rtl"] .form-select {
    background-position: left 18px center;
    padding-right: 18px;
    padding-left: 48px;
}

[dir="rtl"] .toast {
    right: auto;
    left: var(--space-6);
    transform: translateX(-120%);
    border-left: none;
    border-right: 4px solid var(--accent);
}

[dir="rtl"] .toast.show {
    transform: translateX(0);
}

[dir="rtl"] .dropdown-menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .hero-visual {
    right: auto;
    left: -5%;
}

[dir="rtl"] .hero-mockup {
    transform: perspective(1000px) rotateY(15deg);
}

[dir="rtl"] .hero-mockup:hover {
    transform: perspective(1000px) rotateY(5deg);
}

[dir="rtl"] .service-item {
    border-left: none;
    border-right: 3px solid transparent;
}

[dir="rtl"] .service-item.active {
    border-right-color: var(--accent);
}

[dir="rtl"] .process-timeline {
    padding-left: 0;
    padding-right: var(--space-12);
}

[dir="rtl"] .process-line {
    left: auto;
    right: 15px;
}

[dir="rtl"] .process-dot {
    left: auto;
    right: -43px;
}

[dir="rtl"] .quote-mark {
    right: auto;
    left: var(--space-8);
}

[dir="rtl"] .contact-icon {
    margin-left: 0;
}

[dir="rtl"] .footer-bottom {
    flex-direction: row-reverse;
}