/* === Global Resets & Base Styles === */
/* Optional: A simple reset to remove default margins and padding for consistency */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* === STICKY FOOTER SETUP === */

/* 1. Ensure the main container (body or a wrapper div) covers the full viewport height */
html, body {
    height: 100%;
    margin: 0;
    padding: 0; /* Add padding: 0 here just in case */
}

body {
   margin: 0; /* Optional: Remove default body margin */
   font-family: Arial, Helvetica, sans-serif;
   background-color: #F3f1ec;
   
    /* --- DESKTOP (LARGE SCREEN) FONT SIZE --- */
    /* This is the default size used on screens larger than 600px */
    font-size: 20px; 
    display: flex; /* Activate flexbox on the body */
    flex-direction: column; /* Stack children vertically (header, main, footer) */
    min-height: 100vh; /* Ensures the body always covers the full viewport height */
}


/* === Layout Containers (Desktop/Default Styles) === */  

main {
   align-items: flex-start; /* Aligns flex items along the cross-axis to the start of the container. Requires the main element to be a flex container (e.g., display: flex). */
   padding-right: 50px; /* Sets a 50px padding on the right side of the main content. */
   padding-left: 50px; /* Sets a 50px padding on the left side of the main content. */
   text-align: left; /* Aligns the inline content (text, images) within the main element to the left. */
   
   /* --- DESKTOP (LARGE SCREEN) FONT SIZE --- */
   font-size: 20px; /* Sets the base font size for text within the main element to 20 pixels on large screens. */
   width: 100%; /* Ensures the main content occupies 100% of the available width of its parent container. */
   flex: 1 1 auto; /* This is a shorthand for flex-grow: 1, flex-shrink: 1, and flex-basis: auto. It allows the main content to grow and shrink as needed, and its initial size is determined by its content. This also helps in pushing a footer down. */
   margin-top: 0; /* Removes any default top margin. */
   padding-top: 0; /* Removes any default top padding. */

   position: relative; /* Establishes a new positioning context for absolutely positioned children within the main element. This is crucial if you have elements inside `<main>` that use `position: absolute`. */
    /* The main content area must be allowed to grow and fill the space */
    flex-grow: 1; /* This pushes the footer down to the bottom */
    /* Remove the 'min-height: 80vh' property you had previously, as it's no longer needed */
    min-height: auto; /* Or simply delete the line from your provided code */

  }     

/* Default styles for desktop and larger screens (float, margins, etc.) */ 
.kaizen-image {     
    max-width: 55%;     
    height: auto; /* Maintains aspect ratio */     
    float: right; /* Aligns image right, text wraps left */          
    /* Standard margins for large screens */     
    margin-top:40px;     
    margin-right: 20px;     
    margin-left: 20px;     
    margin-bottom:0px;     
    line-height: 0;            
/* Circular fade effect (kept as is) */
-webkit-mask-image: radial-gradient(circle,
  rgba(0,0,0,1) 60%,
  rgba(0,0,0,0) 100%);
mask-image: radial-gradient(circle,
  rgba(0,0,0,1) 60%,
  rgba(0,0,0,0) 100%);
}  

/* Media Query: Styles for screens smaller than 600px (standard mobile breakpoint) */ 
@media only screen and (max-width: 600px) {     
    /* *** NEW STYLES FOR MAIN CONTENT ON MOBILE *** */     
    
    /* --- MOBILE (PHONE SCREEN) FONT SIZE --- */
    /* Override the body's font size for mobile screens */
    body {
        font-size: 16px;
    }
    
    /* Override the main content's font size for mobile screens */
    main {
        font-size: 16px;
        padding-left: 10px; /* Reduced padding for mobile screens */         
        padding-right: 10px; /* Reduced padding for mobile screens */     
    }      

    .kaizen-image {         
        max-width: 55%; /* Image now takes full width of the mobile screen */         
        float: none;     /* Removes floating for better vertical stacking on mobile */         
        margin-top:40px;         
        margin-right: 0px; /* Removes problematic fixed margin on mobile */         
        margin-left: 0px;  /* Removes problematic fixed margin on mobile */         
        margin-bottom: 0px; /* Keeps standard bottom margin */                  
        /* You might want to center the image on mobile */         
        display: block;         
        margin-left: auto;         
        margin-right: auto;         
        line-height: 0;     
    } 
}  


