/* Global Styles */


:root {
    --black: #1a1a1a;
    --white: #ffffff;
    --gray: #f5f5f5;
    --dark-gray: #222222;

    /* Light mode colors (default) */
    --bg-primary: #e0e0e0;
    --bg-secondary: #f5f5f5;
    --text-primary: #000000;
    --text-secondary: #666666;
    --border-color: rgba(0, 0, 0, 0.1);
    --header-bg: #e0e0e0;
    --header-bg-scrolled: rgba(224, 224, 224, 0.91);
    --section-dark-bg: #000000;
    --section-dark-text: #ffffff;
    --form-bg: #ffffff;
    --form-border: #dddddd;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* Dark Mode Colors */
body.dark-mode {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --border-color: rgba(255, 255, 255, 0.1);
    --header-bg: #1a1a1a;
    --header-bg-scrolled: rgba(26, 26, 26, 0.91);
    --section-dark-bg: #0a0a0a;
    --section-dark-text: #ffffff;
    --form-bg: #2a2a2a;
    --form-border: #444444;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4 {
    font-weight: 700;
    letter-spacing: -0.5px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--black);
    color: var(--white);
    border: 2px solid var(--black);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn:hover {
    background-color: transparent;
    color: var(--black);
}

.btn-white {
    background-color: var(--white);
    color: var(--black);
    border-color: var(--white);
}

.btn-white:hover {
    background-color: transparent;
    color: var(--white);
}

.section {
    padding: 100px 0;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 50px;
    text-align: center;
    text-transform: uppercase;
}

.section-dark {
    background-color: var(--black);
    color: var(--white);
}

.text-center {
    text-align: center;
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 0;
    background-color: var(--header-bg);
    z-index: 1000;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--border-color);
}


.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 250px;
}

