/*======================================
EIVOX BANNER CSS
Version: 1.0
======================================*/


/*======================================
HERO SECTION
======================================*/

.hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:520px;

    padding:80px 0;

    overflow:hidden;

}


/*======================================
BACKGROUND
======================================*/

.hero-bg{

    position:absolute;

    inset:0;

    z-index:-2;

}

.hero-bg img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:-1;

    background:linear-gradient(
        135deg,
        rgba(10,15,28,.92),
        rgba(17,24,39,.80),
        rgba(37,99,235,.20)
    );

}


/*======================================
CONTENT
======================================*/

.hero-content{

    max-width:650px;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.hero-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    color:var(--primary);

    font-size:var(--font-sm);

    font-weight:var(--weight-semibold);

}

.hero-title{

    font-size:clamp(2.2rem,5vw,4.5rem);

    font-weight:var(--weight-bold);

    line-height:1.1;

    color:#fff;

}

.hero-text{

    max-width:560px;

    color:rgba(255,255,255,.82);

    font-size:1.05rem;

    line-height:1.8;

}


/*======================================
BUTTONS
======================================*/

.hero-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    margin-top:10px;

}


/*======================================
FEATURES
======================================*/

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:25px;

}

.hero-feature{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:.95rem;

}

.hero-feature i,
.hero-feature svg{

    color:var(--success);

    width:20px;

    height:20px;

}


/*======================================
IMAGE
======================================*/

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:520px;

    height:auto;

    animation:heroFloat 5s ease-in-out infinite;

}


/*======================================
FLOATING CARD
======================================*/

.hero-card{

    position:absolute;

    right:30px;

    bottom:40px;

    padding:18px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:var(--radius-lg);

    color:#fff;

    box-shadow:var(--shadow-lg);

}


/*======================================
ANIMATION
======================================*/

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


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

@media(max-width:991px){

    .hero{

        text-align:center;

        padding:70px 0;

    }

    .hero-content{

        margin:0 auto;

        align-items:center;

    }

    .hero-features{

        justify-content:center;

    }

    .hero-image{

        margin-top:40px;

    }

    .hero-card{

        position:relative;

        right:auto;

        bottom:auto;

        margin-top:30px;

    }

}

@media(max-width:767px){

    .hero{

        min-height:auto;

        padding:60px 0;

    }

    .hero-title{

        font-size:2.3rem;

    }

    .hero-text{

        font-size:.95rem;

    }

    .hero-buttons{

        width:100%;

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-image img{

        max-width:340px;

    }

}

@media(max-width:480px){

    .hero-title{

        font-size:2rem;

    }

    .hero-subtitle{

        font-size:12px;

    }

}