/* === New Header Specific Styles === */

/* Container to group the two logo images */
.header-group-left {
    display: flex; /* Use flexbox to align logo and mountain range */
    align-items: center; /* Vertically center them */
    gap: 15px; /* Add space between logo and mountain image */
    position: relative; /* Set position relative for stacking context */
    z-index: 2; /* Ensure images sit above the background mountain range image */
}

   

.mntn-range-image {
   height: auto; /* Maintain aspect ratio */
    max-height: 100px; /* Adjust size as needed, e.g., 100px or larger */
    z-index: -1;
}
/* === Top Navigation Bar Styles === */

/* Add a background color to the top navigation */
.topnav {
  position: static;
  overflow: hidden;
 
  padding: 20px;
     /* Enable Flexbox layout for the navigation links */
    display: flex;
    /* Vertically center the links within the nav container */
    align-items: center;
    /* Optional: Add space between the links */
    gap: 20px; /* Or use margin-left on the <a> tags */
    /* Ensure no default margins interfere */
    
    z-index: 10; /* Ensure it appears above other elements */
    /* Other navigation styles */

}

/* Style the links inside the navigation bar */
.topnav a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;

  /* === ADDED CODE FOR WHITE BORDER === */
  border: 2px solid white; 
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color:  whitesmoke;

    /* Optional: Keep the border on hover for consistency */
  border-color: #ddd; 
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color:  #6a7f5f;
  color: whitesmoke;

    /* Optional: Keep the border on the active link */
  border-color: whitesmoke; 

}
/* === Typography & Horizontal Rule === */
p {
  line-height: 2; /* Sets line height to 2 times the font size */
   text-align: justify;
}

hr {
                border: none; /* Remove default border */
                height: 3px; /* Set the height of the line */
                background-color:  whitesmoke; /* Set the color of the line */
                width: 100%; /* Set the width of the line */
}

.site-header {
  position: relative;
  background-color: #062205;
  margin-top: 0px;
  width: 100%;
  
  margin-right: 40px; /* Default desktop margin */
  z-index: 1000;
  height: auto;
  min-height: 175px;
  display: flex;
    /* Align child items (logo and nav) to the bottom of the container */
  justify-content: space-between;
  align-items: center;
    /* Add some padding or height if needed so there is space at the top */
  padding: 10px;
    /* Optional: Add a border or background color to visualize the header bounds */
    /* background-color: #f0f0f0; */
}

.logo-image {
  
  align-content: left;
  width: auto;
  display: block;


    height: auto; /* Ensure image scales correctly */
    max-height: 140px; /* Example max height for the logo */

   
}

/* Media query for header/logo adjustments on mobile */
@media only screen and (max-width: 600px) {
    .site-header {
        margin-right: 0px; /* Remove fixed margin */
    }

    .logo-image {
        left: 50px; /* Adjust positioning for mobile if 75px is too wide */
        margin-left: 10px; /* Adjust margin for mobile */
        max-height: 100px; /* Optional: make logo smaller on mobile */
    }
}

.facebook-icon {
  height: 30px; /* Adjust size as needed */
  width: auto;

}
/* Ensure the Facebook icon doesn't inherit link styles like borders/padding */
.facebook-link {
    border: none !important; 
    padding: 0 !important;
    float: none !important;
}

.mntn-range-image {
  position:absolute;
  bottom: 0px;
  align-content: left;
  width: 100%;
  display: block;
  float: left;
  margin-right: 20px; /* Space to the right of the logo */
  height: auto; /* Ensure image scales correctly */
  max-height: 175px; /* Example max height for the logo */
   opacity: 75%;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
   /* Example values to get a green hue - you will need to adjust these */
  filter: invert(41%) sepia(19%) saturate(545%) hue-rotate(84deg) brightness(97%) contrast(92%);
   /* Adjust the hue-rotate value to achieve your desired color */
   left: 50%;
  transform: translateX(-50%);
   width: 100%;
}


.about-header, .mission-header, .meet-header, .what-header, .contact-header, .apply-header, .vision-header {
    color: #062205;
     text-align: justify;
     font-size: 50px;
     line-height: 2;
    /* Optional padding/margin if needed, but not a huge fixed margin-left */
    padding-left: px;
    font-weight: bold;
}

