/* ============================================================================= */
/*                                  FIRST BUTTON                                 */
/* ============================================================================= */
.principal-btn {
    background-color: var(--main-color);
    font-family: var(--main-font);
    color: var(--white);
    position: relative;
    overflow: hidden;
    border: none;
    padding: 10px 20px;

}

.principal-btn span {
    position: relative;
    z-index: 1;
    font-weight: bold;
    display: block;
    text-align: center;
    transition: 0.4s;
}

.principal-btn::before {
    content: "";
    width: 140%;
    height: 100%;
    border-radius: 1px;
    background-color: #000;
    position: absolute;
    transform: skew(-20deg);
    top: 0;
    left: -150%;
    transition: ease-in-out all .5s;
}

.principal-btn:hover::before {
    left: -10%;
}

.principal-btn:hover span {
  transition: 0.4s;
}

/* ============================================================================= */
/*                                  SECOND BUTTON                                */
/* ============================================================================= */



.second-btn {
    background-color: var(--button-color);
    font-family: var(--main-font);
    color: var(--white);
    position: relative;
    overflow: hidden;
    border: none;
    padding: 10px 20px;

}

.second-btn span {
    position: relative;
    z-index: 1;
    font-weight: bold;
    display: block;
    text-align: center;
    transition: 0.4s;
}

.second-btn::before {
    content: "";
    width: 140%;
    height: 100%;
    border-radius: 1px;
    background-color: var(--second-color);
    position: absolute;
    transform: skew(-20deg);
    top: 0;
    left: -150%;
    transition: ease-in-out all .3s;
}

.second-btn:hover::before {
    left: -10%;
}

.second-btn:hover span {
  transition: 0.4s;
}


/* ============================================================================= */
/*                                  THIRD BUTTON                                 */
/* ============================================================================= */



.third-btn {
    font-family: var(--main-font);
    color: var(--white);
    position: relative;
    overflow: hidden;
    border: none;
    padding: 10px 20px;
}

.third-btn span {
    position: relative;
    z-index: 1;
    font-weight: bold;
    display: block;
    text-align: center;
    transition: 0.4s;
}

.third-btn::before {
    content: "";
    width: 140%;
    height: 100%;
    border-radius: 1px;
    background-color: var(--button-color);
    position: absolute;
    transform: skew(-20deg);
    top: 0;
    left: -150%;
    transition: ease-in-out all .3s;
}

.third-btn:hover::before {
    left: -10%;
}

.third-btn:hover span {
  transition: 0.4s;
}