* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body,
html {
  font-size: 15px;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
  color: #333333;
  line-height: 1.6;
  scroll-behavior: smooth;
}

body::-webkit-scrollbar{
  width: 15px;
}

body::-webkit-scrollbar-thumb{
  background-color: #ffc4c4;
}

.up.active{
  transition: 0.3s;
  display: block;
  opacity: 0.68;
}
.up:hover{
  top: 88%;
}

.up{
  transition: cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.3s;
  display: none;
  cursor: pointer;
  top: 90%;
  left: 95%;
  position: fixed;
  border-radius: 50%;
  outline: none;
  border: none;
  height: 60px;
  width: 60px;
  background-color: #ffd359;
}

.intro{
  background: url('images/MoGo_FREE_Template_by_Laaqiq_01.jpg') center no-repeat;
  height: 100vh;
  width: 100%;
}
.logo{
  color: #ffffff;
  font-size: 2.5rem;
}
.header{
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.link{
  position: relative;
  color: #ffffff;
  margin-left: 1.4rem;
}
.link:after{
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  left: 0;
  display: block;
  background-color: #fce38a;
  transition: width 0.3s;
}
.link:hover:after{
  width: 100%;
}
.link:hover{
  color: #fce38a;
}

.content{
  height: 87vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.intro-subtitle{
  text-align: center;
  font-size: 3.4rem;
  font-family: 'Kaushan Script';
  color: #ffffff;
}
.intro-title{
  position: relative;
  text-align: center;
  color: #ffffff;
  font-size: 5rem;
}
.intro-title:after{
  content: "";
  background-color: #fff;
  height: 2px;
  width: 10%;
  left: 45%;
  margin-top: 1.1rem;
  display: block;
  position: absolute;
}
.wrapper{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 10rem;
}
.btn-more{
  cursor: pointer;
  color: #ffffff;
  font-weight: bold;
  width: 10.1rem;
  height: 2.5rem;
  margin-top: 4rem;
  outline: none;
  text-align: center;
  border: 2px solid #ffffff;
  background-color: rgba(255, 255, 255, 0);
  transition: cubic-bezier(0.89, 0.3, 0.6, 1) 0.3s;
}
.btn-more:hover{
  background-color: #ffb758;
  transform: scale(1.15);
  transition: cubic-bezier(0.23, 1, 0.320, 1) 0.3s;
}


/* Main Content */
.images-about{
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
.about-image{
  margin-left: 15px;
}
.subtitle{
  text-align: center;
  font-family: 'Kaushan Script';
  color: #333333;
}
.title{
  color: #333333;
  font-size: 2.5rem;
  text-align: center;
}
.context{
  color: #999999;
  margin-top: 1rem;
  text-align: center;
}

.info{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10rem;
  height: 15rem;
  background: #95e1d3;
}
.item{
  margin-left: 5rem;
}
.item-title{
  text-align: center;
  font-size: 4rem;
  color: #ffffff;
}
.item-subtitle{
  color: #ffffff;
  font-weight: bold;
}
.cards{
  margin-top: 2rem;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}
.card{
  width: 30%;
  margin-top: 2rem;
  margin-left: 1.7rem;
}
.card-title{
  font-size: .9rem;
}
.card-subtitle{
  font-size: 1rem;
}
.team{
  display: flex;
  flex-direction: column;
}
.person{
  margin-left: 2rem;
}
.team-mates{
  margin-top: 7rem;
  justify-content: center;
  display: flex;
}
.name{
  text-align: center;
  font-weight: normal;
  font-size: 1rem;
}
.role{
  text-align: center;
  font-weight: lighter;
  color: #999999;
  font-style: italic;
  font-size: .95rem;
}
.works{
  margin-top: 10rem;
}
.images-block{
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
  margin-top: 7rem;
}
.work-image{
  margin-left: -4px;
  width: 479px;
}


.card{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.client-cards{
  display: flex;
  margin-top: 5rem;
}
.client-image{
  background: #999999;
  color: #999999;
  height: 80px;
  width: 80px;
  border-radius: 50%;
}
.client-name{
  border-bottom: 2px solid #fce38a;
  position: relative;
  display: inline-block;
}
.client-content{
  text-align: center;
}


/* Footer */
.footer{
  display: flex;
  margin-top: 10rem;
  justify-content: space-around;
  align-items: flex-end;
  padding-bottom: 3rem;
}
.footer-section1{
  display: flex;
  flex-direction: column;
  width: 32%;
}
.footer-title{
  font-size: 1.7rem;
  color: #999999;
}
.footer-subtitle{
  font-size: .8rem;
  color: #999999;
}
.footer-nav{
  display: flex;
  flex-wrap: wrap;
}
.footer-link{
  position: relative;
  color: #252525;
  margin-left: 1rem;
}
.footer-link:after{
  content: "";
  display: block;
  left: 0;
  height: 2px;
  width: 0;
  position: absolute;
  background-color: #fc8a8a;
  transition: width 0.3s;
}
.footer-link:hover:after{
  width: 100%;
}





@media screen and (max-width: 859px){
  .intro-subtitle{
    font-size: 2rem;
  }
  .intro-title{
    font-size: 2.5rem;
  }
  .info{
    align-items: center;
    justify-content: center;
    height: 25rem;
    flex-direction: column;
  }
  .team-mates{
    flex-direction: column;
    align-items: center;
  }
  .person{
    margin-top: 3rem;
  }
  .client-cards{
    flex-direction: column;
    align-items: center
  }
  .up.active{
    left: 85%;
  }
}
@media screen and (max-width: 456px){
  .header{
    flex-direction: column;
  }
  .link{
    font-size: 1rem;
    margin-left: .8rem;
  }
  .logo{
    font-size: 1.7rem;
  }
  .intro-title{
    font-size: 2rem;
  }
  .intro-subtitle{
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 1331px){
  .images-about{
    width: 55%;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .about-image{
    margin-top: 1.2rem;
  }
  .person-image{
    width: 210px;
  }
  .up{
    left: 90%;
  }
}
@media screen and (max-width: 1014px){
  .info{
    justify-content: center;
  }
  .item-title{
    text-align: center;
    font-size: 2rem;
    color: #ffffff;
  }
  .item-subtitle{
    font-size: .77rem;
  }
}
@media screen and (max-width: 383px){
  .cards{
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .card-subtitle{
    width: 100%;
  }
  .up.active{
    left: 78%;
  }
}