.header.scrolled {
    background-color: var(--header-bg-scrolled);
    box-shadow: 0 5px 20px var(--shadow-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}





.logo img {
    height: 70px;
    width: auto;
}

body.dark-mode .logo img {
    content: url('../images/white logo.png');
}

/* Language Toggle Styles */
.language-toggle {
    background-color: var(--text-primary);
    color: var(--bg-primary);
    border: 2px solid var(--text-primary);
    padding: 0;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border-radius: 40%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.language-toggle:hover {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Dark Mode Toggle Styles */
.dark-mode-toggle {
    background: transparent;
    color: var(--bg-primary);
    border: 2px solid var(--text-primary);
    background-color: var(--text-primary);
    padding: 8px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    border-radius: 40%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-mode-toggle:hover {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Phone / WhatsApp contact icon + dropdown -------------------------------------------*/
.header-contact {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 6px;
}

.header-phone-btn {
    background: transparent;
    border: 2px solid var(--text-primary);
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 40%;
    margin-right: 8px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.header-phone-btn:hover {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

.header-contact-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    min-width: 190px;
    z-index: 9999;
    overflow: hidden;
}

.header-contact-menu.open {
    display: block;
}

.header-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.header-contact-item:hover {
    background-color: var(--border-color);
}

.header-contact-item .fa-whatsapp {
    color: #25d366;
    font-size: 1.1rem;
}

.header-contact-item .fa-phone {
    color: #145f68;
    font-size: 1rem;
}

/* Desktop Burger Menu (language + dark mode, desktop only) ----------------------------*/
.desktop-burger {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 6px;
}

.desktop-burger-btn {
    background: none;
    border: 2px solid var(--text-primary);
    color: var(--text-primary);
    width: 38px;
    height: 38px;
    border-radius: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.desktop-burger-btn:hover,
.desktop-burger-btn[aria-expanded="true"] {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

.desktop-burger-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    min-width: 210px;
    z-index: 9999;
    overflow: hidden;
}

.desktop-burger-menu.open {
    display: block;
}

.desktop-burger-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 20px;
}

.desktop-burger-item + .desktop-burger-item {
    border-top: 1px solid var(--border-color);
}

.desktop-burger-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.desktop-burger-menu .language-toggle,
.desktop-burger-menu .dark-mode-toggle {
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
}

[dir="rtl"] .desktop-burger {
    margin-left: 0;
    margin-right: 6px;
}

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

@media (max-width: 768px) {
    .desktop-burger {
        display: none;
    }
}

/* Customer Portal CTA button in desktop header ----------------------------------------*/
.header-portal-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #145f68;
    color: #fff;
    text-decoration: none;
    padding: 6px 13px;
    border-radius: 5px;
    border: 2px solid #145f68;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-right: 10px;
    transition: background-color 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}

.header-portal-btn:hover {
    background-color: transparent;
    color: #145f68;
}

body.dark-mode .header-portal-btn:hover {
    color: #5fcad6;
    border-color: #5fcad6;
}

body.dark-mode .btn:hover {
    color: var(--white);
    border-color: var(--white);
}

body.dark-mode .dark-mode-toggle i.fa-sun {
    color: #000000;
}

body.dark-mode .nav-dark-mode-btn i.fa-sun {
    color: #ffffff;
}

body.dark-mode .dark-mode-toggle:hover i.fa-sun {
    color: #ffffff;
}


body.dark-mode .btn-transparent:hover {
    color: var(--black);
    background-color: var(--white);
}

body.dark-mode .contact-form .btn-white:hover {
    color: var(--black);
}

/* Dark mode: Inquire Now and Send Message are near-black on a dark page,
   so a thin, soft white ring marks their edge. A ring rather than the
   border, so the button keeps its size and its hover colours. */
body.dark-mode .product-info .btn,
body.dark-mode .contact-form .btn-white {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}


body.dark-mode .hero {
    background: url('../images/smooth\ shape2\ grey.png') no-repeat 50% 35%;
    background-size: clamp(700px, 75vw, 1500px);
}


.header.scrolled .language-toggle {
    background-color: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

.header.scrolled .dark-mode-toggle {
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

.header.scrolled .dark-mode-toggle:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

[dir="rtl"] .dark-mode-toggle {
    margin-left: 0;
    margin-right: 10px;
}

[dir="rtl"] .header-contact {
    margin-right: 0;
    margin-left: 6px;
}

[dir="rtl"] .header-portal-btn {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .nav {
    margin-right: 0;
    margin-left: 115px;
}

/* Mobile view adjustment */
@media (max-width: 768px) {
    .header-inner {
        flex-wrap: wrap;
    }

    .header-toggles {
        order: 2;
        margin-right: auto;
        margin-left: auto;
    }

    .menu-toggle {
        order: 3;
    }

    [dir="rtl"] .header-toggles {
        margin-right: auto;
        margin-left: auto;
    }

    /* Hide dark mode toggle from header on mobile — it lives in the burger menu instead */
    .header-toggles .dark-mode-toggle {
        display: none;
    }

    /* Hide language toggle from header on mobile — it lives in the burger menu instead */
    .header-toggles .language-toggle {
        display: none;
    }

    /* Hide phone contact and portal CTA on mobile — they live in the burger menu */
    .header-toggles .header-contact,
    .header-toggles .header-portal-btn {
        display: none;
    }
}

/* Tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--text-primary);
    color: var(--bg-primary);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 9px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10000;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Mobile Floating Contact Button (FAB) ------------------------------------------------*/
.fab-contact {
    display: none;
}

@media (max-width: 768px) {
    .fab-contact {
        display: block;
        position: fixed;
        bottom: 28px;
        left: 24px;
        z-index: 9999;
    }

    .fab-btn {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background-color: #145f68;
        color: #fff;
        border: none;
        font-size: 1.3rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        transition: background-color 0.25s ease, transform 0.25s ease;
    }

    .fab-btn:hover {
        background-color: #0e4a52;
    }

    .fab-btn.open {
        transform: rotate(15deg);
        background-color: #0e4a52;
    }

    .fab-menu {
        position: absolute;
        bottom: 66px;
        left: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .fab-menu.open {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    .fab-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: var(--bg-secondary);
        color: var(--text-primary);
        text-decoration: none;
        padding: 10px 16px;
        border-radius: 30px;
        font-size: 0.9rem;
        font-weight: 600;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
        white-space: nowrap;
        transition: background-color 0.2s ease;
    }

    .fab-menu-item:hover {
        background-color: var(--border-color);
    }

    .fab-menu-item .fa-whatsapp {
        color: #25d366;
        font-size: 1.2rem;
    }

    .fab-menu-item .fa-phone {
        color: #145f68;
        font-size: 1rem;
    }
}

/* Hide mobile-only nav items on desktop */
.nav-dark-mode-item,
.nav-language-item,
.nav-portal-item {
    display: none;
}

@media (max-width: 768px) {
    .nav-dark-mode-item {
        display: block;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--border-color);
    }

    .nav-dark-mode-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        margin: 5px;
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 50%;
        color: var(--text-primary);
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .nav-dark-mode-btn:hover {
        background: var(--border-color);
    }

    /* .header.scrolled repaints the toggles that sit in the header bar, but on
       mobile this one lives inside the slide-out nav, where that repaint tints
       the icon to the panel's own background and the button vanishes on scroll.
       Keep it on its normal colours. */
    .header.scrolled .nav-dark-mode-btn {
        color: var(--text-primary);
        border-color: var(--border-color);
    }

    .header.scrolled .nav-dark-mode-btn:hover {
        color: var(--text-primary);
        background: var(--border-color);
    }

    /* Control position specifically for Arabic Mode */
    [dir="rtl"] .nav-dark-mode-btn {
        margin-right: 1px;
        margin-left: 0;
    }

    /* Show Customer Portal link in mobile burger menu */
    .nav-portal-item {
        display: block;
    }

    /* Mobile language toggle in burger menu */
    .nav-language-item {
        display: block;
        margin-top: 1px;
        padding-top: 7px;
        padding-left: 2px;
        border-top: 0px solid var(--border-color);
    }

    .nav-language-btn {
        background: transparent;
        color: var(--text-primary);
        border: none;
        padding: 0;
        cursor: pointer;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 1.1rem;
        letter-spacing: 1px;
        transition: color 0.3s ease;
    }

    .nav-language-btn:hover {
        color: var(--text-secondary);
    }

    [dir="rtl"] .nav-language-btn {
        font-size: 0.7rem;
        font-weight: 1000;
    }
}

.header-toggles {
    display: flex;
    align-items: center;
}

.menu-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-primary);
    cursor: pointer;
    display: none;
    z-index: 1001;
}

.nav {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    margin-right: 40px;
    margin-left: 70px;
}

.nav ul {
    display: flex;
    list-style: none;
    margin-right: 20px;
    width: 100%;
    justify-content: space-between;
    padding-left: 40px;
}

.nav ul li {
    margin-left: 30px;
    margin-right: 30;
    white-space: nowrap;
}

.nav ul li a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.3s ease;
    position: relative;
}

.nav ul li a:hover {
    color: var(--text-secondary);
}

.nav ul li a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: var(--text-primary);
    bottom: -5px;
    left: 0;
    transition: width 0.3s ease;
}

.nav ul li a:hover:after {
    width: 100%;
}

/* Customer Portal carries the portal's own cyan so it reads as a separate
   destination from the on-page section links. Selectors are qualified with
   `.nav ul li` because the base link rules above are that specific. */
.nav ul li.nav-portal-item a {
    color: #0d7c8a;
}

.nav ul li.nav-portal-item a:hover {
    color: #1b8a97;
}

.nav ul li.nav-portal-item a:after {
    background: #0d7c8a;
}

body.dark-mode .nav ul li.nav-portal-item a {
    color: #5ef4e4;
}

body.dark-mode .nav ul li.nav-portal-item a:hover {
    color: #9ffcf1;
}

body.dark-mode .nav ul li.nav-portal-item a:after {
    background: #5ef4e4;
}

/* Hero Styles */
.hero {
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: url('../images/smooth\ shape3.png') no-repeat 50% 30%;
    background-size: clamp(700px, 75vw, 1500px);
}

.hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--white);
}

.subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.8;
    color: var(--white);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.hero-arabic-logo {
    display: none;
}

.hero-brand { display: none; }

.hero .hero-order-btn { display: none; }

.btn-transparent {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
}

.btn-transparent:hover {
    background-color: var(--white);
    color: var(--black);
}

/* Products Styles */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.product-card {
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.38);
}

/* The product photos are 16:9. A fixed 250px box made the frame 2.25:1, so
   object-fit: cover threw away 21% of each photo's height. Matching the box to
   the source ratio shows the whole shot, exactly as the file looks on disk. */
.product-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-info {
    padding: 20px;
}

.product-info h3 {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.product-info p {
    margin-bottom: 20px;
    color: var(--text-secondary);
}

.product-info .btn {
    width: 100%;
    text-align: center;
}

/* About Styles */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-text {
    color: var(--white);
}

.about-text p {
    margin-bottom: 20px;
    opacity: 0.9;
}

.about-image {
    border: none
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Quality Styles */
.quality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    text-align: center;
}

.quality-item {
    padding: 30px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: all 0.3s ease;
}

.quality-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.38);
}

