/* Basic Reset and Fonts */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Applying "Bahij TheSansArabic Plain" as the primary font */
    font-family: 'Bahij TheSansArabic Plain', 'Noto Sans Arabic', sans-serif;
    line-height: 1.6;
    background: #ffffff;
    font-size: 14px;
    direction: rtl; /* Set direction for Arabic content */
    text-align: right;
}
/* Media Query for Mobile (max-width: 768px) */

/* Media Query for Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .about-content {
        /* عكس الترتيب لظهور الصورة أولاً ثم النص (بما أن النص في HTML يأتي قبل الصورة) */
        flex-direction: column-reverse; 
        /* محاذاة العناصر لليمين (flex-end في سياق Flexbox) */
        align-items: flex-end;
        /* محاذاة النص لليمين */
        text-align: right;
    }

    /* ضمان محاذاة النص داخل about-text لليمين، وإلغاء أي توسيط سابق */
    .about-text {
        text-align: right; 
    }


    /* Reduce image size and add horizontal spacing (padding) */
    .about-image {
        /* Set a fixed maximum width for the image container on mobile */
        max-width: 80%; 
        /* Center the image container and add spacing */
        margin: 20px auto; 
    }

    /* Ensure text is aligned in the center on mobile */
    .about-text {
        text-align: center;
		padding-top: 30px; 
    padding-bottom: 30px;
    }

    /* Vertically align content within about-content */
    .about-content .about-text,
    .about-content .about-image {
        /* Ensure elements are aligned in the center of the container */
        align-self: center; 
    }
}
@media (max-width: 768px) {
    /* ... (Existing mobile styles) ... */

    /* Ensure map section is centered on mobile and fix potential margin issues */
    .map-section {
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Adjust iframe size for better mobile display */
    .map-section iframe {
        max-width: 100%;
        height: 300px; /* Adjust height for better viewing on mobile */
    }
}

/* الأنماط الخاصة بقسم البانر (اللافتة) */
.breadcrumb-banner {
    position: relative;
    height: 360px; /* تحديد ارتفاع للبانر */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
	padding: 0px
}

/* الأنماط الخاصة بالصورة داخل البانر */
.banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* لضمان تغطية الصورة للمساحة دون تشويه */
}

/* الأنماط الخاصة بالمحتوى النصي فوق الصورة */
.breadcrumb-content {
    position: relative;
    z-index: 10;
    color: var(--text-color-light); /* نص أبيض ليكون واضحاً فوق الصورة */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* إضافة ظل للنص لتحسين الوضوح */
}

.breadcrumb-content h1 {
    font-size: 16px;
    margin-bottom: 10px;
    color: inherit;
}

.breadcrumb-content p {
    font-size: 20px;
    color: inherit;
}


/* Global Styles and Colors */
:root {
    --primary-color: rgba(5, 79, 67, 1); /* Dark Green */
    --secondary-color: rgba(180, 152, 105, 1); /* Gold/Brown */
    --background-light: rgba(244, 244, 244, 1); /* Light Gray */
    --text-color-dark: rgba(0, 0, 0, 1);
    --text-color-light: rgba(255, 255, 255, 1);
    --dark-grey: #111827;
}

/* Typography - Applying "Bahij TheSansArabic Plain" to all relevant elements */
.v16_17, .v16_18, .v16_20, .v16_21, .v16_22, .v191_4, .v16_23, .v191_5, .v16_24, .v16_26, .v16_27, .v16_28, .v16_98, .v16_99,
.v16_29, .v16_30, .v16_32, .v16_33, .v16_34, .v16_35, .v191_6, .v16_36, .v191_7, .v16_38, 
.v16_50, .v16_51, .v16_52, .v16_93, .v16_94, .v16_95, .v16_96, .v16_97, .v16_100, .v16_101, .v16_102, .v16_103, .v16_110, .v16_129,
.navigation .nav-item, .language-switcher {
    font-family: 'Bahij TheSansArabic Plain', sans-serif;
}

