/* Base styles for container */
	  body {
		margin: 0;
		font-family: Arial, sans-serif;
		font-size: 18px;
	  }
	  a {
	  color: black;           /* Make the text black */
	  text-decoration: none;  /* Remove underline */
	  font-size: 10 px
	}

/* Nav bar setting */
	/* Fixed navigation styles for large screens */
		.header {
		  position: fixed;
		  top: 0;
		  width: 85%;
		  height: 90px;
		  display: flex;
		  align-items: center;
		  padding: 20px 20px;
		  box-shadow: 0 2px #FFDA9F;
		  z-index: 999;
		  margin: 0 auto;
		  left: 0;
		  right: 0;
		  background-color: #FFFFFF;
		}
	/* Left side for image */
	    .nav-left {
		  flex: 1;
		  display: flex;
		  align-items: center;
		  padding: 0 10px;
	    }
	    .nav-left img {
		  max-height: 85px;		
	    }
	/* Right side for links */
	    .nav-right {
	      flex: 1;
		  display: flex;
		  align-items: center;
		  justify-content: flex-end;
		  padding: 0 25px;
		  gap: 10px;
	    }
	    .nav-links {
		  display: flex;
		  gap: 12px;
	    }
	    .nav-right a {
		  text-decoration: none;
		  color: #FFFFFF;
		  font-size: 18px;
	    }
	/* Hamburger menu button (hidden on large screens) */
	    .menu-toggle {
		  display: none;
		  flex-direction: column;
		  cursor: pointer;
		  width: 30px;
		  height: 25px;
		  justify-content: space-between;
	    }
	    .menu-toggle span {
		  display: block;
		  height: 3px;
		  background: #000;
		  border-radius: 2px;
	    }
	/* Nav buttons */
		.button {
		  text-align: center;
		  border-radius: 8px;
		  padding: 13px 10px;
		  font-size: 3px;
		  font-weight: 700;
		}
		.button.is-00 {
		  background-color: #FF9C00;
		}
		.button.is-01 {
		  background-color: #FFB223;
		}
		.button.is-02 {
		  background-color: #F89100;
		}
		.button.is-03 {
		  background-color: #F6B14F;
		}
		.button.is-04 {
		  background-color: #FFC8AA;
		}

/* Footer setting */
	.footer {
	  bottom: 0; /* Position at the bottom of the viewport */
	  width: 85%; /* Full width across the viewport */
	  height: 60px; /* Same height as header, can be adjusted */
	  display: flex;
	  align-items: center;
	  padding: 20px;
	  box-shadow: 0 -2px #FFDA9F; /* Shadow on top to separate footer from content */
	  z-index: 999;
	  background-color: #FFFFFF;
	  margin: 0 auto;
	  left: 0;
	  right: 0;
	}
	

/*Section general setting*/
	.main {
		background: url('../img/section_bg.jpg') no-repeat center;
		background-size: cover; /* scales image to cover entire section */
	}
	section {
		padding-top: 120px;	
		width:70%;
		margin: 0 auto;
	}
	h1 {
		font-weight: 700;
		line-height: 1.2;
		color: #EB5F23;
		font-size: 45px;
		font-family: Arial Black;
	}
	h2 {
		font-weight: 700;
		line-height: 1.2;
		color: #537E62;
		font-size: 30px;
		font-family: Arial Black;
	}
	.container {
		display: flex;
		width: 100%;
	}
	.column_33 {
		flex: 0 0 33%;
		padding: 10px;
	}
	.column_67 {
		flex: 0 0 67%;
		padding: 10px;
	}
	.column_25 {
		flex: 0 0 25%;
		padding: 10px;
	}
	.column_75 {
		flex: 0 0 75%;
		padding: 10px;
	}

/* Home setting*/


.slogan {
  max-width: 900px;
  width: 100%; /* ensures it scales within the section */
  height: auto; /* maintains aspect ratio */
}

/*Event setting*/
	/* slideshow */
		/* Slideshow container */
		.slideshow-container {
		  max-width: 500px;
		  position: relative;
		  margin: 0 auto;
		  left: 0;
		  right: 0;
		}
		.posters {
		  display: block;           /* Make image a block element */
		  margin-left: auto;        /* Center horizontally */
		  margin-right: auto;
		  max-height: 550px;        /* existing style */
		  width: auto;              /* maintain aspect ratio */
		}
		/* Hide the images by default */
		.mySlides {
		  display: none;
		}
		/* Next & previous buttons */
		.prev, .next {
		  cursor: pointer;
		  position: absolute;
		  top: 50%;
		  width: auto;
		  margin-top: -22px;
		  padding: 16px;
		  color: white;
		  font-weight: bold;
		  font-size: 18px;
		  transition: 0.6s ease;
		  border-radius: 0 3px 3px 0;
		  user-select: none;
		  background-color: #BBB;
		}
		/* Position the "next button" to the right */
		.next {
		  right: 0;
		  border-radius: 3px 0 0 3px;
		}
		
		/* The dots/bullets/indicators */
		.dot {
		  cursor: pointer;
		  height: 15px;
		  width: 15px;
		  margin: 0 2px;
		  background-color: #BBB;
		  border-radius: 50%;
		  display: inline-block;
		  transition: background-color 0.6s ease;
		}
		.active, .dot:hover {
		  background-color: #717171;
		}
		/* Fading animation */
		.fade {
		  animation-name: fade;
		  animation-duration: 1.5s;
		}
		@keyframes fade {
		  from {opacity: .4}
		  to {opacity: 1}
		}
	.bio{
		line-height: 1.5;
	}

/* Research setting */
	.member_img {
		height: 150px;
	}

/* Event subpage setting */








/* For small screens*/
    @media (max-width: 600px) {
	  .nav-links {
	    display: none;
	    position: absolute;
	    top: 100%;
	    right: 0;
	    flex-direction: column;
	    width: 150px;
	    box-shadow: 0 0 5px rgba(0,0,0,0.2);
	}
	/* Show menu when active */
	  .nav-links.show {
	    display: flex;
	  }
	/* Show hamburger icon */
	  .menu-toggle {
	    display: flex;
	  }
	  .header{		
		  position: fixed;
		  top: 0;
		  width: 90%;
		  height: 70px;
		  display: flex;
		  align-items: center;
		  padding: 20px 20px;
		  box-shadow: 0 2px #FFDA9F;
		  z-index: 999;
		  margin: 0 auto;
		  left: 0;
		  right: 0;
		  background-color: #FFFFFF; 
	  }
	  .nav-left img {
		  max-height: 70px;		
	    }
	  section {
	      margin-top: 70px;	
		  width:90%;
		  margin: 0 auto;
		  left: 0;
		  right: 0;
	  }
	
	/* Arrange the columns horizontally*/
	  .container {
        flex-direction: column;
      }
      .column_33, .columnl_67,  {
        flex: 1 1 100%;
      }
    }