.quality-icon {
    margin-bottom: 20px;
    color: var(--text-primary);
    font-size: 2.5rem;
}

.quality-item h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.quality-item p {
    color: var(--text-secondary);
}

/* Contact Styles */
#contact {
    min-height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.contact-info {
    color: var(--white);
}

.contact-info h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
}


.contact-form .btn-white {
    position: relative;
    overflow: hidden;
    display: inline-block;
    background-color: var(--black);
    color: var(--white);
    border-color: var(--black);
}

.contact-form .btn-white:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: var(--black);
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.contact-form .btn-white:hover:after {
    width: calc(100% - 60px);
}

.contact-form .btn-white:hover {
    background-color: var(--white);
    color: var(--black);
    border-color: var(--black);
}


.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.info-icon {
    margin-right: 15px;
    margin-top: 5px;
    color: var(--white);
    font-size: 1.2rem;
}

/* Locations: its own section between Contact Us and the footer, both
   black, in the page colour that Our Products also shows. */
.locations-section {
    background-color: var(--bg-primary);
}

.factory-map-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.factory-map-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    border: 2px solid var(--text-primary);
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.factory-map-tab.active,
.factory-map-tab:hover {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

.factory-map-frame {
    display: block;
    width: 100%;
    height: 380px;
    border: 0;
    background: var(--bg-secondary);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
}

@media (max-width: 600px) {
    .factory-map-frame {
        height: 260px;
    }
}

.contact-form {
    background-color: var(--form-bg);
    padding: 30px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--form-border);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.form-group textarea {
    resize: vertical;
}

/* Footer Styles */
.footer {
    background-color: var(--black);
    color: var(--white);
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo img {
    height: 50px;
    margin-bottom: 20px;
}

.footer-logo p {
    opacity: 0.7;
    font-size: 0.9rem;
}

.footer-links h4,
.footer-contact h4,
.footer-social h4 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-links h4:after,
.footer-contact h4:after,
.footer-social h4:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: var(--white);
}

.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a {
    color: var(--white);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.footer-links ul li a:hover {
    opacity: 1;
}

.footer-contact p {
    margin-bottom: 10px;
    opacity: 0.7;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: var(--white);
    font-size: 1.2rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.social-icons a:hover {
    opacity: 1;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    text-align: center;
    opacity: 0.7;
    font-size: 0.9rem;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        /* Reduced from 78% so the sidebar ends before the ACFICK logo, leaving the logo visible */
        /* 100vh on a phone includes the strip behind the browser's own
           toolbar, which hid the dark mode button at the bottom of the menu.
           dvh is the height actually visible; a short screen scrolls the
           menu instead of cutting it off. */
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--bg-primary);
        transition: right 0.3s ease, background-color 0.3s ease;
        padding: 80px 30px calc(30px + env(safe-area-inset-bottom));
        box-shadow: -5px 0 20px var(--shadow-color);
        flex-grow: 0;
        margin-right: 0;
    }


    .nav.open {
        right: 0;
    }

    .nav.open~.header-toggles .language-toggle {
        display: none;
    }

    .nav ul {
        flex-direction: column;
    }

    .nav ul li {
        margin: 15px 0;
    }

    /* Short screens (a phone with its address bar and toolbar showing):
       closer rows so the whole menu, dark mode button included, fits
       without scrolling. */
    @media (max-height: 640px) {
        .nav {
            padding-top: 72px;
        }

        .nav ul li {
            margin: 8px 0;
        }
    }

    /* The hero mark is a 1000x1000 PNG whose artwork only occupies the middle
       64.6% (x 181-826) — the rest is transparent padding. A fixed 37rem
       (592px) overflowed every phone and cropped the sides; sizing to 100%
       would fit the canvas but leave the visible mark inset by ~18% a side.
       150% of the container width scales the artwork to just under the screen
       width, leaving a small even gutter at each side.
       Percentage of the element, not vw, so a scrollbar can't shift it.

       The artwork is also not centred in its canvas — ink spans 181-826, so
       its centre sits 3.5px right of the 1000px middle. At 50% that showed up
       as a wider gap on the left than the right; 51% cancels it out. */
    .hero {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        padding: 148px 0 36px;
        background-size: 150%;
        background-position-x: 51%;
    }

    .hero::before {
        background: rgba(0, 0, 0, 0.7);
    }

    .hero-content {
        max-width: 440px;
        margin: 0 auto;
    }

    .hero-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 26px;
        color: #ffffff;
    }

    .hero-brand__wordmark {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        line-height: 1.4;
    }

    .hero-brand__wordmark strong {
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: 0.16em;
    }

    .hero-brand__wordmark span {
        font-size: 0.8rem;
        color: #d4d4d4;
    }

    .hero h1 {
        font-size: clamp(1.75rem, 7.7vw, 2.5rem);
        line-height: 1.2;
        margin-bottom: 16px;
        text-wrap: balance;
    }

    .hero .subtitle {
        max-width: 34ch;
        margin: 0 auto 28px;
        font-size: 1rem;
        line-height: 1.65;
        color: #dedede;
        opacity: 1;
        text-wrap: pretty;
    }

    .hero-arabic-logo {
        display: block;
        width: 180px;
        margin: 35px auto 0;
        opacity: 0.9;
    }

    /* Repeated under the dark-mode selector because the rule that sets the dark
       artwork uses the `background` shorthand, which outranks .hero here. */
    body.dark-mode .hero {
        background-size: 150%;
        background-position-x: 51%;
    }

    /* The Arabic logo is black artwork, near invisible on the dark hero. Tint
       it to the grey the ACFICK arch behind it shows on screen: #5c5c5c under
       the 70% black overlay comes out as rgb(27, 27, 27). brightness(0) makes
       it black, then invert() lifts black to that grey (27 / 255 = 0.106). */
    body.dark-mode .hero-arabic-logo {
        filter: brightness(0) invert(0.106);
        opacity: 1;
    }

    .hero-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
    }

    .hero .hero-buttons .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 48px;
        padding: 12px 10px;
        /* Square corners, like every other button on the site. */
        border-radius: 0;
        font-size: 0.875rem;
        letter-spacing: 0.3px;
        line-height: 1.4;
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .hero .hero-buttons .hero-order-btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 52px;
        gap: 10px;
        font-size: 1rem;
        background-color: #145f68;
        border: 1px solid #438a92;
        color: #ffffff;
    }

    .hero .hero-buttons .btn-white,
    .hero .hero-buttons .btn-transparent {
        background-color: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.38);
        color: #ffffff;
    }

    .hero .hero-buttons .hero-order-btn:hover,
    .hero .hero-buttons .hero-order-btn:active {
        background-color: #0e4a52;
        border-color: #438a92;
    }

    .hero .hero-buttons .btn-white:hover,
    .hero .hero-buttons .btn-transparent:hover,
    .hero .hero-buttons .btn-white:active,
    .hero .hero-buttons .btn-transparent:active {
        background-color: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.7);
        color: #ffffff;
    }

    .hero .hero-buttons .btn:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 4px;
    }

    @media (prefers-reduced-motion: reduce) {
        .hero .hero-buttons .btn { transition: none; }
    }

    /* ── Hero entrance on phones ──
       The ACFICK arch moves from the hero's background onto ::after so it can
       be animated with transform and opacity alone, which phones composite
       without repainting. The same image, size and position as before; the
       overlay (::before) stays above it, the content above both.
       Each piece then arrives in turn: arch, wordmark, heading, subtitle,
       buttons, Arabic logo. Keyframes give only the starting point and fill
       backwards, so every element ends on its own styles (the Arabic logo's
       0.9 opacity and dark-mode tint, the buttons' hover transitions). */
    .hero,
    body.dark-mode .hero {
        background-image: none;
        isolation: isolate;
    }

    .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: url('../images/smooth\ shape3.png') no-repeat 51% 30% / 150%;
        animation: heroArch 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    }

    body.dark-mode .hero::after {
        background-image: url('../images/smooth\ shape2\ grey.png');
        background-position: 51% 35%;
    }

    .hero::before {
        animation: heroShade 1.6s ease-out backwards;
    }

    .hero-brand {
        animation: heroRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s backwards;
    }

    .hero-brand__wordmark strong {
        animation: heroSpread 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s backwards;
    }

    .hero h1 {
        animation: heroFocus 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s backwards;
    }

    .hero .subtitle {
        animation: heroRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.65s backwards;
    }

    .hero .hero-buttons .btn {
        animation: heroPop 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.2) backwards;
    }

    .hero .hero-buttons .btn:nth-child(1) { animation-delay: 0.85s; }
    .hero .hero-buttons .btn:nth-child(2) { animation-delay: 1s; }
    .hero .hero-buttons .btn:nth-child(3) { animation-delay: 1.1s; }

    .hero-arabic-logo {
        animation: heroRise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 1.3s backwards;
    }

    /* Order Now: a light passes across it once it has landed, then again
       every few seconds, to draw the eye without moving the button. */
    .hero .hero-buttons .hero-order-btn {
        position: relative;
        overflow: hidden;
    }

    .hero .hero-buttons .hero-order-btn::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 45%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
        transform: translateX(-120%);
        animation: heroShine 5s ease-in-out 1.8s infinite;
        pointer-events: none;
    }

    /* Reduced motion: nothing moves or grows, each piece only fades in at its
       usual moment. The passing light on Order Now is motion, so it stays off. */
    @media (prefers-reduced-motion: reduce) {
        .hero::after,
        .hero-brand,
        .hero-brand__wordmark strong,
        .hero h1,
        .hero .subtitle,
        .hero .hero-buttons .btn,
        .hero-arabic-logo {
            animation-name: heroFade;
        }

        .hero .hero-buttons .hero-order-btn::after {
            animation: none;
        }
    }

    .about-content {
        grid-template-columns: 1fr;
    }

    .about-image {
        order: -1;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    [dir="rtl"] .nav {
        right: auto;
        left: -100%;
        transition: left 0.3s ease, background-color 0.3s ease;
        width: 88%
    }

    [dir="rtl"] .nav.open {
        left: 0;
        right: auto;
    }

}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 1s ease forwards;
}

