/* ============================================
   CSS VARIABLES (Custom Properties)
   ============================================
   
   CSS Variables allow us to define reusable values that can be used
   throughout the stylesheet. This makes it easy to maintain consistent
   colors, spacing, and other design values.
   
   Variables are defined using --variable-name: value;
   They are accessed using var(--variable-name);
   
   Benefits:
   - Easy to change colors site-wide by updating one value
   - Consistent design system
   - Better maintainability
   ============================================ */

:root {
    /* Color Variables - Primary brand colors */
    --color-primary: #53C351;        /* Main green color for buttons and accents */
    --color-primary-dark: #45a844;  /* Darker green for hover states */
    --color-primary-darker: #254330; /* Very dark green for backgrounds */
    --color-dark-bg: #1C3A27;        /* Dark background color */
    
    /* Text Colors */
    --color-text-primary: #000000;   /* Main text color (black) */
    --color-text-white: #ffffff;     /* White text for dark backgrounds */
    
    /* Background Colors */
    --color-bg-white: #ffffff;       /* White background */
    --color-bg-overlay: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    
    /* Spacing Variables - Consistent spacing throughout */
    --spacing-xs: 10px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-xxl: 50px;
    
    /* Border Radius */
    --radius-sm: 10px;
    --radius-md: 30px;
    --radius-lg: 50px;
    
    /* Font Sizes */
    --font-size-xs: 10px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-size-hero: 40px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease-in-out;
}

/* ============================================
   GLOBAL RESET & BASE STYLES
   ============================================
   
   CSS Reset: Removes default browser styling to ensure
   consistent appearance across different browsers.
   
   box-sizing: border-box ensures that padding and borders
   are included in the element's total width and height.
   ============================================ */

/* Universal selector - applies to all elements */
* {
    box-sizing: border-box; /* Padding and border included in width/height */
    padding: 0;
    margin: 0;
}

/* Body styling - sets font family and background */
body {
    font-family: 'Montserrat', sans-serif; /* Google Font imported in HTML */
    background-image: url(../images/bg.png);
    background-repeat: no-repeat;
    background-size: cover; /* Background covers entire viewport */
    background-attachment: fixed; /* Background stays fixed when scrolling */
    /* Prevent horizontal scrolling on mobile */
    overflow-x: hidden;
    width: 100%;
}

/* ============================================
   HEADER STYLES
   ============================================ */

/* Header container - flexbox layout for horizontal alignment */
header {
    display: flex;
    justify-content: space-around; /* Space items evenly */
    align-items: center; /* Vertically center items */
    padding: 20px 40px;
}


/* Desktop navigation menu styling */
nav ul {
    display: flex; /* Horizontal flexbox layout */
    gap: 50px; /* Space between menu items */
    list-style-type: none; /* Remove default bullet points */
    color: black;
}

/* Navigation link styling */
nav a {
    color: black;
    text-decoration: none; /* Remove default underline */
}

/* Hover effect for navigation links */
/* When user hovers over a link, show green underline */
nav a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-primary); /* Using CSS variable */
    text-decoration-thickness: 2px;
    text-underline-offset: 5px; /* Space between text and underline */
}

/* ============================================
   HERO SECTION STYLES
   ============================================ */

.hero {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 50px 100px;
    /* Ensure hero image is responsive */
    min-height: auto;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Prevent content from being too wide */
    max-width: 100%;
}

.hero-content>h1 {
    font-size: 40px;
    font-weight: 700;
    color: #000;
}

.hero-content>h2 {
    display: flex;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
}

.hero-content>p2 {
    display: flex;
    font-size: 15px;
    color: #000;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
}

.hero-content-btn {
    display: flex;
    gap: 15px;
}

/* Hamburger icon styling - hidden on desktop, visible on mobile */
.humburger {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    z-index: 1001; /* Ensure it's above the overlay */
    position: relative;
}



