footer {
--footer-bg: var(--bg-light);
--footer-logo-max-width: 259px;
--footer-logo-min-width: 90px;
--footer-link-color: var(--dark);
--footer-link-hover-color: white;
--footer-link-bg: var(--bg-light);
--footer-ling-hover-bg: var(--bg-light);
--footer-link-gap: 5px;
--footer-gap: 0 30px;
--footer-link-padding: 0 0;
--footer-social-gap: 8px;
--footer-body-max-width: 700px;
}
/* .btn-ciel {
    background-color: var(--color-1-alt);
    color: #fff;
}
.btn-ciel:hover {
    background-color: var(--color-1-alt);
    color: #fff;
} */

footer {
background: var(--footer-bg); /* padding-top    : 10rem; */
background-size: cover;
}

footer li,
footer li a:not(.btn) ,
footer a span{
margin-bottom: 0.8rem;
font-weight: 300;
line-height: 1.2;
color:#000 !important;
}

footer .logo-footer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-bottom: 1rem;
}

footer .logo-footer img {
width: 100%;
max-width: var(--footer-logo-max-width);
min-width: var(--footer-logo-min-width);
}

footer .social-link {
display: flex;
background: none;
padding: var(--footer-link-padding);
gap: var(--footer-social-gap);
}

footer .social-link a {
display: flex;
width: 25px;
background: var(--color-2);
height: 25px;
border-radius: 100%;
align-items: center;
justify-content: center;
}

footer .social-link i {
font-size: var(--14px);
}

footer a {
color: var(--footer-link-color);
transition: all ease 0.2s; /* text-transform: uppercase; */
/* line-height: 1rem; */
font-weight: 300;
}

footer .time {
text-transform: unset;
}

footer .address span {
font-size: var(--14px);
    padding: 5px;
    border-radius: 10px;
}

footer a:hover {
color: var(--footer-link-hover-color);
}

footer .footer-body > * {
display: flex;
flex-direction: column;
gap: var(--footer-link-gap);
}

footer .slot > li > a:not(.btn) {
display: flex;
padding: var(--footer-link-padding);
background: none;
 white-space: nowrap;

}

footer .slot-2 > li > a:not(.btn),footer .slot-3 > li > a:not(.btn) {
text-decoration: underline;

}
footer .footer-hover:hover span{
background: var(--white);

}
/* footer .slot > li > a:hover {
background: var(--footer-link-hover-bg);
} */

footer .slot > li > a > i {
display: flex;
justify-content: center;
width: 28px;
padding-right: 12px;
margin-top: 2px;
}

footer .bottom-bar {
height: 50px;
width: 100%;
background-color: var(--bg-light);
}

footer .footer-link-title {
padding: 15px 0;
font-weight: bold;
position: relative;
text-transform: uppercase;
}

/* footer .footer-link-title:after {
content: "";
position: absolute;
bottom: 4px;
left: 0;
width: 50%;
height: 1px;
background: rgba(194, 194, 194, 1);
} */

.social-link i {
font-size: var(--25px);
color: #fff;
}
.btn-footer{
    position:absolute;
     top: -10px;
    right: -80px;
}
/* ------------- GRID ------------- */

footer .container {
display: grid;
grid-template-columns: 100px 285px 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-auto-columns: 2fr; /* gap: 20px 20px; */
grid-auto-flow: row dense;
grid-template-areas:
        ". slot-1 slot-2 slot-3 slot-4"
        ". slot-1 slot-2 slot-5 slot-5";
background: var(--bg-light);
border-radius: 80px 0 0 0;
max-width: 100%;
}

.footer .logo {
grid-area: logo;
background: white;
padding-left: 2rem;
border-radius: 0 0 80px 0;
}

.slot-1 {
grid-area: slot-1;
}

.slot-1 li a {
text-transform: uppercase;
}

.slot-2 {
grid-area: slot-2;
}

.slot-3 {
grid-area: slot-3;
}

.slot-3 li a {
/* text-transform: uppercase; */
}

.slot-4 {
grid-area: slot-4;
}

.slot-5 {
grid-area: slot-5;
}

@media screen and (max-width:1400px) {
footer .container {
display: grid;
grid-template-columns: 20px 1fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas: ". slot-1 slot-2 " ". slot-3 slot-4 " ". slot-5 slot-5 ";
gap: 20px 40px;
}
}
@media screen and (max-width:992px) {
.footer .bg-white {
background: var(--bg-white);
}
footer {
    border-radius: 70px 70px 0 0;
}
.footer .logo {
background: var(--bg-light);
margin: 2rem 0;
}

footer .container {
background: var(--bg-white);
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas: "slot-1 slot-2" "slot-3 slot-4" "slot-5 slot-5";
border-radius: 0;
}
}
@media screen and (max-width:768px) {
footer .container {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas: "slot-1" "slot-2" "slot-3" "slot-4" "slot-5";
}
}