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

.footer{

    background:var(--clrHeading);

    color:#fff;

}

.footer .container{

    min-height:300px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:var(--space40);

    padding-block:var(--space48);

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

.footerContent{

    max-width:720px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:var(--space20);

}

.footerTag{

    display:inline-flex;

    align-items:center;

    padding:.45rem 1rem;

    border-radius:var(--borderRadiusFull);

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

    color:var(--clrPrimary);

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.footerContent h2{

    color:#fff;

    margin:0;

}

.footerContent p{

    max-width:600px;

    color:rgba(255,255,255,.75);

    margin:0;

}
/*==================================================
                FOOTER BUTTON
==================================================*/

.footerContent .btn{

    margin-top:var(--space16);

}

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

.footerBottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:var(--space20);

    padding-top:var(--space24);

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

}

.footerBottom p{

    margin:0;

    font-size:.9rem;

    color:rgba(255,255,255,.65);

}

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

.footerCredit{

    color:var(--clrPrimary);

    text-decoration:none;

    font-weight:600;

    transition:all .3s ease;

}

.footerCredit:hover{

    color:#fff;

}

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

@media (max-width:768px){

    .footer .container{

        min-height:auto;

        padding-block:var(--space40);

    }

    .footerBottom{

        flex-direction:column;

        text-align:center;

        gap:var(--space16);

    }

}