/* ── Hero entrance on desktop ──
   The same opening as on phones: the arch moves from the hero's background
   onto ::after (same image, size and position) so it can settle in with
   transform and opacity, then the heading, subtitle and buttons arrive in
   turn. Order Now and the wordmark are hidden at this width, so the buttons
   that show are the 2nd and 3rd. While the loading screen is up, all of
   this waits (css/loader.css pauses .hero animations). */
@media (min-width: 769px) {
    .hero,
    body.dark-mode .hero {
        background-image: none;
        isolation: isolate;
    }

    .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: url('../images/smooth\ shape3.png') no-repeat 50% 30% / clamp(700px, 75vw, 1500px);
        animation: heroArch 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    }

    body.dark-mode .hero::after {
        background-image: url('../images/smooth\ shape2\ grey.png');
        background-position: 50% 35%;
    }

    .hero::before {
        animation: heroShade 1.8s ease-out backwards;
    }

    .hero h1 {
        animation: heroFocus 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s backwards;
    }

    .hero .subtitle {
        animation: heroRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s backwards;
    }

    .hero .hero-buttons .btn {
        animation: heroPop 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.2) backwards;
    }

    .hero .hero-buttons .btn:nth-child(2) { animation-delay: 0.85s; }
    .hero .hero-buttons .btn:nth-child(3) { animation-delay: 1s; }

    /* Reduced motion: only fades, at the same moments. */
    @media (prefers-reduced-motion: reduce) {
        .hero::after,
        .hero h1,
        .hero .subtitle,
        .hero .hero-buttons .btn {
            animation-name: heroFade;
        }
    }
}

