/* Table of Contents
/* ------------------------------------------------------------

1.  Global Styles
2.  Layout
3.  Header
4.  About
5.  Capabilities
6.  Business Details
7.  Leadership
8.  Contact
9.  Footer
10.  Views
  10.1 Dark Mode
  10.2 Light Mode
11. Other Pages

*/

/* 1. Global - Set up the things
/* ---------------------------------------------------------- */

:root {
  /* Color Variables */
  --color-white: #FFFFFF;
  --color-light-black: #1F2624;
  --color-black: #191919;
  --color-light-green: #B8DECF;
  --color-medium-green: #277F6A;
  --color-dark-green: #0A2B23;
  --color-light-yellow: #FFD564;
  --color-dark-yellow: #BDBD0C;

  /* Font Variables */
  --font-family-display: 'Red Hat Display', sans-serif;
  --font-family-text: 'Red Hat Text', sans-serif;

  --font-size-h1: 2.5rem; /* 40px */
  --font-size-h2: 1.75rem; /* 28px */
  --font-size-h3: 1.375rem; /* 22px */
  --font-size-h4: 1.125rem; /* 18px */
  --font-size-body-large: 1.125rem; /* 18px */
  --font-size-body: 1rem; /* 16px */
  --font-size-body-small: 0.875rem; /* 14px */

  --font-weight-regular: 400;
  --font-weight-bold: 700;

  --line-height-h1: 120%; /* 3rem / 40px */
  --line-height-h2: 132%; /* 2.3rem / 28px */
  --line-height-h3: 1.8rem; /* 1.8rem / 22px */
  --line-height-h4: 1.56rem; /* 1.56rem / 18px */
  --line-height-normal: normal;
}

/* 2. Layout - Page building blocks
/* ---------------------------------------------------------- */

body {
  font-family: var(--font-family-text);
  margin: 0;
  padding: 0;
  background-color: var(--color-black);
  color: var(--color-white);
}

.link {
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 2px solid var(--color-white);
  transition: color 0.3s, border-bottom-color 0.3s;
}

.link:hover {
  color: var(--color-light-green);
  border-bottom-color: var(--color-light-green);
}

/* Headers */

h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-h1);
}

h3 {
  color: var(--color-light-green);
  text-align: left;
  font-size: var(--font-size-h3);
  margin-bottom: 0.25em;
}

h4 {
  margin-bottom: 0.5em;
  color: var(--color-white);
  font-size: var(--font-size-h4);
}

/* Text Stuff */
p {
  color: var(--color-white);
  margin-bottom: 1em;
}

/* Lists */
ul {
  list-style-type: none;
  padding: 0;
}

ul li {
  margin: 0.5em 0;
  color: var(--color-white);
}

/* Site width and stuff */
.wrapper {
  max-width: 80%; /* Adjust percentage as needed */
  margin: 0 auto;
  padding: 20px;
}

section {
  padding: 3em 2em;
  border-bottom: 1px solid var(--color-black);
  background-color: var(--color-medium-green);
  border-radius: 8px;
  margin-bottom: 20px;
  max-width: 1000px; /* Ensure content boxes are not too wide */
  margin: 0 auto; /* Center the content */

}

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

  .section {
    padding: 2em 1em;
  }

  header {
    padding: 5em 0;
  }

  .wrapper {
    max-width: 90%;
    padding: 24px;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1rem;
  }



  .business-details {
    flex-direction: column;
  }

  .business-details .column {
    margin: 1em 0;
  }
}


/* 3. Header
/* ---------------------------------------------------------- */

header {
  background: url('/img/bg.png') no-repeat center center;
  background-size: cover;
  color: var(--color-white);
  text-align: center;
  padding: 10em 0;
  position: relative;
}

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0); /* Adjust transparency as needed */
}

header .logo {
  position: relative;
  z-index: 1;
}

/* Button */
.transparent-button {
  position: relative;
  z-index: 1;
  background-color: transparent;
  border: 2px solid var(--color-light-yellow);
  color: var(--color-light-yellow);
  padding: 0.5em 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  margin: 0.75em;
  cursor: pointer;
  border-radius: 2em;
  transition: background-color 0.3s, color 0.3s;
}

.transparent-button:hover {
  background-color: var(--color-light-yellow);
  color: var(--color-dark-green);
}

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


}

/* 4. About
/* ---------------------------------------------------------- */

.about {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 2em 2em; /* Ensure even padding around the content */
  border-radius: 8px;
  position: relative;
  max-width: 80%; /* Set a max-width to ensure it doesn't span the full width */
  margin: 0 auto; /* Center the about section */
}

.about p {
  max-width: 55%; /* Control the width of the text block */
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  font-family: var(--font-family-text);
}

