* {
      margin: 0;
      padding: 0;
	  font-family: 'Roboto', sans-serif;
    }
body {
		
      overflow-x: hidden;   
	  
	  
    }
    /* === First Fold Hero Section === */
	.hero {
		position: relative;
		width: 100%;
		height: 30vh;
		background: url('../image/weback.jpg') center/cover no-repeat;
		display: flex;
		align-items: center;
		padding-left: 5%;
		padding-right: 5%;
		margin-top: 10px; /* ✅ This moves the entire section down */
		z-index: 1;
	  }
    .hero-text {
      color: white;
      z-index: 2;
    }

    .hero-text h2 {
      font-size: 4rem;
    }

    .hero-text p {
      font-size: 1rem;
    }
	.volunteer-button {
		display: inline-block;
		padding: 10px 20px;
		color: white;
		background-color: transparent;
		border: 2px solid white;
		text-decoration: none;
		border-radius: 5px;
		transition: background-color 0.3s, color 0.3s;
	  }
	  
	  .volunteer-button:hover {
		background-color: white;
		color: black;
	  }
    /* === First Fold Main === */
    .first-fold {
      display: flex;
      height: 75vh;
	  background-color: white;
	  box-sizing: border-box;
    }
	.alumni-card-container {
		display: flex;
		flex-direction: row;
		gap: 1rem;
		flex-wrap: wrap; /* let cards wrap on smaller screens */
		justify-content: center; /* optional: center cards */
		max-height:30vh ;
	  }
	  
	.top {
		text-align: center;
		font-size: 2.5rem; /* adjust size as needed */
		font-weight: bold;
	  }
	  .alumni-section {
		width: 100%;
		padding: 1rem 1rem 1rem 1rem;
		/* remove flex-direction: column */
		display: block; /* or just remove display:flex */
		gap: 1rem;
		height: auto; /* or adjust if needed */
		z-index: 1;
		
	  }
			
	  .alumni-card {
		flex: 1 1 calc(33.333% - 1rem); /* 3 per row, minus gap */
		background: white;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
		box-sizing: border-box;
		padding: 1rem; /* fixed from "padding: rem;" in your code */
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 300px;
		max-height: 500px;
		margin: auto;
		text-align: center;
	  }
	  
	  /* Alumni image */
	  .alumni-card img {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		object-fit: cover;
		margin-bottom: 10px;
	  }
	  
	  /* Alumni name */
	  .alumni-card .alumni-name {
		font-weight: bold;
		font-size: 1rem;
		margin-bottom: 5px;
	  }
	  
	  /* Alumni subtitle */
	  .alumni-card .alumni-subtitle {
		font-style: italic;
		color: gray;
		margin-bottom: 10spx;
	  }
	  
	  /* Alumni paragraph */
	  .alumni-card p {
		margin-top: 0.5rem;
		font-size: 0.9rem;
		text-align: center;
		padding: 1rem;
		overflow-y: auto;
	  }
	  

    .sidebar {
      width: 30%;
      height: 90vh;
      margin-top: -18vh;
      background:#D6D6D6 ;
      color: black;
      display: flex;
      flex-direction: column;
      padding: 1rem;
      margin-left: 3rem;
	  margin-right: 1rem;
      z-index: 2;
	  font-size: medium;
	  overflow-y: auto;
    }

    /* === Second Fold === */
    .second-fold {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		padding: 2rem 4rem;
		background: #f9f9f9;
	  }
	  
	  .top-row {
		display: flex;
		gap: 1rem;
		height: 320px;
	  }
	  
	  .video-box,
	  .mid-box {
		flex: 1;
		background: #f0f0f0;
		border-radius: 12px;
		padding: 1.25rem;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
	  }
	  
	  .video-box iframe {
		width: 100%;
		height: 100%;
		border: none;
	  }
	  
	  .mid-box h2 {
		margin-bottom: 0.75rem;
		color: #222;
	  }
	  
	  .mid-box ul {
		padding-left: 1.25rem;
		list-style-type: disc;
		color: #333;
		line-height: 1.6;
		font-size: 0.95rem;
	  }
	  
	  .mid-box ul li {
		margin-bottom: 0.5rem;
	  }
	  
	  /* Light gray background container */
	  .bottom-background {
		background: lightgray;
		padding: 2rem;
		border-radius: 12px;
	  }
	  
	  /* The inner container holding left and right columns */
	  .second-fold-inner {
		display: flex;
		gap: 1rem;
	  }
	  
	  .media-side {
		width: 40%;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	  }
	  
	  .m-content {
		width: 60%;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	  }
	  
	  /* Shared styling between identical-box and small-box now sits on the container */
	  .identical-box {
		background: white;
		border-radius: 12px;
		padding: 1.25rem;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
		font-size: medium;
		color: #555;
		line-height: 1.5;
	  }
	  
	  .identical-box ul {
		margin-top: 0.5rem;
		padding-left: 1.25rem;
		list-style-type: disc;
	  }
	  
	  .bottom-row {
		display: flex;
		gap: 1rem;
	  }
	  
	  .small-box {
		flex: 1;
		max-height: 140%;
		background: white;
		border-radius: 12px;
		padding: 1.25rem 1.5rem;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
		transition: background-color 0.3s ease, box-shadow 0.3s ease;
		cursor: pointer;
	  }
	  
	  .small-box:hover {
		background: #e0e0e0;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	  }
	  
 @media (max-width: 768px) {
		/* === HERO === */
		.hero {
		  height: 30vh;
		  padding-left: 3%;
		  padding-right: 3%;
		  order: 1;
		}
		.hero-text h2 {
		  font-size: 2.5rem;
		}
		.hero-text p {
		  font-size: 0.9rem;
		}
	  
		/* === FIRST FOLD === */
		.first-fold {
		  flex-direction: column;
		  height: auto; /* allow height to adjust */
		 
		}
		.sidebar {
		  width: 85%;
		  height: auto;
		  margin: 1rem 1 2rem 1;
		  padding-top: 20vh;
		  z-index: 0;
		  order: 2;
		}
		.alumni-section {
		 
		padding: 1 1rem;
		 order: 3;
		  z-index: 0;
		  height:50vh;
		  overflow-y: auto;
		}
		.alumni-card-container {
		  display: block;
		order: 3;
		flex-direction: row;
		  gap: 1rem;
		  align-items: center;
		}
		.alumni-card {
		  flex: none;
		  max-width: 90vw;
		  width: 100%;
		  margin: 0 auto;
		  margin-top: 20px;
		  padding: 0.5rem;
		  gap: 1rem;
		}
		
		/* === SECOND FOLD === */
		.second-fold {
		  padding: 1rem 1.5rem;
		  gap: 1rem;
		 margin-top: auto;
		  order: 4;
		}
		.top-row {
		  flex-direction: column;
		  height: auto;
		}
		.video-box iframe {
		  width: 100%;
		  height: 25vh;
		  margin-bottom: 1rem;
		}
		.mid-box {
		  width: 100%;
		  height: auto;
		}
		.second-fold-inner {
		  flex-direction: column;
		}
		.media-side, .m-content {
		  width: 100%;
		}
		.bottom-row {
		  flex-direction: column;
		}
		.small-box {
		  width: 80%;
		  height: auto;
		  margin-bottom: 1rem;
		}
	  
		/* === NUMBERS (if applicable) === */
		.big-number {
		  font-size: 40px !important;
		}
		.top-text {
		  font-size: 18px !important;
		}
		.bottom-text {
		  font-size: 10px !important;
		}
		.number-row {
		  flex-wrap: wrap;
		  gap: 10px;
		  padding: 10px;
		  overflow: hidden;
		}
	  
		/* === NAVBAR tweaks === */
	]