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


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

.footer{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    border-top:1px solid #e5e7eb;

    padding:

        6rem 0
        3rem;

}


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

.footer-glow{

    position:absolute;

    left:-16rem;

    bottom:-16rem;

    width:600px;

    height:600px;

    border-radius:50%;

    background:#dbeafe;

    filter:blur(300px);

    pointer-events:none;

}


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

.footer-container{

    position:relative;

    z-index:2;

    max-width:1335px;

    margin:0 auto;

    padding:

        0
        1rem;

}


/* =======================================================
   CTA
======================================================= */

.footer-cta{

    text-align:center;

    margin-bottom:5rem;

}


.footer-title{

    font-size:clamp(2.25rem,5vw,3.75rem);

    font-weight:700;

    line-height:1.1;

    color:#111827;

    margin-bottom:2rem;

}


/* =======================================================
   BUTTON
======================================================= */

.footer-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        1rem
        2rem;

    border:none;

    border-radius:9999px;

    background:#3b82f6;

    color:#ffffff;

    font-size:1.1rem;

    font-weight:700;

    cursor:pointer;

    transition:

        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

    box-shadow:

        0 10px 25px rgba(0, 98, 255, 0.25);

}


.footer-button:hover{

    background:#2563eb;

    transform:translateY(-2px);

}


/* =======================================================
   MAIN GRID
======================================================= */

.footer-main{

    border-top:1px solid #e5e7eb;

    padding-top:3rem;

}


.footer-grid{

    display:grid;

    grid-template-columns:

        2fr
        1fr
        1fr;

    gap:3rem;

}


/* =======================================================
   BRAND
======================================================= */

.footer-brand img{

    height:40px;

    width:auto;

    margin-bottom:1rem;

}


.footer-brand-title{

    display:none;

    font-size:2rem;

    font-weight:700;

    color:#111827;

}


.footer-brand-title span{

    color:#3b82f6;

}


.footer-description{

    max-width:18rem;

    font-size:14px;

    line-height:1.7;

    color:#6b7280;

}


/* =======================================================
   COLUMNS
======================================================= */

.footer-column h5{

    margin-bottom:1rem;

    font-size:14px;

    font-weight:700;

    color:#111827;

}


.footer-links{

    display:flex;

    flex-direction:column;

    gap:.75rem;

}


.footer-link{

    text-decoration:none;

    color:#6b7280;

    font-size:14px;

    transition:

        color .25s ease;

}


.footer-link:hover{

    color:#3b82f6;

}


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

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

    margin-top:3rem;

    padding-top:2rem;

    border-top:1px solid #e5e7eb;

    font-size:12px;

    color:#6b7280;

}


.footer-bottom-links{

    display:flex;

    gap:1.5rem;

}


.footer-bottom-links a{

    text-decoration:none;

    color:inherit;

    transition:

        color .25s ease;

}


.footer-bottom-links a:hover{

    color:#111827;

}


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

@media(max-width:768px){

    .footer{

        padding:

            5rem 0
            2.5rem;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer-bottom-links{

        flex-wrap:wrap;

        justify-content:center;

    }

}