/* Styles for Menu, Logo, etc. */

    body {
      margin: 0;
      font-family: "Times New Roman", Times, serif;
	  background-color: white;

    }
	/* Hide/show content */
    .content {
      display: none;
    }
    .content.active {
      display: block;
    }
	
	.pageheader {
		color:black;
		margin-left: 30px;
	}
    .container {
      margin-bottom: 65px;
    }
	/*
	.title {
      color: black; 
      background-color: white; 
      padding: 20px; 
      display: inline-block; 
	  width: 100%; 
      box-sizing: border-box; 
      margin: 0; 
	  text-align: center;
	  padding: 1px;
    }
	*/
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: white;
      color: black;
	  height: 145px;
	  position: -webkit-sticky; /* Safari */
  	  position: sticky;
  	  top: 0;
	  z-index: 1;
    }

    
    .title {
      text-align: center;
      margin: 0;
      flex-grow: 1; /* Allows the title to take available space */
    }
    
    .left-image {
      width: 250px;
      height: auto;
      margin-right: auto; 
    }
    .right-image {
      width: 250px;
      height: auto;
      margin-left: auto; 
    }
	.header-menu-separator {
      background-color: #DED0B6;
	  width: 100%;
	  height: 20px;
	  margin-left: auto;
	  margin-right: auto; 
      margin-top: 20px; 
	  margin-top: 20px; 
	}
	
    .menu {
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      padding: 10px;
	  position: -webkit-sticky; /* Safari */
	  position: sticky;
	  top: 145px;
	  z-index: 1;
    }
    .logo {
      width: 50px;
      height: auto;
      margin-right: 10px;
    }
    .menu-title {
      flex-grow: 1;
      text-align: left;
      font-size: 1.5em;
      margin: 0;
    }
	
    .menu-items {
      text-align: center;
    }
    .menu-item {
      display: inline-block;
      margin: 0 10px;
      font-weight: bold;
      cursor: pointer;
      padding: 8px 12px; /* Added padding */
      transition: background-color 0.3s; /* Added transition effect */
    }
    .menu-item:hover {
      background-color: #888; /* Changed background color on hover */
    }

	.home-image-container {
	  max-width: 100%;
	}
	
	.home-image {
		  max-width: 100%;
		  height: auto; /* Maintain aspect ratio */
	}
	
	.home-image-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: white;
      font-size: 30px;
    }
	
	/* CSS for  About Us **/
	.about-description {
	  background-color: #f9f9f9;
	  padding: 0px 0px 0px 30px;
	  border-radius: 5px;
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	  margin-bottom: 20px;
	}

	.about-description p {
	  margin-bottom: 15px;
	  line-height: 1.5;
	}
	
	/* CSS For Membership */
    .column {
      display: inline-block;
      width: 30%;
      padding: 10px;
      margin: 0 3%;
      box-sizing: border-box;
      vertical-align: top;
    }

    /* Reduce space between bullet and text */
    ul {
      padding-left: 20px; 
    }
    li {
      margin-bottom: 5px; 
    }

	.membership-content ul {
	  padding-left: 20px; /* Adjust the left padding */
	}

	.membership-content li {
	  margin-bottom: 10px;
	  text-align: left; /* Left-align the text */
	}

	.membership-content .columns {
		align-content: flex-start;
	  display: flex;
	}

	.membership-content .column {
	  flex: 1;
	  padding: 10px;
	  border: 1px solid #ccc;
	  position: relative;
	}

	.bottom-text {
	  position: absolute;
	  bottom: 20px; /* Adjust as needed */
	  left: 0;
	  width: 100%; /* Ensures it spans the column width */
	  text-align: center;
	  font-style: italic;
	  font-weight: bold;
	  color: red;
	  font-size: 1.1em;
	}



/* CSS for Board Members */
	.board-members {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-around;
	  gap: 20px;
	}

	.card {
	  display: flex;
	  width: 40%;
	  border: 1px solid #ccc;
	  border-radius: 5px;
	  overflow: hidden;
	}
	
	.thumbnail {
	  width: 100px;
	  height: auto;
	  margin-right: 10px;
	  object-fit: cover;
	}

	.member-info {
	  flex-grow: 1;
	  padding: 10px;
	}

	.member-info h3 {
		font-size: 22px;
		margin: 5px 0;
	}
	.member-info p {
	  color: grey;
	  font-size: 20px;
	  margin: 5px 0;
	}

/* CSS for Events */
/*
	.event {
	  border: 1px solid #ccc;
	  border-radius: 5px;
	  padding: 10px;
	  margin-bottom: 15px;
	}

	.event h3 {
	  margin-top: 0;
	  font-size: 1.2em;
	}

	.event p {
	  margin: 5px 0;
	}
	*/
	.collapsible {
	  background-color: #f1f1f1;
	  color: black;
	  font-weight:bold;
	  cursor: pointer;
	  width: 80%;
	  border-bottom: 1px solid white;
	  text-align: center;
	  outline: none;
	  font-size: 20px;
	  margin-left: 20px;
	  height:50px;
	}
	.expanded {

	  max-height: 0;
	  overflow: hidden;
	  transition: max-height 0.2s ease-out;
	  background-color: #f1f1f1;
	  width: 80%;
	  margin-left: 20px;
	  text-align: center;
	}
/*
	.active, .collapsible:hover {
	  background-color: #555;
	}
*/
	.collapsible:after {
	  content: '\002B';
	  color: black;
	  font-weight: bold;
	  float: right;
	  margin-left: 5px;
	}
	
	.collapsible-button-expanded:after {
		content: "\2212";
	}
	
	.active:after {
	  content: "";
	}

		
/* CSS for Footer */
	footer {
	  background-color: #333;
	  color: white;
	  text-align: center;
	  padding: 5px 0;
	  bottom: 0;
	  width: 100%;
	  position: fixed;
  	  left: 0;
	  z-index: 1;
	}