/* The hero entrance (see the 768px block and the desktop block above). Only
   starting points: each element animates from here to its own styles. */
@keyframes heroFade {
    from { opacity: 0; }
}

@keyframes heroArch {
    from { opacity: 0; transform: scale(1.18); }
}

@keyframes heroShade {
    from { background-color: rgba(0, 0, 0, 0.95); }
}

@keyframes heroRise {
    from { opacity: 0; transform: translateY(22px); }
}

@keyframes heroSpread {
    from { opacity: 0; letter-spacing: 0.6em; }
}

@keyframes heroFocus {
    from { opacity: 0; transform: translateY(26px); filter: blur(8px); }
}

@keyframes heroPop {
    from { opacity: 0; transform: translateY(18px) scale(0.94); }
}

@keyframes heroShine {
    0% { transform: translateX(-120%); }
    25%, 100% { transform: translateX(260%); }
}

/* RTL Layout Support */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .header-inner,
[dir="rtl"] .hero-buttons,
[dir="rtl"] .products-grid,
[dir="rtl"] .quality-grid {
    direction: rtl;
}

[dir="rtl"] .nav {
    justify-content: center;
    margin-right: 0;
    margin-left: 0;
    transform: translateX(-50px);
}

[dir="rtl"] .nav ul {
    margin-right: 0;
    margin-left: 0;
}



