/*
Theme Name: Ramla Group
Theme URI: https://ramlagroup.com/
Author: Ramla Group
Description: Custom dynamic theme for Ramla Group.
Version: 1.0.0
Text Domain: ramla-group
*/

:root {
    --ramla-gold: #f0a319;
    --ramla-gold-light: #f2bb55;
    --ramla-black: #030303;
    --ramla-text: #f3f3f3;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--ramla-black);
    color: var(--ramla-text);
    font-family: Montserrat, Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.ramla-site-header {
    background: #050505;
    border-bottom: 1px solid rgba(240, 163, 25, .35);
}

.ramla-navbar {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 5.75rem;
    padding: .75rem 2%;
}

.ramla-logo a {
    color: var(--ramla-gold-light);
    font: 700 1.5rem Cinzel, Georgia, serif;
}

.ramla-logo img {
    display: block;
    width: min(16rem, 42vw);
    height: auto;
}

.ramla-menu {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 1.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ramla-menu a {
    color: #f4f4f4;
    font-size: .9rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ramla-menu .current-menu-item>a,
.ramla-menu a:hover {
    color: var(--ramla-gold-light);
}

.ramla-page {
    min-height: 60vh;
    padding: 4rem 2%;
}

.ramla-hero {
    padding: clamp(3rem, 8vw, 7rem) 2%;
    background: radial-gradient(circle at 78% 30%, rgba(195, 122, 17, .32), transparent 32%), #050505;
}

.ramla-hero h1,
.ramla-section-title {
    margin: 0;
    color: #fff;
    font: 700 clamp(2rem, 5vw, 4rem)/1 Cinzel, Georgia, serif;
}

.ramla-hero p {
    max-width: 45rem;
    color: #ddd;
    line-height: 1.7;
}

.ramla-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.ramla-card {
    overflow: hidden;
    border: 1px solid rgba(240, 163, 25, .7);
    border-radius: .35rem;
    background: #080808;
}

.ramla-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ramla-card__content {
    padding: 1.25rem;
}

.ramla-card h2 {
    margin: 0 0 .5rem;
    color: var(--ramla-gold-light);
    font: 700 1.25rem Cinzel, Georgia, serif;
}

.ramla-site-footer {
    padding: 2rem;
    border-top: 1px solid rgba(240, 163, 25, .55);
    background: #050505;
    color: #ddd;
    text-align: center;
}

@media (max-width: 768px) {
    .ramla-navbar {
        flex-wrap: wrap;
    }

    .ramla-menu {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        gap: 1rem;
    }

    .ramla-card-grid {
        grid-template-columns: 1fr;
    }
}

.ramla-division-page {
    background: #030303;
}

.ramla-division-hero {
    min-height: min(42rem, 72vh);
    background: radial-gradient(circle at 75% 30%, rgba(181, 111, 18, .5), transparent 35%), #080808 center/cover no-repeat;
}

.ramla-division-hero__overlay {
    min-height: inherit;
    max-width: 46rem;
    padding: clamp(3rem, 7vw, 7rem) 4%;
    background: linear-gradient(90deg, rgba(3, 3, 3, .98) 65%, rgba(3, 3, 3, .45));
}

.ramla-division-number {
    display: inline-grid;
    width: 5rem;
    height: 5rem;
    place-items: center;
    border: 2px solid var(--ramla-gold);
    color: var(--ramla-gold-light);
    font: 700 2.4rem Cinzel, Georgia, serif;
}

.ramla-kicker {
    margin: 1.2rem 0 .5rem;
    color: var(--ramla-gold-light);
    font: 700 1rem Cinzel, Georgia, serif;
    text-transform: uppercase;
}

.ramla-division-hero h1 {
    margin: 0;
    color: #fff;
    font: 700 clamp(2.5rem, 6vw, 5.2rem)/.95 Cinzel, Georgia, serif;
}

.ramla-division-intro {
    max-width: 38rem;
    color: #eee;
    line-height: 1.75;
}

.ramla-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
}

.ramla-benefits span {
    padding: .65rem .85rem;
    border: 1px solid rgba(240, 163, 25, .65);
    color: #fff;
    font-size: .78rem;
    text-transform: uppercase;
}

.ramla-services-section {
    background: #070707;
}

.ramla-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ramla-service-card ul {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: #eee;
    font-size: .85rem;
    line-height: 1.7;
}

.ramla-service-card li::before {
    content: '✓';
    margin-right: .45rem;
    color: var(--ramla-gold-light);
}

.ramla-process {
    padding: 2rem 4%;
    border-top: 1px solid rgba(240, 163, 25, .65);
    border-bottom: 1px solid rgba(240, 163, 25, .65);
    background: #090909;
    text-align: center;
}

.ramla-process h2 {
    margin: 0 0 1.5rem;
    color: var(--ramla-gold-light);
    font: 700 1.35rem Cinzel, Georgia, serif;
    text-transform: uppercase;
}

.ramla-process>div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .75rem;
    max-width: 72rem;
    margin: auto;
}

.ramla-process span {
    padding: 1rem .5rem;
    border: 1px solid rgba(240, 163, 25, .55);
    color: #fff;
    font-size: .8rem;
    text-transform: uppercase;
}

.ramla-offices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    padding: 1.5rem 4%;
    background: #050505;
}

