.header {
    height: 95vh;
    background-image: linear-gradient(to right bottom,rgba($color-primary-light, 0.801), rgba($color-primary-dark, 0.808)) , url("../img/hero.jpg");
    background-size: cover;
    background-position: top;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);

    @include respond(phone) {
      clip-path: polygon(0% 0%, 100% 0%, 100% 85vh, 0% 100%);
    }

    position: relative;

    &__logo-box {
        position: absolute;
        top: 4rem;
        left: 4rem;
    } 
    &__logo {
        height: 3.5rem;
    }

    /*
    .logo:hover{
        animation: moveInRight 1s ease-out;
    }
    */

    &__text-box{
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%,-50%);
        /* 
        * Limpiar animaciones para evitar temblores 
        * No se sabe realmente por qué funciona o de dónde viene el error, pero lo hace
        */
        backface-visibility: hidden;
        text-align: center;
    }
}