/*=========================================================
    PROJECT : Hope & Harmony Spectrum Inc.
    FILE    : hero.css
    PURPOSE : Hero Section
=========================================================*/
/*=========================================================
                FLOATING CARDS
=========================================================*/

.floating-card{

    position:absolute;

    display:flex;
    align-items:center;
    gap:12px;

    padding:18px 24px;

    border-radius:18px;

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

    backdrop-filter:blur(10px);

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

    font-weight:600;

}

.floating-card i{

    color:var(--primary-color);
    font-size:1.3rem;

}

.card-one{

    top:40px;
    left:-40px;

}

.card-two{

    bottom:40px;
    right:-40px;

}
/*=========================================================
                DECORATIVE SHAPES
=========================================================*/

.hero{

    position:relative;
    overflow:hidden;

}

.hero-shape{

    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    opacity:.25;
    z-index:0;

}

.shape-one{

    width:300px;
    height:300px;
    background:var(--secondary-color);

    top:-120px;
    left:-100px;

}

.shape-two{

    width:220px;
    height:220px;
    background:var(--accent-color);

    bottom:-80px;
    right:-50px;

}

.shape-three{

    width:180px;
    height:180px;
    background:var(--purple);

    top:25%;
    right:15%;

}
.hero .container{

    position:relative;
    z-index:2;

}
.hero-image img{

    border-radius:30px;

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

    transition:var(--transition);

}

.hero-image img:hover{

    transform:scale(1.02);

}
.card-one{

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

}

.card-two{

    animation:floating 5s infinite ease-in-out;
    animation-delay:1.5s;

}

.hero-content{

    animation:fadeUp 1s ease;

}

.hero-image{

    animation:fadeUp 1.2s ease;

}
/*=========================================================
                SCROLL INDICATOR
=========================================================*/

.scroll-indicator{

    position:absolute;

    left:50%;
    bottom:20px;

    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;

    color:var(--primary-color);

    font-size:.9rem;

    animation:floating 3s infinite ease-in-out;

}

.scroll-indicator i{

    font-size:1.2rem;
    margin-top:5px;

}