/* Global Styles */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #73abff;
    color: #333;
    background-image: url("img/math-symbol-background-5percent.svg");
    background-repeat: repeat;
    background-size: 150px 150px;
  }
  
  /* Stack header items vertically */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Flex row for logo and title */
.header-top {
  display: flex;
  align-items: center;
  gap: 1rem; /* Adjust spacing as needed */
  color: #000000;
}

/* Optionally style the navigation */
header nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 1rem 0 0 0; /* Some top margin to separate from header-top */
}

header nav ul li a {
  text-decoration: none;
  color: #ffffff;
  background: #ffb522;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-weight: bold;
}

header nav ul li a:hover {
  background: #ffa424;
}

.home-page main {
  width: 90%;      /* or 90%, if you want a bit of side padding */
  max-width: none;  /* explicitly remove any max-width */
  margin: 0 auto;   /* optional if you want it centered, but with no limit */
}

/* About page: apply a max width */
.aboutus-page main {
  width: 90%;         /* or whatever width you prefer */
  max-width: none;  /* limit how wide it can get on large screens */
  margin: 0 auto;     /* center the main container horizontally */
}

.contact-page main {
  width: 90%;         /* or whatever width you prefer */
  max-width: 700px;  /* limit how wide it can get on large screens */
  margin: 0 auto;     /* center the main container horizontally */
}

  
  
  /* Main Content Area */
  main {
    width: 90%;
    margin: 2rem auto;
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    line-height: 1.5;
  }

  h1 {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  
  /* Form Styles using Grid */
  form {
    display: grid;
    grid-template-columns: 1fr 2fr;  /* Labels and inputs */
    gap: 1rem 2rem;
    align-items: center;
  }
  
  /* Labels */
  form label {
    text-align: right;
    font-weight: bold;
  }
  
  /* Inputs, Selects, Textareas */
  form input[type="text"],
  form input[type="email"],
  form input[type="tel"],
  form select,
  form textarea {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  /* Button */
  form button {
    grid-column: 2 / 3;
    padding: 0.75rem;
    font-size: 1rem;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  form button:hover {
    background: #444;
  }

  .two-fields {
    display: grid;
    grid-template-columns: auto 200px auto 80px;
    gap: 1rem;          /* space between labels/inputs */
    align-items: center;
  }
  
  /* Labels in the nested grid */
  .two-fields label {
    text-align: right;  /* match your existing label style */
    font-weight: bold;
  }
  
  /* Inputs in the nested grid */
  .two-fields input {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  
  

  img {
    max-width: 100%; /* Scales down the image if it's too large */
    height: auto;    /* Keeps aspect ratio */
  }

  .logo {
    width: 50px;       /* adjust the size of your logo */
    height: auto;      /* keeps the aspect ratio */
  }

  .contact-help {
    margin-top: 2rem;
    text-align: center;
    padding: 1rem;
    background-color: #f9f9f9; /* light background color */
    border-top: 1px solid #ccc;
  }
  
  .contact-help h2 {
    margin-bottom: 0.5rem;
  }
  
  .contact-help a {
    color: #007BFF; /* a blue shade */
    text-decoration: none;
  }
  
  .contact-help a:hover {
    text-decoration: underline;
  }

  .two-column-container {
    display: flex;         /* Use Flexbox */
    gap: 2rem;             /* Space between columns */
    justify-content: center; /* Centers the columns horizontally, if desired */
    margin: 2rem auto;    /* Spacing around the container */
    width: 90%;
  }
  

  .schedule {
    flex: 1;                            /* Each box takes up equal space */
    background-color: #fff;             /* White background */
    padding: 1.5rem;                    /* Inner spacing */
    border-radius: 8px;                 /* Rounded corners */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Subtle shadow */
  }
  .aboutme, 
  .mission {
    flex: 1;                  /* Each section shares available space equally */
    background-color: #fff;   /* If you want a card-like box */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
  }

  .welcome {
    flex: 1;                  /* Each section shares available space equally */
    background-color: #fff;   /* If you want a card-like box */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
  }

  .site-title {
    font-size: 3rem; /* Adjust as needed */
    /* You can also change color, weight, etc. */
    font-weight: bold;
  }

  .btn-appointment {
    display: inline-block;       /* So it behaves like a button, not just text */
    background: #ffb522;
    color: #333;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bolder;
    transition: background-color 0.2s ease-in-out;
    margin-top: 1rem;            /* Optional spacing above/below */
  }
  
  .btn-appointment:hover {
    background-color: #ffaa33;
  }

  /* Two-Column Grid for Top Section */
  .two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem auto;
    width: 90%;
    max-width: 1200px;
  }

/* Left Column: Stack welcome and courses vertically */
.left-column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Right Column: For schedule content */
.right-column {
  /* Additional styling if needed */
}

/* Shared Box Styles */
.welcome,
.courses-offered,
.schedule {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Contact/Questions Section - Full Width Below */
.contact-help {
  margin: 2rem auto;
  width: 90%;
  max-width: 1200px;
  padding: 1rem;
  background-color: #f9f9f9;
  text-align: center;
  border-top: 1px solid #ccc;
}

/* Example Button Styling */
.btn-appointment {
  display: inline-block;
  background: #ffbb44;
  color: #333;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.2s ease-in-out;
  margin-top: 1rem;
}

.btn-appointment:hover {
  background-color: #ffaa33;
}

/* Responsive: Stack columns on narrow screens */

 
 /* Responsive Design: Stack inline fields on small screens */
 @media (max-width: 768px) {
  form {
    grid-template-columns: 1fr;
  }
  form label {
    text-align: left;
  }
  form button {
    grid-column: 1;
  }
  .two-fields {
      grid-template-columns: 1fr;
  }
  .two-column-container {
    flex-direction: column;  /* Stacks them vertically */
    align-items: center;     /* Optional: center the columns when stacked */
  }
  .two-column-grid {
    grid-template-columns: 1fr;
  }
}