/* ============================================
   BUTTON STYLES
   ============================================
   
   Buttons are interactive elements that users click to perform actions.
   We use two button styles: primary (main actions) and secondary (alternative actions).
   
   Primary Button:
   - Green background with white text
   - Used for main call-to-action buttons
   - Example: "Join Now", "Login", "Submit"
   
   Secondary Button:
   - Transparent background with black text
   - Used for less important actions
   - Example: "Learn More", "Cancel"
   ============================================ */

/* Primary button - green background, used for main actions */
.btn-primary {
    background-color: var(--color-primary); /* Using CSS variable */
    color: var(--color-text-white);
    border: none;
    height: 35px;
    min-width: 100px; /* Minimum width, can expand */
    padding: 0 var(--spacing-md); /* Horizontal padding */
    border-radius: var(--radius-sm);
    cursor: pointer; /* Pointer cursor indicates clickable */
    font-size: var(--font-size-base);
    font-weight: 400;
    transition: background-color var(--transition-fast);
    /* Display as inline-block to respect padding and width */
    display: inline-block;
    text-align: center;
    line-height: 35px; /* Vertically center text */
}

/* Hover effect for primary button - darker green */
.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

/* Secondary button - transparent background, used for secondary actions */
.btn-secondary {
    color: var(--color-text-primary);
    border: none;
    height: 35px;
    min-width: 100px;
    padding: 0 var(--spacing-md);
    background-color: transparent; /* No background */
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 400;
    transition: color var(--transition-fast);
    display: inline-block;
    text-align: center;
    line-height: 35px;
    text-decoration: none; /* Remove underline from links */
}

/* Hover effect for secondary button - green text */
.btn-secondary:hover {
    color: var(--color-primary);
}

/* Style anchor tags that use button classes */
a.btn-primary,
a.btn-secondary {
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Allow width/height */
}


/* ============================================
   STEPS SECTION STYLES
   ============================================ */

.steps-image {
    display: flex;
    justify-content: space-around;
    align-content: center;
    padding-bottom: 30px;
}

/* Make steps image responsive */
.steps-image img {
    max-width: 100%;
    height: auto;
}


.steps {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 25px;
}

.steps-content>h2 {
    padding-bottom: 10px;
    font-weight: 700;
    font-size: 14px;
}
.steps-content>p {
    font-size: 10px;
    font-weight: 400;
}

/* ============================================
   MONEY SECTION STYLES
   ============================================ */

.mny {
    margin-right: -50px;
    padding: 0px 0px;
    width: 470px;
    height: 500px;
    max-width: 100%; /* Make responsive */
    height: auto; /* Maintain aspect ratio */
}

.money {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 0px;
    gap: 0px;
    margin-bottom: -65px;
}

.money-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0px 0px;
    align-items: flex-start;
    justify-content: center;
    margin-right: 50px;
}

.money-content>h2 {
    font-size: 28px;
    font-weight: 700;
}

.money-content>p {
    font-size: 14px;
    font-weight: 400;
}

/* ============================================
   REMOVED: btn2, btn3, btn4
   ============================================
   
   These button classes have been removed and replaced with
   btn-primary and btn-secondary for consistency.
   
   Old classes were:
   - btn2: Dark green button (now use btn-primary)
   - btn3: Outlined green button (now use btn-secondary with border)
   - btn4: Text-only button (now use btn-secondary)
   
   See button styles above for the new unified button system.
   ============================================ */

.livestock {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 0px;
    gap: 0px;
    margin-bottom: -60px;
    margin-top: -100px;
}

/* ============================================
   LIVESTOCK SECTION STYLES
   ============================================ */

.lvimg {
    margin-right: -50px;
    padding-bottom: 50px;
    width: 385px;
    height: 360px;
    margin-bottom: 20px;
    max-width: 100%; /* Make responsive */
    height: auto; /* Maintain aspect ratio */
}

.livestock-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0px 0px;
    align-items: flex-start;
    justify-content: center;
    margin-right: 50px;
}

