footer {
--footer-bg: var(--light);
--footer-logo-max-width: 248px;
--footer-logo-min-width: 90px;
--footer-link-color: var(--dark);
--footer-link-hover-color: var(--color-2);
--footer-link-bg: var(--light);
--footer-ling-hover-bg: var(--light);
--footer-link-gap: 5px;
--footer-gap: 0 50px;
--footer-link-padding: 0 0;
--footer-social-gap: 8px;
--footer-body-max-width: 900px;
}

footer {
background: var(--color-3);
padding-top: 7rem;
padding-bottom: 5rem;
}

footer li {
margin-bottom: 0.5rem;
}

footer .logo-footer {
display: flex;
align-items: center;
justify-content: center;
}

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;
align-items: center;
background: none;
padding: var(--footer-link-padding);
gap: var(--footer-social-gap);
}

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

footer a {
color: var(--footer-link-color);
transition: all ease 0.2s;
line-height: 1rem;
}

footer .time {
text-transform: unset;
}

footer .address {
line-height: 22px;
}

footer .address span {
font-size: 16px;
}

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 {
display: flex;
padding: var(--footer-link-padding);
background: none;
white-space: nowrap;
color: #fff;
}

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

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

footer .bottom-bar {
height: 60px;
width: 100%;
margin-top: 3rem;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-1);
color: #fff;
gap: 0.5rem;
}

footer .bottom-bar span {
color: #fff;
}

footer .footer-link-title {
padding: 15px 0;
position: relative;
text-transform: uppercase;
color: #fff;
font-size: 17px;
font-family: var(--title-font);
}

footer .footer-link-title span {
position: relative;
}

footer .footer-link-title span:after {
content: "";
position: absolute;
bottom: -7px;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}

.social-link i {
font-size: 25px;
color: #fff;
}

.social-link li {
margin-right: 0.5rem;
}
/* ------------- GRID ------------- */
footer .footer-body {
max-width: var(--footer-body-max-width);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
gap: var(--footer-gap);
grid-template-areas: " slot-1 slot-2 slot-3 slot-4";
}

footer .logo-footer {
grid-area: logo;
}

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

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

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

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

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

footer .slot-6 {
grid-area: slot-6;
}
/* breackpoint */
@media(max-width:1400px) {
footer {
padding-top: 7rem;
}
}
@media(max-width:991px) {
footer .footer-body,
footer.logo-center .footer-body {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas: "slot-1 slot-2" "slot-3 slot-4";
max-width: 450px;
gap: 20px 50px;
}
}
@media(max-width:767px) {
footer .footer-body,
footer.logo-center .footer-body {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto;
grid-template-areas: "logo logo " "slot-1 slot-2" "slot-3 slot-4" "slot-5 slot-6";
}
}
@media(max-width:450px) {
footer .footer-body,
footer.logo-center .footer-body {
display: flex;
flex-direction: column;
}

footer .slot-1 {
order: 1;
}

footer .slot-2 {
order: 3;
}

footer .slot-3 {
order: 4;
}

footer .slot-4 {
order: 6;
}

footer .slot-5 {
order: 2;
}

footer .slot-6 {
order: 5;
}
}