[dir="rtl"] .nav ul li {
    margin-left: 0;
    margin-right: 30px;
}

[dir="rtl"] .nav ul li a {
    font-size: 1.1rem;
}

@media (min-width: 769px) {
    [dir="rtl"] .nav {
        justify-content: flex-end;
        margin-right: 70px;
        margin-left: 40px;
        transform: none;
    }

    [dir="rtl"] .nav ul {
        width: 100%;
        justify-content: space-between;
        margin-right: 0;
        margin-left: 20px;
        padding-right: 40px;
        padding-left: 0;
    }

    [dir="rtl"] .nav ul li {
        margin-left: 0;
        margin-right: 30px;
    }
}

[dir="rtl"] .info-icon {
    margin-right: 0;
    margin-left: 15px;
}

[dir="rtl"] .footer-links h4:after,
[dir="rtl"] .footer-contact h4:after,
[dir="rtl"] .footer-social h4:after {
    left: auto;
    right: 0;
}

[dir="rtl"] .nav ul li a:after {
    left: auto;
    right: 0;
}


[dir="rtl"] .language-toggle {
    margin-left: 10px;
    margin-right: 10px;
}

[dir="rtl"] .desktop-burger-menu .language-toggle,
[dir="rtl"] .desktop-burger-menu .dark-mode-toggle {
    margin: 0;
}

