/* General Styling for the About Us Section */
#about-us {
    background-color: #f9f9f9; /* Light background for contrast */
    padding: 40px 20px; /* Generous padding for spacing */
    text-align: center; /* Center-align the text */
    font-family: 'Arial', sans-serif; /* Clean and readable font */
}

/* Container within the About Us section */
#about-us .container {
    max-width: 800px; /* Maximum width for larger screens */
    margin: auto; /* Center-align the container */
}

/* Heading Styles */
#about-us h2 {
    font-size: 36px; /* Larger font size for emphasis */
    color: #1aa9ab; /* Accent color for the heading */
    margin-bottom: 20px; /* Space below the heading */
}

/* Paragraph Styles */
#about-us p {
    font-size: 30px; /* Readable font size */
    color: #333; /* Dark text color for contrast */
    line-height: 1.6; /* Better line spacing */
    margin-bottom: 20px; /* Space between paragraphs */
}

/* Strong text within paragraphs */
#about-us p strong {
    color: #1aa9ab; /* Accent color for highlighted text */
}

/* Responsive Design */
@media (max-width: 768px) {
    #about-us h2 {
        font-size: 28px; /* Slightly smaller heading on smaller screens */
    }

    #about-us p {
        font-size: 16px; /* Adjust font size for better readability */
        padding: 0 10px; /* Add padding to prevent text from touching edges */
    }
}

@media (max-width: 480px) {
    #about-us h2 {
        font-size: 24px; /* Further reduce heading size for very small screens */
    }

    #about-us p {
        font-size: 14px; /* Further reduce font size */
    }
}

/* General Styling for the Crops Section */
#crops {
    padding: 20px;
    background-color: #f9f9f9; /* Light background for contrast */
}

.crop-item {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center-align items horizontally */
    margin-bottom: 40px; /* Space between crop items */
}

.crop-image {
    width: 100%;
    max-width: 800px; /* Limit the max width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(30, 30, 30, 0.2); /* Shadow for depth */
}

.crop-description {
    text-align: center; /* Center-align text */
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent background */
    border-radius: 0 0 10px 10px; /* Rounded corners for bottom */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    margin-top: -10px; /* Slight overlap with the image */
}

.crop-description h3 {
    margin: 0 0 10px 0;
    font-size: 24px;
    color: #1aa9ab; /* Accent color */
}

.crop-description h4 {
    margin: 10px 0;
    font-size: 20px;
    color: #1aa9ab; /* Accent color */
}

.crop-description p {
    margin: 5px 0;
    font-size: 18px; /* Adjusted font size for better readability */
    color: #333; /* Dark text color */
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .crop-description h3 {
        font-size: 20px; /* Smaller heading on smaller screens */
    }

    .crop-description h4 {
        font-size: 18px; /* Smaller heading for sub-sections */
    }

    .crop-description p {
        font-size: 14px; /* Adjust font size */
        padding: 0 10px; /* Add padding to prevent text from touching edges */
    }
}

@media (max-width: 480px) {
    .crop-description h3 {
        font-size: 18px; /* Further reduce heading size */
    }

    .crop-description h4 {
        font-size: 16px; /* Further reduce font size for sub-sections */
    }

    .crop-description p {
        font-size: 12px; /* Further reduce font size */
    }
}

/* Footer styles */
footer {
    background-color: #1aa9ab; /* Background color of the footer */
    color: #F5F5DC; /* Text color */
    padding: 10px 0; /* Reduced padding for a smaller footer */
    text-align: center; /* Center-align the text */
    position: relative; /* Fix the footer at the bottom */
    width: 100%; /* Full width of the viewport */
    z-index: 1000; /* Ensures footer is above other content */
    font-size: 12px; /* Smaller font size */
    box-sizing: border-box; /* Include padding in width */
}

/* Container within the footer */
footer .container {
    width: 90%; /* Width of the container */
    max-width: 1200px; /* Maximum width */
    margin: auto; /* Center-align the container */
    display: flex; /* Flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center-align items horizontally */
}

/* Footer paragraph */
footer p {
    margin: 0; /* Remove default margin */
    font-size: 15px; /* Smaller font size */
}

/* Footer links styling */
footer .footer-links {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 5px 0 0; /* Reduced top margin */
    display: flex; /* Flexbox for layout */
    gap: 10px; /* Space between links */
}

/* Footer list items */
footer .footer-links li {
    display: inline; /* Display list items in a line */
}

/* Footer links */
footer .footer-links a {
    color: #F5F5DC; /* Link color */
    text-decoration: none; /* Remove underline */
    font-size: 12px; /* Smaller font size */
}

/* Hover effect for links */
footer .footer-links a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Responsive adjustments for the footer */
@media (max-width: 768px) {
    footer .footer-links {
        flex-direction: column; /* Stack links vertically on small screens */
        gap: 5px; /* Reduced space between links */
    }

    footer .footer-links li {
        margin-bottom: 5px; /* Reduced margin below list items */
    }
}