/* Global resets and fonts */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
/* Headings Styling */
h2 {
    font-size: 2rem; /* Larger size for primary sections */
    margin-bottom: 1rem;
    font-weight: bold;
}

h3 {
    font-size: 1.25rem; /* Slightly smaller for subsections */
    margin-bottom: 0.75rem;
    font-weight: bold;
}

h4 {
    font-size: 1.0rem; /* Smaller size for subheadings */
    margin-bottom: 0.5rem;
    font-weight: bold;
}

/* General Heading Margin Reset for Consistency */
h2, h3, h4 {
    line-height: 1.3; /* Ensures clear spacing for multi-line headers */
    margin-top: 1rem;
}

  /* Header & Navigation */
  header {
      background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
      border-bottom: 1px solid rgba(224, 224, 224, 0.5); /* Match transparency */
      position: sticky;
      top: 0;
      z-index: 999;
      backdrop-filter: blur(10px); /* Optional: Adds a blur effect for better visibility */
      height: 125px; /* Adjust based on your header size */
      display: flex;
      align-items: center;
  }
  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
  }
  .nav-logo h1 {
    font-size: 1.5rem;
    color: #2C2C2C;
  }
  .nav-links a {
    margin-left: 1rem;
    font-weight: 500;
    color: #2C2C2C;
    transition: color 0.3s ease;
  }
  .nav-links a:hover {
    color: #2C2C2C;
    border-bottom: 1px solid #ddd;
  }

  /* Hero Section */
  .hero {
      margin-top: -100px;
      padding-top: 5rem;
      background: url('img/76b3934d7eaeed0343a9f7d5221d78ddf2a89f34-1.jpeg') no-repeat center center/cover;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 3rem 0 0 0;
      height: 600px;
  }
  .hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  }
  .hero p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  }

  /* Three Boxes / Services Section */
  .services {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
    text-align: center;
  }
  .services h2 {
    font-size: 2rem;
    color: #2C2C2C;
    margin-bottom: 1.5rem;
  }
  .box-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0; /* Reduced gap to make them tight together */
  }
  .box {
    flex: 1 1 calc(33.333% - 0.5rem);
    margin: 0.25rem; /* Small margin so they don't overlap */
    border-radius: 8px;
    padding: 1.5rem;
    min-width: 200px;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
  }
  .box:hover {
    transform: translateY(-5px);
  }
  /* Different background colors for each box */
  .box1 {
    background-color: rgba(215, 200, 224, 0.8);
  }
  .box2 {
    background-color: rgba(242, 207, 224, 0.8);
  }
  .box3 {
    background-color: rgba(174, 227, 231, 0.8);
  }
  .box h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: #2C2C2C;
  }
  .box p {
    color: #444;
    margin-bottom: 1rem;
  }
  .box a {
    display: inline-block;
    margin-top: 1rem;
    color: #2C2C2C;
    font-weight: 500;
  }

  /* Main Content */
  main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
  }
  .section {
    margin-bottom: 2rem;
  }
  .section h3 {
    margin-bottom: 1rem;
    color: #2C2C2C;
  }
  .section p {
    margin-bottom: 1rem;
    color: #444;
  }
  .section ul, .section ol {
    margin-left: 40px;
  }

  /* Two-column layout example */
  .content-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: top;
  }
  .content-row .image-col,
  .content-row .text-col {
    flex: 1 1 300px;
  }
  .content-row img {
    max-width: 100%;
    border-radius: 8px;
  }

  .image-col {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    text-align: center; /* Ensures text aligns if added alongside images */
    height: 100%; /* Ensures it takes the full height of the parent */
    width: 100%; /* Ensures it spans the full width of the parent */
}