.ramla-offices p {
    margin: 0;
    padding: 1rem;
    border-left: 1px solid var(--ramla-gold);
    color: #eee;
    line-height: 1.65;
}

@media (max-width: 768px) {
    .ramla-division-hero__overlay {
        padding: 3rem 1.25rem;
        background: rgba(3, 3, 3, .85);
    }

    .ramla-service-grid {
        grid-template-columns: 1fr;
    }
}

/* Polylang language switcher and Arabic RTL */
.ramla-language-switcher {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none
}

.ramla-language-switcher li {
    list-style: none
}

.ramla-language-switcher a {
    color: #eee;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase
}

.ramla-language-switcher .current-lang a,
.ramla-language-switcher a:hover {
    color: var(--ramla-gold-light)
}

html[dir=rtl] body {
    font-family: "Tahoma", "Arial", sans-serif;
    text-align: right
}

html[dir=rtl] .navbar-brand {
    margin-right: 0;
    margin-left: clamp(1rem, 4vw, 5rem)
}

html[dir=rtl] .navbar-nav {
    margin-left: 0;
    margin-right: 84px
}

html[dir=rtl] .ramla-language-switcher {
    margin-left: 0;
    margin-right: auto
}

html[dir=rtl] .division-dropdown-toggle {
    margin-right: 6px;
    margin-left: 0
}

html[dir=rtl] .hero-content,
html[dir=rtl] .logistics-copy,
html[dir=rtl] .about-hero__copy,
html[dir=rtl] .contact-hero__copy {
    text-align: right
}

html[dir=rtl] .title-rule,
html[dir=rtl] .about-rule,
html[dir=rtl] .contact-rule {
    transform: scaleX(-1)
}

html[dir=rtl] .division-card,
html[dir=rtl] .division-info,
html[dir=rtl] .logistics-service-card,
html[dir=rtl] .contact-office {
    text-align: right
}

html[dir=rtl] .card-list,
html[dir=rtl] .logistics-service-card ul {
    padding-right: 0
}

html[dir=rtl] .card-button i,
html[dir=rtl] .explore i,
html[dir=rtl] .partner-button i,
html[dir=rtl] .about-cta i {
    transform: rotate(180deg);
    margin-right: .7rem;
    margin-left: 0
}

html[dir=rtl] .contact-office a i {
    margin-left: .4rem
}

html[dir=rtl] .about-values article {
    text-align: right
}

@media(max-width:991px) {
    .ramla-language-switcher {
        margin: .8rem 0
    }

    .navbar-nav {
        margin-inline: 0 !important
    }
}

html[dir=rtl] body,
html[dir=rtl] button,
html[dir=rtl] input,
html[dir=rtl] textarea,
html[dir=rtl] select,
html[dir=rtl] h1,
html[dir=rtl] h2,
html[dir=rtl] h3,
html[dir=rtl] h4,
html[dir=rtl] h5,
html[dir=rtl] h6,
html[dir=rtl] .nav-link,
html[dir=rtl] .dropdown-item,
html[dir=rtl] .card-button,
html[dir=rtl] .section-subtitle,
html[dir=rtl] .tagline,
html[dir=rtl] .explore,
html[dir=rtl] .partner-copy p,
html[dir=rtl] .chem-banner p,
html[dir=rtl] .card-tagline {
    font-family: "Cairo", "Tahoma", "Arial", sans-serif
}

html[dir=rtl] .site-header,
html[dir=rtl] .navbar,
html[dir=rtl] main,
html[dir=rtl] main>section,
html[dir=rtl] main>footer {
    direction: ltr
}

html[dir=rtl] .navbar-brand {
    margin: 0;
    padding-right: 70px;
    padding-left: 0
}

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

html[dir=rtl] .navbar-nav {
    direction: ltr;
    margin-left: 84px;
    margin-right: 0
}

html[dir=rtl] .navbar-nav .nav-item,
html[dir=rtl] .navbar-nav .dropdown-menu,
html[dir=rtl] .ramla-language-switcher {
    direction: rtl
}

html[dir=rtl] .ramla-language-switcher {
    margin-left: auto;
    margin-right: 0
}

html[dir=rtl] .site-header .nav-link {
    font-size: 1.05rem
}

html[dir=rtl] .division-dropdown-toggle {
    margin-right: 0;
    margin-left: -6px
}