.livestock-content>h2 {
    font-size: 28px;
    font-weight: 700;
}

.livestock-content>p {
    font-size: 14px;
    font-weight: 400;
}

.lvbtn {
    display: flex;
    gap: 15px;
}

.crop-img {
    margin-right: 50px;
    rotate: -3.99deg;
    max-width: 100%; /* Make responsive */
    height: auto; /* Maintain aspect ratio */
}

.bottom-hero {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-xxl);
    background-color: var(--color-dark-bg); /* Using CSS variable */
    color: var(--color-text-white);
    border-radius: var(--radius-lg);
    margin: var(--spacing-xxl) auto;
    max-width: 1200px;
    position: relative;
    gap: var(--spacing-xl);
}
    
.bottom-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0;
    flex: 1;
    max-width: 600px;
}

.bottom-hero-content>h2 {
    font-size: var(--font-size-xxl);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--spacing-sm);
}

.bottom-hero-content>p {
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.bottom-hero-content .btn-primary,
.bottom-hero-content .btn-secondary {
    align-self: flex-start;
    margin-top: var(--spacing-sm);
}

.fm {
    height:395px;
    width:268px;
    margin:0px 0px;
    position: absolute;
    bottom: -0px;
    right: 40px;
}

/* ============================================
   FOOTER STYLES
   ============================================ */

footer {
    background-color: var(--color-dark-bg);
    color: var(--color-text-white);
    padding: var(--spacing-xxl) var(--spacing-xl);
    margin-top: var(--spacing-xxl);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xxl);
}

.footer-section h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-white);
}

.footer-section p,
.footer-section a {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    line-height: 1.8;
    display: block;
    margin-bottom: var(--spacing-xs);
}

.footer-section a:hover {
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

.footer-social {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.footer-social-icons {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.footer-social-icons img {
    width: 40px;
    height: 40px;
    transition: transform var(--transition-fast);
}

.footer-social-icons img:hover {
    transform: scale(1.1);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-sm);
}

/* ============================================
   ABOUT PAGE STYLES
   ============================================ */

/* Video container for about page */
.about-video-section {
    padding: var(--spacing-xxl) var(--spacing-xl);
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.video-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
}

.video-container h2 {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.video-container p {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
}

/* YouTube iframe responsive styling */
.video-container iframe {
    max-width: 100%;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ============================================
   ABOUT PAGE SECTION STYLES (Fixed Layout)
   ============================================ */

/* About section with proper spacing */
.about-section {
    padding: var(--spacing-xxl) var(--spacing-xl);
    margin: 0 auto;
    max-width: 1200px;
}

.about-section-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-xxl);
    justify-content: space-between;
}

/* Reverse order for alternating sections */
.about-section-reverse {
    flex-direction: row-reverse;
}

.about-section-image {
    flex: 1;
    max-width: 500px;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.about-section-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.about-section-text h2 {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.about-section-text p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-primary);
}

/* About content section */
.about-content-section {
    padding: var(--spacing-xxl) var(--spacing-xl);
    max-width: 900px;
    margin: 0 auto;
}

.about-content {
    display: flex;
        flex-direction: column;
    gap: var(--spacing-lg);
}

.about-content h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-top: var(--spacing-lg);
}

.about-content p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-primary);
}

/* About page list styling */
.about-list {
    list-style-type: disc;
    margin-left: var(--spacing-xl);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.about-list li {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

/* ============================================
   LOGIN PAGE STYLES
   ============================================ */

.login-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    padding: var(--spacing-xxl) var(--spacing-md);
    gap: var(--spacing-xxl);
    max-width: 1200px;
    margin: 0 auto;
}

/* Image Container (Left Column) */
.login-image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: stretch; /* Stretch to match form height */
    max-width: 500px;
    align-self: stretch; /* Match the height of form container */
}

.login-image {
    width: 100%;
    max-width: 500px;
    height: 100%; /* Take full height of container */
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    object-fit: cover; /* Cover the entire area while maintaining aspect ratio */
}