/* Ensure font weights are consistent with the new font (if needed) */
.v16_17, .v16_18, .v16_20, .v16_21, .v16_22, .v191_4, .v16_23, .v191_5, .v16_24, .v16_26, .v16_27, .v16_28, .v16_98, .v16_99,
.navigation .nav-item.active {
    font-weight: 700; /* Bold */
}

/* Ensure regular elements use the standard weight */
.v16_29, .v16_30, .v16_32, .v16_33, .v16_34, .v16_35, .v191_6, .v16_36, .v191_7, .v16_38, 
.v16_50, .v16_51, .v16_52, .v16_93, .v16_94, .v16_95, .v16_96, .v16_97, .v16_100, .v16_101, .v16_102, .v16_103, .v16_110, .v16_129,
.navigation .nav-item, .language-switcher {
    font-weight: 400; /* Regular */
}

/* Font Sizes */
.v16_17 { font-size: 44px; }
.v16_18, .v16_27, .v16_28 { font-size: 36px; }
.v16_20, .v16_21, .v16_22, .v191_4, .v16_23, .v191_5, .v16_24, .v16_26 { font-size: 26px; }
.v16_29 { font-size: 20px; }
.v16_30, .v16_32, .v16_33, .v16_34, .v16_35, .v191_6, .v16_36, .v191_7, .v16_38, 
.v16_50, .v16_51, .v16_52 { font-size: 18px; }
.v16_98, .v16_99 { font-size: 19px; }
.v16_93, .v16_94, .v16_95, .v16_96, .v16_97, .v16_100, .v16_101, .v16_102, .v16_103, .v16_110, .v16_129 { font-size: 16px; }

/* --- Site Structure and Header (Menu) --- */

.website-container {
    width: 100%;
    overflow-x: hidden;
}

/* Header/Menu Styling - FIXED POSITION */
.header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 5%;
    background: #FFFFFF;
    position: fixed; /* Fixed position */
    top: 0;
    left: 0;
    right: 0;
    height: 80px; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    gap: 30px; 
}

/* Ensure main content is below the fixed header */
.main-content {
    padding-top: 85px; /* Added padding to prevent content overlap with the fixed header */
}

/* Logo container styling */
.logo-container {
    display: flex;
    align-items: center;
    order: 1; 
}

.logo-container img {
    width: 124px; 
    height: 65.7px;
}

/* Navigation container styling */
.navigation {
    display: flex;
    gap: 30px;
    order: 2; 
    flex-grow: 1; 
    margin-left: 30px; /* Shift the menu 30px to the left */
}

/* Navigation Links Styling */
.navigation .nav-item {
    color: var(--dark-grey);
    text-decoration: none;
    transition: color 0.3s; /* Added transition for hover interaction */
    font-size: 16px;
}

.navigation .nav-item:hover,
.navigation .nav-item.active {
    color: var(--secondary-color);
    font-weight: 700; 
}

/* Language switcher styling */
.language-switcher {
    order: 3; 
    font-size: 16px;
    color: var(--dark-grey);
    text-decoration: none;
    padding: 10px;
    transition: color 0.3s; /* Added transition for hover interaction */
}

.language-switcher:hover {
    color: var(--secondary-color);
}

/* Mobile Menu Button (Hamburger Icon) */
.hamburger-icon {
    display: none; 
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 1000;
    order: 1; 
    transition: transform 0.3s;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--primary-color);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* Hamburger to 'X' transition */
.hamburger-icon.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}
.hamburger-icon.active span:nth-child(2) {
    opacity: 0;
}
.hamburger-icon.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* --- Content Sections --- */

/* Section Styling */
section {
    padding: 80px 5%;
    position: relative;
    overflow: hidden;
}

/* Hero Section */
.hero-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--background-light); 
    flex-direction: row-reverse; 
}

