.work-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0px;
  overflow-x: hidden;
  width: 100%;
  margin: 10%;
}
@media (max-width: 400px) {
  .section-title-wrap-2 h2{
    font-size: 3rem;
        text-align: center;
  }
  div.section-title-wrap-2 p{
    font-size: 1rem;
        text-align: center;
  }
}

.box{
  background-color: var(--clr);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 700px;
  height: 400px;
  margin: 10px 0px 10px 0px;
  border-radius: 50px;
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
  transform: translateX(200%);
  transition: transform 0.6s ease-in-out;
}

@media only screen and (max-width: 767px) {
  .box {
    width: 100%;
    height: auto;
    max-width: 700px;
    height: 400px;
  }
}
.box:nth-of-type(even){
  transform: translateX(-200%);

}
.box.show{
  transform: translateX(0);
}
/* --clr: */
.color0 {
   border:5px solid #0e0e0e;
}
.color1 {
   border:5px solid #dddddd;
}

.color3 {
  border:5px solid #2BE29C;
}
.color4 {
  border: 5px solid #0e0e0e;
}


.card{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all.2s ease-in-out;
}
.card:hover{
  transform: scale(1.3);
}
.card h3{
  font-size: 2rem;
  font-weight: 400;

}
.card p{
  color: #0e0e0e;
  font-weight: 200;
  font-size: 1rem;
  margin: 5%;
}

.box,.heading-project{
  font-family: 'Anybody';
  font-size: 2em;
}
.par-work{
  font-family: 'Roboto';
}