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

.footer{

    position:relative;

    overflow:hidden;

    padding:6rem 0 2rem;

    background:#040913;

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

}

/* ==========================================================
   Background
========================================================== */

.footer::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-180px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(37,99,235,.08);

    filter:blur(130px);

    pointer-events:none;

}

.footer::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-220px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(6,182,212,.08);

    filter:blur(120px);

    pointer-events:none;

}

/* ==========================================================
   Top Layout
========================================================== */

.footer-top{

    display:grid;

    grid-template-columns:

        2fr

        1fr

        1fr

        1fr;

    gap:4rem;

    margin-bottom:4rem;

}

/* ==========================================================
   Brand
========================================================== */

.footer-brand img{

    width:100px;

    object-fit:contain;

    display:block;

    margin-bottom:1rem;

}

.footer-brand p{

    max-width:420px;

    color:var(--text-secondary);

    line-height:2;

}

/* ==========================================================
   Titles
========================================================== */

.footer h4{

    margin-bottom:1.5rem;

    font-size:1.1rem;

    font-weight:700;

    color:#ffffff;

}

/* ==========================================================
   Links
========================================================== */

.footer-links ul{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.footer-links a{

    color:var(--text-secondary);

    transition:.3s;

}

.footer-links a:hover{

    color:#ffffff;

    padding-right:.4rem;

}

/* ==========================================================
   Contact
========================================================== */

.footer-contact p{

    margin-bottom:1rem;

    color:var(--text-secondary);

    line-height:1.8;

}

/* ==========================================================
   Social
========================================================== */

.social-icons{

    display:flex;

    gap:1rem;

}

.social-icons a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

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

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

    transition:.35s;

}

.social-icons a:hover{

    background:rgba(37,99,235,.15);

    border-color:rgba(37,99,235,.35);

    transform:translateY(-6px);

}

.social-icons img{

    width:22px;

    height:22px;

    object-fit:contain;

}

/* ==========================================================
   Bottom
========================================================== */

.footer-bottom{

    padding-top:2rem;

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

    text-align:center;

}

.footer-bottom p{

    color:var(--text-muted);

    font-size:.95rem;

}

/* ==========================================================
   Back To Top
========================================================== */

#backToTop{

    position:fixed;

    right:2rem;

    bottom:2rem;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient-primary);

    color:#ffffff;

    font-size:1.25rem;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:900;

    box-shadow:0 12px 30px rgba(37,99,235,.35);

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:none;

}

#backToTop:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(37,99,235,.45);

}

/* ==========================================================
   Divider
========================================================== */

.footer-divider{

    width:100%;

    height:1px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

    margin:3rem 0;

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:1100px){

    .footer-top{

        grid-template-columns:

            repeat(2,1fr);

    }

}

@media(max-width:768px){

    .footer{

        padding:5rem 0 2rem;

    }

    .footer-top{

        grid-template-columns:1fr;

        gap:3rem;

        text-align:center;

    }

    .footer-brand{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .footer-brand p{

        max-width:100%;

    }

    .footer-links ul{

        align-items:center;

    }

    .social-icons{

        justify-content:center;

    }

    #backToTop{

        right:1.25rem;

        bottom:1.25rem;

        width:50px;

        height:50px;

    }

}

@media(max-width:576px){

    .footer{

        padding:4rem 0 1.5rem;

    }

    .footer-brand img{

        width:150px;

    }

    .footer h4{

        font-size:1rem;

    }

    .footer-bottom p{

        font-size:.85rem;

    }

}