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

.footer{

    background:#020617;

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

    padding:60px 0 30px;

    text-align:center;

}

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

.footer-content{

    max-width:800px;

    margin:auto;

}

/* ==========================================
   NAME
========================================== */

.footer-content h3{

    font-size:2rem;

    color:white;

    margin-bottom:15px;

}

.footer-content h3::after{

    content:"";

    display:block;

    width:80px;

    height:3px;

    background:var(--primary);

    margin:15px auto 0;

    border-radius:20px;

}

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

.footer-content p{

    color:var(--text-secondary);

    margin-bottom:18px;

}

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

.footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

    margin:35px 0;

}

.footer-links a{

    color:var(--text);

    transition:.3s;

    font-weight:500;

}

.footer-links a:hover{

    color:var(--primary);

}

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

.social-links{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:35px;

}

.social-links a{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--surface);

    color:white;

    transition:.35s;

    border:1px solid var(--border);

}

.social-links a:hover{

    background:var(--primary);

    transform:translateY(-5px);

    border-color:var(--primary);

}

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

.copyright{

    margin-top:30px;

    padding-top:25px;

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

    font-size:.9rem;

}

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

@media(max-width:768px){

    .footer-links{

        flex-direction:column;

        gap:18px;

    }

}