/* ===================================
        Card Row/Col
   ====================================== */
.cards {
    position: relative;
    background: url('../barber/img/CDDM_Texture.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cards .row {
    display: flex;
    justify-content: center;
    gap: 25px;
}

/* ===================================
        Card DI-logo
   ====================================== */
.DI-logo {
    background: url("../barber/img/DI_Logo.png");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    width: 130px;
    height: 41px;
    bottom: 3px;
    left: 0;
    right: 0;
    margin: auto;
}

.Carrera-Logo {
    background: url("../barber/img/LogoMaraton.png");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    width: 95px;
    height: 100%;
    top: 21px;
    left: 0;
    right: 0;
    margin: auto;
}


/* ===================================
        Flip Card
   ====================================== */
.cards-container {
    position: relative;
    display: flex; 
    flex-direction: row;
    justify-content: center; 
    align-items: center;
    gap: 12rem
}

.flip-card {
    position: relative;
    text-align: center;
    background-color: transparent;
    width: 285px;
    height: 100%;
    /* border: 1px solid #F50164; */
    border-radius: 50%;
    perspective: 1000px;
}

/* .flip-card:nth-child(2) {
    margin-top: 78px;
} */

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.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;
    background: url("../barber/img/Icon_Shoe.png");
    background-repeat: no-repeat;
    background-position: center;
}

.flip-card-back {
    background-color: transparent;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateY(180deg);
}

.flip-card-back a {
    color: #F50164;
}

.flip-card-back img {
    margin: 0;
}

@media screen and (max-width: 1024px) {
    .flip-card:nth-child(2) {
        margin-top: 0;
    }
}

@media screen and (max-width: 768px) {
    .cards-container {
        flex-direction: row;
        gap: 5rem;
    }
    .flip-card {
        width: 255px;
    }
}

@media screen and (max-width: 640px) {
    .cards-container {
        flex-direction: column;
        gap: 3rem;
    }
    .flip-card {
        width: 235px;
    }
}

.swing-in-top-fwd {
    animation: swing-in-top-fwd 2s cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite alternate both;
    -webkit-animation: swing-in-top-fwd 2s cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite alternate both;
}

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
 @-webkit-keyframes swing-in-top-fwd {
    0% {
        -webkit-transform: rotateX(-15deg);
                transform: rotateX(-15deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 0.8;
    }
    50% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 1;
    }
    100% {
      -webkit-transform: rotateX(15deg);
              transform: rotateX(15deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 1.2;
    }
  }
  @keyframes swing-in-top-fwd {
    0% {
        -webkit-transform: rotateX(-15deg);
                transform: rotateX(-15deg);
        -webkit-transform-origin: top;
                transform-origin: top;
        opacity: 0.8;
    }
    50% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 1;
    }
    100% {
      -webkit-transform: rotateX(15deg);
              transform: rotateX(15deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 1.2;
    }
  }