/* --- Basic Reset & Fonts --- */
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%; /* Important for fixed background */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            font-size: 18px; /* --- CHANGE: Increased base font size --- */
            color: #333;
            line-height: 1.6;
            scroll-behavior: smooth;
        }

        /* --- Fixed Background on Body --- */
        body {
            /* Fallback color */
            background-color: #333; 
            /* The image with a semi-transparent dark overlay for readability */
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('/images/olivetrees4.jpg'); 
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* This is the magic */
        }

        /* --- Page Container --- */
        /* This container now "floats" on top of the fixed background */
        .container {
            max-width: 1100px; 
            margin: 30px auto; 
            overflow: hidden; 
            background-color: #ffffff;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
            border-radius: 8px; 
        }


        /* --- MODIFIED Navigation Bar --- */
        .main-nav {
            padding: 15px 20px;
            background-color: #2c542f;
            border-bottom: 1px solid #eee;
            /* Ensures top corners are rounded with container */
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;

            /* --- Flexbox layout for pinning items --- */
            display: flex;
            flex-wrap: wrap; /* Allows wrapping on mobile */
            justify-content: space-between;
            align-items: center;
        }

        /* --- NEW Contact Info Styling --- */
        .nav-contact,.nav-contact a:active,.nav-contact a:link,.nav-contact a:visited {
            font-size: 0.9em;
            font-weight: 600;
            color: #FFF; /* Light color to stand out on green */
            line-height: 1.4;
        }

        /* --- MODIFIED Base Nav Button --- */
        .main-nav .nav-button {
            display: inline-block;
            padding: 8px 16px;
            text-decoration: none;
            font-size: 0.9em;
            font-weight: 600;
            border: 2px solid transparent;
            border-radius: 50px;
            transition: all 0.3s ease;
            flex-shrink: 0; /* Prevents button from shrinking */
        }

        /* --- Header & Hero Section --- */
        header {
            color: #333; 
            padding: 20px 10px;
            text-align: center;
        }

        header .logo {
            max-width: 1000px; 
            width: 100%;
            margin-bottom: 10px;
            border-radius: 5px;
        }

        header h1 {
            font-size: 2.8em;
            margin: 0;
            font-weight: 700;
            color: #2c542f; /* Use olive green for title */
            text-shadow: none; /* Removed shadow */
        }

        header p {
            font-size: 1.2em;
            margin-top: 10px;
            color: #333; /* Use default dark text color */
            font-weight: 400; /* Reset font-weight */
        }

        /* --- Content Sections --- */
        .content-section {
            padding: 20px 20px;
            border-bottom: 1px solid #eee;
        }
        
        /* Added responsive padding for wider screen */
        @media (min-width: 768px) {
            .content-section {
                padding: 40px;
            }
        }


        .content-section h2 {
            font-size: 2.2em;
            color: #2c542f; /* Olive Green */
            text-align: center;
            margin-top: 7px;
            margin-bottom: 7px;
        }

        .product-grid {
            display: flex;
            flex-wrap: wrap; /* This will stack the cards */
            justify-content: center;
            gap: 30px;
        }

        /* --- UPDATED Product Card Layout --- */
        .product-card {
            display: flex;
            flex-direction: column; /* Mobile-first: stack vertically */
            align-items: center;
            text-align: center;
            width: 100%;
            max-width: 400px; /* Max width on mobile */
            margin-bottom:25px;
        }

        .product-card img {
            width: 100%;
            max-width: 300px; /* Constrain on mobile */
            height: 300px;
            object-fit: contain;
            margin-bottom: 15px;
            border-radius: 8px;
        }

        .product-card .product-info {
            text-align: center;
        }

        .product-card h3 {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 10px;
            margin-top: 0;
        }

        .product-card p {
            font-size: 1em;
            text-align: left; /* Keep p text left-aligned for readability */
        }
        
        /* Desktop layout for product cards */
        @media (min-width: 768px) {
            .product-card {
                flex-direction: row; /* Desktop: side-by-side */
                align-items: center;
                text-align: left;
                max-width: 700px; /* Wider card for desktop */
                gap: 30px;
            }

            .product-card img {
                width: 250px; /* Fixed width for image column */
                height: 250px;
                margin-bottom: 0;
                flex-shrink: 0; /* Prevent image from shrinking */
            }

            .product-card .product-info {
                text-align: left;
                flex-grow: 1; /* Allow text to fill remaining space */
            }
        }


        /* --- Video Section --- */
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
            margin-top: 20px;
            border-radius: 8px;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* --- CTA Section --- */
        .cta-section {
            background-color: #2c542f;
            color: #ffffff;
            text-align: center;
            padding: 50px 20px;
        }
        
        @media (min-width: 768px) {
            .cta-section {
                padding: 50px 40px;
            }
        }

        .cta-section h2 {
            color: #ffffff;
            font-size: 2em;
            margin-bottom: 20px;
        }

        .cta-section p {
            font-size: 1.1em;
            margin-bottom: 30px;
        }

        .cta-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
            align-items: center;
        }

        .cta-button {
            display: inline-block;
            padding: 15px 30px;
            font-size: 1.2em;
            font-weight: bold;
            text-decoration: none;
            border-radius: 50px;
            min-width: 250px;
            transition: all 0.3s ease;
        }

        .button-primary {
            background-color: #f9bf2d; /* Gold */
            color: #2c542f;
            border: 2px solid #f9bf2d;
        }
        .button-primary:hover {
            background-color: #e9b028;
            transform: translateY(-2px);
        }

        .button-secondary {
            background-color: transparent;
            color: #ffffff;
            border: 2px solid #ffffff;
        }
        .button-secondary:hover {
            background-color: #ffffff;
            color: #2c542f;
            transform: translateY(-2px);
        }

        /* --- Footer --- */
        footer,footer-contact a:active,footer a:link,footer a:visited {
            text-align: center;
            padding: 20px;
            font-size: 0.9em;
            color: #777;
            background-color: #fafafa; /* Give footer a light bg */
        }

        /* --- Mobile Responsive Adjustments --- */
        @media (max-width: 600px) {
            /* Reduce margin on mobile */
            .container {
                margin: 0;
                width: 100%; /* Ensure it fills screen */
                border-radius: 0;
                box-shadow: none;
            }
            
            /* Remove top radius for nav on mobile */
            .main-nav {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                text-align: center;
                padding: 10px 5px;
            }
            .main-nav .nav-button {
                margin-left: 5px;
                margin-right: 5px;
                padding: 6px 12px;
                font-size: 0.8em;
            }
            
            header {
                padding: 20px;
            }
            header h1 {
                font-size: 2.2em;
            }
            header p {
                font-size: 1.1em;
            }
            .content-section h2 {
                font-size: 1.8em;
            }
            .product-card p {
                text-align: center; /* Center product p text on mobile */
            }
        }
        
        @media (min-width: 768px) {
            .cta-buttons {
                flex-direction: row;
                justify-content: center;
            }
        }