/*==================================================
                UZAYO HERO.CSS
                PART 1
==================================================*/

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

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#fafafa;

}

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:rgba(184,155,94,.05);

    top:-250px;

    right:-200px;

    filter:blur(40px);

    z-index:0;

}



/*======================================
            HERO CONTAINER
======================================*/

.hero-container{

    width:min(94%,1500px);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.15fr;

    align-items:center;

    gap:90px;

    padding:80px 0;

    position:relative;

    z-index:2;

}



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

.hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    animation:fadeUp 1s ease;

}



/*======================================
            SUBTITLE
======================================*/

.hero-subtitle{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:28px;

    color:var(--color-gold);

    font-size:.9rem;

    letter-spacing:4px;

    font-weight:600;

    text-transform:uppercase;

}

.hero-subtitle::before{

    content:"";

    width:45px;

    height:2px;

    background:var(--color-gold);

}



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

.hero-title{

    font-family:var(--font-heading);

    font-size:clamp(4rem,7vw,7rem);

    line-height:.95;

    letter-spacing:-3px;

    color:var(--color-black);

    margin-bottom:35px;

}

.hero-title span{

    color:var(--color-gold);

}



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

.hero-description{

    max-width:560px;

    font-size:1.08rem;

    line-height:1.9;

    color:var(--color-grey-600);

}



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

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:50px;

    flex-wrap:wrap;

}

.btn{

    height:58px;

    padding:0 42px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    border-radius:999px;

    text-decoration:none;

    font-size:.92rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.35s ease;

}

.btn-dark{

    background:var(--color-black);

    color:white;

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.btn-dark:hover{

    background:var(--color-gold);

    transform:translateY(-4px);

}

.btn-light{

    background:white;

    color:var(--color-black);

    border:1px solid #ddd;

}

.btn-light:hover{

    border-color:var(--color-black);

    transform:translateY(-4px);

}



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

.hero-image{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    animation:fadeRight 1.2s ease;

}

.hero-image img{

    width:100%;

    max-width:900px;

    border-radius:30px;

    object-fit:cover;

    box-shadow:

        0 45px 90px rgba(0,0,0,.15);

    transition:.6s ease;

}

.hero-image img:hover{

    transform:scale(1.02);

}



/*======================================
            ANIMATIONS
======================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==================================================
                UZAYO HERO.CSS
                PART 2
==================================================*/


/*======================================
            HERO STATS
======================================*/

.hero-stats{

    display:flex;

    align-items:center;

    gap:60px;

    margin-top:70px;

    padding-top:35px;

    border-top:1px solid rgba(0,0,0,.08);

}

.hero-stat{

    display:flex;

    flex-direction:column;

}

.hero-stat h2{

    font-family:var(--font-heading);

    font-size:2.2rem;

    color:var(--color-black);

    line-height:1;

}

.hero-stat span{

    margin-top:10px;

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:2px;

    color:var(--color-grey-600);

}



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

.hero-image{

    position:relative;

}

.hero-image::before{

    content:"";

    position:absolute;

    top:-30px;

    right:-30px;

    width:180px;

    height:180px;

    border:2px solid rgba(184,155,94,.18);

    border-radius:28px;

    z-index:-1;

}

.hero-image::after{

    content:"";

    position:absolute;

    left:-30px;

    bottom:-30px;

    width:220px;

    height:220px;

    background:rgba(184,155,94,.06);

    border-radius:50%;

    filter:blur(25px);

    z-index:-1;

}



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

.hero-image img{

    transition:

        transform .6s ease,

        box-shadow .6s ease;

}

.hero-image:hover img{

    transform:translateY(-6px) scale(1.02);

    box-shadow:

        0 60px 120px rgba(0,0,0,.18);

}



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

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}

.scroll-indicator span{

    font-size:.75rem;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--color-grey-500);

}

.scroll-wheel{

    width:28px;

    height:48px;

    border:2px solid var(--color-grey-500);

    border-radius:50px;

    position:relative;

}

.scroll-wheel::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    transform:translateX(-50%);

    width:5px;

    height:10px;

    border-radius:50px;

    background:var(--color-black);

    animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

    0%{

        opacity:1;

        transform:translate(-50%,0);

    }

    100%{

        opacity:0;

        transform:translate(-50%,18px);

    }

}



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

