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

.footer {
    background: #111;
        border-top: 1px solid #A1CDF2FF;
    color: #fff;
}

/* Container */
.footer-container {
    max-width: 1400px;
    margin: auto;
    padding: 50px 40px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;

    flex-wrap: wrap;
    letter-spacing: 1px;
}

.h2footer{    margin-bottom: 5%;}

/* Sections */
.footer-section {
    flex: 1;
    min-width: 180px;

    display: flex;
    flex-direction: column;
}

/* Brand */
.footer-brand {
    flex: 2;
    max-width: 450px;
}

.footer-brand img {
    width: 180px;
    margin-bottom: 20px;
    border-radius: 100%;
}

.footer-brand p {
    font-size: 15px;
    line-height: 1.7;
    max-width: 350px;
}

/* Titles */
.footer-section h3 {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 18px;
    letter-spacing: 1px;
}

/* Links */
.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    transition: 0.2s ease;
}

.footer-section a:hover {
    opacity: 0.6;
}

/* Socials */
.socials {
    display: flex;
    align-items: center;
    gap: 18px;
}

.socials img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: 0.2s ease;
}

.socials img:hover {
    transform: translateY(-3px);
}

/* Bottom */
.footer-bottom {
border-top: 1px solid #000;
    padding: 18px 20px;
    text-align: center;
}

.footer-bottom p {
    font-size: 15px;
    margin: 0;
    letter-spacing: 1px;
}

/* ========================================= */
/* DESKTOP LARGE 2048px */
/* ========================================= */

@media screen and (min-width:1800px){

    .footer-container{
        max-width:1800px;
        padding:70px 80px;
        gap:100px;
    }

    .footer-brand{
        max-width:600px;
    }

    .footer-brand p{
        font-size:20px;
        max-width:500px;
    }

    .footer-section h3{
        font-size:22px;
    }

    .footer-section a{
        font-size:22px;
    }

    .socials img{
        width:42px;
        height:42px;
    }

    .footer-bottom p{
        font-size:18px;
    }
}

/* ========================================= */
/* TABLETTE */
/* ========================================= */

@media screen and (max-width:1024px){

    .footer-container{
        padding:50px 30px;
        gap:40px;
    }

    .footer-brand{
        max-width:100%;
    }

    .footer-brand img{
        width:150px;
    }

    .footer-brand p{
        max-width:100%;
        font-size:16px;
    }

    .footer-section{
        min-width:220px;
    }

    .footer-section h3{
        font-size:18px;
    }

    .footer-section a{
        font-size:16px;
    }

    .socials{
        gap:14px;
    }

    .socials img{
        width:30px;
        height:30px;
    }
}

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

@media screen and (max-width:768px){

    .footer{
        text-align:center;
    }

    .footer-container{
        padding:40px 20px;

        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:40px;
    }

    .footer-section{
        width:100%;
        align-items:center;
    }

    .footer-brand{
        width:100%;
        max-width:100%;
        align-items:center;
    }

    .footer-brand img{
        width:130px;
        margin-bottom:16px;
    }

    .footer-brand p{
        font-size:15px;
        line-height:1.6;
        max-width:100%;
    }

    .footer-section h3{
        font-size:18px;
        margin-bottom:14px;
    }

    .footer-section ul{
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .footer-section a{
        font-size:16px;
    }

    .socials{
        justify-content:center;
        flex-wrap:wrap;
    }

    .socials img{
        width:28px;
        height:28px;
    }

    .footer-bottom{
        padding:16px;
    }

    .footer-bottom p{
        font-size:14px;
        line-height:1.5;
    }
}

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

@media screen and (max-width:480px){

    .footer-container{
        padding:35px 16px;
    }

    .footer-brand img{
        width:110px;
    }

    .footer-brand p{
        font-size:14px;
    }

    .footer-section h3{
        font-size:16px;
    }

    .footer-section a{
        font-size:15px;
    }

    .socials{
        gap:12px;
    }

    .socials img{
        width:24px;
        height:24px;
    }

    .footer-bottom p{
        font-size:13px;
    }
}

/* ========================================= */
/* FULL HD 1920x1080 */
/* ========================================= */

@media screen and (min-width:1600px) and (max-width:2047px){

    .footer-container{
        max-width:1700px;
        padding:70px 60px;
        gap:80px;
    }

    .footer-brand{
        max-width:550px;
    }

    .footer-brand img{
        width:220px;
    }

    .footer-brand p{
        font-size:18px;
        max-width:500px;
    }

    .footer-section h3{
        font-size:22px;
    }

    .footer-section a{
        font-size:20px;
    }

    .socials{
        gap:24px;
    }

    .socials img{
        width:40px;
        height:40px;
    }

    .footer-bottom{
        padding:24px;
    }

    .footer-bottom p{
        font-size:18px;
    }
}