.hero-text {
    flex: 1;
    min-width: 300px;
    margin-bottom: 40px;
    text-align: right;
}

.hero-text h1 {
    margin-bottom: 20px;
    color: var(--primary-color);
}

.hero-text p {
    color: var(--text-color-dark);
    margin-bottom: 30px;
}

.hero-image {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: flex-start; 
}

/* Image Fade Animation: Fade effect on hover for Hero Image */
.hero-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 1;
    transition: opacity 0.5s ease-in-out; 
}

.hero-image img:hover {
    opacity: 0.8; /* Subtle fade effect on hover */
    transform: none; /* Removed previous transform */
}

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

/* Buttons */
.button {
    padding: 10px 40px;
	margin-top: 20px;
	
    border-radius: 33px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s, transform 0.3s; /* Added transition for hover interaction */
}

.button-primary {
    background: var(--primary-color);
    color: var(--text-color-light);
}

.button-secondary {
    background: var(--secondary-color);
    color: var(--text-color-light);
}

.button-primary:hover {
    background-color: #046355; 
    transform: translateY(-2px);
}

.button-secondary:hover {
    background-color: #a68c63; 
    transform: translateY(-2px);
}

/* About Section */
.about-section {
    background: #ffffff;
    padding-top: 50px;
    padding-bottom: 50px;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.about-section h2 {
    text-align: right;
    margin-bottom: 40px;
    color: var(--primary-color);
}

.about-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    /* Reverse the order to place image on the right and text on the left in RTL */
    flex-direction: row-reverse; 
}

.about-text {
    flex: 2;
    min-width: 300px;
    text-align: right;
}

.about-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image Fade Animation: Fade effect on hover for About Image */
.about-image img {
    border-radius: 10px; 
    /* تحديد حجم ثابت للصور في قسم من نحن */
    width: 400px; 
    height: 300px; 
    object-fit: cover; /* لضمان ملء المساحة المحددة دون تشويه */
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.about-image img:hover {
    opacity: 0.8; /* Subtle fade effect on hover */
}

/* New Section: Cheese Pioneers Section (Desktop & Mobile) */
.cheese-pioneers-section {
    background-color: var(--background-light); 
    padding: 80px 5%;
}

.pioneers-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    flex-direction: row; /* Desktop: Image Left, Text Right (Default LTR flex direction) */
}

.pioneers-text {
    flex: 1;
    min-width: 300px;
    text-align: right;
}

.pioneers-text h3 {
    color: var(--primary-color);
    font-size: 24px;
    margin-bottom: 20px;
}

.pioneers-text p {
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-color-dark);
}

.pioneers-image {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 50%;
}

.pioneers-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    /* Added subtle interaction: Zoom on hover */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.pioneers-image img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
    opacity: 0.9;
}


/* Why Us Section */
.why-us {
    background: #ffffff;
}

.why-us h2 {
    text-align: center;
    margin-bottom: 30px;
}

.why-us-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

