.elementor-429 .elementor-element.elementor-element-f6e06b0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:150px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-429 .elementor-element.elementor-element-be98fcb{--display:flex;}@media(min-width:768px){.elementor-429 .elementor-element.elementor-element-f6e06b0{--width:100%;}.elementor-429 .elementor-element.elementor-element-be98fcb{--content-width:100%;}}/* Start custom CSS for html, class: .elementor-element-76fb0cd *//* * IMPORTANT: This CSS is scoped to the '.about-us-wrapper' class. * It will only affect elements contained within the
. * Do NOT apply global body, html, or direct tag styles here if you are embedding this. * Global font imports (e.g., Poppins from Google Fonts) should be in your main site's . */ /* CSS Variables for Easy Theming (Scoped) */ .about-us-wrapper { --about-us-primary-color: #5a8d32; /* Changed to a green tone to match images */ --about-us-secondary-color: #333; --about-us-light-bg: #eaf5df; /* A lighter green tone background */ --about-us-white-bg: #ffffff; --about-us-border-color: #d1e2bf; /* Lighter green border */ --about-us-text-color: #333; --about-us-subtle-text-color: #666; --about-us-heading-font: 'Poppins', sans-serif; /* Fallback if not loaded globally */ --about-us-body-font: 'Poppins', sans-serif; /* Base styles for the wrapper, if needed, can go here */ font-family: var(--about-us-body-font); line-height: 1.6; color: var(--about-us-text-color); } .about-us-wrapper h1, .about-us-wrapper h2, .about-us-wrapper h3 { font-family: var(--about-us-heading-font); font-weight: 600; line-height: 1.2; color: var(--about-us-secondary-color); } .about-us-wrapper h1 strong, .about-us-wrapper h2 strong { font-weight: 700; color: var(--about-us-primary-color); /* Accent color for emphasis */ } .about-us-wrapper .about-us-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* List Styling (for the new bullet points) */ .about-us-wrapper ul { list-style: none; /* Remove default bullet */ padding-left: 0; margin-bottom: 20px; } .about-us-wrapper ul li { position: relative; padding-left: 25px; /* Space for custom bullet */ margin-bottom: 8px; color: var(--about-us-text-color); } .about-us-wrapper ul li::before { content: '✅'; /* Custom checkmark bullet */ position: absolute; left: 0; color: var(--about-us-primary-color); /* Bullet color */ font-size: 1.1em; line-height: 1.6; } /* --- 1. About Hero Section --- */ .about-us-wrapper .about-us-block-hero { background-color: var(--about-us-white-bg); padding: 100px 0; text-align: center; border-bottom: 1px solid var(--about-us-border-color); } .about-us-wrapper .about-us-block-hero h1 { font-size: 3.5rem; margin-bottom: 15px; font-weight: 300; } .about-us-wrapper .about-us-tagline { font-size: 1.25rem; color: var(--about-us-subtle-text-color); max-width: 900px; /* Wider tagline for more content */ margin: 0 auto; } /* --- 2. About Content Section --- */ .about-us-wrapper .about-us-block-content { background-color: var(--about-us-light-bg); /* Alternating background */ padding: 80px 0; } /* For sections like the Nursery one, ensure background is white */ .about-us-wrapper .about-us-section-nursery { background-color: var(--about-us-white-bg) !important; /* !important to override .about-us-block-content default */ } .about-us-wrapper .about-us-content-grid { display: flex; gap: 40px; align-items: center; } .about-us-wrapper .about-us-text-block { flex: 1; max-width: 50%; } .about-us-wrapper .about-us-text-block h2 { font-size: 2.5rem; margin-top: 0; } .about-us-wrapper .about-us-text-block h3 { /* For subheadings like "Production & Coordination" */ font-size: 1.75rem; margin-top: 30px; margin-bottom: 15px; color: var(--about-us-primary-color); /* Highlight sub-sections */ } .about-us-wrapper .about-us-image-block { flex: 1; max-width: 50%; } .about-us-wrapper .about-us-image-block img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } /* Button Styling */ .about-us-wrapper .about-us-button-primary { display: inline-block; background-color: var(--about-us-primary-color); /* Primary Brand Color */ color: white; padding: 12px 25px; border-radius: 5px; text-decoration: none; font-weight: 600; margin-top: 20px; transition: background-color 0.3s ease; } .about-us-wrapper .about-us-button-primary:hover { background-color: #4a772c; /* Slightly darker green on hover */ } /* --- 3. Why Choose Us Section (reusing core-values styles) --- */ .about-us-wrapper .about-us-block-core-values { background-color: var(--about-us-white-bg); /* Adjusted to match image backgrounds */ padding: 80px 0; text-align: center; } .about-us-wrapper .about-us-block-core-values h2 { font-size: 2.5rem; margin-bottom: 40px; } .about-us-wrapper .about-us-values-grid { display: flex; gap: 30px; justify-content: center; /* Center the items if less than full width */ text-align: left; /* Changed to left for bullet points */ } .about-us-wrapper .about-us-value-item { flex: 1; min-width: 300px; /* Ensure items don't get too narrow */ max-width: 45%; /* Two items per row on desktop */ padding: 30px; border: 1px solid var(--about-us-border-color); border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; background-color: var(--about-us-white-bg); /* Ensure white background for each item */ } .about-us-wrapper .about-us-value-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .about-us-wrapper .about-us-value-item h3 { margin-top: 0; font-size: 1.8rem; color: var(--about-us-primary-color); /* Highlight section titles */ margin-bottom: 20px; } /* Mobile Responsiveness (Scoped) */ @media (max-width: 768px) { .about-us-wrapper .about-us-block-hero h1 { font-size: 2.5rem; } .about-us-wrapper .about-us-content-grid { flex-direction: column; } .about-us-wrapper .about-us-text-block, .about-us-wrapper .about-us-image-block { max-width: 100%; } .about-us-wrapper .about-us-image-block { order: -1; /* Puts the image before the text on mobile */ margin-bottom: 20px; } .about-us-wrapper .about-us-values-grid { flex-direction: column; align-items: center; /* Center stacked items */ } .about-us-wrapper .about-us-value-item { max-width: 100%; /* Full width on mobile */ margin-bottom: 20px; } .about-us-wrapper ul li::before { top: 3px; /* Adjust bullet position on mobile */ } /* Specific styling for the Nursery section to ensure image is on top on mobile */ .about-us-wrapper .about-us-section-nursery .about-us-image-block { order: -1 !important; /* Force image to top */ } .about-us-wrapper .about-us-section-nursery .about-us-text-block { order: 1 !important; /* Force text below image */ } }/* End custom CSS */