.about .logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 5%; /* Ensure proper spacing between text and logos */
}

.about .logos img {
  height: auto;
  width: auto; /* Make sure the images keep their aspect ratio */
  max-width: 100%;
  margin-bottom: 20px;
}

.about .logos .logo-huntridge {
  width: 40%;
}

.about .logos .logo-civicactions {
  width: 50%;
  margin-top: 10px;
}

/* Responsive Styles */

@media (max-width: 768px) {
  .about {
    flex-direction: column;
    text-align: center;
  }

  .about p {
    max-width: 100%;
    margin-bottom: 2em;
    text-align: justify;
  }

  .about .logos {
    flex-direction: row; /* Align logos side by side */
    justify-content: center; /* Center the logos */
    margin-left: 0;
  }

  .about .logos img {
    max-width: 200px; /* Adjust size as needed */
  }

  .about .logos .logo-huntridge {
    margin-right: 20px; /* Space between the logos */
  }

  .about .logos .logo-civicactions {
    margin-left: 20px; /* Space between the logos */
  }


}

/* 4.2 Capabilities
/* ---------------------------------------------------------- */

.capabilities::before {
  content: '';
  display: block;
  height: 1em; /* Adjust to align with the first item */
}

.capabilities {
  background-color: var(--color-light-black);
  padding: 0.5em 2em;
  border-radius: 40px;
  max-width: 80%;
  margin: 0 auto;
  margin-bottom: 15px;
}

.capability-column {
  display: flex;
  justify-content: space-between;
}

.capability {
  flex: 1;
  padding: 0 1em;
}

.capability h4 {
  margin-bottom: 0.5em;
  color: var(--color-white);
  font-size: var(--font-size-h4);
}

.capability ul {
  list-style-type: initial;
  padding-left: 8%;
}

.capability ul li {
  margin: 0.5em 0;
  color: var(--color-white);
  font-size: var(--font-size-body);
}

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

   .capability-column {
    flex-direction: column;
  }

}

/* 5. Business Details
/* ---------------------------------------------------------- */

.business-details {
  display: flex; /* Add flexbox to the container */
  align-items: center; /* Vertically center the content */
  justify-content: space-between; /* Space the columns evenly */
  background-color: var(--color-black);
  padding: 3em 2em;
  border-radius: 8px;
}

.business-details .logo-column {
  display: flex;
  align-items: flex-start; /* Vertically aligns image and text in columns */
  margin-right: 20px; /* Space between the logo and text */
}

.business-details .column {
  flex: 1; /* Each column takes up equal space */
  margin: 0.5em; /* Add margin between columns */
}

.business-details .logo-column img {
  max-width: 150px; /* Adjust size as needed to prevent blur */
  margin-right: 20px;
}

.business-details .logo-wrap {
  display: flex;
  gap: 1em;
}

.logo-sba,
.logo-hubzone {
  max-width: 150px;
  height: auto;
}

.business-details ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.business-details ul li {
  margin: 0.5em 0;
  color: var(--color-white);
}

.business-details ul li strong {
  color: var(--color-light-green); /* Highlighted text */
}



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

  .business-details {
    flex-direction: column;
    align-items: flex-start;
    margin: 1em 0; /* Optional: for additional spacing on mobile */
  }

  .business-details .logo-column {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the logo */
    width: 100%; /* Take full width on mobile */
    text-align: center; /* Center text below logo */
  }

  .business-details .logo-column img {
    max-width: 150px; /* Adjust size as needed */
    margin-bottom: 1em; /* Space between logo and text */
  }

  .business-details .column:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the text */
    justify-content: center; /* Center text vertically */
    margin-bottom: 1em; /* Space between text and logo */
    text-align: center; /* Center align the sentence */
  }

  .business-details .column:nth-of-type(3) {
    order: 3; /* Ensure the list items are at the bottom */
    width: 100%; /* Make it full width */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the list items */
  }

  .business-details .column {
    flex: initial;
    margin: 0.5em 0;
  }

  .business-details ul {
    display: flex;
    flex-direction: column;
    align-items: left; /* Center the list items */
    padding: 0;
    margin: 0;
    text-align: left; /* Keep list items text left-aligned */
  }

  .business-details ul li {
    margin: 0.25em 0;
    color: var(--color-white);
  }

  .business-details ul li strong {
    color: var(--color-light-green); /* Highlighted text */
  }

  .business-details .logo-wrap {
    flex-direction: column;
    align-items: center;
  }

}


/* 6. Leadership
/* ---------------------------------------------------------- */

.leadership {
  background-color: var(--color-black);
  padding: 2em;
  border-radius: 8px;
  max-width: 1000px;
  margin: 0 auto;

}