/* Why Us Item Hover Animation (already interactive) */
.why-us-item {
    background: linear-gradient(rgba(5,79,67,1), rgba(9,131,111,1));
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    flex: 1;
    min-width: 250px;
    color: var(--text-color-light);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.why-us-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Styling for the icons in Why Us section */
.icon-wrapper {
    width: 152px;
    height: 152px;
    background-color: rgba(180, 152, 105, 0.7); 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    /* Added subtle rotation on hover for interactive feel */
    transition: transform 0.4s ease-in-out;
}

.why-us-item:hover .icon-wrapper {
    transform: rotate(5deg);
}


.icon-size {
    font-size: 80px; 
    color: var(--text-color-light); 
}

/* Image Fade Animation: Fade effect on hover for Why Us Images */
.why-us-item img {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.why-us-item:hover img {
    opacity: 0.8;
}

.why-us-item h3 {
    color: var(--text-color-light);
    margin-bottom: 15px;
}

.why-us-item p {
    color: var(--text-color-light);
}

/* Arrow styling for Why Us section */
.why-us-item .arrow-container {
    margin-top: 20px;
    width: 100%;
    text-align: center;
}

.why-us-item .arrow-img {
    width: 40px; 
    height: auto;
}

/* Products Section */
.products-section {
    background: #ffffff;
    padding-bottom: 80px;
}

.products-section h2 {
    text-align: center;
    margin-bottom: 40px;
    color: var(--primary-color);
    font-size: 36px;
}

/* Adjust products container to a grid for responsive layout */
.products-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjusted minmax value */
    gap: 30px; /* Spacing between products */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

/* Product item hover animation (already interactive) */
.product-item {
    background: var(--background-light);
    border-radius: 15px;
    display: flex;
    width: 100%;
    padding: 20px;
    align-items: center;
    gap: 20px;
    flex-direction: row; /* Horizontal layout */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 
}

.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.product-image {
    width: 120px; /* Fixed width for the image */
    height: 120px; /* Fixed height for the image */
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Image Fade Animation: Fade effect on hover for Product Images */
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.5s ease-in-out; 
    transform: none; /* Removed previous transform (zoom) */
}

.product-item:hover .product-image img {
    opacity: 0.8; /* Subtle fade effect on hover */
}

.product-info {
    text-align: right;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align text content to the right */
}

/* Product Name Formatting and Spacing */
.product-info h3 {
    color: var(--primary-color);
    font-size: 19px; 
    margin-bottom: 15px; /* Increased space between title and description */
}

.product-info p {
    color: var(--text-color-dark);
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Arrow styling inside the box, below the text */
.product-info .arrow-container {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Align arrow to the right (in RTL context) */
}

.product-info .arrow-container img {
    width: 30px;
    height: auto;
}

.show-all-btn-container {
    text-align: center;
    margin-top: 30px;
}

/* --- Footer Section Styling --- */

/* Main footer container */
.footer {
    background-color: var(--primary-color); /* Dark Green Background */
    color: var(--text-color-light);
    padding: 0;
    overflow: hidden;
}

/* Footer Top Banner (Brown Section with Logo and Social Links) */
.footer-top-banner {
    background: var(--secondary-color); /* Brown background */
    padding: 30px 5%; 
    color: var(--text-color-light);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Social links in the footer top banner */
.social-links-footer {
    display: flex;
    gap: 30px;
}

.social-link-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color-light);
    font-size: 18px;
    /* Added transition for interactive link color change */
    transition: color 0.3s;
}

.social-link-footer:hover {
    color: var(--primary-color); /* Change color on hover */
}

.social-link-footer i {
    font-size: 24px;
}

/* Logo in the footer top banner */
.footer-logo img {
    height: 80px; 
}


/* Main Footer Content (Dark Green Section) */
.footer-content-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 60px 5% 40px; 
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    
}

/* Specific section widths for the desired layout (3 columns: Contact, Quick Links, Map) */
.footer-content-main > .footer-section {
    flex: 1; /* Equal flex basis for the three main sections */
    min-width: 250px;
}

.footer-section h4 {
    color: var(--secondary-color);
    margin-bottom: 25px;
    font-size: 19px;
}

.footer-section p {
    margin-bottom: 10px;
    color: var(--text-color-light);
    font-size: 16px;
}

/* Contact Info styling */
.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.contact-icon {
    font-size: 20px;
    color: var(--secondary-color);
}

.contact-item p {
    margin: 0;
    font-size: 16px;
}

/* Quick links styling (already interactive) */
.quick-links a {
    text-decoration: none;
    color: var(--text-color-light); /* Changed to white */
    transition: color 0.3s;
    margin-bottom: 10px;
    display: block;
}



.quick-links a:hover {
    color: var(--secondary-color);
}


@media (max-width: 992px) {
    /* ... (Existing mobile styles from 992px breakpoint) ... */

    /* Footer adjustments for mobile screens */
    .footer-content-main {
        flex-direction: column;
        /* نلغي المحاذاة للمنتصف ونضمن المحاذاة لليمين (RTL) */
        text-align: right;
        align-items: flex-end; /* لضمان محاذاة العناصر لليمين عند استخدام flex-direction: column */
        gap: 30px; /* Adjust gap for mobile */
    }
    
    .footer-section {
        /* نضمن محاذاة النص داخل الأقسام لليمين */
        text-align: right;
        /* Ensure the section takes full width to align content */
        width: 100%; 
        align-items: flex-end; /* Align content to the right */
    }

    /* لضمان محاذاة عناصر التواصل لليمين (RTL) */
    .contact-item {
        justify-content: flex-end; 
    }

    /* لضمان محاذاة الروابط السريعة لليمين */
    .quick-links a {
        text-align: right;
    }
    
    .footer-bottom-content {
        /* Align the social links and logo to the right if they are flex containers */
        flex-direction: column;
        align-items: flex-end;
    }

    .social-links-footer {
        /* Align social links to the right */
        justify-content: flex-end;
        align-self: flex-end;
    }
}

/* Map section styling */
.map-section {
    align-items: flex-end;
}

.map-placeholder {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    height: 200px; /* Adjust height as needed */
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Added subtle scaling effect on hover for interactive map area */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.map-placeholder:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.map-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Copyright Section (Footer Bottom) */
.footer-copyright {
    text-align: center;
    padding: 20px 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--primary-color);
}

.footer-copyright p {
    margin: 0;
    font-size: 14px;
    color: var(--text-color-light);
}


/* Social media icons styling (Old structure, removed from HTML, but keeping styles if needed elsewhere) */
.social-icons {
    display: flex;
    gap: 10px;
}

/* Interactive social icons */
.social-icon {
    font-size: 24px;
    color: var(--text-color-light);
    background-color: var(--secondary-color);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s;
}

.social-icon:hover {
    transform: scale(1.1);
    color: var(--primary-color); 
}

/* Keyframe animation for fade-in and subtle rise */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply fadeInUp animation to all relevant images */
.hero-image img, 
.about-image img, 
.pioneers-image img, 
.product-image img {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0; /* Start hidden for animation */
}

/* Media Queries for Responsiveness */

@media (max-width: 1024px) {
    /* Mobile Header adjustments */
    .navigation {
        display: none; 
        position: absolute;
        top: 80px; 
        right: 0;
        background: #FFFFFF;
        width: 100%;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        flex-direction: column; /* Stacked Menu */
        padding: 20px 5%;
        text-align: right;
        z-index: 999; 
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        transform: translateY(-100%); 
        opacity: 0;
    }
    
    .navigation.active {
        display: flex;
        transform: translateY(0); 
        opacity: 1;
    }

    .navigation .nav-item {
        padding: 10px 0;
        width: 100%;
        border-bottom: 1px solid #eee; 
    }
    
    /* Show hamburger icon on mobile screens */
    .hamburger-icon {
        display: flex; 
    }

    /* Adjust header element order for mobile */
    .header {
        justify-content: space-between; /* To space elements evenly */
        padding: 0 5%;
    }
    
    .header .logo-container {
        order: 3; /* Move logo to the far left (in RTL) */
        flex-grow: 0; 
        margin-right: auto; /* Push logo to the right edge if needed */
    }
    
    .hamburger-icon {
        order: 1; /* Hamburger on the far right (in RTL) */
    }
    
    /* Ensure language switcher is visible on mobile and positioned next to the hamburger icon */
    .language-switcher {
        display: block; /* Show the language switcher */
        order: 2; /* Position it between the hamburger and the logo */
        font-size: 14px; /* Adjust size if needed for mobile */
    }

    /* Hero Section responsiveness for Mobile */
    .hero-section {
        flex-direction: column;
        /* Removed text-align: center; from here */
    }

    /* Ensure text alignment is right-aligned in mobile view of hero section */
    .hero-text {
        text-align: right; 
        order: 2; /* Force text/buttons to appear second on mobile (after image) */
    }
    
    .hero-image {
        order: 1; /* Force image to appear first on mobile (before text/buttons) */
    }
    
    .hero-text, .hero-image {
        min-width: 100%;
    }
    
    .hero-buttons {
        /* If we align the text right, we should align the buttons right too */
        justify-content: flex-end; 
        margin-top: 40px; 
    }

    /* Cheese Pioneers Section Mobile Layout */
    .cheese-pioneers-section .pioneers-content {
        flex-direction: column; /* Stack vertically on mobile */
        text-align: right; /* Align text to the right as requested */
    }
    
    .cheese-pioneers-section .pioneers-text {
        text-align: right; /* Ensure text is right-aligned */
    }

    .cheese-pioneers-section .pioneers-image {
        order: -1; /* Move image to the top of the stack (appear before text) */
        /* Ensure image is aligned to the right. On a column layout, this means aligning the content within the flex container */
        justify-content: flex-end; 
        max-width: 100%;
    }
    
    /* Other sections responsiveness */
    .about-content {
        flex-direction: column;
    }
    .about-section h2, .about-text {
        text-align: center;
    }

    /* Footer responsiveness adjustments */
    .footer-content-main {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .footer-section {
        min-width: 100%;
        text-align: center;
        align-items: center;
    }
    
    .contact-item {
        justify-content: center;
    }

    .footer-top-banner .footer-bottom-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .social-links-footer {
        flex-direction: row;
        justify-content: center;
    }
    
    .map-section {
        align-items: center;
    }

}

@media (max-width: 768px) {
    /* Font size reductions for mobile */
    .v16_17 { 
        font-size: 32px; 
    }
    .v16_18, .v16_27, .v16_28 { 
        font-size: 24px; 
    }
    
    .products-section h2 {
        font-size: 30px;
    }
    
    /* Ensure the products grid switches to a single column on mobile */
    .products-container {
        grid-template-columns: 1fr; 
        padding: 0 5%;
    }
    
    /* Adjust product item layout for mobile (stack vertically, center aligned) */
    .product-item {
        /* * تغيير الترتيب لضمان ظهور الصورة أولاً ثم النص ثم السهم 
         * التبديل من 'column-reverse' إلى 'column'
         */
        flex-direction: column; 
        text-align: center;
        align-items: center;
    }
    .product-info {
        text-align: center;
        align-items: center;
    }
    .product-info .arrow-container {
        justify-content: center;
    }
    
    .why-us-grid {
        flex-direction: column;
    }
	
	
}

@media (max-width: 480px) {
    .v16_17 {
        font-size: 28px;
    }
    .v16_18, .v16_27, .v16_28 {
        font-size: 20px;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    
    .button {
        width: 100%; 
        padding: 18px 0; 
    }
}

/* Media Query for Mobile (max-width: 992px) */
@media (max-width: 992px) {
    /* Header and Navigation adjustments */
    .header {
        justify-content: space-between;
        padding: 0 20px;
    }
    
    .navigation {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: #FFFFFF;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    .navigation.active {
        display: flex;
    }

    .hamburger-icon {
        display: flex;
    }

    /* Footer adjustments for mobile */
    .footer-top-banner .footer-bottom-content {
        /* توسيط المحتوى في الفوتر على الموبايل */
        flex-direction: column;
        align-items: center; 
        gap: 20px;
    }
    
    .footer-logo {
        /* توسيط الشعار */
        align-self: center; 
        text-align: center;
    }

    .social-links-footer {
        /* توسيط أيقونات وسائل التواصل الاجتماعي */
        flex-direction: row;
        justify-content: center;
        align-self: center;
    }

@media (max-width: 1024px) {
    /* ... (Existing mobile styles) ... */

    /* ضمان توسيط الأقسام نفسها في الفوتر على الموبايل */
    .footer-content-main {
        flex-direction: column;
        align-items: center; /* توسيط الأقسام أفقياً */
        gap: 30px; 
    }

    /* ضبط محاذاة أقسام الفوتر لليمين (RTL) */
    .footer-section {
        min-width: 100%;
        /* المحاذاة لليمين */
		direction: ltr;
        text-align: right; 
        /* محاذاة العناصر لليمين */
        align-items: flex-end; 
    }
    
    /* ضبط محاذاة عناصر تواصل معنا لليمين */
    .contact-item {
        /* استخدام flex-end للمحاذاة لليمين */
        justify-content: flex-end;
    }

    /* التأكد من محاذاة الروابط السريعة لليمين */
    .quick-links a {
        text-align: right;
    }
    
    /* ضمان بقاء الشعار ومواقع التواصل الاجتماعي في المنتصف */
    .footer-logo,
    .social-links-footer {
        align-self: center;
        text-align: center;
        justify-content: center; 
    }
    /* ... (Rest of the @media block) ... */
}عناصر داخل أقسام الفوتر (تواصل معنا والروابط السريعة) لليمين */
    .footer-section {
        min-width: 100%;
        /* محاذاة النص لليمين */
        text-align: right; 
        /* محاذاة العناصر داخل الـ flex container لليمين */
        align-items: flex-end; 
    }
    
    /* ضبط محاذاة أيقونات وعناصر تواصل معنا لليمين */
    .contact-item {
        /* استخدام flex-end لمحاذاة العناصر لليمين في سياق RTL */
        justify-content: flex-end;
    }

    /* التأكد من محاذاة الروابط السريعة لليمين */
    .quick-links a {
        text-align: right;
    }
    
    /* ضمان بقاء الشعار ومواقع التواصل الاجتماعي في المنتصف إذا كنت تريد ذلك */
    .footer-logo,
    .social-links-footer {
        align-self: center;
        text-align: center;
        justify-content: center; 
    }
}

/* تنسيق قسم التقديم (#process-intro) */
#process-intro .about-content {
    /* على الكمبيوتر (افتراضيًا في Flexbox يكون flex-direction: row)
       لكننا نريده هنا أن يكون عموديًا (column) لتظهر الصورة تحت الكلام */
    flex-direction: column;
    /* محاذاة النص والصورة في منتصف الصفحة */
    align-items: center; 
    text-align: center;
}

/* تنسيق النص في قسم التقديم */
#process-intro .about-text {
    /* لضمان توسيط النص وصورة الفاصل داخل about-text */
    text-align: center;
}

/* الأنماط الخاصة بقسم "Our Process" */
#process-intro .about-content {
    /* للحفاظ على الترتيب العمودي على نسخة الكمبيوتر (العنوان والصورة) */
    flex-direction: column;
    /* توسيط المحتوى أفقياً داخل about-content */
    align-items: center;
}