/* Arabic typography ------------------------------------------------------
   Arabic is a cursive script, so the Latin tracking used on buttons, nav
   links and headings (letter-spacing: 1px / -0.5px) pulls the glyphs apart
   and breaks the joins. Reset it on every Arabic run and give those runs a
   font stack that actually ships Arabic glyphs. */
[lang="ar"] {
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    font-family: 'Segoe UI', Tahoma, 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Geeza Pro', Arial, sans-serif;
}

/* A phone number is a Latin run: the "+" and the spaces between digit groups
   are bidi-neutral, so on an Arabic line the groups get laid out right to left.
   Isolating it keeps it reading +20 113 055 4809. */
.phone-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* The burger-menu language button gets its label from JS, so it carries no
   lang attribute (adding one would make switchToArabic/switchToEnglish hide
   it). In English mode its label is the Arabic "العربية", so drop the
   tracking there only — in Arabic mode the label is "ENGLISH" and keeps it. */
html[lang="en"] .nav-language-btn {
    letter-spacing: normal;
    word-spacing: normal;
    font-family: 'Segoe UI', Tahoma, 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Geeza Pro', Arial, sans-serif;
}

html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button {
    letter-spacing: normal;
    word-spacing: normal;
    font-family: 'Segoe UI', Tahoma, 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Geeza Pro', Arial, sans-serif;
}

