/* General Styles and Variables */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap');

:root {
    --primary-color: #006A4E;
    --secondary-color: #f4a261;
    --dark-color: #2c3e50;
    --light-color: #f8f9fa;
    --white-color: #ffffff;
    --font-family-fa: 'Vazirmatn', sans-serif;
    --font-family-en: 'Roboto', sans-serif;
    --font-family-ar: 'Cairo', sans-serif;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Base Body Styles */
body {
    line-height: 1.9;
    color: #444;
    margin: 0;
    background-color: var(--light-color);
}

/* Language-Specific Font & Text Direction */
html[lang="fa"] body, html[lang="fa"] input, html[lang="fa"] textarea, html[lang="fa"] button { font-family: var(--font-family-fa); text-align: right; }
html[lang="en"] body, html[lang="en"] input, html[lang="en"] textarea, html[lang="en"] button { font-family: var(--font-family-en); text-align: left; }
html[lang="ar"] body, html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] button { font-family: var(--font-family-ar); text-align: right; }

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header */
.main-header {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
.main-header .logo img { height: 55px; }
.header-controls { display: flex; align-items: center; }

/* Main Navigation (Desktop) */
.main-nav { display: none; }
@media (min-width: 992px) { .main-nav { display: flex; align-items: center; } }
.main-nav ul { list-style: none; display: flex; padding:0; margin:0; }
.main-nav ul li a { display: block; text-decoration: none; color: var(--dark-color); font-weight: 600; padding: 1.5rem 1.3rem; border-radius: 8px; transition: all 0.3s ease; }
.main-nav ul li a:hover, .main-nav ul li a.active { background-color: var(--primary-color); color: var(--white-color); }

/* Language Switcher */
.lang-switcher { position: relative; }
html[lang="fa"] .lang-switcher, html[lang="ar"] .lang-switcher { margin-right: 1.5rem; }
html[lang="en"] .lang-switcher { margin-left: 1.5rem; }
.lang-switcher .current-lang { background: none; border: 1px solid #ddd; padding: 8px 12px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.lang-switcher .lang-dropdown { display: none; position: absolute; top: 110%; background: var(--white-color); border-radius: var(--radius); box-shadow: var(--shadow); list-style: none; padding: 0.5rem; margin: 0; min-width: 150px; z-index: 1001;}
html[lang="fa"] .lang-dropdown, html[lang="ar"] .lang-dropdown { right: 0; }
html[lang="en"] .lang-dropdown { left: 0; }
.lang-switcher:hover .lang-dropdown { display: block; }
.lang-switcher .lang-dropdown li a { display: flex; align-items: center; gap: 10px; padding: 0.8rem 1rem; color: var(--dark-color); text-decoration: none; border-radius: 8px; font-size: 0.9rem; }
.lang-switcher .lang-dropdown li a:hover { background-color: #f0f0f0; }

/* Hamburger & Mobile Menu */
.menu-toggle { display: none; }
.hamburger-menu { display: none; font-size: 1.8rem; cursor: pointer; color: var(--dark-color); }
@media (max-width: 991px) {
    .main-nav { display: none; }
    .hamburger-menu { display: block; }
    .mobile-nav-wrapper { position: absolute; top: 100%; background: var(--white-color); width: 100%; box-shadow: 0 10px 20px rgba(0,0,0,0.1); max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
    html[lang="fa"] .mobile-nav-wrapper, html[lang="ar"] .mobile-nav-wrapper { right: 0; }
    html[lang="en"] .mobile-nav-wrapper { left: 0; }
    .mobile-nav-wrapper ul { flex-direction: column; padding: 0.5rem 0; margin: 0; list-style: none; }
    .mobile-nav-wrapper ul li a { padding: 1rem 2rem; border-bottom: 1px solid #f0f0f0; display: block; text-decoration: none; color: var(--dark-color); font-weight: 600; }
    .menu-toggle:checked ~ .mobile-nav-wrapper { max-height: 500px; }
}
/* Header layout for English */
html[lang="en"] .main-header .logo { order: 1; }
html[lang="en"] .main-nav { order: 2; }
html[lang="en"] .header-controls { order: 3; }
@media (max-width: 991px) { html[lang="en"] .header-controls { order: 2; } }


/* --- Page Specific & Component Styles --- */

/* General Section & Button */
.section { padding: 6rem 0; }
.btn { text-decoration: none; display: inline-block; color: var(--white-color); background: var(--primary-color); padding: 10px 25px; border-radius: 50px; font-weight: 700; margin-top: 1rem; transition: transform 0.2s ease; }
.btn:hover { transform: translateY(-2px); }

/* Page Headers & Hero Section */
.page-header, #hero { 
    padding: 8rem 0; 
    text-align: center; 
    color: var(--white-color); 
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) no-repeat center center/cover;
    background-attachment: fixed; 
}
#hero h1 { font-size: 3.5rem; font-weight: 800; text-shadow: 0 3px 10px rgba(0,0,0,0.5); margin-bottom: 1rem; }
#hero p { font-size: 1.4rem; max-width: 700px; margin: 0 auto 2.5rem auto; }
.btn-hero { padding: 15px 40px; font-size: 1.1rem; border-radius: 50px; background: var(--primary-color); color: var(--white-color); text-decoration: none; font-weight: 700; transition: all 0.3s ease; }
.btn-hero:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

/* Home Page: Category Cards */
.categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 2rem; }
.category-card { background: var(--white-color); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-align: center; display: flex; flex-direction: column; }
.category-card img { width: 100%; height: 250px; object-fit: cover; }
.category-card-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.category-card h3 { font-size: 1.4rem; color: var(--dark-color); margin-top: 0; }

/* Home Page: Testimonials Section */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.testimonial-card { background: var(--white-color); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); border-top: 5px solid var(--primary-color); }
.testimonial-card p { font-style: italic; }
.testimonial-card h4 { margin-top: 1.5rem; margin-bottom: 0.2rem; color: var(--dark-color); font-weight: 700; }
.testimonial-card small { color: #777; }

/* Products Pages */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.product-card { background: var(--white-color); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.product-card img { width: 100%; height: 250px; object-fit: cover; }
.product-card .product-details { padding: 1.5rem; }
.product-item { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; background: #fff; padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 2.5rem;}
@media (min-width: 768px) { .product-item { grid-template-columns: 1fr 1fr; } }
.product-gallery { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.product-gallery img { width: 100%; height: auto; border-radius: 8px; }
.spec-list { list-style: none; padding: 0; margin-top: 1rem; }
.spec-list li { margin-bottom: 0.8rem; display: flex; align-items: center; }
.spec-list i { color: var(--primary-color); margin-left: 10px; }
html[lang="en"] .spec-list i { margin-left: 0; margin-right: 10px; }

/* Projects Page */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.project-card { background: var(--white-color); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.project-card img { width: 100%; height: 250px; object-fit: cover; }
.project-card-content { padding: 1.5rem; }

/* Footer */
.main-footer { background: var(--dark-color); color: #ccc; padding: 5rem 0 0 0; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; padding-bottom: 3rem; }
.footer-section h4 { color: #fff; }
.footer-section ul { list-style: none; padding: 0; }
.footer-section a { text-decoration: none; color: #ccc; transition: color 0.3s; }
.footer-section a:hover { color: var(--white-color); }
.footer-section li { margin-bottom: 0.7rem; }
.footer-section .social-links a { font-size: 1.7rem; color: #ccc; transition: color 0.3s ease; }
html[lang="fa"] .footer-section .social-links a, html[lang="ar"] .footer-section .social-links a { margin-left: 15px; }
html[lang="en"] .footer-section .social-links a { margin-right: 15px; }
.footer-section .social-links a:hover { color: var(--white-color); }
.footer-bottom { background: #1e2b38; padding: 1.5rem 0; text-align: center; font-size: 0.9rem; }

/* Banner Images - MUST BE LAST */
body.home-page #hero { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('products-overview.jpg'); }
body.about-page .page-header { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('about-banner.jpg'); }
body.projects-page .page-header { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('projects-banner.jpg'); }
body.contact-page .page-header { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('contact-banner.jpg'); }
body.trolleys-page .page-header { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('trolleys-banner.jpg'); }
body.shelving-page .page-header { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('shelving-banner.jpg'); }
body.racking-page .page-header { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('racking-banner.jpg'); }
body.stands-page .page-header { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('stands-banner.jpg'); }
body.accessories-page .page-header { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('accessories-banner.jpg'); }