footer{
    background: linear-gradient(to bottom right,#0d9488, #0f766e);
    padding-block: var(--space-16);
    & *:not(.footer_logo__txt :where(h3, p)){
        color: var(--color-teal-50);
    }
}
.footer_logo__img img{
    max-width: 48px;
}
.footer__logo{
    display: flex;
    align-items: center;
    column-gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.footer_logo__txt h3{
    font-size: var(--space-5);
    font-weight: var(--fw-bold);
    color: var(--color-white);
}

.footer_logo__txt p{
    color: var(--color-teal-100);
}

.footer_sociel__icons ul{
    display: flex;
    align-items: center;
    column-gap: var(--space-4);
    margin-top: var(--space-6);
}

.footer_sociel__icons a{
    height: 40px;
    width: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #ffffff1a;
    border-radius: 50%;
    & img{
        max-width: 20px;
    }
}

.footer_sociel__icons img, .footer_support__icon img{
    max-width: 20px;
    width: 20px;
}
.footer__support{
    display: flex;
    align-items: center;
    column-gap: calc(var(--space-6) - 8px);
    &:not(li:last-child .footer__support){
        margin-bottom: var(--space-6);
    }
}

.footer__grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-12);
}

.footer__nav h4{
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-6);
}

.footer__nav li:not(:last-child){
    margin-bottom: var(--space-3);
}

.newsletter__inner input{
    width: 100%;
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: #ffffff1a;
    border: 1px solid #fff3;
    font-size: var(--fs-sm);
    margin-top: var(--space-4);
    &::placeholder{
        color: #99F6E4;
    }
}

.newsletter__inner button{
    width: 100%;
    display: block;
    color: var(--color-teal-600);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    background: var(--color-white);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    border: none;
    margin-top: var(--space-3);
}

.footer__nav a{
    font-size: var(--fs-sm);
}

@media screen and (max-width: 767px){
    .footer__grid{
        grid-template-columns: 100%;
    }
}