@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&display=swap");
/* body {
  font-family: "Oswald", sans-serif;
  background-color: #212121;
}
body section {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
body section .row {
  align-items: center;
  height: 100vh;
} */

.card_flyoff .cover .unit-4-icon {
  position: absolute;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  left: 50%;
  top: 40px;
}
.card_flyoff .cover .unit-4-icon .icon-wrap {
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 50%;
  display: inline-block;
  background-color: #4285f4;
  background-color: #f1f1f1;
  -webkit-box-shadow: 0 4px 20px -5px rgba(66, 133, 244, 0.4);
  box-shadow: 0 4px 20px -5px rgba(66, 133, 244, 0.4);
}
.card_flyoff .cover .unit-4-icon .icon-wrap span {
  font-size: 2rem;
  position: absolute;
  top: 50%;
  color: #fff !important;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.card_flyoff {
  position: relative;
  /* height: 230px !important; */
  height: 15rem;
  max-height: 300px;
  width: 100%;
  margin: 10px 0;
  transition: ease all 2.3s;
  perspective: 1200px;
  z-index: 1;
}
.card_flyoff:hover .cover {
  transform: rotateX(0deg) rotateY(-180deg);
  border-radius: 10px;
}
.card_flyoff:hover .cover:before {
  transform: translateZ(30px);
}
/* .card_flyoff:hover .cover:after {
  background-color: #f1f1f1;
} */
.card_flyoff:hover .cover h3 {
  transform: translateZ(100px);
}
.card_flyoff:hover .cover .price {
  transform: translateZ(60px);
  /* display: none; */
}
.card_flyoff:hover .cover a {
  transform: translateZ(-60px) rotatey(-180deg);
}
.card_flyoff .card-back {
  display: none;
}
.card_flyoff:hover .card-back{
  display: flex;
}
.card_flyoff .cover {
  /* position: relative; */
  position: absolute;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  background-image: linear-gradient(to right top, #4285f4, #3971d8, #2e5dbd, #234ba3, #163989, #163989, #163989, #163989, #234ba3, #2e5dbd, #3971d8, #4285f4);
  border-radius: 10px;
  border: 1px transparent;
  -webkit-transition: ease all 2.3s;
  -o-transition: ease all 2.3s;
  transition: ease all 2.3s;
  top: 0;
  text-align: center;
  padding-top: 50px;
}
.card_flyoff .cover:before {
  content: "";
  position: absolute;
  /* border: 5px solid rgba(255, 255, 255, 0.5); */
  /* box-shadow: 0 0 12px rgba(0, 0, 0, 0.3); */
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  transition: ease all 2.3s;
  transform-style: preserve-3d;
  transform: translateZ(0px);
}
.card_flyoff .cover:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 2;
  transition: ease all 1.3s;
  /* background: rgba(0, 0, 0, 0.4); */
}
.card_flyoff .cover h3 {
  padding-top: 80px;
  transform-style: preserve-3d;
  transition: ease all 2.3s;
  z-index: 3;
  font-size: 1.5rem;
  transform: translateZ(0px);
  color: #fff;
}
.card_flyoff .cover .price {
  position: relative;
  text-align: center;
  transform-style: preserve-3d;
  transition: ease all 2.3s;
  z-index: 4;
  transform: translateZ(0px);
  padding: .8rem;
}

.card_flyoff .card-back {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  border-radius: 10px;
  background: #4285f4;
  /* background: linear-gradient(90deg, rgba(66,133,244,1) 0%, rgba(0,35,104,1) 50%, rgba(66,133,244,1) 100%);
  background: linear-gradient(90deg, rgba(241,241,241,1) 0%, rgba(0,35,104,1) 50%, rgba(241,241,241,1) 100%); */
  background-image: linear-gradient(to right top, #002368, #113380, #1f459a, #2a57b4, #356acf, #356acf, #356acf, #356acf, #2a57b4, #1f459a, #113380, #002368);
  transform-style: preserve-3d;
  transition: ease all 2.3s;
  transform: translateZ(-1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  border-radius: 10px;

}

.card_flyoff .card-back a {
  transform-style: preserve-3d;
  transition: ease transform 2.3s, ease background 0.5s;
  transform: translateZ(-1px) rotatey(-180deg);
  background: transparent;
  border: 1px solid #fff;
  border-radius: 8px;
  font-weight: 200;
  font-size: .8rem;
  color: #fff;
  padding: 10px 20px;
  outline: none;
  text-decoration: none;
  position: absolute;
  bottom: 20px;
}
.card_flyoff .card-back p {
  transform-style: preserve-3d;
  transition: ease transform 2.3s, ease background 0.5s;
  transform: translateZ(-1px) rotatey(-180deg);
  background: transparent;
  padding: 14px 32px;
  outline: none;
  text-decoration: none;
  color: #fff;
}
.card_flyoff .card-back a:hover {
  background-color: #4285f4;
  color: #fff;
  font-weight: 800;
  border: 3px solid #fff;
}