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


/*======================================
            BRAND STORY
======================================*/

.brand-story{

    position:relative;

    padding:150px 0;

    background:var(--color-off-white);

    overflow:hidden;

}

.brand-story::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:500px;

    height:500px;

    border-radius:50%;

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

    filter:blur(40px);

}



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

.brand-story .container{

    width:min(92%,1400px);

    margin:auto;

    position:relative;

    z-index:2;

}



/*======================================
            GRID
======================================*/

.brand-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}



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

.brand-image{

    position:relative;

}

.brand-image img{

    width:100%;

    border-radius:30px;

    display:block;

    object-fit:cover;

    box-shadow:

        0 40px 90px rgba(0,0,0,.14);

    transition:.6s ease;

}

.brand-image:hover img{

    transform:scale(1.02);

}



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

.brand-image::before{

    content:"";

    position:absolute;

    top:-25px;

    right:-25px;

    width:180px;

    height:180px;

    border-radius:24px;

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

    z-index:-1;

}

.brand-image::after{

    content:"";

    position:absolute;

    bottom:-35px;

    left:-35px;

    width:220px;

    height:220px;

    border-radius:50%;

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

    filter:blur(35px);

    z-index:-1;

}



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

.brand-content{

    display:flex;

    flex-direction:column;

}



/*======================================
            TAG
======================================*/

.brand-tag{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-bottom:28px;

    color:var(--color-gold);

    font-size:.85rem;

    letter-spacing:4px;

    font-weight:600;

    text-transform:uppercase;

}

.brand-tag::before{

    content:"";

    width:45px;

    height:2px;

    background:var(--color-gold);

}



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

.brand-content h2{

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

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

    line-height:1;

    letter-spacing:-2px;

    margin-bottom:30px;

}



/*======================================
        PARAGRAPHS
======================================*/

.brand-content p{

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

    line-height:1.9;

    font-size:1.05rem;

    margin-bottom:24px;

}



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

.brand-features{

    display:grid;

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

    gap:24px;

    margin:45px 0;

}

.brand-feature{

    padding:30px;

    border-radius:22px;

    background:white;

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

    transition:.35s ease;

}

.brand-feature:hover{

    transform:translateY(-8px);

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

}

.brand-feature h3{

    font-size:1.3rem;

    margin-bottom:10px;

}

.brand-feature span{

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

    line-height:1.7;

    font-size:.9rem;

}

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


/*======================================
        BUTTON SPACING
======================================*/

.brand-content .btn{

    align-self:flex-start;

    margin-top:10px;

}



/*======================================
        FEATURE ICON EFFECT
======================================*/

.brand-feature{

    position:relative;

    overflow:hidden;

}

.brand-feature::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(184,155,94,.05),
        transparent
    );

    opacity:0;

    transition:.35s ease;

}

.brand-feature:hover::before{

    opacity:1;

}



/*======================================
        FEATURE BORDER
======================================*/

.brand-feature::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    border:1px solid transparent;

    transition:.35s;

    pointer-events:none;

}

.brand-feature:hover::after{

    border-color:rgba(184,155,94,.25);

}



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

.brand-image{

    overflow:hidden;

    border-radius:30px;

}

.brand-image::before{

    pointer-events:none;

}

.brand-image .shine{

    display:none;

}

.brand-image::selection{

    background:transparent;

}



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

.brand-content{

    animation:brandFade .8s ease;

}

.brand-image{

    animation:brandImage 1s ease;

}

@keyframes brandFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes brandImage{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



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

@media(max-width:1200px){

.brand-grid{

gap:60px;

}

.brand-features{

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

}

}



@media(max-width:992px){

.brand-story{

padding:110px 0;

}

.brand-grid{

grid-template-columns:1fr;

gap:70px;

}

.brand-content{

order:2;

text-align:center;

align-items:center;

}

.brand-image{

order:1;

}

.brand-content .btn{

align-self:center;

}

.brand-features{

width:100%;

}

}



@media(max-width:768px){

.brand-story{

padding:90px 0;

}

.brand-content h2{

font-size:2.5rem;

}

.brand-content p{

font-size:1rem;

}

.brand-features{

grid-template-columns:1fr;

gap:20px;

}

.brand-feature{

padding:24px;

}

.brand-image img{

border-radius:20px;

}

.brand-image::before,

.brand-image::after{

display:none;

}

}



@media(max-width:480px){

.brand-content h2{

font-size:2rem;

}

.brand-tag{

font-size:.75rem;

letter-spacing:3px;

}

.brand-content p{

font-size:.95rem;

}

}



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

.brand-content a:focus-visible{

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

outline-offset:4px;

border-radius:999px;

}

.brand-feature:focus-within{

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

outline-offset:4px;

}



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

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

.brand-story *{

animation:none !important;

transition:none !important;

}

}



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

.brand-image img{

display:block;

backface-visibility:hidden;

-webkit-backface-visibility:hidden;

}

.brand-image,

.brand-feature{

will-change:transform;

}



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

.brand-story{

isolation:isolate;

}

.brand-grid{

position:relative;

z-index:2;

}

.brand-content{

position:relative;

z-index:3;

}

.brand-image{

position:relative;

z-index:2;

}