.hero-accent{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.hero-accent.one{

    width:18px;

    height:18px;

    background:var(--color-gold);

    top:20%;

    left:12%;

    animation:floatOne 8s ease-in-out infinite;

}

.hero-accent.two{

    width:10px;

    height:10px;

    background:var(--color-black);

    top:70%;

    right:18%;

    animation:floatTwo 10s ease-in-out infinite;

}

.hero-accent.three{

    width:28px;

    height:28px;

    border:2px solid rgba(184,155,94,.25);

    top:40%;

    right:8%;

    animation:floatThree 9s ease-in-out infinite;

}



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

@keyframes floatOne{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatTwo{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatThree{

    0%{

        transform:rotate(0deg);

    }

    100%{

        transform:rotate(360deg);

    }

}



/*======================================
        HERO DIVIDER
======================================*/

.hero-divider{

    width:120px;

    height:2px;

    margin:40px 0;

    background:linear-gradient(

        90deg,

        var(--color-gold),

        transparent

    );

}



/*======================================
        PREMIUM LABEL
======================================*/

.hero-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:28px;

    color:var(--color-grey-600);

    font-size:.85rem;

    letter-spacing:2px;

    text-transform:uppercase;

}

.hero-label::before{

    content:"";

    width:36px;

    height:2px;

    background:var(--color-gold);

}

/*==================================================
                UZAYO HERO.CSS
                PART 3
==================================================*/


/*======================================
            LARGE DESKTOP
======================================*/

@media (min-width:1600px){

.hero-container{

max-width:1650px;

gap:120px;

}

.hero-title{

font-size:7rem;

}

.hero-image img{

max-width:980px;

}

}



/*======================================
            LAPTOP
======================================*/

@media (max-width:1400px){

.hero-container{

gap:70px;

}

.hero-image img{

max-width:760px;

}

.hero-title{

font-size:5.5rem;

}

}



/*======================================
            TABLET
======================================*/

@media (max-width:1100px){

.hero{

padding:100px 0;

min-height:auto;

}

.hero-container{

grid-template-columns:1fr;

gap:70px;

text-align:center;

}

.hero-content{

align-items:center;

}

.hero-description{

max-width:700px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

gap:35px;

}

.hero-image{

justify-content:center;

}

.hero-image img{

max-width:700px;

}

.scroll-indicator{

display:none;

}

}



/*======================================
            MOBILE
======================================*/

@media (max-width:768px){

.hero{

padding:70px 0;

}

.hero-container{

width:92%;

gap:50px;

}

.hero-title{

font-size:3.4rem;

line-height:1;

letter-spacing:-2px;

}

.hero-description{

font-size:1rem;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

width:100%;

}

.hero-buttons .btn{

width:100%;

height:56px;

}

.hero-image img{

border-radius:18px;

max-width:100%;

}

.hero-stats{

flex-direction:column;

gap:24px;

margin-top:45px;

padding-top:30px;

}

.hero-stat h2{

font-size:2rem;

}

.hero-subtitle{

letter-spacing:3px;

font-size:.8rem;

}

}



/*======================================
            SMALL MOBILE
======================================*/

@media (max-width:480px){

.hero{

padding:50px 0;

}

.hero-title{

font-size:2.8rem;

}

.hero-description{

font-size:.95rem;

}

.hero-image::before,

.hero-image::after{

display:none;

}

.hero-stats{

gap:18px;

}

.hero-stat span{

font-size:.72rem;

}

}



/*======================================
        ACCESSIBILITY
======================================*/

.hero a:focus-visible,

.hero button:focus-visible{

outline:3px solid var(--color-gold);

outline-offset:4px;

border-radius:999px;

}



/*======================================
        REDUCED MOTION
======================================*/

@media (prefers-reduced-motion:reduce){

.hero *{

animation:none !important;

transition:none !important;

scroll-behavior:auto;

}

}



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

.hero-image img{

display:block;

image-rendering:auto;

}



/*======================================
            TEXT SELECTION
======================================*/

.hero-title::selection,

.hero-description::selection,

.hero-subtitle::selection{

background:var(--color-gold);

color:white;

}



/*======================================
        PERFORMANCE
======================================*/

.hero-image,

.hero-content{

will-change:transform;

}



/*======================================
        FINAL POLISH
======================================*/

.hero{

isolation:isolate;

}

.hero-container{

position:relative;

z-index:2;

}

.hero-image{

position:relative;

z-index:2;

}

.hero-content{

position:relative;

z-index:3;

}