/* ===========================
   HERO SLIDER COMPACT STYLE
=========================== */


.hero-box{

    position:relative;

    height:190px;

    border-radius:20px;

    overflow:hidden;

    display:flex;

    align-items:center;

    background:#f5f5f5;

}




/* Background layer */

.hero-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.65),
        rgba(0,0,0,.15)
    );

    z-index:2;

}





.hero-content{

    position:relative;

    z-index:3;

    width:55%;

    padding:25px;

    color:white;

}




.hero-content h1{

    font-size:28px;

    margin:0 0 8px;

}



.hero-content p{

    font-size:15px;

    margin-bottom:15px;

}



.hero-btn{

    background:#ff5200;

    color:white;

    padding:8px 18px;

    border-radius:20px;

    text-decoration:none;

    font-size:14px;

}





.hero-image{

    position:absolute;

    right:0;

    top:0;

    width:50%;

    height:100%;

    z-index:1;

}




.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}





/* Image merge effect */

.hero-image::before{

    content:"";

    position:absolute;

    left:-60px;

    top:0;

    width:80px;

    height:100%;

    background:linear-gradient(
        90deg,
        rgba(245,245,245,0),
        rgba(0,0,0,.2)
    );

}




/* Mobile */

@media(max-width:600px){


.hero-box{

    height:170px;

}



.hero-content{

    width:60%;

    padding:18px;

}



.hero-content h1{

    font-size:22px;

}



.hero-content p{

    font-size:13px;

}



.hero-image{

    width:55%;

}



}