@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/facilities/Facilities_Background.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.goback{
  font-size: 20px;
  padding: 0 5%;
  padding-top: 5%;
  margin-bottom: 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;
   margin-bottom: 5%;
}
.mission .right{
   width: 35%;
   display:inline-block;
   background: white;
   border: 0 none;
   border-radius: 10px;
   box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.05);
   box-sizing: border-box;
   font-weight: bold;
   margin-top: 5%;
   margin-left: 5%;
   padding-bottom: 3%;
}

.mission .right ul{
  width: 80%;
  margin-left: 10%;
}

.mission .right li{
  margin-top: 1%;
  font-size: 20px;
  color: #696984;
  font-weight: normal;
}

.mission .left{
   float:left;
   width: 40%;
   display:inline-block;
   margin-left: 5%;
}
.mission h3{
   width: 40%;
   margin-left: 20%;;
   font-weight: bold;
   font-size: 32px;
}
.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: 75%;
   line-height: 180%;
   letter-spacing: 2%;
}

.clear{
    clear: both;
}

.section {
 max-width: 80%;
 margin:0 auto;
 padding:6% 2%;
}

.img-0 {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.6), rgba(210,131,124,0.6), rgba(134,41,34,0.6)), url('../images/1.jpg');
  background-size: cover;
  background-position: center;
}

.grid0 {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 width: 100%;
}

.grid0 li {
 width: 96%;
 height: 280px;
 display: inline-block;
 margin: 20px;
}

.info {
	position: absolute;
	width: inherit;
	height: inherit;
  display: flex;
  align-items: flex-start;
}

.info h3 {
  font-weight: 600;
	color: #fff;
	font-size: 42px;
  padding-left: 5%;
  padding-top: 3%;
}

.info i{
  font-size: 40px;
  margin-left: 2%;
  padding-top: 5%;
  color: #FFFFFF;
  cursor: pointer;
}

/* 3*2 grid */
.grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}

.grid li {
 width: 380px;
 height: 280px;
 display: inline-block;
 margin: 20px;
}

.box {
	width: 100%;
	height: 100%;
	position: relative;
  border-radius: 15px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  -webkit-transition: 0.3s ease-in-out,
  -webkit-transform 0.3s ease-in-out;
  -moz-transition:  0.3s ease-in-out,
  -moz-transform 0.3s ease-in-out;
  transition: all 0.3s ease-in-out,
  transform 0.3s ease-in-out, ;
}

.box:hover {
	transform: scale(1.05);
}

.img-1 {
 background-image: url('../images/1.jpg');
 background-size: cover;
 background-position: center;
}

.img-2 {
  background-image: url('../images/3.jpg');
  background-size: cover;
  background-position: center;
}

.img-3 {
  background-image: url('../images/4.jpg');
  background-size: cover;
  background-position: center;
}

.img-4 {
  background-image: url('../images/2.jpg');
  background-size: cover;
  background-position: center;
}

.img-5 {
  background-image: url('../images/5.jpg');
  background-size: cover;
  background-position: center;
}

.img-6 {
  background-image: url('../images/6.jpg');
  background-size: cover;
  background-position: center;
}

/* media */
@media(max-width:1200px){
  .goback{
      padding-top: 15%;
  }
  .mission .right p{
     font-size: 18px;
     margin:20px auto;
  }

  .mission .right h1{
    margin-top: 20%;
  text-align:center;
}

  .mission .left{
  width: 90%;
}
.mission .left h3{
width: 80%;
margin-left: 2%;
}
.mission .left img{
  height: 350px;
  width: 100%;
  margin-left: 0;
}
  .mission .right{
  width: 90%;
  margin-left: 5%;
}
.mission .right p{
  font-size: 16px;
  padding: 0 0;
}
.mission .right li{
  font-size: 16px;
  padding: 0 0;
}

.section{
  margin-left: 10%;
  width: 80%;
}

.grid0{
  margin-left: 0;
}

.grid0 li {
  margin-left: 0;
  width: 100%;
  height: 380px;
}

.grid{
  margin-left: 0;
}

.grid li {
  margin-left: 0;
  width: 100%;
  height: 380px;
}
.info{
  display: inline-block;
}
.info h3 {
  font-size: 32px;
}
.info i{
  padding-top: 7%;
  font-size: 30px;
}
}



@media(max-width:768px){
  .goback{
      padding-top: 25%;
  }

  .mission .right h1{
    margin-top: 20%;
  text-align:center;
}

  .mission .left{
  width: 90%;
}
.mission .left h3{
width: 80%;
margin-left: 2%;
}
.mission .left img{
  height: 350px;
  width: 100%;
  margin-left: 0;
}
  .mission .right{
  width: 90%;
  margin-left: 5%;
}
.mission .right p{
  font-size: 16px;
  padding: 0 0;
}
.mission .right li{
  font-size: 16px;
  padding: 0 0;
}

.section{
  margin-left: 10%;
  width: 80%;
}

.grid0{
  margin-left: 0;
}

.grid0 li {
  margin-left: 0;
  width: 100%;
  height: 380px;
}

.grid{
  margin-left: 0;
}

.grid li {
  margin-left: 0;
  width: 100%;
  height: 380px;
}

.info{
  display: inline-block;
}
.info i{
  padding-top: 7%;
  padding-left: 5%;
}
}