/*==================================================
                HERO BLOG
==================================================*/

.hero-blog{

    position:relative;

    min-height:80vh;

    background:
    linear-gradient(
        90deg,
        rgba(10,10,10,.95) 0%,
        rgba(10,10,10,.88) 28%,
        rgba(10,10,10,.60) 52%,
        rgba(10,10,10,.18) 78%,
        rgba(10,10,10,0) 100%
    ),
    url("../../img/blog/hero.jpg");

    background: size 100px;

    background-position:right center;

    background-repeat:no-repeat;

    display:flex;

    align-items:center;

}

/*==================================================
                OVERLAY
==================================================*/

.hero-overlay{

    width:100%;

    padding-left:8%;

    padding-right:8%;

}

/*==================================================
                TEXTO
==================================================*/

.hero-info{

    max-width:650px;

    animation:fadeHero 1s ease;

}

.subtitulo{

    display:inline-block;

    color:var(--color-dorado);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:28px;

}

.hero-info h1{

    font-size:5.6rem;

    line-height:.95;

    color:#fff;

    margin-bottom:30px;

}

.hero-info h1::after{

    content:"";

    display:block;

    width:120px;

    height:2px;

    background:var(--color-dorado);

    margin-top:28px;

}

.hero-info p{

    color:#E2E2E2;

    font-size:1.25rem;

    line-height:2;

    margin-bottom:45px;

    max-width:560px;

}

.hero-info .btn{

    min-width:260px;

}

/*==================================================
                ANIMACIÓN
==================================================*/

@keyframes fadeHero{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:1200px){

    .hero-info h1{

        font-size:4.5rem;

    }

}

@media(max-width:992px){

    .hero-blog{

        background-position:70% center;

    }

    .hero-overlay{

        padding-left:6%;
        padding-right:6%;

    }

    .hero-info{

        max-width:100%;

    }

    .hero-info h1{

        font-size:3.8rem;

    }

    .hero-info p{

        font-size:1.1rem;

    }

}

@media(max-width:768px){

    .hero-blog{

        background-position:center;

    }

    .hero-overlay{

        padding-top:140px;
        padding-bottom:80px;

    }

    .hero-info h1{

        font-size:3rem;

    }

    .hero-info p{

        font-size:1rem;

        line-height:1.8;

    }

    .hero-info .btn{

        width:100%;

    }

}