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

.footer{

    letter-spacing: -0.05em;

    padding: var(--gap);

    background: var(--bg);
    color: var(--text);

}


/* ==========================================
   LINE
========================================== */

.footer__line{

    width: 100%;
    height: 1px;

    background: var(--text-grey);

   

    margin-bottom: 0px;

}


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

.footer__top{

    margin-top: 10px;

    /*background-color: red;*/

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    gap: ;

    margin-bottom: 120px;

}


.footer__mail{

   /* background-color: lightblue;*/

    grid-column: span 6;

    font-size: var(--font-size-lg);

    text-decoration: none;


    font-weight: 800;
    letter-spacing: var(--letter-spacing-small);

}


.footer__socials{

    grid-column: span 6;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    letter-spacing: var(--letter-spacing-small);

    list-style: none;

    font-weight: 800;

}


.footer__socials a{

    font-size: var(--font-size-lg);

    text-decoration: none;

    
    /* background-color: lightblue;*/

    font-weight: 800;

}


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

.footer__brand{

    width: 100%;

    margin-bottom: 40px;

}


.footer__brand img{

    display: block;

    width: 100%;

    height: auto;

}

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

.footer__bottom{

    display: flex;

    align-items: center;

    justify-content: flex-start;

    opacity: 1;

    color: var(--text-grey);

    font-size: var(--font-size-md);

}



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

@media (max-width: 768px){

    .footer{

        padding: 20px;
    }

    .footer__top{

        display: flex;
        flex-direction: column;

        gap: 40px;

        margin-bottom: 80px;
    }

    .footer__mail{

        font-size: var(--font-size-md);
    }

    .footer__socials{

        gap: 2px;
    }

    .footer__socials a{

        font-size: var(--font-size-md);
    }

    .footer__brand{

        margin-bottom: 30px;
    }

    .footer__brand img{

        width: 100%;
        height: auto;
    }

    .footer__bottom{

        font-size: var(--font-size-sm);
    }

}