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


/*======================================
                FOOTER
======================================*/

.footer{

    background:#0d0d0d;

    color:white;

    padding:110px 0 40px;

    position:relative;

    overflow:hidden;

}

.footer::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

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

    filter:blur(60px);

}



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

.footer-container{

    width:min(92%,1400px);

    margin:auto;

    position:relative;

    z-index:2;

}



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

.footer-brand{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

}

.footer-brand h2{

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

    font-size:3.5rem;

    letter-spacing:8px;

    margin-bottom:22px;

    color:white;

}

.footer-brand p{

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

    line-height:1.9;

    font-size:1rem;

}



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

.footer-divider{

    width:100%;

    height:1px;

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

    margin:55px 0;

}



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

.footer-grid{

    display:grid;

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

    gap:50px;

}



/*======================================
            COLUMN
======================================*/

.footer-column h3{

    font-size:1rem;

    text-transform:uppercase;

    letter-spacing:2px;

    color:var(--color-gold);

    margin-bottom:24px;

}

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-column li{

    margin-bottom:18px;

}



/*======================================
            LINKS
======================================*/

.footer-column a{

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

    text-decoration:none;

    transition:.35s ease;

    position:relative;

}

.footer-column a:hover{

    color:white;

    padding-left:10px;

}

.footer-column a::before{

    content:"";

    position:absolute;

    left:-14px;

    top:50%;

    transform:translateY(-50%);

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--color-gold);

    opacity:0;

    transition:.35s ease;

}

.footer-column a:hover::before{

    opacity:1;

}
/*==================================================
                UZAYO FOOTER.CSS
                PART 2
==================================================*/


/*======================================
            FOOTER BOTTOM
======================================*/

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.footer-bottom p{

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

    font-size:.92rem;

}



/*======================================
            LEGAL LINKS
======================================*/

.footer-links{

    display:flex;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.footer-links a{

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

    text-decoration:none;

    transition:.35s ease;

    position:relative;

}

.footer-links a:hover{

    color:white;

}

.footer-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--color-gold);

    transition:.35s ease;

}

.footer-links a:hover::after{

    width:100%;

}



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

.footer-column{

    transition:.35s ease;

}

.footer-column:hover{

    transform:translateY(-5px);

}



/*======================================
        BRAND HOVER
======================================*/

.footer-brand h2{

    transition:.35s ease;

}

.footer-brand:hover h2{

    letter-spacing:12px;

}



/*======================================
        SOCIAL HOVER
======================================*/

.footer-column:last-child a:hover{

    color:var(--color-gold);

}



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

@media(max-width:1100px){

.footer-grid{

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

gap:50px;

}

}



@media(max-width:768px){

.footer{

padding:80px 0 30px;

}

.footer-brand{

margin-bottom:50px;

}

.footer-brand h2{

font-size:2.8rem;

letter-spacing:6px;

}

.footer-grid{

grid-template-columns:1fr;

gap:45px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.footer-links{

justify-content:center;

}

}



@media(max-width:480px){

.footer-brand h2{

font-size:2.2rem;

}

.footer-brand p{

font-size:.95rem;

}

.footer-column h3{

font-size:.95rem;

}

.footer-column li{

margin-bottom:14px;

}

.footer-links{

gap:18px;

}

}



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

.footer a:focus-visible{

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

outline-offset:4px;

border-radius:4px;

}



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

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

.footer *{

animation:none !important;

transition:none !important;

}

}



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

.footer-column,

.footer-brand{

will-change:transform;

}



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

.footer{

isolation:isolate;

}

.footer>*{

position:relative;

z-index:2;

}

.footer::after{

content:"";

position:absolute;

bottom:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(

90deg,

transparent,

rgba(184,155,94,.65),

transparent

);

}