body,h1,h2,h3,h4,h5,h6 { font-family: "Lato", sans-serif; }
body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgimg-1 {
  background-image: url('../images/bg.jpg');
  min-height: 100%;
}

.w3-wide { letter-spacing: 10px; }
.w3-hover-opacity { cursor: pointer; }

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1200px) {
  .logo-title {
    /* Have it go below the image */
    display: block;
    text-align: center;
  }
  .bgimg-1 {
    background-attachment: scroll;
    min-height: 400px;
  }
}

/* Ensure iframe is responsive */
iframe {
  border: solid 1px #777;
  width: 100%;
  height: 1077px;
}

h3 {
  font-size: 2em;
  margin-bottom: 20px;
}

p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

/* Section title and description styles */
.w3-center h4 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.w3-center p {
  font-size: 1em; /* Smaller font size for the description */
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Committee section styles */
#w3-container {
  text-align: center;
}

#committees .w3-third {
  width: 31%; /* Adjust to fit within 100% */
  margin-left: 1%; /* Slight margins to space elements nicely */
}

#committees .w3-third:first-child,
#committees .w3-third:nth-child(4) {
  margin-left: 0;
}

#committees i {
  font-size: 4em; /* Increased size for better visibility */
  margin-bottom: 15px;
}

#committees h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.4em; /* Adjusted font size for better readability */
}

#committees p {
  font-size: 1em;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 300px; /* Limit the width for better readability */
}

/* Navigation button styles */
.w3-container .w3-button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
}

.w3-container .w3-button:hover {
  background-color: #555;
  color: white;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .w3-third {
    width: 100%;
    margin-bottom: 20px;
    margin-left: 0;
  }

  /* Adjust iframe height for smaller screens */
  iframe {
    height: 1200px;
  }
}

/* Use Flexbox for committees section */
#committees {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  #committees .w3-third {
    flex: 1 1 calc(33.33% - 1%); /* Adjust to fit within 100% */
    margin: 0.5%; /* Slight margins to space elements nicely */
  }
  
  #committees .w3-third:nth-child(3n+1) {
    margin-left: 0;
  }
  
  #committees .w3-third:nth-child(3n+3) {
    margin-right: 0;
  }
  
  /* Additional responsive adjustments */
  @media (max-width: 900px) {
    #committees {
      flex-direction: column;
      align-items: center;
    }
  
    #committees .w3-third {
      width: 90%;
      margin-bottom: 20px;
      margin-left: 0;
      margin-right: 0;
    }
  }

/* Error message styles */
#error-message {
  margin-top: 10px;
  font-size: 1em;
  color: red;
}