.about-text, .mission-text, .vision-text, .apply-text, .what-text {
    color: #062205;
     text-align: justify;

     line-height: 2;
    /* Optional padding/margin if needed, but not a huge fixed margin-left */
    padding-left: 10px;
}

        /* === Form Styles (Desktop/Default Styles) === */

form {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color:  #d8d6d0;
    padding: 20px;
    max-width: 600px; /* Set your desired maximum width */
    margin: left;
    justify-content: left;
    align-content: left;
    font-size: 20px;
     z-index: 10;
    /* Ensures form text color is correct after removing inline styles */
    color: #030303;
    text-align: left; /* Align form contents to the left of the table cell */
  }

/* Media Query for Form on Mobile */
@media only screen and (max-width: 600px) {
    form {
        padding: 20px; /* Reduced padding for mobile */
        width: 100%; /* Take full width on mobile */
    }
}






.form-group {
     /* Use display: block or flex-direction: column for stacked layout */
    margin-bottom: 15px; /* Add robust spacing between form groups */
    /* Remove conflicting flexbox alignment rules */
    width: 100%;
    display: flex;
    /* Aligns items vertically in the middle of the row */
    align-items: center; 
    margin-bottom: 15px; /* Space between rows */
    /* By default, this will align labels and inputs horizontally */
}


.form-group label {
    color:#062205;
    flex-basis: 150px; /* Set a fixed width for labels */
    margin-right: 5px; /* Space between label and input */
    font-size: 20px;

    margin-bottom: 5px; /* Adds space between the label and the input below it */
    text-align: left; /* Ensures the label text is left-aligned within its block */
}


.form-group input, .form-group textarea {
    flex-grow: 1; /* Allow input/textarea to take remaining space */
    padding: 5px;
    border: 1px solid #062205;
    border-radius: 4px;
    /* Inherits font from body, but you might want to specify size */
    font-size: 20px;
     /* Remove 'flex-grow: 1;' if you use a fixed pixel width */
    height: 40px;
    display: block; /* Forces the input/textarea to take its own line */
    width: 80%; /* Makes the input stretch to the full width of its container (the table cell) */
    box-sizing: border-box; /* Ensures padding and borders are included in the 100% width */
    margin-bottom: 5px; /* Adds space after the input/textarea before the next form group */
    text-align: left; /* Ensures text entry starts from the left */
}

/*  Ensure the input boxes fill the remaining space */
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group textarea {
    /* Makes the input fields take up the rest of the available width */
    flex-grow: 1; 
    padding: 0px;
    border: 1px solid #090808;
    font-size: 16px; /* Adjust font size as needed */
}

.form-group-button {
 /* display: block is usually better for centering margins */
    display: inline-block; 
    font-size: 20px;
    background-color: #6a7f5f;
    border: 1px solid #060605; 
    padding: 5px 10px; /* Add padding to give it size */
    text-align: center;
    color: whitesmoke !important; /* Add the !important keyword */
    margin: 10px auto; 
  }

input.form-group-button {
    color: whitesmoke !important; /* The !important tag forces this rule to apply */
}

/* === Footer Styles === */

.page-footer {

    /* Replace #062205 with whatever color you actually want the footer to be */
    background-color: #062205; 
    color: white; /* You'll likely need to set text color to white for readability */
    text-align: center; /* Center the text as well */
    padding: 20px 50px;
    margin-right: 0px;
    margin-top: auto; /* Pushes the footer to the bottom, absorbing available space */
    /* Add any other existing footer styles here */
        position: static; /* or simply remove any 'position' property if present */
    /* other existing styles... */
     }

     
.footer-icon {
  vertical-align: middle;
}


.phone-link {
  color: #ffffff; /* Makes the text white */
  text-decoration: none; /* Removes the standard link underline */
  /* Add any other styles needed to match surrounding text */
}


/* In your styles.css file, you can target the button directly: */
button[type="submit"] {
  font-size: 20px; /* Adjust this value as needed, e.g., 18px, 1.2em */
  padding: 10px 20px; /* Add some padding to make the button bigger overall */
  background-color: #6a7f5f; /* A nice green color for consistency */
  color: white; /* White text for readability */
  border: none; /* Remove default browser border */
  cursor: pointer; /* Makes it clear the button is clickable */
}

/* Helper class to stop floating elements from overlapping the next section */
.clear-fix {
    clear: both;
    height: 0; /* Ensures the element itself doesn't add height to the page */
}