/* توسيط النص داخل about-text في قسم "Our Process" */
#process-intro .about-text {
    text-align: center;
}

/* تنسيق صورة الفاصل (Vector 24.png) لضمان توسيطها */
.separator-image {
    /* تقليل الهامش العلوي والسفلي لتقليل المسافة */
    margin: 0px auto; /* استخدام auto للتوسيط */
    max-width: 150px; 
    display: block; 
	padding-top: 30px
}

.section-separator {
    height: 160px; 
    width: 100%;

    
    
    /* عرض الصورة بحجمها الأصلي */
    background-size: auto; 
    
    /* عدم تكرار الصورة */
    background-repeat: no-repeat; 
    
    /* توسيط الصورة داخل الفاصل */
    background-position: center;
}

/* تنسيق قسم الصناديق الجديد */
.boxes-section {
    padding: 50px 0; 
}

/* تنسيق الصفوف (لعرض صندوقين في الصف) */
.box-row {
    display: flex;
    /* مسافة بين الصناديق */
    gap: 30px; 
    /* توسيط الصفوف */
    justify-content: center; 
    /* مسافة بين الصفوف */
    margin-bottom: 30px; 
    /* السماح بالانتقال إلى سطر جديد عند الحاجة */
    flex-wrap: wrap; 
}

