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

.footer-section{
    position:relative;
    overflow:hidden;

    background:#000000;

    padding:10px 0 30px;

    border-top:1px solid rgba(255,255,255,0.06);
}

/* =========================================
GLOW
========================================= */

.footer-glow{
    position:absolute;

    top:-200px;
    left:50%;

    transform:translateX(-50%);

    width:700px;
    height:300px;

    background:
    radial-gradient(
        circle,
        rgba(255,0,0,0.12),
        transparent 70%
    );

    filter:blur(120px);

    pointer-events:none;
}

/* =========================================
WRAPPER
========================================= */

.footer-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:
    1.5fr
    1fr
    1fr
    1.2fr;

    gap:60px;

    padding-bottom:60px;
}

/* =========================================
LOGO
========================================= */

.footer-logo{
    display:inline-block;
    margin-bottom:24px;
}

.footer-logo img{
    height:54px;
    width:auto;
}

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

.footer-desc{
    max-width:320px;

    font-size:15px;
    line-height:2;

    color:#9f9f9f;

    margin-bottom:32px;
}

/* =========================================
SOCIALS
========================================= */

.footer-socials{
    display:flex;
    align-items:center;
    gap:16px;
}

.footer-socials a{
    width:48px;
    height:48px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
    linear-gradient(
        135deg,
        rgba(255,0,0,0.08),
        rgba(255,0,0,0.03)
    );

    border:1px solid rgba(255,255,255,0.06);

    color:#ffffff;

    text-decoration:none;

    transition:0.4s ease;
}

.footer-socials a:hover{
    transform:translateY(-5px);

    background:
    linear-gradient(
        135deg,
        #ff5a00,
        #ff1e1e
    );
}

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

.footer-title{
    font-size:22px;
    font-weight:700;

    color:#ffffff;

    margin-bottom:30px;
}

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

.footer-links{
    list-style:none;

    display:flex;
    flex-direction:column;
    gap:18px;
}

.footer-links a{
    text-decoration:none;

    color:#9f9f9f;

    font-size:15px;

    transition:0.3s ease;
}

.footer-links a:hover{
    color:#ff2b2b;

    padding-left:6px;
}

/* =========================================
CONTACT
========================================= */

.footer-contact{
    list-style:none;

    display:flex;
    flex-direction:column;
    gap:22px;
}

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:14px;

    color:#9f9f9f;

    font-size:15px;
    line-height:1.8;
}

.footer-contact i{
    color:#ff2b2b;

    margin-top:4px;
}

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

.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.06);

    padding-top:30px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    flex-wrap:wrap;
}

.footer-bottom p{
    color:#7a7a7a;

    font-size:14px;
}

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

@media(max-width:1200px){

    .footer-wrapper{
        grid-template-columns:
        repeat(2,1fr);
    }

}

@media(max-width:768px){

    .footer-section{
        padding:80px 0 30px;
    }

    .footer-wrapper{
        grid-template-columns:1fr;
        gap:50px;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

}

@media(max-width:576px){

    .footer-title{
        font-size:20px;
    }

    .footer-desc,
    .footer-links a,
    .footer-contact li{
        font-size:14px;
    }

}