.image-col img {
    max-width: 100%; /* Prevents the image from overflowing horizontally */
    max-height: 100%; /* Prevents the image from overflowing vertically */
    object-fit: contain; /* Maintains aspect ratio while fitting the container */
}

  /* Call to Action (CTA) Section */
  .cta {
    background-color: #f5f5f5;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    border-radius: 8px;
  }
  .cta h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #2C2C2C;
  }
  .cta p {
    margin-bottom: 1.5rem;
    color: #444;
  }
  .cta button {
    background-color: #2C2C2C;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .cta button:hover {
    background-color: #2C2C2C;
  }

  /* Footer */
  footer {
    background-color: #333;
    color: #eee;
    padding: 1.5rem 1rem;
    text-align: center;
  }
  footer p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
  }
  footer a {
    color: #ccc;
  }

  /* Responsive adjustments */
  @media (max-width: 992px) {
    .nav-links a {
      margin-left: 0.5rem;
    }
  }
  @media (max-width: 768px) {
    .nav-links {
      display: none;
    }
    .hero h2 {
      font-size: 2rem;
    }
    .box-container {
      flex-direction: column;
    }
    .box {
      flex: 1 1 100%;
      margin: 0.5rem 0;
    }
    .content-row {
      flex-direction: column;
    }
  }

  .carousel-container {
    position: relative;
    width: 80%;
    height: 500px; /* Adjust this to set the height of your carousel */
    margin: 0 auto;
    overflow: hidden; /* Hide overflowing slides */
    border-radius: 10px; /* Optional: Rounded corners */
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel {
    display: flex; /* Makes the items align in a row */
    transition: transform 0.5s ease-in-out; /* Smooth transition */
    width: 100%; /* This will be dynamically adjusted in JS */
    height: 100%; /* Matches the container height */
}

.carousel-item {
    flex: 0 0 100%; /* Each item takes full width of the container */
    display: flex; /* Use Flexbox to center images */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%; /* Matches the container height */
}

.carousel-item img {
    max-width: 100%; /* Prevent the image from overflowing */
    max-height: 100%; /* Prevent the image from overflowing */
    object-fit: contain; /* Maintain aspect ratio */
}



/* Carousel Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 2em;
    padding: 10px;
    cursor: pointer;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Style for Carousel Buttons on hover */
.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Contact Form Styling */
form#contactForm {
    max-width: 600px;
    margin: 2rem 0px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

form#contactForm label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #333;
}

form#contactForm input,
form#contactForm textarea {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1.5;
}

form#contactForm button {
    background-color: rgba(215, 200, 224, 1);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form#contactForm button:hover {
    background-color: rgba(242, 207, 224, 0.8);
}

form#contactForm #spinner {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

form#contactForm #responseMessage {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: rgba(174, 227, 231, 0.8);
}

form#contactForm #responseMessage.error {
    color: red;
}
/* Get Involved Survey Form Styling */
form#getInvolvedSurvey {
    max-width: 800px;
    margin: 2rem 0;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

form#getInvolvedSurvey label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #333;
}

form#getInvolvedSurvey input[type="text"],
form#getInvolvedSurvey input[type="email"],
form#getInvolvedSurvey input[type="tel"],
form#getInvolvedSurvey textarea {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1.5;
}

form#getInvolvedSurvey input[type="radio"],
form#getInvolvedSurvey input[type="checkbox"] {
    margin-right: 0.5rem;
}

form#getInvolvedSurvey textarea {
    resize: vertical;
}

form#getInvolvedSurvey button {
    background-color: rgba(215, 200, 224, 1);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form#getInvolvedSurvey button:hover {
    background-color: rgba(242, 207, 224, 0.8);
}

form#getInvolvedSurvey h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #2C2C2C;
}

form#getInvolvedSurvey p {
    margin-bottom: 1rem;
    color: #444;
}

form#getInvolvedSurvey #spinner {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

form#getInvolvedSurvey #responseMessage {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: rgba(174, 227, 231, 0.8);
}

form#getInvolvedSurvey #responseMessage.error {
    color: red;
}

form#getInvolvedSurvey .checkbox-group,
form#getInvolvedSurvey .radio-group {
    margin-bottom: 1rem;
}

form#getInvolvedSurvey .checkbox-group label,
form#getInvolvedSurvey .radio-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #333;
}

form#getInvolvedSurvey .textarea-group {
    margin-bottom: 1.5rem;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1000;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: transform 0.3s ease, background 0.3s ease;
}

/* Mobile Nav Links */
.nav-links {
    display: flex; /* Ensures nav is visible on desktop */
    flex-direction: row;
    position: static; /* Reset positioning for desktop */
    background: none;
    width: auto;
    transform: none;
    visibility: visible;
    opacity: 1;
}

.nav-links.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.nav-links a {
    padding: 1rem;
    text-align: center;
    
}

.nav-links a:last-child {
    border-bottom: none;
}

/* Responsive Design */
/* Default Navigation for Desktop */
.nav-links {
    display: flex;
    flex-direction: row;
    position: static;
    background: none;
    width: auto;
    visibility: visible;
    opacity: 1;
    border: none; /* No border on desktop */
}

/* Mobile Styles */
@media (max-width: 1124px) {
    .hamburger {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        position: absolute;
        top: 100%;
        right: 0;
        background-color: white;
        width: 100%;
        max-height: 0; /* Initially collapsed */
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
        border: 1px solid #ddd; /* Border only for mobile */
        border-radius: 5px;
        padding: 0;
    }

    .nav-links a {
        padding: 1rem;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    .nav-links.show {
        max-height: 500px; /* Ensure all items fit */
        opacity: 1;
        padding: 0.5rem 0;
    }
}