/* تنسيق الصناديق الفردية */
.box-item {
    /* تطبيق الأبعاد التقريبية من Rectangle 33 */
    width: 630px;
    height: 312px; 
    /* السماح للصندوق بالتمدد أو الانكماش ضمن الصف */
    flex: 1 1 45%; 
    max-width: 630px;
    
    /* تطبيق الأنماط المطلوبة */
    background: #F4F4F4;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 40px;
}

/* التنسيق للنسخ الأصغر (الموبايل) */
@media (max-width: 768px) {
    .box-row {
        flex-direction: column; /* عرض الصناديق عمودياً على الموبايل */
        gap: 20px;
    }
    .box-item {
        width: 100%;
        height: auto; 
    }
}


/* تحديث تنسيق .box-content للحفاظ على الترتيب (الصورة على اليمين والنص على اليسار) */
.box-content {
    display: flex;
    flex-direction: row-reverse; 
    align-items: right;
    justify-content: flex-end;
    gap: 20px;
}

/* ضبط حجم حاوية الأيقونة لتكون أكبر */
.icon-container {
    /* زيادة الحجم (مثال: من 60px إلى 80px أو حسب الحاجة) */
    width: 80px; 
    height: 80px; 
    
    /* منع الحاوية من الانكماش */
    flex-shrink: 0; 
}

