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

.site-footer{

    margin-top:120px;

    background:linear-gradient(
        180deg,
        #fff8fc 0%,
        #ffffff 100%
    );

    border-top:1px solid rgba(224,194,220,.35);

}

.footer-shell{

    max-width:1200px;

    height: 100px;

    margin:auto;

    padding:0px 1% 25px;

}


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

.footer-main{

    display:grid;

    grid-template-columns:1.55fr 1fr .8fr .8fr .8fr;

    gap:35px;

    align-items:start;

    padding: 20px 0px;

}


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

.footer-cta{

    display:flex;

    flex-direction:column;

    gap:16px;


    border-right:1px solid rgba(224,194,220,.35);

}

.footer-heading{

    font-size:clamp(2rem,2vw,3em);

    max-width: 630px;

    padding-bottom: 10px;

    font-family: var(--ff-heading);

    font-weight:450;

    line-height:1.5;

    color:var(--clr-heading);

}

.footer-heading span{

    color:var(--clr-primary);

}

.footer-subheading{

    max-width:310px;

    color:var(--clr-text);

    line-height:1.8;

    font-size:1rem;

    font-family: var(--ff-paragraph);

}


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

.footer-analysis-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:max-content;

    margin-top:25px;

    padding:17px 34px;

    border-radius:999px;

    background:var(--clr-primary);

    font-family: var(--ff-paragraph);

    color:#fff;

    text-decoration:none;

    font-weight:400;

    transition:.35s ease;

}

.footer-analysis-btn span{

    font-size:1.1rem;
    font-family: var(--ff-paragraph);

}


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

.footer-brand{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.footer-logo{

    width:150px;

}

.footer-description{

    max-width:290px;

    font-family: var(--ff-paragraph);

    color:var(--clr-text);

    font-size: 16.5px;

    line-height:1.9;

}


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

.footer-socials{

    display:flex;

    gap:15px;

    margin-top:5px;

}

.footer-socials a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:var(--clr-white);

    color:var(--clr-heading);

    border:1px solid rgba(224,194,220,.4);

    transition:.35s;

}


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

.footer-column{

    display:flex;

    flex-direction:column;

    padding-top: 20px;

}

.footer-title{

    margin-bottom:29px;

    font-size:1.2rem;

    font-family: var(--ff-paragraph);

    font-weight:350;

    color:var(--clr-primary);

}

.footer-links{

    list-style:none;

}

.footer-links li{

    margin-bottom:8px;

}
.footer-icon{

    width:36px;

    height:36px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    border:1px solid #e8d9e8;

    background:#fff;

    transition:.3s ease;

}

.footer-links a{

    font-family: var(--ff-paragraph);

    position:relative;

    display:inline-block;

    color:var(--clr-text);

    text-decoration:none;

    transition:color .3s ease;

}

.footer-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:2px;

    background:var(--clr-primary);

    border-radius:999px;

    transition:width .5s ease;

}

.footer-links a:hover{

    color:var(--clr-primary);
    

}

.footer-links a:hover::after{

    width:100%;

}



/*==========================================
            BADGES
==========================================*/

.footer-badge{

    margin-left:10px;

    padding:4px 10px;

    border-radius:999px;

    background:#f9e8f7;

    color:var(--clr-primary);

    font-size:.68rem;

    font-family: var(--ff-paragraph);

    font-weight:600;

}


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

.footer-bottom{

    margin-bottom: 10px;

    padding-top:23px;

    padding-bottom: 30px;

    border-top:2px solid rgba(224,194,220,.35);

    text-align:center;

}

.footer-bottom p{

    color:var(--clr-text);

    font-size:.95rem;

    font-family: var(--ff-paragraph);

}

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

.footer-analysis-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(222,171,209,.25);

}

.footer-analysis-btn span{

    transition:.35s ease;

}

.footer-analysis-btn:hover span{

    transform:translateX(5px);
}


.signal-heart{
    background: none;
    border: none;
    cursor: pointer;
    padding-top: 10px;

    color: var(--clr-primary-dark);
    font-size: 19px;
    line-height: 1;

    transition: .35s;
}

.signal-heart:hover{
    color: var(--color-primary-hover);
    transform: scale(1.15);
}
/*==========================================
            TABLET
==========================================*/

@media (max-width:1024px){

    .footer-shell{
        width: 900px;
    }

    .footer-main{

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

        gap:50px;

        margin-bottom: 20px;

    }

    .footer-cta{
        display: none;

    }


    .footer-subheading{

        max-width:550px;

    }

    .footer-brand{

        grid-column:1/-1;

        align-items:center;

        text-align:center;

    }

    .footer-description{

        max-width:500px;

    }

    .footer-socials{

        justify-content:center;

    }

    .footer-column{
        width: 200px;
    }

}


/*==========================================
            MOBILE
==========================================*/
/*==========================================
            MOBILE
==========================================*/

@media (max-width:768px){

    .site-footer{

        margin-top:90px;

    }

    .footer-shell{

        max-width:100%;

        height:auto;

        padding:50px 24px 30px;

    }

    .footer-main{

        grid-template-columns:1fr;

        gap:45px;

        text-align:center;

    }

    .footer-cta{

        align-items:center;

        border-right:none;

        border-bottom:1px solid rgba(224,194,220,.35);

        padding-bottom:35px;

    }

    .footer-heading{

        font-size:2rem;

        line-height:1.4;

    }

    .footer-subheading{

        max-width:100%;

        font-size:.98rem;

    }

    .footer-analysis-btn{

        width:100%;

        max-width:320px;

        justify-content:center;

    }

    .footer-brand{

        align-items:center;

    }

    .footer-logo{

        width:170px;

    }

    .footer-description{

        max-width:100%;

    }

    .footer-socials{

        justify-content:center;

    }

    .footer-column{

        align-items:center;

        padding-top:0;

    }

    .footer-title{

        margin-bottom:18px;

    }

    .footer-links li{

        margin-bottom:14px;

    }

    .footer-bottom{

        margin-top:10px;

    }

}


/*==========================================
        SMALL MOBILE
==========================================*/

@media (max-width:480px){

    .site-footer{

        margin-top:80px;

    }

    .footer-shell{

        padding:45px 20px 25px;

    }

    .footer-main{

        gap:38px;

    }

    .footer-heading{

        font-size:1.65rem;

    }

    .footer-subheading{

        font-size:.92rem;

        line-height:1.8;

    }

    .footer-analysis-btn{

        width:100%;

        padding:15px 24px;

        font-size:.95rem;

    }

    .footer-logo{

        width:145px;

    }

    .footer-description{

        font-size:.95rem;

        line-height:1.8;

    }

    .footer-title{

        font-size:1.05rem;

    }

    .footer-socials{

        gap:12px;

    }

    .footer-socials a{

        width:40px;

        height:40px;

    }

    .footer-bottom{

        padding-top:20px;

    }

    .footer-bottom p{

        font-size:.82rem;

        line-height:1.7;

    }

}