main{
 margin-top: 5rem;
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

section{
width: 100%;
}

.heroSection{
width: 100%;
height: 100vh;
position: relative;
}

.heroImgContainer{
 width: 100%;
 height: 100%;
 filter: brightness(30%);
}

.heroImgContainer img{
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.heroSection h1{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: white;
 font-size: 4rem;
 text-align: center;
 width: 80%;
}
.medicineProgram{
 padding: 4rem 1rem;
}

.medicineProgram h2{
 text-align: center;
 font-size: xx-large;
 margin-bottom: 2rem;
}

.programs{
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 1rem;
 flex-wrap: wrap;
}

.program{
 width: calc(100% / 3 - 1rem);
 min-width: 300px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.program img{
 width: 100%;
 height: 100%;
 object-fit: cover; 
}

.getInvolved{
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 padding: 4rem 1rem;
 background: #F3F1F1;
}

.getInvolved h2{
 text-align: center;
 font-size: xx-large;
 margin-bottom: 3rem; 
}

.content{
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 gap: 2rem;
}
.content p{
 text-align: center;
}

@media screen and (max-width: 768px)  {
 .heroSection h1{
  color: white;
  font-size: 2rem;
  width: 90%;
 }
 .medicineProgram{
  padding: 3rem .5rem;
 }

 .programs{
  gap: 1.5rem;
 }

 .getInvolved h2{
  text-align: center;
  font-size: x-large;
  margin-bottom: 2rem; 
 }
 
}