/*	main.css  */

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
            line-height: 1.6;
            color: #333;
            background-color: blue; /*#f8f9fa;*/
        }

		.border-2 {
			border-style: solid;
			border-width: 2px;
		}
		
        .container {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
            max-width: 1200px;
            margin: 0 auto;  
            padding: 0 20px;
        }

        .page-container {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: space-between;
		  align-items: flex-start;
		  gap: 20px;
		  max-width: 1000px;
		  margin: auto;
		  padding: 20px;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
        }

		.container-form {
 			display:inline-flex;
            max-width: 550px;
			min-width:350px;
			height: auto;
            margin: 10px 20px;
            padding: 2px 2px 2px 2px;
			background-color: rgba(0,120,0,.1);
		}

		.container-info {
		  flex: 0 1 45%;
		  max-width: 480px;
 		  box-sizing: border-box;
		  display: block;
		  flex-direction: column;
		  justify-content: space-between;
		  clear: both;
		  border: 2px solid #339933;
		  border-radius: 8px;
		  background-color: #f9f9f9;
		}

		.form-container {
		  flex: 0 1 45%;
		  max-width: 450px;
		  box-sizing: border-box;
		  padding: 20px;
		  background-color: #f9f9f9;
		  display: block;
		}

		.form-container,
		.container-graphic {
		  max-width: 100%;
		  height: auto;
		  border: 2px solid #008000;
		  border-radius: 8px;
		}

		.container-graphic {
		  flex: 1 1 50%;
		  max-width: 550px;
		  box-sizing: border-box;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}
			
		.container-graphic img {
		  max-width: 100%;
		  height: auto;
		}

        .flex-container {
            display: flex;
            align-items: left;
            gap: 300px;
        }
			
        /* Header */
        header {
            /*background: linear-gradient(135deg, #2c5530 0%, #4a7c59 100%);*/
/*           background: #dbe2e9;  */
			background: linear-gradient(145deg, #d1f9d1, #b5ddfc );
            color: #0058A2;
            padding: 1rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .header-content {
            display:block;
            justify-content: space-between;
            /*align-items: center;*/
            flex-wrap: wrap;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .tagline {
            font-size: 1rem;
            opacity: 0.9;
        }


        /* Hero Section */
        .hero {
            /*background: linear-gradient(rgba(46, 85, 48, 0.8), rgba(46, 85, 48, 0.8)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%234a7c59" width="1200" height="600"/><circle fill="%232c5530" cx="200" cy="150" r="80" opacity="0.3"/><circle fill="%235d8f66" cx="800" cy="300" r="120" opacity="0.2"/><circle fill="%232c5530" cx="1000" cy="100" r="60" opacity="0.3"/></svg>');*/
            /*background: linear-gradient(135deg, #ffffff, #9fc0dc) !important;   */
			background: white;
            color: #0058a2;
            padding: 0 0 0 0;
            text-align: center;
            background-size: cover;
            background-position: center;
        }

        .hero h1 {
            font-size: 2rem;
            margin-bottom: .5rem;
            font-weight: 700;
            color: #0058A2;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            opacity: 0.95;
        }

		/*  Two Column Split  */
		.row {
		  display: flex;
		}

		/* Create two equal columns that sits next to each other */
		.column {
		  flex: 50%;
		  padding: 10px;
		}
		/*  To use 2 Columns 
		<h2>Two Equal Columns</h2>

		<div class="row">
		  <div class="column" style="background-color:#aaa;">
			<h2>Column 1</h2>
			<p>Some text..</p>
		  </div>
		  <div class="column" style="background-color:#bbb;">
			<h2>Column 2</h2>
			<p>Some text..</p>
		  </div>
		</div> 
		*/

        /* Software Modules Grid */
        .modules-section {
            padding: 1rem 0 0 0;
            background: white;
        }

        .section-title {
            text-align: center;
            margin-bottom: 2rem;
        }

        .section-title h2 {
            font-size: 2.2rem;
            color: #2c5530;
            margin-bottom: 1rem;
        }

        .modules-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .module-card {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #e9ecef;
        }

        .module-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
        }

        .module-icon {
            width: 170px;
            height: 90px;
            background: linear-gradient(145deg, #b7daf7, #d1f9d1);
            border-radius: 10%;  /* 50% for oval icon */   
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 2rem;
            font-size: 1rem;
            color: white;
        }

        .module-card h3 {
            color: #418e46;
            margin-bottom: 1rem;
            font-size: 1.3rem;
        }

        .module-card p {
            color: #666;
            line-height: 1.5;
			text-align:left;
            margin-bottom: 1rem;
        }

        .learn-more {
            color: #339933;
            text-decoration: none;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: color 0.3s ease;
        }

        .learn-more:hover {
            color: #2c5530;
        }


        /* Features Section */
        .features-section {
            padding: 3rem 0;
            background: #f8f9fa;
        }

		.features-title-container {
			max-width: 800px;
			margin-top:-60px;
			padding: 40px 20px 15px 20px;
			color: 387a3d;
		}
		
        .features-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
			color: #387a3d;
        }

        .features-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
			color: #387a3d;
            margin: 2rem 0;
            text-align: left;
        }

        .feature-item {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .feature-icon {
            width: 40px;
            height: 40px;
            background: #008000;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            flex-shrink: 0;
        }

        /* CTA Section */
        .cta-section {
            padding: .1rem 0;
            background: #339933; /*linear-gradient(135deg, #008000 0%, #006600 100%); */
            color: white;
            text-align: center;
        }

        .cta-button {
            display: inline-block;
            background: white;
            color: #387a3d;
            padding: 1rem 2rem;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            margin-top: 1rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        /* Footer */
        footer {
            background: #339933;
            color: white;
            padding: 0px;
            text-align: center;
        }
		.responsive {
		  max-width: 100%;
		  height: auto;
		  border: 2px solid #008000;
		  border-radius: 8px;
		  display: block;
		}
		
		/* Menu Style  */

/* --- GLOBAL STYLES & RESET (Recommended) --- */
.hero-container {
    background-color:#ffffff; /* Keeps your original background color */
}

/* --- 1. THE MAIN GRID LAYOUT (Desktop View: Menu + Content) --- */
.main-layout-container {
    /* KEY FIX: This creates the two-column structure */
    display: grid; 
    /* 15% for the menu, 80% (1 fractional unit) for the content */
    grid-template-columns: 18% 1fr; 
    width: 100%;
	background: #ffffff;
}

/* Style for the sidebar menu area */
.main-navigation {
    /* REVISED: Background color changed to white */
    background-color: #ffffff; 
    padding-top: 20px;
    /* REVISED: Changed the divider line to #339933 with 50% transparency */
    border-right: 1px solid rgba(51, 153, 51, 0.5); 
    align-self: start; 
}

.hero-content {
    /* Ensure the hero section takes up its column space */
    padding: 20px; 
    margin-top: 0 !important; /* Overrides any previous inline styles */
}

/* Hides the toggle button by default (only visible on mobile) */
.hamburger-menu-toggle {
    display: none; 
}

/* --- 2. BASE MENU STYLES (Menu Collapse/Fly-out) --- */
.main-menu {
    list-style: none; /* Removes bullet points for main items */
    padding: 0;
    margin: 0;
}

.main-menu a:hover {
    /* Consider using a light version of your brand color on hover, 
       or just a light white/grey background */
    background-color: #d1f9d1;  /*rgba(51, 153, 51, 0.15);  */
    color: #333;
}
.main-menu li {
    position: relative;
    /* REVISED: Changed the border color to #339933 with 50% transparency */
    border-bottom: 1px solid rgba(51, 153, 51, 0.5); 
}

.main-menu li:last-child {
    border-bottom: 1px solid rgba(51, 153, 51, 0.5); /* Keep the last item clean */
}

.main-menu a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: #0059a3;
    font-weight: bold;
}

/* --- CSS OVERRIDES FOR PERMANENT HAMBURGER MODE --- */

.single-page-menu-mode {
    /* 1. Force the grid to be a single column (no 15% sidebar) */
    grid-template-columns: 1fr; 
}

/* 2. Style the navigation container for this mode */
.single-page-menu-mode .main-navigation {
    /* The nav will now take up 100% of the top of the container, 
       but we want it narrow and just holding the button */
    border-right: none;
    background-color: transparent; /* Make background blend with the header/hero */
    padding: 0;
    /* Positioning the hamburger icon in the top left corner */
    position: absolute; 
    top: 20px; /* Adjust this value to align with your header/logo */
    left: 20px;
    width: 60px; /* Give it a small area to sit in */
    z-index: 10;
}

/* 3. Show the hamburger button by overriding its default 'display: none' */
.single-page-menu-mode .hamburger-menu-toggle {
    display: block; 
    /* Style the button itself to look clean in the corner */
    background: transparent;
    color: #0059a3; /* Use your primary blue color */
    border: none;
    padding: 0;
    font-size: 2rem;
    cursor: pointer;
    width: auto;
    text-align: left;
}

/* 4. Ensure the actual menu list remains hidden until the button is clicked */
.single-page-menu-mode .main-menu {
    /* This overrides the desktop display, keeping it hidden */
    display: none; 
    /* When the menu IS open, we want it to overlay the page (mobile mode behavior) */
    position: fixed; /* Fixed position ensures it overlays the entire page */
    top: 0;
    left: 0;
    height: 100vh;
    width: 250px; /* Give the popped-out menu a fixed width */
    background-color: #ffffff;
    padding-top: 60px; /* Space for the header/logo area */
    border-right: 1px solid rgba(51, 153, 51, 0.5);
    z-index: 1000; /* Should be lower than the button's z-index */
}

/* 5. Ensure the HERO content starts from the edge, not 15% in */
.single-page-menu-mode .hero-content {
    /* Use grid-column to make sure it spans all available space (the only column) */
    grid-column: 1 / -1; 
    padding-left: 0; /* Adjust padding if needed */
}

/* 6. The JavaScript logic (from the last step) remains the same:
   When the button is clicked, it toggles the class: */
.single-page-mode .main-menu.is-open {
    display: block; /* Overlays the content */
}

/* --- SUBMENU STYLES (The Fly-out/Collapsed State) --- */
.submenu {
    list-style: none; /* Removes sub-item bullet points */
    padding: 0;
    margin: 0;
	background-color: #ffffff; 
    /* REVISED: Updated submenu border for consistency */
    border: 1px solid rgba(51, 153, 51, 0.5);   
    /* KEY: HIDES the submenu by default (The "collapsed" state) */
    display: none; 
    
    /* Positions the submenu to fly-out to the right */
    position: absolute;
    top: -1px; 
    left: 100%; 
    
    min-width: 250px; 
    background-color: #fff; 
    border: 1px solid #339933;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 1000; 
}

/* KEY: Shows the submenu ONLY when the parent list item is hovered */
.main-menu li:hover > .submenu {
    display: block;
}


/* 🚨 The Opening Rule MUST remain: 🚨 */
.single-page-menu-mode .main-menu.is-open {
    display: block !important; 
}

/* Style for the actual X button (Always visible when menu is open) */
.menu-close-btn {
    /* Basic button reset */
    background: none;
    border: none;
    cursor: pointer;
    
    /* Positioning it to the top right corner of the menu panel */
    position: absolute;
    top: 5px;
    right: 5px;
    
    /* Large, clean style */
    color: #333; /* Dark color */
    font-size: 2.5rem; /* Make it large */
    padding: 10px;
    line-height: 1; 
    font-weight: 300;
    z-index: 10000; /* Ensure it's above all menu items */
    
    /* We must hide it when the menu is CLOSED */
    display: none; 
}

/* 🚨 Show the X button ONLY when the menu is open */
.main-menu.is-open .menu-close-btn {
    display: block;
}

/* Tweak the UL to make space for the button at the top */
.main-menu {
    /* Add padding to the top so menu items don't hide under the button */
    padding-top: 50px; 
}

        /* Responsive Design */
        @media (max-width: 768px) {

			.column {
				flex-direction: column;
			}
			
            .hero h1 {
                font-size: 2rem;
            }

            .hero p {
                font-size: 1rem;
            }

			.page-container {
				flex-direction:column;
			}
			.form-container,
			.container-graphic {
				width: 100%;
			}
			
			.container-graphic {
				max-width: 100%;
				margin-top:0px;
			}
			
            .modules-grid {
                grid-template-columns: 1fr;
            }

            .nav-container {
                flex-direction: column;
                gap: 0rem;
            }

            .header-content {
                text-align: center;
            }

            .features-list {
                grid-template-columns: 1fr;
            }

/* Change the Grid Layout to a single Column */
    .main-layout-container {
        grid-template-columns: 1fr; /* Content takes full width */
    }
    
    /* Show the Hamburger Button */
    .hamburger-menu-toggle {
        display: block; 
        background: #0059a3;
        color: white;
        border: none;
        padding: 15px;
        font-size: 1.5rem;
        cursor: pointer;
        width: 100%;
        text-align: left;
    }
    
    /* Hide the entire Menu list by default on mobile */
    .main-menu {
        display: none; 
        border-top: 1px solid #339933;
    }

    /* JavaScript Toggle: When the button is clicked, this class shows the menu */
    .main-menu.is-open {
        display: block;
    }

    /* Change submenus to drop DOWN, not fly-out RIGHT on mobile */
    .submenu {
        position: static; /* Removes absolute fly-out positioning */
        left: auto;
        top: auto;
        background-color: #eee; /* Differentiate sub-menu background */
        border: none;
        box-shadow: none;
        padding-left: 20px; /* Indent sub-items */
    }

    /* Submenus are also hidden by default on mobile, we need a click/hover solution */
    /* Since we're using pure CSS hover for desktop, we'll keep that for mobile for simplicity
       but a click-toggle JS is generally better for mobile UX */
    .main-menu li:hover > .submenu {
        display: block;
		position: relative;
		border-bottom: 1px solid rgba(51, 153, 51, 0.5);
	}

    /* Clean up mobile styling */
    .main-navigation {
        border-right: none; 
        padding-top: 0;
        border-bottom: 1px solid #339933;
    }
    
    .hero-content {
        /* Ensure mobile content has space below the full-width menu */
        padding-top: 10px; 
    }
}
        }

		 @media (max-width: 600px) {
		  .form-container,
		  .container-graphic {
			flex: 1 1 100%;
		  }
		}

       @media (max-width: 480px) {
            .container {
                padding: 0 15px;
            }

            .module-card {
                padding: 1.5rem;
            }

            .hero {
                padding: 2rem 0;
            }
 		.container-graphic {
			margin-top:0px;
		}
       }
		
		
    </style>