html[dir=rtl] .hero-content {
    left: 0;
    right: auto;
    width: min(610px, 100%);
    margin-right: auto;
    margin-left: 0;
    direction: rtl;
    text-align: right
}

html[dir=rtl] .hero h1 {
    font-size: 2.25rem;
    line-height: 1.28
}

html[dir=rtl] .hero-copy {
    font-size: .94rem;
    line-height: 1.75
}

html[dir=rtl] .stats {
    direction: rtl
}

html[dir=rtl] .stat {
    border-right: 0;
    border-left: 1px solid var(--line);

}

html[dir=rtl] .stat:last-child {
    border-left: 0
}

html[dir=rtl] .navbar-toggler {
    right: auto;
    left: 12px;
}

html[dir=rtl] .dropdown-menu[data-bs-popper] {
    left: auto;
    right: 0;
}

html[dir=rtl] .section-heading,
html[dir=rtl] .section-subtitle,
html[dir=rtl] .division-card .card-body,
html[dir=rtl] .feature,
html[dir=rtl] .hero_inner_content,
html[dir=rtl] .division-info,
html[dir=rtl] .partner-copy,
html[dir=rtl] .logistics-copy,
html[dir=rtl] .logistics-service-card,
html[dir=rtl] .shipping-network,
html[dir=rtl] .logistics-bottom article,
html[dir=rtl] .logistics-footer>div,
html[dir=rtl] .import-intro,
html[dir=rtl] .import-showcase figcaption,
html[dir=rtl] .import-categories,
html[dir=rtl] .import-partnership,
html[dir=rtl] .export-copy,
html[dir=rtl] .export-card,
html[dir=rtl] .export-info article,
html[dir=rtl] .export-footer>div,
html[dir=rtl] .about-hero__copy,
html[dir=rtl] .about-story>div,
html[dir=rtl] .about-direction article,
html[dir=rtl] .about-values,
html[dir=rtl] .about-cta,
html[dir=rtl] .contact-hero__copy,
html[dir=rtl] .contact-details,
html[dir=rtl] .contact-form-panel {
    direction: rtl;
    text-align: right
}

html[dir=rtl] .logistics-hero,
html[dir=rtl] .import-hero,
html[dir=rtl] .export-hero,
html[dir=rtl] .about-story,
html[dir=rtl] .about-direction,
html[dir=rtl] .contact-main {
    direction: ltr
}