.leadership h3 {
  color: var(--color-light-green);
  font-size: var(--font-size-h3);
  margin-bottom: 1em;
}

.leader {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}

.leader-img {
  flex: 0 0 25%;
  max-width: 25%;
  margin-right: 2em;
}

.image-person {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.leader-details {
  flex: 1;
}

.leader h4 {
  margin-bottom: 0.5em;
  color: var(--color-white);
  font-size: var(--font-size-h4);
}

.leader p {
  color: var(--color-white);
  margin-bottom: 1em;
  text-align: justify;
}

.link {
  color: var(--color-light-green);
  text-decoration: none;
  border-bottom: 1px solid var(--color-light-green);
  transition: color 0.3s, border-bottom-color 0.3s;
}

.link:hover {
  color: var(--color-light-yellow);
  border-bottom-color: var(--color-light-yellow);
}

/* Responsive Styles for Mobile */
@media (max-width: 768px) {

  .leader {
    flex-direction: column;
    text-align: center;
  }

  .leader-img {
    flex: none;
    width: 100%;
    max-width: 150px; /* Adjust image width for mobile */
    margin: 0 auto 1em; /* Center image and add bottom margin */
  }

  .image-person {
    width: 100%; /* Ensure image does not exceed container width */
    height: auto;
    border-radius: 8px; /* Ensure round corners */
  }

  .leader h4 {
    margin: 0.5em 0; /* Add top margin */
    font-size: 1.2rem; /* Slightly larger font size for better readability */
  }

  .leader p {
    font-size: 1rem; /* Adjust font size for readability */
    margin-bottom: 1.5em; /* Add space below each leader's info */
    text-align: justify; /* Justify text for better alignment */
  }

  .leader p:nth-of-type(1) {
    margin-top: 0.5em; /* Add space above titles */
    text-align: center;
  }

  .link {
    color: var(--color-light-green);
    text-decoration: none;
    border-bottom: 1px solid var(--color-light-green);
    transition: color 0.3s, border-bottom-color 0.3s;
  }

  .link:hover {
    color: var(--color-light-yellow);
    border-bottom-color: var(--color-light-yellow);
  }
}


/* 7. Contact
/* ---------------------------------------------------------- */

.contact {
  background-color: var(--color-light-black);
  padding: 3em 2em;
  border-radius: 8px;
}

.contact h3 {
  text-align: center;
}

.contact form {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
}

.contact form label {
  margin-top: 1.1em;
  color: var(--color-white);
}

.contact form input,
.contact form textarea {
  padding: 0.5em;
  margin-top: 0.5em;
  border: 1px solid var(--color-white);
  border-radius: 4px;
  font-size: 1em;
  background-color: var(--color-dark-green);
  color: var(--color-white);
  font-family: var(--font-family-text);
}

.contact form button {
  background-color: transparent;
  color: var(--color-light-yellow);
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
  border-radius: 2em;
  margin-top: 1em;
  padding: 0.5em 1em;
  position: relative;
  z-index: 1;
  border: 2px solid var(--color-light-yellow);
  font-size: 1.3em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0.75em;
}

.contact form button:hover {
  background-color: var(--color-light-yellow);
  color: var(--color-dark-green);
}


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


}

/* 8. Footer
/* ---------------------------------------------------------- */

footer {
  background-color: var(--color-light-black);
  color: var(--color-white);
  text-align: center;
  padding: 2em 0;
  border-radius: 8px;
}

footer img {
  max-width: 60px;
  margin: 0.5em;
}

/* Footer container to keep a max width and center everything */
.footer-container {
  max-width: 800px; /* Adjust as needed */
  margin: 0 auto;
  text-align: center;
}

/* Spacing for the logos */
.footer-logos {
  margin: 1.5em 0;
}

/* Add extra spacing to the pledge if you want it to stand out */
.footer-pledge {
  margin-top: 1.5em;
}

/* Override your existing footer p margin if you want more vertical space */
footer p {
  margin: 1em 0; /* Increase spacing between lines */
}

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


}

/* 9. Views
/* ---------------------------------------------------------- */

/* 9.1 Dark Mode
/* ---------------------------------------------------------- */

/* 9.2 Light Mode
/* ---------------------------------------------------------- */

/* 10. Other Pages
/* ---------------------------------------------------------- */

.other {
  padding: 3em 2em;
  border-bottom: 1px solid var(--color-black);
  background-color: var(--color-black);
  border-radius: 8px;
  margin-bottom: 20px;
  max-width: 1000px; /* Ensure content boxes are not too wide */
  margin: 0 auto; /* Center the content */

}