/* =========================================
   VRChatCustom 2.0
   Footer Styles
========================================= */



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


footer {


    position:

    relative;



    width:

    100%;



    padding:

    70px 40px 40px;



    margin-top:

    100px;



    background:

    var(--bg-secondary);



    border-top:

    1px solid var(--border);



    overflow:

    hidden;



}







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


footer::before {


    content:"";


    position:

    absolute;



    top:

    0;



    left:

    50%;



    transform:

    translateX(-50%);



    width:

    400px;



    height:

    2px;



    background:

    linear-gradient(
        90deg,
        transparent,
        var(--primary),
        transparent
    );



    box-shadow:

    0 0 25px
    var(--primary);



}







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


.footer-logo {


    text-align:

    center;



    font-family:

    var(--font-title);



    font-size:

    30px;



    font-weight:

    800;



    color:

    var(--text-primary);



    letter-spacing:

    2px;



    margin-bottom:

    30px;



}







.footer-logo::first-letter {


    color:

    var(--primary);



}







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


.footer-links {


    display:

    flex;



    justify-content:

    center;



    align-items:

    center;



    gap:

    35px;



    margin-bottom:

    35px;



}







.footer-links a {


    color:

    var(--text-secondary);



    font-size:

    14px;



    font-weight:

    500;



    transition:

    var(--transition-normal);



    position:

    relative;



}







.footer-links a::after {


    content:"";


    position:

    absolute;



    bottom:

    -8px;



    left:

    0;



    width:

    0;



    height:

    2px;



    background:

    var(--primary);



    transition:

    var(--transition-normal);



}







.footer-links a:hover {


    color:

    var(--primary);



}







.footer-links a:hover::after {


    width:

    100%;



}







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


.footer-socials {


    display:

    flex;



    justify-content:

    center;



    gap:

    15px;



    margin-bottom:

    40px;



}







.social-icon {


    width:

    45px;



    height:

    45px;



    display:

    flex;



    align-items:

    center;



    justify-content:

    center;



    border-radius:

    50%;



    background:

    rgba(
        255,
        255,
        255,
        .05
    );



    border:

    1px solid var(--border);



    color:

    var(--text-secondary);



    transition:

    var(--transition-normal);



}







.social-icon:hover {


    color:

    var(--primary);



    border-color:

    var(--primary);



    transform:

    translateY(-5px);



    box-shadow:

    var(--shadow-glow);



}







/* ===============================
   COPYRIGHT
========================================= */


footer p {


    text-align:

    center;



    color:

    var(--text-muted);



    font-size:

    13px;



    padding-top:

    30px;



    border-top:

    1px solid var(--border);



}







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


.footer-description {


    max-width:

    500px;



    margin:

    0 auto 30px;



    text-align:

    center;



    color:

    var(--text-secondary);



    line-height:

    1.7;



    font-size:

    15px;



}