/* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Open Sans', sans-serif;
        }
        body {
            line-height: 1.4;
            color: #333;
			
			/* help with form validation ?  */
			scroll-behavior: smooth;
        }
        .container {
            width: 98%;
            max-width: 1000px;
            margin: auto;
            padding: 10px;
        }
        h1, h2, h3 {
            color: #00673F;
        }
        h1 {
            font-size: 1.5em;
            margin-bottom: 0.4em;
        }
        h2 {
            font-size: 1.4em;
            margin-top: 0.8em;
            margin-bottom: 0.3em;
        }
        p {
            margin-bottom: 0.6em;
        }
        img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 20px 0;
        }
		#mainlogo {
			flex-shrink: 0;
			margin: 0;
			position: relative;
			top: -25px;
		}

        /* Responsive Styles */
        @media (max-width: 768px) {
            h1 {
                font-size: 1.6em;
            }
            h2 {
                font-size: 1.1em;
            }
        }
        /* Navigation */
        nav {
			background-color: #00673F;
			color: #fff;
			padding: 10px;
			text-align: center;
			position: sticky;
			top: 0;
			z-index: 1000;
}
        nav a {
            color: #fff;
            text-decoration: none;
            padding: 4px 10px;
            font-weight: bold;
            display: inline-block;
        }
        nav a:hover {
            background-color: #3C5C8B;
        }
        /* Section Styles */
		.section {
			margin-top: 10px;
			padding: 10px;
			background-color: #FDFDFD; /* Darkened from #f4f4f4 */
			border-radius: 8px;
			scroll-margin-top: 60px; /* so clicking link slight gap  */
		}
        .why-list {
            margin-top: 20px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            color: #333;
        }
        .why-list ul {
            list-style-type: none;
            padding-left: 0;
        }
        .why-list ul li {
            background-color: #ffffff;
            padding: 5px;
            margin-bottom: 3px;
            border-radius: 5px;
        }
		
		
        /* Contact Form */
        .contact-form label {
            display: inline-block;
            margin-bottom: 1px;
            font-weight: bold;
			font-size: 14px; /*to prevent auto zoom on mobile on  form entry*/
			
			
		/*margin-right: 10px;  Space between label and input */
    

			
        }
        .contact-form input, .contact-form textarea, .contact-form select {
           width: 95%;
		  
            padding: 7px;
            margin-bottom: 27px;
            border: 1px solid #ddd;
            border-radius: 5px;
			font-size: 14px; /*to prevent auto zoom on mobile on  form entry*/
        }
        .contact-form button {
            padding: 10px 20px;
            background-color: #2E4053;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
		.contact-form textarea{

		}
												
						/* Make invalid fields stay red even after moving to the next field */
						input:invalid,
						select:invalid {
							border: 2px dashed red;
							/*outline: 2px dashed red;   Optional outline for extra emphasis */
						}

						input:valid,
						select:valid {
							border: 2px solid green;
						}

						/* Styling for input on submit attempt (form is invalid) */
						form:invalid button {
							border: 2px dashed red;
							background-color: lightgray;
							color: gray;
							cursor: not-allowed;
						}

						form:valid button {
							border: 2px solid green;
							background-color: limegreen;
							color: white;
							cursor: pointer;
						}

						/* Optional focus style to emphasize the invalid input */
						input:focus:invalid {
							outline: 2px dashed red;
						}

						/* Styling for select field */
						select:invalid {
							border: 2px dashed red;
						}

						select:valid {
							border: 2px solid green;
						}

						/* Placeholder style for select options */
						option[value=""] {
							color: gray;
						}

	
						
						
		
		
		
		
		div.scroll-container {
			/*background-color: #333;*/
			overflow: auto;
			white-space: nowrap;
			padding: 1px;
			 /* height: 35vh;/*
			    
			  /* Hide scrollbar in Firefox */
			  scrollbar-width: none;

			  /* Hide scrollbar in IE and Edge */
			  -ms-overflow-style: none;
		}

		/* Hide scrollbar in webkit */
		div.scroll-container::-webkit-scrollbar {
				display: none;
		}

		div.scroll-container img {
		padding: 2px;
		  height: 20vh;
		  width: auto;
		  }
		  
		  
		  
		a.cta:link, a.cta:visited {
		  background-color: #00673F;
		  color: white;
		  padding: 12px 25px;
		  text-align: center;
		  text-decoration: none;
		  display: inline-block;
		  margin-bottom: 18px; 
		  
		}

		a.cta:hover, a.cta:active {
		  background-color: red;
		}