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

.aa-footer{
    width:100%;

    background:#080808;

    color:#fff;

    border-top:
        1px solid
        #202020;
}


.aa-footer-inner{
    width:min(
        1450px,
        calc(100% - 60px)
    );

    margin:0 auto;
}


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

.aa-footer-top{
    display:grid;

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

    gap:60px;

    padding:
        65px 0
        55px;
}


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

.aa-footer-brand{
    display:flex;

    align-items:center;

    gap:16px;

    align-self:start;
}


.aa-footer-brand img{
    width:66px;

    height:66px;

    object-fit:contain;

    flex-shrink:0;
}


.aa-footer-brand strong{
    display:block;

    max-width:220px;

    color:#fff;

    font-size:16px;

    line-height:1.25;

    font-weight:900;
}


.aa-footer-brand span{
    display:block;

    margin-top:6px;

    color:#777;

    font-size:12px;
}


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

.aa-footer-column{
    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:11px;
}


.aa-footer-title{
    margin-bottom:8px;

    color:#f3c400;

    font-size:10px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:1.5px;
}


.aa-footer-column a,
.aa-footer-column span{
    color:#8b8b8b;

    font-size:12px;

    line-height:1.45;

    text-decoration:none;

    transition:
        color .2s ease;
}


.aa-footer-column a:hover{
    color:#f3c400;
}


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

.aa-footer-bottom{
    min-height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    border-top:
        1px solid
        #202020;

    color:#777;

    font-size:13px;

    line-height:1.5;
}


.aa-footer-bottom > span{
    color:#777;

    font-size:13px;
}


.aa-footer-bottom-links{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    justify-content:flex-end;

    gap:24px;
}


.aa-footer-bottom a{
    color:#777;

    font-size:13px;

    text-decoration:none;

    transition:
        color .2s ease;
}


.aa-footer-bottom a:hover{
    color:#f3c400;
}


/* =========================================================
   CRÉDIT LPROJECT WEB
========================================================= */

.aa-footer-bottom .aa-footer-credit,
.aa-footer-bottom .aa-footer-credit:visited{
    color:#8b8b8b;

    font-weight:700;
}


.aa-footer-bottom .aa-footer-credit:hover,
.aa-footer-bottom .aa-footer-credit:focus{
    color:#f3c400;
}


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

@media(max-width:1000px){

    .aa-footer-top{
        grid-template-columns:
            1fr 1fr;

        gap:45px;
    }

}


@media(max-width:700px){

    .aa-footer-inner{
        width:
            calc(100% - 30px);
    }


    .aa-footer-top{
        grid-template-columns:1fr;

        gap:35px;

        padding:
            50px 0
            40px;
    }


    .aa-footer-bottom{
        padding:
            22px 0;

        align-items:flex-start;

        flex-direction:column;

        font-size:12px;
    }


    .aa-footer-bottom > span,
    .aa-footer-bottom a{
        font-size:12px;
    }


    .aa-footer-bottom-links{
        justify-content:flex-start;

        gap:12px 18px;
    }

}