.icon-container img {
    /* ضمان أن الصورة تتسع داخل الحاوية دون تجاوزها */
    max-width: 100%;
    height: auto;
    display: block;
}

/* تنسيق .text-content */
.text-content {
    flex-grow: 1;
    text-align: right;
    color: var(--text-color-dark); 
	
}

/* تنسيق المربعات حسب المواصفات التي أرسلتها (الموضع المطلق) */

/* Rectangle 8 (المربع العلوي الأيسر) */
#box-8 {
    position: absolute;
    width: 630px;
    height: 312px;
    left: 80px;
    top: 624px;
    background: #F4F4F4;
    border-radius: 40px;
}

/* Rectangle 33 (المربع العلوي الأيمن) */
#box-33 {
    position: absolute;
    width: 630px;
    height: 312px;
    left: 730px;
    top: 624px;
    background: #F4F4F4;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 40px;
}

/* Rectangle 34 (المربع السفلي الأيسر) */
#box-34 {
    position: absolute;
    width: 630px;
    height: 312px;
    left: 80px;
    top: 956px;
    background: #F4F4F4;
    border-radius: 40px;
}

/* Rectangle 35 (المربع السفلي الأيمن) */
#box-35 {
    position: absolute;
    width: 630px;
    height: 312px;
    left: 730px;
    top: 956px;
    background: #F4F4F4;
    border-radius: 40px;
}

/* تنسيق المحتوى داخل المربعات (Flexbox) */
.box-content {
    /* تفعيل Flexbox لعكس ترتيب العناصر (الأيقونة على اليمين والنص على اليسار في RTL) */
    display: flex;
    flex-direction: row-reverse; 
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    /* يمكنك إضافة padding هنا إذا كنت تستخدم الموضع النسبي وليس المطلق */
}

/* ضبط حجم حاوية الأيقونة لتكون أكبر */
.icon-container {
    width: 80px; 
    height: 80px; 
    flex-shrink: 0; 
}

.icon-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* تنسيق النص (العنوان والشرح) */
.text-content {
    flex-grow: 1;
    text-align: right;
}

/* تنسيق العنوان */
.box-title {
  
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 36px;
    text-align: right;
    color: #054F43 !important; /* الأخضر الداكن */
}

/* تنسيق الشرح */
.box-description {

    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: right;
	direction: rtl;
    color: #000000 !important; /* الأسود */
}