.flip-card {
  background-color: transparent;
  width: 100%;
  height: 557px;
  perspective: 1000px;
  margin-bottom: 170px;
}
body {
  background: #fff;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 1px 2px 8px #eee;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card {
  margin-top: -40px;
}
.project-flib {
  position:absolute; left: 0; right:0; bottom: 24px;  margin: 0 auto;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
  background-color: transparent;
  color: black;
}

.flip-card-back {
  background-color: #fff;
  color: #161616;
  transform: rotateY(180deg);
}

.container-fluit2 {
  background-color: rgb(238, 238, 238);
  padding-bottom: 50px;
}

.project1 {
  padding: 40px;
}
.project2 {
  padding: 40px;
}
.project3 {
  padding: 40px;
}

@media (max-width: 490px) {
    .flip-card {
  background-color: transparent;
  width: 100%;
  height: 622px;
  perspective: 1000px;
  margin-bottom: 40px;
}
.project1, .project2,  .project3, .project4,  .project5, .project6 {
  padding: 10px;
}
.text-project1 {
  font-size: 14px;
}
}
@media (max-width: 390px) {
    .p-5 {
  padding: 2rem !important;
}
.project-text {
  height: 300px;
  overflow: auto;
}
.b-project {
  padding-bottom: 0;
}
.flip-card {
  background-color: transparent;
    width: 100%;
    height: 490px;
    perspective: 1000px;
    margin-bottom: 55px;
}
}