@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

.mainPart1 {
  width: 100%;
  height:600px;
  box-sizing: border-box;
 
}



/*.mainPart1 img {*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  object-fit: fill; */
 
/*}*/



.mainPart1 img{
 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  
}







.mission-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 40px;
  max-width: 1200px;
  margin: auto;
  gap: 40px;
  margin-top:60px;
}



.text-content {
  flex: 1 1 50%;
}

h2{
    
   font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size:20px;
  font-style: normal;
}

.intro{
    
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size:17px;
  font-style: normal;
  color:black;
}

.text-content h2 {
  font-size: 2rem;
  color: #1e1e1e;
  margin-bottom: 10px;
}



.mission-points {
  list-style: none;
  padding: 0;
}

.mission-points li {
  margin-bottom: 15px;
  font-size: 1rem;
  color: #444;
}

.icon {
  color: green;
  margin-right: 8px;
  font-size: 1.2rem;
}

.image-content {
  flex: 1 1 40%;
  text-align: center;
}

.image-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}








.vision-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 40px;
  max-width: 1200px;
  margin: auto;
  gap: 40px;
  margin-top:20px;
}

.image-content {
  flex: 1 1 45%;
}

.image-content img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.text-content {
  flex: 1 1 50%;
}




.vision-points {
  list-style: none;
  padding: 0;
}

.vision-points li {
  margin-bottom: 15px;
  font-size: 1rem;
  color: #444;
}

.icon {
  color: green;
  margin-right: 8px;
  font-size: 1.2rem;
}


@media(max-height:776px){
    
    .mission-section{
        
        margin-top:30px;
    }
    
   
    
}

@media (max-width: 768px) {
  .vision-section {
    flex-direction: column; /* stack items vertically on mobile */
  }

  .text-content {
    order: 1; /* text first */
  }

  .image-content {
    order: 2; /* image second */
  }
}

@media(max-width:776px){
    
    .mainPart1{
        margin-top: 80px;
        width: 100%;
        height:240px;
    }
    


  .margin1{
      
      margin-top:0;
  }


.mainPart1 img{
 
  margin-top:5px;
  width: 100%;
  height: 100%; 
  
 
}}