/* ===== Customer Reviews (index.html #reviews, js/reviews.js) ===== */
.reviews-section {
    background-color: var(--bg-secondary);
}

.reviews-section [hidden] {
    display: none !important;
}

.reviews-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: -24px 0 40px;
}

.reviews-avg {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

.reviews-count {
    color: var(--text-secondary);
}

.review-stars {
    color: #f5a623;
    letter-spacing: 3px;
    font-size: 1rem;
    direction: ltr;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 28px;
}

.review-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    background-color: var(--form-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-top: 3px solid #145f68;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
}

body.dark-mode .review-card {
    border-color: rgba(255, 255, 255, 0.14);
    border-top-color: #2bb3c0;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}

body.dark-mode .review-who span,
body.dark-mode .review-date {
    color: #c4c4c4;
}

.review-text {
    flex: 1;
    line-height: 1.75;
    font-size: 1.02rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.review-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.review-who span,
.review-date {
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.reviews-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto;
}

.reviews-more-wrap,
.reviews-cta {
    text-align: center;
    margin-top: 36px;
}

.reviews-more,
.review-cancel {
    background: none;
    border: none;
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    padding: 8px 4px;
}

.reviews-cta .btn i {
    margin-inline-end: 8px;
}

body.dark-mode .reviews-cta .btn,
body.dark-mode .review-actions .btn {
    background-color: var(--white);
    color: var(--black);
    border-color: var(--white);
}

body.dark-mode .reviews-cta .btn:hover,
body.dark-mode .review-actions .btn:hover {
    background-color: transparent;
    color: var(--white);
}

.review-form {
    max-width: 620px;
    margin: 40px auto 0;
    padding: 32px;
    background-color: var(--form-bg);
    border: 1px solid var(--form-border);
}

.review-form h3 {
    margin-bottom: 18px;
    font-size: 1.3rem;
}

.review-stars-input {
    border: none;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 4px;
    direction: ltr;
}

[dir="rtl"] .review-stars-input {
    justify-content: flex-end;
}

.review-stars-input legend {
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

[dir="rtl"] .review-stars-input legend {
    width: 100%;
    text-align: right;
}

.review-stars-input input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.review-stars-input label {
    font-size: 1.9rem;
    color: var(--form-border);
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.review-stars-input label.on {
    color: #f5a623;
}

.review-stars-input label:hover {
    transform: scale(1.12);
}

.review-stars-input input:focus-visible + label {
    outline: 2px solid #145f68;
    outline-offset: 2px;
}

/* Hidden where it stands, not pushed off to the left: in Arabic the page
   scrolls leftward, so a field at -9999px made it ~10,000px wide and
   phones zoomed out (which also stretched the burger menu off-screen). */
.review-hp,
.contact-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

.review-note {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-bottom: 14px;
}

.review-status {
    margin-bottom: 14px;
    font-weight: 600;
}

.review-status.ok {
    color: #1f8a4c;
}

.review-status.err {
    color: #c0392b;
}

.review-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .review-card {
        padding: 22px;
    }

    .review-form {
        padding: 22px 16px;
    }
}

/* ===== Contact Us form (index.html, js/contact.js) ===== */
.contact-status { margin: 0 0 14px; font-weight: 600; color: var(--text-primary); }
.contact-status[hidden] { display: none; }
.contact-status.ok { color: #1f8a4c; }
.contact-status.err { color: #c0392b; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }