.mission-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding:30px 30px;
    width: 100%;
    height: 320px;
    background-image: url('missionbg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  
  /*.about-us-container {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s, transform 0.5s;
  }
  
  .about-us-container.reveal {
    opacity: 1;
    transform: translateY(0);
  }*/
  
  .mission-content {
  flex: 1 1 200px;
  margin-right: 100px;
  margin-left: 100px;
  display: inline-block;
  }
  .missionheading{
    color: rgb(160, 42, 12);
    font-size: 22px;
    margin:1%;
  }
  .missioncontent p{
    color:black;
    font-size: 18px;
    
  }
  .underline {
    text-decoration: underline;
  }
  .mission-images {
    flex: 1;
    display: flex;
    justify-content: center;
    margin-left: 10px;
    position: relative;
    width: fit-content; /* Adjust width as needed */
    height: 100%; /* Adjust height as needed */
    overflow: hidden;
  }
  
  .mission-images .image {
    max-width: 280px;
    height: 250px;
  }
  
  /*.about-us-images {
    position: relative;
    width: 80%; /* Adjust width as needed 
    height: 100%; /* Adjust height as needed 
    overflow: hidden;
  }*/
  
 /* .about-us-images img {
    width: 80%;
    height: 100%;
    object-fit: cover;
    /* Adjust animation duration as needed 
  }*/
  @media (min-width: 320px) and (max-width: 480px) {

    .mission-container {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      padding:1px 1px;
      height: 550px;
      background-image: url('missionbg.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
   .mission-content {
    margin-right: 35px;
    margin-left: 35px;
    flex:none;
      }
      .missionheading h5{
        color: rgb(160, 42, 12);
        font-size: 20px;
      }
      .missioncontent p{
        color:black;
        font-size: 15px;
       
      }
      .underline {
        text-decoration: underline;
      }
      .mission-images {
        top: auto;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }
      
      .mission-images .image {
        max-width: 280px;
        height: 80%;
      }
  }
  @media (min-width: 481px) and (max-width: 768px){
    .mission-container {
      display:flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      height: 448px;
      background-image: url('missionbg.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
   .mission-content {
    margin-right: 20px;
    margin-left: 20px;
    flex:none;
      }
      .missionheading h5{
        color: rgb(160, 42, 12);
        font-size: 20px;
      }
      .missioncontent p{
        color:black;
        font-size: 15px;
       
      }
      .underline {
        text-decoration: underline;
      }
      .mission-images {
        top: 3%;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }
      
      .mission-images .image {
        max-width: 280px;
        height: 80%;
      }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .mission-container {
    display:flex;
    justify-content: center;
    width: 100%;
    height:311px;
    background-image: url('missionbg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .mission-content {
    margin-right: 20px;
    margin-left: 20px;
    height: fit-content;
    }
    .missionheading h5{
      color: rgb(160, 42, 12);
      font-size: 20px;
    }
    .missioncontent p{
      color:black;
      font-size: 15px;
     
    }
    .underline {
      text-decoration: underline;
    }
    .mission-images {
      justify-content: center;
      position: relative;
      overflow: hidden;
      height: fit-content;
      bottom: -6%;
    }
    
    .mission-images .image {
      max-width: 280px;
      height: 223px;
    }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .mission-container {
    display:flex;
    justify-content: center;
    width: 100%;
    height: 350px;
    background-image: url('missionbg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .mission-content {
    margin-right: 20px;
    margin-left: 20px;
    height: fit-content;
    }
    .missionheading h5{
      color: rgb(160, 42, 12);
      font-size: 22px;
    }
    .missioncontent p{
      color:black;
      font-size: 18px;
     
    }
    .underline {
      text-decoration: underline;
    }
    .mission-images {
      justify-content: center;
      position: relative;
      overflow: hidden;
      height: fit-content;
      bottom: -4%;
    }
    
    .mission-images .image {
      max-width: 280px;
      height: 250px;
    }
}