body {
  background: #fff;
}

.about-wraper {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 0;
}

.work {
  display: flex;
  gap: 40px;
}

.work-left {
    position: relative;
    z-index: 2;
    width: 50%;
    top: 80px;
}

.work-right {
  width: 70%;
  height: auto;
}

.work-right-bl {
  position: sticky;
  width: 100%;
  height: auto;
  top: 0;
}

.work-info {
  height:55vh;
  display: flex;
  flex-direction: column;
}


/* .work-info h1{
    font-size:5rem;
    color:blue;
    line-height:60px;
}

.work-info p{
    font-size:1.5rem;
    color:#333;
    line-height:30px;
    margin-top:50px;
} */

.mission-info h3 {
  font-size: 36px;
  font-family: poppins;
  font-weight: 300;
  line-height: 36px;
  color: #000000;
}

.mission-info p {
  font-size: 16px;
  font-family: poppins;
  font-weight: 300;
  line-height: 30px;
  color: #5a4f4c;
}

.work-photo {
    position: relative;
    height: 30vw;
    width: 100%;
    top: 35px;
}

.work-photo-item {
  position: absolute;
  height: 100%;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  top:50px;
}

.work-photo-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  padding-bottom:80px;
}

.bg-blue {
  background: blue;
}
.bg-danger {
  background: red;
}
.bg-gray {
  background: #999;
}



@media screen and (max-width: 1300px) {
 .mission-info p {
    font-size: 16px;
  }
}

@media screen and (max-width: 1180px) {
    .work-info {
        height: 80vh;
    }
    
 .mission-info p {
    font-size: 14px;
    line-height: 27px;
  }
  
}

/* Responsive styles for devices with a width of 992px or less */
@media screen and (max-width: 992.5px) {
    
    #section-1 {
        height: 275px;
        padding-top: 30px;
    }
        
    .the-school-top p {
        color: #5a4f4c;
        font-size: 18px;
        line-height: 28px;
    }
    
    .the-school-top {
        width: 100%;
        margin: 0 auto;
    }

    .mission-info h3 {
        font-size: 24px;
        line-height: 30px;
    }

    .work {
        flex-direction: column;
    }

    .work-left, .work-right {
        width: 100%;
    }

    .work-right-bl {
        display: flex;
        flex-direction: column;
    }

    .work-photo {
        display: flex;
        flex-direction: column;
    }

    .work-photo-item {
        width: 100%;
        margin-bottom: 20px;
    }

    /* Specific stacking order */
    .work-info:nth-child(1),
    .work-right .work-photo-item:nth-child(1),
    .work-info:nth-child(2),
    .work-right .work-photo-item:nth-child(2) {
        order: initial;
    }
    
    .mission-info {
        max-width: 100%;
    }
        
    .work-info {
        height: 100%;
    }
    
    .work-photo-item1 img {
       width: 100%;
    }
    
    .work-left {
        top: 40px;
    }
}

@media screen and (max-width: 770px) {
    .the-school-top p {
      text-align: left;
    }
}

@media screen and (max-width: 600px) {
       #section-1 {
        height: auto;
        padding-top: 50px;
        padding-bottom: 0px;
    }
}