html[dir=rtl] .logistics-copy {
    background: linear-gradient(90deg, #050505 75%, transparent)
}

html[dir=rtl] .logistics-eyebrow {
    direction: rtl;
    justify-content: flex-start;
}

html[dir=rtl] .logistics-eyebrow span {
    margin-left: 12px;
    margin-right: 0
}

html[dir=rtl] .logistics-copy h1 {
    padding-right: 20px;
    padding-left: 0
}

html[dir=rtl] .logistics-copy h1::after {
    right: 6px;
    left: auto
}

html[dir=rtl] .logistics-copy h1,
html[dir=rtl] .export-copy h1,
html[dir=rtl] .import-intro h1 {
    line-height: 1.18
}

html[dir=rtl] .logistics-benefits {
    direction: rtl
}

html[dir=rtl] .logistics-benefits div {
    border-right: 0;
    border-left: 1px solid var(--line)
}

html[dir=rtl] .logistics-benefits div:last-child {
    border-left: 0
}

html[dir=rtl] .card-list,
html[dir=rtl] .logistics-service-card ul,
html[dir=rtl] .logistics-bottom ul {
    padding-right: 0;
    padding-left: 0
}

html[dir=rtl] .contact-form-wrap input,
html[dir=rtl] .contact-form-wrap textarea {
    text-align: right
}

html[dir=rtl] .section-subtitle {
    text-align: center
}

html[dir=rtl] .card-list li:before {
    left: auto;
    right: -9px;
}

html[dir=rtl] .card-list li {
    padding-left: 0;
    padding-right: 20px;
}

html[dir=rtl] .services li {
    padding-left: 0;
    padding-right: 21px;
}

html[dir=rtl] .services li:before {
    left: auto;
    right: 0;
}

html[dir=rtl] .feature:not(:last-child):after {
    right: auto;
    left: 0;
}

html[dir=rtl] .chem-banner li {
    padding-right: 1.3rem;
    padding-left: 0;
}

html[dir=rtl] .chem-banner li:before {
    right: 0;
    left: auto;
    margin-right: 0;
    margin-left: 8px;
}

html[dir=rtl] .product-card>div img {
    left: auto;
    right: 2px;
}

html[dir=rtl] .product-card>div:last-child {
    padding: 10px 46px 8px 8px;
}

html[dir=rtl] .chem-application {
    border-left: none;
    border-right: 1px solid var(--line);
}

html[dir=rtl] .chem-banner {
    padding: 0 14px 0 0;
}

html[dir=rtl] .chem-banner>div:first-child {
    padding-right: 0;
    padding-left: 14px;
}

html[dir=rtl] .commitment li:before {
    margin-right: 0;
    margin-left: 7px;
}

html[dir=rtl] .export-footer .col-lg-3>div.export-inner {
    padding: 0 0 0 90px;
}

html[dir=rtl] .export-footer .col-lg-3>div.export-inner::after,
html[dir=rtl] .info-panel::before {
    right: auto;
    left: 0;
}

html[dir=rtl] .export-social div.icons-inner::after {
    left: auto;
    right: -30px;
}

html[dir=rtl] .export-office span i {
    margin-right: 0;
    margin-left: 4px;
}

html[dir=rtl] .export-copy li:before {
    margin-right: 0;
    margin-left: 8px;
}

html[dir=rtl] .logistics-service-card ul li,
html[dir=rtl] .logistics-bottom ul li {
    padding-right: 12px;
    padding-left: 0;
}

html[dir=rtl] .logistics-service-card li::before,
html[dir=rtl] .logistics-bottom li::before {
    right: -9px;
    left: auto;
}

html[dir=rtl] .globe-placeholder {
    right: auto;
    left: 12px;
}

html[dir=rtl] .strength-image-placeholder {
    left: 16px;
    right: auto;
}

html[dir=rtl] .logistics-footer>div {
    border-right: 0;
    border-left: 1px solid rgba(242, 187, 85, .7);
}

html[dir=rtl] .logistics-footer>div:nth-child(2) {
    padding-right: 100px;
    padding-left: 0;
}

html[dir=rtl] .logistics-footer>div:last-child {
    padding-left: 0;
    padding-right: 100px;
    border-left: none;
}

@media(max-width:991px) {
    html[dir=rtl] .navbar-nav {
        margin-inline: 0
    }

    html[dir=rtl] .ramla-language-switcher {
        margin: .8rem 0
    }

    html[dir=rtl] .site-header .nav-link {
        font-size: 1rem
    }

    html[dir=rtl] .logistics-footer>div:nth-child(2),
    html[dir=rtl] .logistics-footer>div:last-child {
        padding-right: 0;
    }
}

@media(max-width:600px) {
    html[dir=rtl] .hero h1 {
        font-size: 1.85rem
    }

    html[dir=rtl] .hero-content {
        padding-inline: 1rem
    }
}

/* Arabic header follows native RTL order. */
html[dir=rtl] .site-header,
html[dir=rtl] .site-header .navbar {
    direction: rtl
}

html[dir=rtl] .site-header .navbar-brand {
    order: 0;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 70px
}

html[dir=rtl] .site-header .navbar-brand::after {
    right: auto;
    left: 0
}

html[dir=rtl] .site-header .navbar-collapse {
    direction: rtl
}

html[dir=rtl] .site-header .navbar-nav {
    direction: rtl;
    margin-right: 84px;
    margin-left: 0
}

html[dir=rtl] .site-header .navbar-nav>.nav-item {
    direction: rtl
}

html[dir=rtl] .site-header .nav-item.dropdown {
    flex-direction: row
}

html[dir=rtl] .site-header .division-dropdown-toggle {
    margin-right: -6px;
    margin-left: 0
}

html[dir=rtl] .site-header .dropdown-menu {
    direction: rtl;
    text-align: right
}

html[dir=rtl] .site-header .ramla-language-switcher {
    direction: rtl;
    margin-right: auto;
    margin-left: 0
}

@media(max-width:991px) {
    html[dir=rtl] .site-header .navbar-brand {
        padding-left: 20px
    }

    html[dir=rtl] .site-header .navbar-nav {
        margin: 0
    }

    html[dir=rtl] .site-header .ramla-language-switcher {
        margin: .8rem 0
    }

    html[dir=rtl] .site-header .nav-item.dropdown {
        position: relative
    }

    html[dir=rtl] .site-header .division-dropdown-toggle {
        right: auto;
        left: 0;
        margin: 0
    }
}

/* Mirror division rows on the Arabic Divisions page. */
html[dir=rtl] .divisions .division-row {
    direction: rtl;
    background: linear-gradient(270deg, #080909, #060707)
}

html[dir=rtl] .divisions .division-label {
    direction: rtl;
    text-align: right
}

html[dir=rtl] .divisions .division-image {
    border-right: 0;
    border-left: 1px solid var(--line)
}

html[dir=rtl] .divisions .division-image::after {
    background: linear-gradient(270deg, transparent 70%, rgba(3, 3, 3, .25))
}

html[dir=rtl] .divisions .division-main {
    direction: rtl
}

html[dir=rtl] .divisions .division-info {
    padding: 10px 34px 7px 14px;
    text-align: right
}

html[dir=rtl] .divisions .division-info::before {
    right: auto;
    left: 0
}

html[dir=rtl] .divisions .division-icon {
    right: 50px;
    left: auto;
    transform: translateX(50%)
}

html[dir=rtl] .divisions .division-info h3,
html[dir=rtl] .divisions .tagline,
html[dir=rtl] .divisions .description {
    padding-right: 66px;
    padding-left: 0
}

html[dir=rtl] .divisions .services {
    direction: rtl;
    padding: 12px 20px 7px 16px;
    text-align: right
}

html[dir=rtl] .divisions .services li {
    padding-right: 21px;
    padding-left: 0
}

html[dir=rtl] .divisions .services li::before {
    right: 0;
    left: auto
}

html[dir=rtl] .partnership {
    direction: rtl;
    background: linear-gradient(270deg, #060707, rgba(7, 7, 7, .94)), url(https://images.unsplash.com/photo-1521295121783-8a321d551ad2?auto=format&fit=crop&w=1000&q=60) left/36% auto no-repeat
}

html[dir=rtl] .partnership .partner-copy {
    direction: rtl;
    text-align: right
}

@media(max-width:767px) {
    html[dir=rtl] .divisions .division-image {
        border-left: 0
    }

    html[dir=rtl] .divisions .division-info {
        padding: 12px 70px 9px 15px
    }

    html[dir=rtl] .divisions .division-icon {
        right: 38px;
        left: auto
    }

    html[dir=rtl] .divisions .division-info h3,
    html[dir=rtl] .divisions .tagline,
    html[dir=rtl] .divisions .description {
        padding-right: 0
    }

    html[dir=rtl] .divisions .services {
        padding-right: 18px;
        padding-left: 14px
    }
}

html[dir=rtl] .divisions .division-label {
    text-align: center;
    align-items: center
}

/* Mirror all major Arabic page compositions while retaining RTL text. */
html[dir=rtl] main,
html[dir=rtl] main>section,
html[dir=rtl] main>footer,
html[dir=rtl] main .row,
html[dir=rtl] .division-grid,
html[dir=rtl] .feature-strip,
html[dir=rtl] .export-products,
html[dir=rtl] .export-info,
html[dir=rtl] .export-footer,
html[dir=rtl] .shipping-network .carrier-list,
html[dir=rtl] .logistics-bottom,
html[dir=rtl] .logistics-footer {
    direction: rtl
}

html[dir=rtl] .hero .hero_img_layer {
    inset: 105px 34% 0 0
}

html[dir=rtl] .hero-content {
    left: auto;
    right: 0;
    margin-left: auto;
    margin-right: 0;
    padding-right: 2.2%;
    padding-left: 0
}

html[dir=rtl] .title-rule,
html[dir=rtl] .hero_wrapper-rule {
    margin-right: 0;
    margin-left: auto
}

html[dir=rtl] .hero_wrapper .hero_layer {
    inset: 105px 38% 0 0
}

html[dir=rtl] .hero_inner_content {
    margin-right: 0;
    margin-left: auto;
    text-align: right
}

html[dir=rtl] .import-hero,
html[dir=rtl] .export-hero,
html[dir=rtl] .logistics-hero,
html[dir=rtl] .about-story,
html[dir=rtl] .about-direction,
html[dir=rtl] .contact-main {
    direction: rtl
}

html[dir=rtl] .import-intro {
    background: linear-gradient(270deg, #030303 0%, rgba(3, 3, 3, .82) 36%, rgba(3, 3, 3, .12) 100%), url("images/import-port-hero.png") center/cover no-repeat
}

html[dir=rtl] .import-intro::after {
    background-position: left top
}

html[dir=rtl] .import-intro>div:first-of-type {
    margin-right: 10px;
    margin-left: 0
}

html[dir=rtl] .import-angle-divider {
    left: auto;
    right: -58px;
    transform: scaleX(-1)
}

html[dir=rtl] .import-showcase {
    direction: rtl;
    border-right: 0;
    border-left: 1px solid var(--gold)
}

html[dir=rtl] .import-showcase figure {
    border-width: 0 1px 1px 0
}

html[dir=rtl] .import-benefits,
html[dir=rtl] .export-benefits {
    direction: rtl
}

html[dir=rtl] .import-benefits span,
html[dir=rtl] .export-benefits .col-3 {
    border-right: 0;
    border-left: 1px solid var(--line)
}

html[dir=rtl] .import-benefits span:last-child,
html[dir=rtl] .export-benefits .col-3:last-child {
    border-left: 0
}

html[dir=rtl] .import-categories .row,
html[dir=rtl] .import-product-grid {
    direction: rtl
}

html[dir=rtl] .export-hero .row {
    direction: rtl
}

html[dir=rtl] .export-intro,
html[dir=rtl] .export-copy {
    text-align: right
}

html[dir=rtl] .export-info,
html[dir=rtl] .export-footer-contacts {
    direction: rtl
}

html[dir=rtl] .logistics-copy {
    background: linear-gradient(270deg, #050505 75%, transparent)
}

html[dir=rtl] .logistics-division-badge {
    right: auto;
    left: 12px
}

html[dir=rtl] .logistics-division-badge img.triangle {
    right: 18px;
    left: auto;
    transform: scaleX(-1)
}

html[dir=rtl] .logistics-services .row {
    direction: rtl
}

html[dir=rtl] .shipping-network .carrier-list {
    display: flex;
    flex-direction: row-reverse
}

html[dir=rtl] .logistics-bottom>div,
html[dir=rtl] .logistics-footer>div {
    text-align: right
}

html[dir=rtl] .about-hero::before,
html[dir=rtl] .contact-hero::before {
    transform: scaleX(-1)
}

html[dir=rtl] .about-hero__copy,
html[dir=rtl] .contact-hero__copy {
    margin-right: 0;
    margin-left: auto
}

html[dir=rtl] .about-story,
html[dir=rtl] .about-direction,
html[dir=rtl] .about-values__grid,
html[dir=rtl] .about-cta,
html[dir=rtl] .contact-main {
    direction: rtl
}

html[dir=rtl] .contact-office,
html[dir=rtl] .contact-hours {
    direction: rtl
}

html[dir=rtl] .contact-office__icon {
    order: 0
}

html[dir=rtl] .stat:first-child {
    padding-left: 20px;
}

html[dir=rtl] .stat:last-child {
    padding-left: 0;
}

html[dir=rtl] .logistics-footer h3 i {
    margin-right: 0;
    margin-left: .35rem;
}

html[dir=rtl] .logistics-footer small i {
    margin-right: 0;
    margin-left: .3rem;
}

@media(max-width:991px) {

    html[dir=rtl] .hero .hero_img_layer,
    html[dir=rtl] .hero_wrapper .hero_layer {
        inset: 0
    }

    html[dir=rtl] .logistics-division-badge {
        left: 8px;
        right: auto
    }
}

@media(max-width:767px) {
    html[dir=rtl] .import-angle-divider {
        display: none
    }

    html[dir=rtl] .hero-content,
    html[dir=rtl] .hero_inner_content {
        padding-inline: 1rem
    }
}

html[dir=rtl] .shipping-network .carrier-list {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    direction: rtl
}

html[dir=rtl] .shipping-network .carrier-list img {
    border-right: 0;
    border-left: 1px solid #c99a4f
}

html[dir=rtl] .shipping-network .carrier-list img:last-child {
    border-left: 0
}

@media(max-width:575px) {
    html[dir=rtl] .shipping-network .carrier-list {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    html[dir=rtl] .shipping-network .carrier-list img {
        border-left: 1px solid #c99a4f;
        border-right: 0
    }

    html[dir=rtl] .shipping-network .carrier-list img:nth-child(3n) {
        border-left: 0
    }

    html[dir=rtl] .shipping-network .carrier-list img:nth-last-child(-n + 2) {
        border-bottom: 0
    }
}

/* Contact page */
.contact-page {
    background: #030303;
    color: #f5f5f5
}

.contact-hero {
    min-height: clamp(24rem, 48vh, 36rem);
    display: flex;
    align-items: center;
    position: relative;
    background: #070707 center/cover no-repeat;
    border-bottom: 1px solid rgba(240, 163, 25, .65)
}

.contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #030303 0%, rgba(3, 3, 3, .95) 42%, rgba(3, 3, 3, .25)), radial-gradient(circle at 76% 45%, rgba(240, 163, 25, .2), transparent 35%)
}

.contact-hero__copy {
    position: relative;
    z-index: 1;
    width: min(48rem, 92%);
    padding: clamp(3.5rem, 7vw, 7rem) 3.2%
}

.contact-kicker {
    margin: 3rem 0 .5rem;
    color: var(--ramla-gold-light) !important;
    font: 600 .85rem Cinzel, serif;
    letter-spacing: .17em;
}

.contact-hero h1 {
    margin: 0;
    color: #fff;
    font: 700 clamp(2.8rem, 3vw, 5.8rem) / 1 Cinzel, serif;
    text-transform: uppercase;
}

.contact-hero h2 {
    margin: 1rem 0;
    color: var(--ramla-gold-light);
    font: 600 clamp(1.05rem, 2vw, 1rem) Cinzel, serif;
    text-transform: uppercase;
}

.contact-hero__copy>p:last-child {
    max-width: 42rem;
    font-size: 1.08rem;
    line-height: 1.75
}

.contact-rule {
    width: 14rem;
    height: 1px;
    margin: 1.5rem 0;
    background: var(--ramla-gold);
    position: relative
}

.contact-rule span {
    position: absolute;
    left: 42%;
    top: 50%;
    width: .65rem;
    height: .65rem;
    background: var(--ramla-gold);
    transform: translate(-50%, -50%) rotate(45deg)
}

.contact-main {
    display: grid;
    grid-template-columns: minmax(20rem, .85fr) minmax(28rem, 1.15fr);
    gap: 1px;
    margin: clamp(2rem, 5vw, 5rem) 3%;
    border: 1px solid rgba(240, 163, 25, .65);
    background: var(--ramla-gold)
}

.contact-details,
.contact-form-panel {
    padding: clamp(2rem, 4vw, 4rem);
    background: #070707
}

.contact-details>h2,
.contact-form-panel>h2 {
    margin: 0 0 2rem;
    color: var(--ramla-gold-light);
    font: 700 clamp(1.45rem, 2.5vw, 1rem) Cinzel, serif;
}

.contact-office {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    padding: 1.4rem 0;
    border-top: 1px solid rgba(240, 163, 25, .28)
}

.contact-office__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid var(--ramla-gold);
    border-radius: 50%;
    color: var(--ramla-gold-light)
}

.contact-office h3,
.contact-hours h3 {
    margin: 0 0 .45rem;
    color: var(--ramla-gold-light);
    font: 700 1rem Cinzel, serif
}

.contact-office p,
.contact-hours p {
    margin: 0 0 .5rem;
    color: #ddd;
    line-height: 1.65
}

.contact-office a {
    display: block;
    margin: .35rem 0;
    color: #f3f3f3;
    font-size: .9rem
}

.contact-office a i {
    width: 1.7rem;
    color: var(--ramla-gold-light)
}

.contact-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(240, 163, 25, .28)
}

.contact-hours>i {
    color: var(--ramla-gold-light);
    font-size: 1.8rem
}

.contact-form-panel>p {
    color: #ddd
}

.contact-form-wrap {
    margin-top: 1.7rem
}

.contact-form-wrap label {
    display: block;
    width: 100%;
    color: #eee;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase
}

.contact-form-wrap input:not([type=submit]),
.contact-form-wrap textarea,
.contact-form-wrap select {
    width: 100%;
    margin-top: .4rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(240, 163, 25, .55);
    border-radius: 0;
    background: #030303;
    color: #fff;
    outline: 0
}

.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus {
    border-color: var(--ramla-gold-light);
    box-shadow: 0 0 0 2px rgba(240, 163, 25, .12)
}

.contact-form-wrap textarea {
    height: 9rem
}

.contact-form-wrap input[type=submit] {
    min-width: 13rem;
    padding: .9rem 1.4rem;
    border: 1px solid var(--ramla-gold);
    background: var(--ramla-gold-light);
    color: #050505;
    font-weight: 700;
    text-transform: uppercase
}

.contact-form-wrap .wpcf7-spinner {
    background-color: var(--ramla-gold)
}

.contact-form-wrap .wpcf7-not-valid-tip {
    margin-top: .3rem;
    color: #ff8b75
}

.contact-form-wrap .wpcf7-response-output {
    margin: 1rem 0 0 !important;
    border-color: var(--ramla-gold) !important
}

@media(max-width:900px) {
    .contact-main {
        grid-template-columns: 1fr;
        margin-inline: 1rem
    }
}

@media(max-width:560px) {
    .contact-hero::before {
        background: rgba(3, 3, 3, .78)
    }

    .contact-details,
    .contact-form-panel {
        padding: 1.5rem
    }

    .contact-office {
        grid-template-columns: 1fr
    }

    .contact-main {
        min-width: 0
    }
}

/* About page */
.about-page {
    background: #030303;
    color: #f5f5f5
}

.about-hero {
    min-height: clamp(31rem, 64vh, 45rem);
    display: flex;
    align-items: center;
    background-position: center;
    background-size: cover;
    background-color: #080808;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(240, 163, 25, .65)
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #030303 0%, rgba(3, 3, 3, .96) 36%, rgba(3, 3, 3, .45) 68%, rgba(3, 3, 3, .15)), radial-gradient(circle at 76% 45%, rgba(240, 163, 25, .18), transparent 34%)
}

.about-hero__copy {
    position: relative;
    z-index: 1;
    width: min(48rem, 92%);
    padding: clamp(4rem, 8vw, 8rem) 3.2%
}

.about-kicker {
    margin: 2rem 0 .6rem;
    color: var(--ramla-gold-light);
    font: 600 .9rem Cinzel, serif;
    letter-spacing: .18em
}

.about-hero h1 {
    margin: 0;
    color: #fff;
    font: 700 clamp(3rem, 7vw, 3rem) / .92 Cinzel, serif;
    text-transform: uppercase;
}

.about-hero h2 {
    margin: 1rem 0;
    color: var(--ramla-gold-light);
    font: 600 clamp(1.1rem, 2vw, 1rem) Cinzel, serif;
    text-transform: uppercase;
}

.about-hero__copy>p:last-child {
    max-width: 43rem;
    margin-top: 1.3rem;
    font-size: clamp(1rem, 1.35vw, 1rem);
    line-height: 1.75;
}

.about-rule {
    width: 16rem;
    height: 1px;
    margin: 1.6rem 0;
    background: var(--ramla-gold);
    position: relative
}

.about-rule span {
    position: absolute;
    left: 42%;
    top: 50%;
    width: .7rem;
    height: .7rem;
    background: var(--ramla-gold);
    transform: translate(-50%, -50%) rotate(45deg)
}

.about-story {
    display: grid;
    grid-template-columns: minmax(12rem, 28%) 1fr;
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    padding: clamp(4rem, 7vw, 7rem) 5%;
    background: radial-gradient(circle at 12% 50%, rgba(240, 163, 25, .13), transparent 24%), #050505
}

.about-story__mark {
    display: grid;
    place-items: center;
    min-height: 18rem;
    border: 1px solid rgba(240, 163, 25, .65);
    background: linear-gradient(135deg, rgba(240, 163, 25, .13), transparent)
}

.about-story__mark i {
    color: var(--ramla-gold-light);
    font-size: clamp(5rem, 10vw, 9rem)
}

.about-story h2,
.about-direction h2,
.about-values>h2,
.about-cta h2 {
    margin: 0;
    color: var(--ramla-gold-light);
    font: 700 clamp(1.45rem, 1.6vw, 2.4rem) Cinzel, serif;
}

.about-story p:last-child {
    max-width: 60rem;
    margin: 1.2rem 0 0;
    color: #e7e7e7;
    font-size: 1.08rem;
    line-height: 1.85
}

.about-direction {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 0 5%;
    background: var(--ramla-gold)
}

.about-direction article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.3rem;
    padding: clamp(2rem, 4vw, 4rem);
    background: #070707
}

.about-direction i {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid var(--ramla-gold);
    border-radius: 50%;
    color: var(--ramla-gold-light);
    font-size: 1.65rem
}

.about-direction p {
    margin: .8rem 0 0;
    color: #ddd;
    line-height: 1.75
}

.about-values {
    padding: clamp(4rem, 7vw, 7rem) 5%;
    text-align: center;
    background: #030303
}

.about-heading-rule {
    width: 8rem;
    height: 1px;
    margin: 1.2rem auto 2.5rem;
    background: var(--ramla-gold)
}

.about-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem
}

.about-values article {
    min-height: 15rem;
    padding: 1.5rem;
    border: 1px solid rgba(240, 163, 25, .65);
    background: linear-gradient(145deg, #0b0b0b, #050505);
    text-align: left
}

.about-values strong {
    color: rgb(240 163 25 / 99%);
    font: 700 3.4rem Cinzel, serif;
}

.about-values h3 {
    margin: .8rem 0;
    color: var(--ramla-gold-light);
    font: 700 1.2rem Cinzel, serif
}

.about-values p {
    color: #ddd;
    font-size: .92rem;
    line-height: 1.65
}

.about-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin: 0 5% 3rem;
    padding: 2rem 2.5rem;
    border: 1px solid var(--ramla-gold);
    background: linear-gradient(90deg, #080808, rgba(240, 163, 25, .09))
}

.about-cta p {
    margin: .45rem 0 0;
    color: #ddd
}

.about-cta a {
    min-width: 18rem;
    padding: 1rem 1.4rem;
    background: var(--ramla-gold-light);
    color: #050505;
    font-weight: 700;
    text-align: center;
    font-size: 0.7rem;
}

.about-cta a i {
    margin-left: 1rem
}

@media(max-width:900px) {

    .about-story,
    .about-direction {
        grid-template-columns: 1fr
    }

    .about-values__grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .about-cta {
        align-items: stretch;
        flex-direction: column
    }

    .about-cta a {
        min-width: 0
    }
}

@media(max-width:560px) {
    .about-hero::before {
        background: rgba(3, 3, 3, .78)
    }

    .about-story {
        padding-inline: 1rem
    }

    .about-direction {
        padding-inline: 1rem
    }

    .about-values {
        padding-inline: 1rem
    }

    .about-values__grid {
        grid-template-columns: 1fr
    }

    .about-cta {
        margin-inline: 1rem
    }

    .about-direction article {
        grid-template-columns: 1fr
    }

    .about-direction i {
        width: 3.7rem;
        height: 3.7rem
    }
}