@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

body {
    direction: rtl;
    unicode-bidi: embed;
    font-family: 'Cairo', sans-serif;
}

.syne {
    font-family: 'Cairo', sans-serif;
    /* Using Cairo for headlines too in RTL */
}

/* Header */
.header-nav .menu li .sub-menu {
    left: auto;
    right: 0;
}

.header-nav a::after {
    left: auto;
    right: 0;
}

.mobile-menu-nav .menu li a::before {
    left: auto;
    right: 50%;
}

.mobile-menu-nav .menu li a:hover::before {
    left: auto;
    right: 20%;
}

/* Stats Section */
.stat-panel::before {
    left: auto;
    right: 8%;
}

.stat-panel {
    border-right: none;
    border-left: 1px solid var(--border);
}

/* Products Section */
.product-item:hover {
    padding-left: 0;
    padding-right: 30px;
}

.product-item::after {
    left: auto;
    right: 0;
}

/* Projects Section */
.project-card {
    border-right: none;
    border-left: 1px solid var(--border);
}

.project-card:last-child {
    border-left: none;
}

.project-info {
    left: auto;
    right: 40px;
    text-align: right;
}

.hud-line.v {
    left: auto;
    right: 15%;
}

.project-card:hover .hud-line.v {
    left: auto;
    right: 20%;
}

.hud-line.h {
    left: auto;
    right: 0;
}

.hud-spec.spec-top {
    left: auto;
    right: 22%;
}

.hud-spec.spec-left {
    left: auto;
    right: 15%;
    transform: rotate(90deg);
    transform-origin: right top;
}

.project-card::before {
    left: auto;
    right: 20px;
    border-left: none;
    border-right: 1px solid var(--accent);
}

.project-card::after {
    right: auto;
    left: 20px;
    border-right: none;
    border-left: 1px solid var(--accent);
}

/* Buttons */
/* Buttons */
/* .btn-mechanical::after handled by base styles */

/* Timeline */
.timeline-step {
    padding: 0 10px;
}

/* Sustainability Summary */
.sustainability-summary {
    text-align: right;
}

/* Contact / RFQ Form RTL */
.rfq-form input:not([type="submit"]),
.rfq-form select,
.rfq-form textarea,
.rfq-form label {
    text-align: right;
}

.rfq-form select {
    background-position: 20px center;
}

/* Mobile overrides */
@media (max-width: 768px) {
    .project-info {
        left: auto !important;
        right: 20px !important;
    }

    .product-item {
        align-items: flex-start;
    }
}