.welcome-about{
    width: 100%;
    height: 91vh;
    position: relative;
}
.title-welcome{
    width: 100%;
    height: 25vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 480px){
  .title-welcome{
    height: 15vh;
  }
}
.title-welcome h1{
    font-size: 35px;
}
.caption-welcome{
    width: 100%;
    height: 25vh;
    padding-left: 200px;
    padding-right: 200px;
}
@media screen and (max-width: 480px){
  .caption-welcome{
    padding-left: 25px;
    padding-right: 25px;
  }
}
.caption-welcome h2{
    font-size: 25px;
    text-align: justify;
    text-align-last: center;
}
.welcome-about a{
    position: absolute;
    left: 45%;
    bottom: 10%;
    font-size: 20px;
    text-align: center;
}
.welcome-about a i {
    font-size: 20px;
}
@keyframes floating {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(10px);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  .welcome-about a i {
    animation: floating 2s ease-in-out infinite;
  }
  @media screen and (max-width: 480px){
    .welcome-about a{
      left: 35%;
      bottom: 6%;
    }
  }
  .mission , .vision , .story{
    width: 100%;
    height: 100vh;
    display: flex;
  }
  @media screen and (max-width: 480px){
    .mission , .vision , .story{
      flex-direction: column;
      height: 160vh;
    }
  }
  .img-mission , .img-vision , .img-story{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .img-in-mission , .img-in-vision , .img-in-story{
    width: 90%;
    height: 70%;
    border-radius: 20px;
    border: solid 5px #9A6E66;
  }
  .img-in-mission{
    background: url(/image/mission\ copy.png);
    background-position: center;
    background-size: cover;
  }
  .img-in-vision{
    background: url(/image/vision\ copy.png);
    background-position: center;
    background-size: cover;
  }
  .img-in-story{
    background: url(/image/our.\ story\ copy.png);
    background-position: center;
    background-size: cover;
  }
  .caption-mission , .caption-vision , .caption-story{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .title-mission , .title-vision , .title-story{
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 72px;
    
  }
  .title-mission h1 , .title-vision h1 , .title-story h1{
    font-size: 35px;
  }
  .p-mission , .p-vision , .p-story{
    width: 80%;
    height: 40vh;
  }
  .p-mission h2{
    font-size: 25px;
    text-align: justify;
    text-align-last: center;
  }
  .p-vision h2{
    font-size: 24px;
    text-align: justify; 
    text-align-last: center;
  }
  .p-story h2{
    font-size: 20px;
    text-align: justify; 
    text-align-last: center;
  }
  .p-vision h2 span{
    padding-top: 15px;
    font-size: 24px;
  }
  @media screen and (max-width: 399px){
    .welcome-about{
      height: 130vh;
    }
    .title-welcome{
      height: 30vh;
      text-align: center;
    }
    .mission{
      height: 125vh;
    }
    .img-mission , .img-vision , .img-story{
      width: 100%;
      height: 50%;
    }
    .caption-mission{
      width: 100%;
    }
    .p-mission h2{
      font-size: 21px;
    text-align: center;
    }
    .title-mission{
      margin-top: 0px;
    }
    .vision{
      flex-direction: column-reverse;
      height: 170vh;
    }
    .caption-vision{
      width: 100%;
    }
    .title-vision{
      margin-top: 0px;
    }
    .p-vision h2{
      font-size: 21px;
      text-align: center;
    }
    .story{
      height: 204vh;
    }
    .caption-story{
      width: 100%;
    }
    .title-story{
      margin-top: 0px;
    }
    .p-story h2{
      font-size: 21px;
      text-align: center;
    }
  }
  @media screen and ( min-width:400px) and (max-width: 480px){
    .welcome-about{
      height: 78vh;
    }
    .img-mission , .img-vision , .img-story{
      width: 100%;
    }
    .caption-mission{
      width: 100%;
    }
    .p-mission h2{
      font-size: 21px;
    text-align: center;
    }
    .title-mission{
      margin-top: 0px;
    }
    .vision{
      flex-direction: column-reverse;
    }
    .caption-vision{
      width: 100%;
    }
    .title-vision{
      margin-top: 0px;
    }
    .p-vision h2{
      font-size: 21px;
      text-align: center;
    }
    .story{
      margin-top: 130px;
    }
    .caption-story{
      width: 100%;
    }
    .title-story{
      margin-top: 0px;
    }
    .p-story h2{
      font-size: 21px;
      text-align: center;
    }
  }