.login-form-container {
    background-color: var(--color-bg-white);
    padding: var(--spacing-xxl);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    flex: 1;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center form content vertically */
}

.login-form-container h1 {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
        text-align: center;
    }

.login-form-container p {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

/* Form styling */
.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-group label {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-primary);
}

.form-group input {
    padding: var(--spacing-sm);
    border: 1px solid #ccc;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-family: 'Montserrat', sans-serif;
    transition: border-color var(--transition-fast);
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-group input::placeholder {
    color: #999;
}

/* ============================================
   CONTACT PAGE STYLES
   ============================================ */

.contact-page-container {
    padding: var(--spacing-xxl) var(--spacing-xl);
    max-width: 1000px;
    margin: 0 auto;
}

.contact-hero {
    text-align: center;
    margin-bottom: var(--spacing-xxl);
}

.contact-hero h1 {
    font-size: var(--font-size-hero);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.contact-hero p {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
    margin-bottom: var(--spacing-xxl);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.contact-info h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.contact-info p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-primary);
}

.contact-form-container {
    background-color: var(--color-bg-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.contact-form-container h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.contact-form textarea {
    padding: var(--spacing-sm);
    border: 1px solid #ccc;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-family: 'Montserrat', sans-serif;
    min-height: 150px;
    resize: vertical;
    transition: border-color var(--transition-fast);
}

.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ============================================
   GALLERY PAGE STYLES
   ============================================
   
   Image galleries use CSS Grid to create responsive layouts.
   Grid automatically arranges images in rows and columns.
   ============================================ */

.gallery-section {
    padding: var(--spacing-xxl) var(--spacing-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    background-color: var(--color-bg-white);
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.gallery-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-normal);
}

.gallery-item:hover .gallery-image {
    transform: scale(1.05);
}

.gallery-caption {
    padding: var(--spacing-md);
    background-color: var(--color-bg-white);
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    font-weight: 500;
}

/* ============================================
   MAP SECTION STYLES
   ============================================ */

.map-section {
    margin-top: var(--spacing-xxl);
    padding: var(--spacing-xl);
    text-align: center;
}

.map-section h2 {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.map-section p {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
}

.map-section iframe {
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive styles for contact page */
@media screen and (max-width: 768px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .contact-hero h1 {
        font-size: var(--font-size-xxl);
    }
    
    .video-container iframe {
        height: 300px;
    }

    .gallery-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .gallery-image {
        height: 250px;
    }

    .map-section iframe {
        height: 300px;
    }

    /* Login/Signup pages - stack on tablet and mobile */
    .login-page-container {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: stretch;
    }

    .login-image-container {
        max-width: 100%;
        order: -1; /* Image appears first on mobile */
        align-self: stretch;
        height: 300px; /* Fixed height on mobile */
    }

    .login-image {
        max-width: 100%;
        height: 100%; /* Full height of container on mobile */
        object-fit: cover;
    }

    .login-form-container {
        max-width: 100%;
    }

    /* About sections - stack on mobile */
    .about-section-content {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .about-section-reverse {
        flex-direction: column;
    }

    .about-section-image {
        max-width: 100%;
    }
}




/* Media queries */

/* ============================================
   MOBILE MENU STYLES - Slides from right
   ============================================ */

/* Mobile menu overlay - covers entire screen when open */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: -100%; /* Hidden off-screen to the right initially */
    width: 100%;
    max-width: 300px; /* Menu width */
    height: 100vh;
    background-color: var(--color-bg-white); /* Using CSS variable */
    z-index: 1000; /* Above other content */
    transition: right var(--transition-normal); /* Smooth slide animation */
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3); /* Shadow for depth */
}

/* When menu is open, slide it into view */
.mobile-menu-overlay.active {
    right: 0; /* Slide into view from right */
}

/* Container for menu content */
.mobile-menu-content {
    display: flex;
    flex-direction: column;
    padding: 80px 30px 30px 30px; /* Top padding for close button */
    height: 100%;
}

/* Close button (X) styling */
.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: black; /* Black text on white background */
        font-size: 40px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

/* Hover effect for close button */
.mobile-menu-close:hover {
    color: var(--color-primary); /* Using CSS variable */
}

/* Mobile navigation menu */
.mobile-nav {
    margin-top: 40px;
    flex: 1; /* Takes available space */
}

.mobile-nav ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between menu items */
    padding: 0;
}

.mobile-nav li {
    padding: 0;
}

.mobile-nav a {
    color: black; /* Black text on white background */
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    display: block;
    padding: 10px 0;
    transition: color 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Subtle divider - dark for white background */
}

/* Hover effect for menu links */
.mobile-nav a:hover {
    color: var(--color-primary); /* Using CSS variable */
    padding-left: var(--spacing-xs); /* Slight slide effect */
    transition: all var(--transition-fast);
}

/* Login button in mobile menu */
.mobile-login {
    margin-top: var(--spacing-lg);
    width: 100%; /* Full width in mobile menu */
    background-color: var(--color-primary); /* Using CSS variable */
    color: var(--color-text-white);
    border: none;
    height: 45px; /* Slightly larger for mobile */
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-md);
    font-weight: 500;
    /* No transition or hover effect as per requirements */
}

/* Backdrop overlay when menu is open (optional - darkens background) */
.mobile-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-overlay); /* Using CSS variable */
    z-index: 999; /* Behind menu, above content */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.mobile-menu-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   RESPONSIVE MEDIA QUERIES
   ============================================
   
   Breakpoint Strategy:
   - Desktop: Default styles (above 768px)
   - Tablet: 768px and below - Medium screens, adjusted layouts
   - Mobile: 750px and below - Small screens, stacked layouts
   - Small Mobile: 480px and below - Very small screens, minimal padding
   
   Mobile-First Approach:
   - Base styles work for mobile
   - Media queries enhance for larger screens
   - Progressive enhancement principle
   ============================================ */

/* ============================================
   TABLET STYLES (768px and below)
   ============================================ */
@media screen and (max-width: 768px) {
    /* Header adjustments for tablet */
    header {
        padding: 15px 20px; /* Reduced padding */
        justify-content: space-between; /* Better spacing */
    }

    /* Reduce navigation gap on tablet */
    nav ul {
        gap: 30px;
    }

    /* Hero section tablet adjustments */
    .hero {
        padding: 40px 50px; /* Moderate padding */
    }

    .hero-content>h1 {
        font-size: 36px; /* Slightly smaller */
    }

    /* Money section - stack content on tablet */
    .money {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
        margin-bottom: 0;
    }

    .mny {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-right: 0;
    }

    .money-content {
        margin-right: 0;
        align-items: center;
        text-align: center;
    }

    /* Livestock section - stack on tablet */
    .livestock {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
        margin-bottom: 0;
        margin-top: 0;
    }

    .lvimg {
        width: 100%;
        max-width: 350px;
        height: auto;
        margin-right: 0;
        margin-bottom: 0;
    }

    .livestock-content {
        margin-right: 0;
        align-items: center;
        text-align: center;
    }

    .lvbtn {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Bottom hero tablet adjustments */
    .bottom-hero {
        margin: 80px 50px;
        padding: 30px 20px;
        flex-direction: column;
        text-align: center;
    }

    .bottom-hero-content {
        margin-left: 0;
        align-items: center;
    }

    .fm {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: 250px;
        height: auto;
        margin-top: 20px;
    }
}

/* ============================================
   MOBILE STYLES (750px and below)
   ============================================ */
@media screen and (max-width: 750px) {
    /* Background attachment fixed can cause issues on mobile - change to scroll */
    body {
        background-attachment: scroll; /* Better performance on mobile devices */
        background-size: cover; /* Ensure background covers full width */
        background-position: center; /* Center the background */
    }
    /* ============================================
       HEADER MOBILE STYLES
       ============================================ */
    header {
        padding: 15px 20px; /* Reduced padding for mobile */
        justify-content: space-between; /* Logo left, hamburger right */
    }

    /* Logo sizing for mobile */
    .logo img {
        width: 40px;
        height: 40px;
    }

    /* Show hamburger icon on mobile */
    .humburger {
        display: block;
        width: 25px;
        height: 25px;
    }

    /* Hide desktop navigation and login button on mobile */
    .nav, .login {
        display: none;
    }

    /* ============================================
       HERO SECTION MOBILE STYLES
       ============================================ */
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px; /* Reduced padding on mobile */
        gap: 30px;
    }

    .hero-content {
        width: 100%;
        align-items: center;
    }

    .hero-content>h1 {
        font-size: 28px; /* Smaller font for mobile */
        line-height: 1.3;
    }

    .hero-content>p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Hide hero image on mobile to save space */
    .hero-image {
        display: none;
    }

    /* Make all images responsive by default on mobile */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Hero buttons - stack vertically on very small screens */
    .hero-content-btn {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        justify-content: center;
        align-items: center;
    }

    .hero-content-btn .btn-primary,
    .hero-content-btn .btn-secondary {
        width: 100%;
        max-width: 250px;
    }

    /* ============================================
       STEPS SECTION MOBILE STYLES
       ============================================ */
    .hero-content>h2 {
        font-size: 18px;
        padding-top: 30px;
    }

    .hero-content>p2 {
        font-size: 13px;
        padding-bottom: 30px;
    }

    /* Steps image responsive */
    .steps-image {
        padding: 20px;
    }

    .steps-image img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }

    /* Steps content - stack vertically on mobile */
    .steps {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .steps-content {
        width: 100%;
        max-width: 300px;
    }

    .steps-content>h2 {
        font-size: 16px;
    }

    .steps-content>p {
        font-size: 12px;
    }

    /* ============================================
       MONEY SECTION MOBILE STYLES
       ============================================ */
    .money {
        flex-direction: column;
        padding: 30px 20px;
        gap: 20px;
        margin-bottom: 0;
    }

    /* Make text content appear first on mobile using CSS order */
    /* This applies to all money-content divs */
    .money-content {
        order: -1; /* Text appears first */
        margin-right: 0;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    /* First money section - image comes after text */
    .mny {
        order: 1; /* Image appears after text */
        width: 100%;
        max-width: 280px;
        height: auto;
        margin-right: 0;
    }

    /* Cash cropping section - image container comes after text */
    .money > div:first-child:not(.money-content) {
        order: 1; /* Image container appears after text */
    }

    .money-content>h2 {
        font-size: 22px;
    }

    .money-content>p {
        font-size: 13px;
        line-height: 1.6;
    }

    /* All buttons use btn-primary or btn-secondary classes */
    /* No need for separate btn2, btn3, btn4 styles */

    /* ============================================
       LIVESTOCK SECTION MOBILE STYLES
       ============================================ */
    .livestock {
        flex-direction: column;
        padding: 30px 20px;
        gap: 20px;
        margin-bottom: 0;
        margin-top: 0;
    }

    .lvimg {
        width: 100%;
        max-width: 280px;
        height: auto;
        margin-right: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .livestock-content {
        margin-right: 0;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .livestock-content>h2 {
        font-size: 22px;
    }

    .livestock-content>p {
        font-size: 13px;
        line-height: 1.6;
    }

    /* Livestock buttons - stack on mobile */
    .lvbtn {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        align-items: center;
    }

    /* All buttons in livestock section use btn-primary or btn-secondary */
    .lvbtn .btn-primary,
    .lvbtn .btn-secondary {
        width: 100%;
        max-width: 200px;
    }

    /* ============================================
       CASH CROPPING SECTION MOBILE STYLES
       ============================================ */
    /* Make text content appear first on mobile using CSS order */
    /* The div containing the crop image comes after text */
    .money > div:first-child:not(.money-content) {
        order: 1; /* Image container appears after text */
    }

    .crop-img {
        width: 100%;
        max-width: 280px;
        height: auto;
        margin-right: 0;
        margin-left: 0;
    }

    .money-content>h1 {
        font-size: 24px;
    }

    /* ============================================
       BOTTOM HERO SECTION MOBILE STYLES
       ============================================ */
    .bottom-hero {
        flex-direction: column;
        margin: var(--spacing-xxl) var(--spacing-md);
        padding: var(--spacing-xl) var(--spacing-md);
        border-radius: var(--radius-md);
        text-align: center;
        width: calc(100% - var(--spacing-md) * 2);
        max-width: 100%;
        box-sizing: border-box;
        gap: var(--spacing-md);
    }

    .bottom-hero-content {
        margin-left: 0;
        align-items: center;
        padding: 0;
        gap: var(--spacing-md);
        max-width: 100%;
    }

    .bottom-hero-content>h2 {
        font-size: var(--font-size-xl);
        line-height: 1.4;
        word-wrap: break-word;
    }

    .bottom-hero-content>p {
        font-size: var(--font-size-sm);
        line-height: 1.6;
        word-wrap: break-word;
    }

    /* Hide bottom hero image on mobile */
    .fm {
        display: none; /* Hide image on mobile */
    }

    .bottom-hero-content .btn-primary,
    .bottom-hero-content .btn-secondary {
        width: 100%;
        max-width: 250px;
        align-self: center;
    }

    /* Footer mobile styles */
    .footer-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }

    .footer-section {
        text-align: center;
    }

    .footer-social-icons {
        justify-content: center;
    }

    /* ============================================
       FOOTER MOBILE STYLES
       ============================================ */
    footer {
        padding: 30px 20px;
        margin-top: 0;
    }

    footer img {
        width: 100%;
        max-width: 250px;
        height: auto;
    }

    /* ============================================
       BUTTON MOBILE STYLES
       ============================================ */
    .btn-primary,
    .btn-secondary {
        font-size: 14px;
        height: 40px; /* Slightly taller for easier tapping */
        min-width: 120px;
    }

    /* ============================================
       MOBILE CENTERING - Better Mobile View
       ============================================ */
    /* Center all text content on mobile for better readability */
    .hero-content,
    .money-content,
    .livestock-content,
    .about-content,
    .contact-hero,
    .contact-info,
    .video-container,
    .gallery-section {
        text-align: center;
    }

    /* Center all items and buttons on mobile */
    .hero-content-btn,
    .lvbtn,
    .about-content,
    .contact-form-container,
    .gallery-container {
        justify-content: center;
        align-items: center;
    }

    /* Center form inputs on mobile */
    .form-group input,
    .form-group textarea {
        text-align: center;
    }

    /* Center images on mobile */
    .mny,
    .lvimg,
    .crop-img,
    .hero-image {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}

/* ============================================
   SMALL MOBILE STYLES (480px and below)
   ============================================ */
@media screen and (max-width: 480px) {
    /* Even smaller padding for very small screens */
    header {
        padding: 12px 15px;
    }

    .hero {
        padding: 20px 15px;
    }

    .hero-content>h1 {
        font-size: 24px;
    }

    .hero-content>p {
        font-size: 13px;
    }

    /* Steps section - tighter spacing */
    .steps {
        padding: 15px;
        gap: 15px;
    }

    /* All sections - reduced padding */
    .money,
    .livestock {
        padding: 20px 15px;
    }

    .bottom-hero {
        margin: 30px 15px;
        padding: 25px 15px;
    }

    /* Smaller font sizes for very small screens */
    .money-content>h2,
    .livestock-content>h2 {
        font-size: 20px;
    }

    .money-content>h1 {
        font-size: 22px;
    }

    .bottom-hero-content>h2 {
        font-size: 18px;
    }

    /* Mobile menu width adjustment for small screens */
    .mobile-menu-overlay {
        max-width: 280px;
    }
}