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

.footer{

    position:relative;

    padding:80px 0 30px;

    background:#08111F;

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

    overflow:hidden;

}

.footer::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-220px;

    bottom:-220px;

    background:rgba(0,120,212,.08);

    filter:blur(140px);

}

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

.footer-top{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

    margin-bottom:45px;

}

.footer-brand h2{

    font-size:2rem;

    margin-bottom:18px;

}

.footer-brand p{

    color:var(--text);

    line-height:1.9;

    max-width:420px;

}

.footer-links h3,

.footer-social h3{

    margin-bottom:22px;

    font-size:1.15rem;

}

.footer-links ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-links a{

    color:var(--text);

    transition:.3s;

}

.footer-links a:hover{

    color:var(--primary);

    padding-left:8px;

}

/*======================================
            SOCIAL ICONS
======================================*/

.social-icons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.social-icons a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#111827;

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

    transition:.35s ease;

}

.social-icons a:hover{

    background:var(--primary);

    transform:translateY(-5px);

}

.social-icons i{

    color:#fff;

    font-size:1.1rem;

}

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

.footer hr{

    border:none;

    height:1px;

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

    margin:35px 0;

}

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

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-bottom p{

    color:var(--text);

    font-size:.95rem;

}

/*==================================================
                BACK TO TOP
==================================================*/

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.2rem;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s ease;

    z-index:999;

    box-shadow:0 12px 30px rgba(0,120,212,.35);

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    transform:translateY(-6px);

    background:#1E90FF;

}

/*==================================================
                Theme Switcher
==================================================*/

.theme-switcher{

    position:fixed;

    right:25px;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:12px;

    border-radius:30px;

    background:rgba(17,24,39,.75);

    backdrop-filter:blur(20px);

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

    box-shadow:0 15px 35px rgba(0,0,0,.30);

    z-index:999;

}

.theme-switcher button{

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    transition:.3s;

    font-size:1rem;

    background:#1E293B;

}

.theme-switcher button:hover{

    transform:scale(1.15);

}