@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@700&display=swap');

body{
   margin:0;
   padding:0;
   font-family: 'Inter', sans-serif;
   position:relative;
   background-image: url('../images/about/About_Background.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.goback{
  font-size: 20px;
  padding: 0 5%;
  padding-top: 5%;
  width: 100%;
  display: -webkit-box;
  align-items: center;
}

.goback i{
  padding-top: 10px;
  cursor: pointer;
  color: #696984;
}

.goback h4{
  color: #696984;
  padding-left: 25px;
  text-decoration: none;
}



.container1{
   width:100%;
}
.container1 h1{
   font-size: 50px
}

.mission{
   width:100%;
   height:auto;
}
.mission .right{
   padding:2% 0;
   width: 60%;
   display:inline-block;
}
.mission .left{
   float:left;
   width: 40%;
   display:inline-block;
}
.mission .left img{
    height: 350px;
    width: 350px;
    margin-top: 10%;
    margin-left: 20%;
}
.mission .right h1{
  color: #494949;
   margin: 0 auto;
   width:80%
}
.mission .right p{
  color: #696984;
   font-size: 20px;
   margin:40px auto;
   width:80%;
   padding-right: 10%;
   line-height: 198%;
   letter-spacing: 2%;
}

.about{
   width:100%;
   height:auto;
}
.about .left{
   padding:2% 0;
   float:left;
   width:60%;
   display:inline-block;
}
.about .right{
   width:40%;
   display:inline-block;
}
.about .right img{
    height: 350px;
    width: 200px;
    margin-top: 10%;
    margin-left: 20%;
}


.about .left p{
   color: #696984;
   font-size: 20px;
   margin: 40px auto;
   width: 80%;
   padding: 5% 10%;
   line-height: 198%;
   letter-spacing: 2%;
}

.mission1{
   width:100%;
   height:auto;
}
.mission1 .right{
   padding:2% 0;
   width:60%;

   display:inline-block;
}
.mission1 .left{
   float:left;
   width:40%;
   display:inline-block;
}
.mission1 .left img{
  height: 350px;
  width: 350px;
  margin-left: 25%;
  margin-bottom: 10%;
}

.mission1 .right .bullet{
  display: flex;
  align-items: center;
  margin-left: 10%;
  flex-wrap: nowrap;
}

.mission1 .right p{
  color: #696984;
   font-size: 18px;
   margin: 0px auto;
   width:80%;
   padding-right: 5%;
}

.mission1 .right .bullet p{
   margin: 0 0;
}

.mission1 .right img{
  margin-top: 2%;
  height: 100px;
  width: 100px;
}


.clear{
    clear: both;
}




1
/* media */
@media(max-width:1200px){
  .mission .right h1{
    text-align:center;
  }
  .mission .right p{
     font-size: 18px;
     margin:20px auto;
  }

   .mission1 .right p{
      font-size: 18px;
      margin:20px auto;
   }
   .mission1 .right img{
     font-size: 18px;
   }
   .about .left p{
      font-size: 18px;
      margin:20px auto;
   }
}



@media(max-width:768px){
  .goback{
      padding-top: 25%;
  }

  .mission .left{
    display: none;
  }
  .mission1 .left img{
      height: 250px;
      width: 250px;
      margin-top: 5%;
      margin-left: 15%;
  }

   .about .left{
   width:100%;
}
  .about .left p{
  font-size: 16px;
  padding: 0 0;
}
   .about .right{
   width:100%;
}
  .mission .right h1{
    margin-top: 20%;
  text-align:center;
}

  .mission .left{
  width:100%;
}
  .mission .right{
  width:100%;
}
.mission .right p{
  font-size: 16px;
  padding: 0 0;
}

  .mission1 .left{
   width:100%;
}
   .mission1 .right{
   margin-top: 5%;
   width:100%;
}
.mission1 .right p{
  font-size: 14px;
  padding: 0 0;
}
.mission1 .right img{
  font-size: 20px;
}
}
