/* =============================================================================
   MY Accounting & Tax Solutions
============================================================================= */

/*
|--------------------------------------------------------------------------
| File        : hero.css
| File Code   : CSS006
| Version     : 1.0.0
| Description : Homepage Hero Section
| Author      : MY Accounting & Tax Solutions
|--------------------------------------------------------------------------
*/


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

.hero{

    position:relative;

    overflow:hidden;

    padding:120px 0 90px;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fcfa 100%
    );

}


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

.hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-220px;

    right:-220px;

    border-radius:50%;

    background:rgba(15,81,50,.05);

}

.hero::after{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    bottom:-80px;

    left:-80px;

    border-radius:50%;

    background:rgba(212,160,23,.08);

}


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

.hero-content{

    position:relative;

    z-index:2;

}


/* ==========================================================================
   BADGE
========================================================================== */

.hero .badge-primary{

    margin-bottom:25px;

}


/* ==========================================================================
   TITLE
========================================================================== */

.hero h1{

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

    line-height:1.15;

    margin-bottom:25px;

    color:var(--primary-color);

}

.hero h1 span{

    color:var(--secondary-color);

}


/* ==========================================================================
   DESCRIPTION
========================================================================== */

.hero p{

    font-size:1.15rem;

    max-width:600px;

    margin-bottom:35px;

}


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

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:45px;

}


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

.hero-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}

.hero-feature{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

}

.hero-feature i{

    color:var(--secondary-color);

    font-size:18px;

}


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

.hero-image{

    position:relative;

    text-align:center;

    z-index:2;

}

.hero-image img{

    width:100%;

    max-width:600px;

    margin:auto;

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

}


/* ==========================================================================
   HERO STATISTICS
========================================================================== */

.hero-stats{

    margin-top:80px;

}

.hero-stat{

    background:var(--white);

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

    padding:35px;

    text-align:center;

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

    transition:var(--transition);

}

.hero-stat:hover{

    transform:translateY(-8px);

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

}

.hero-stat h3{

    margin-bottom:10px;

    color:var(--secondary-color);

    font-size:2.2rem;

}

.hero-stat p{

    margin:0;

    color:var(--grey);

}


/* ==========================================================================
   FLOAT 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:90px 0 70px;

    }

    .hero h1{

        font-size:3rem;

    }

    .hero p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        grid-template-columns:1fr;

        max-width:320px;

        margin:0 auto;

    }

    .hero-image{

        margin-top:60px;

    }

    .hero-stats{

        margin-top:60px;

    }

}

@media(max-width:576px){

    .hero{

        padding:70px 0 60px;

    }

    .hero h1{

        font-size:2.3rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-stat{

        margin-bottom:20px;

    }

}