:root {
    --ft-lg-perc: 6%;
    --ft-rg-perc: 85%;
}

footer {  }

footer h2 { text-align: center; color: var(--light-text-color); font-weight: 500; line-height: 1.3; margin-bottom: 1.1rem; font-size: 2.5rem; }
footer h5 { color: var(--light-text-color); font-weight: 500; line-height: 1.6; margin-bottom: 1.5rem; font-size: 1.1rem; }
footer h5 a { text-decoration: none!important; }
footer p { color: var(--light-text-color); font-weight: 400; line-height: 1.8; margin-bottom: .75rem; font-size: .9rem; }
footer a { color: var(--light-text-color); text-decoration: none; transition: 0.4s; }
footer a:hover { text-decoration: underline; }
footer ul { list-style: none; margin-bottom: 0; padding-left: 0; }
footer ul li {  }
footer .socials { padding-top: .5rem; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: .5rem; }
footer .socials a { display: inline-block; text-decoration: none; color: inherit; }
footer .socials a img { width: 1.4rem; height: 1.4rem; vertical-align: middle; display: inline-block; }

footer .top { background: linear-gradient(180deg, rgba(var(--darker-pri-color-rgb), 0) calc(100% - var(--ft-lg-perc)), rgba(var(--darker-pri-color-rgb), 1) 100%), linear-gradient(0deg, rgba(var(--darker-pri-color-rgb), 0) calc(100% - var(--ft-lg-perc)), rgba(var(--darker-pri-color-rgb), 1) 100%), radial-gradient(circle, rgba(var(--darker-pri-color-rgb), 0) var(--ft-rg-perc), rgba(var(--darker-pri-color-rgb), 1) 100%), url('../img/grid-bg.png'), var(--darker-pri-color); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: local; }
footer .top .container {  }
footer .top .container .content { display: block; width: 40%; margin: 0 auto; text-align: center; padding-top: 6.5rem; padding-bottom: 6.5rem; }
footer .top p { text-align: center; font-size: 1rem; line-height: 1.5; width: 55%; margin: 0 auto; margin-bottom: 1.5rem; }
footer .top a { text-align: center; text-decoration: none!important; font-size: .9rem; padding: 1rem; }

footer .bottom { background-color: var(--darker-pri-color); }
footer .bottom .container {  }
footer .bottom .container .content { padding-top: 5rem; padding-bottom: 3rem; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; align-content: space-between; }
footer .bottom .sitemap { flex: 0 0 70%; margin-right: -2rem; padding-bottom: 6rem; margin-left: -2rem; display: flex; flex-direction: row; align-items: stretch; align-content: flex-start; flex-wrap: wrap; justify-content: flex-start; }
footer .bottom .about { flex: 0 0 30%; padding: 0 2rem 6rem 2rem; }
footer .bottom .about .logo {  }
footer .bottom .about .logo img { height: 1.3rem; width: auto; display: block; margin-bottom: 1.5rem; }
footer .bottom .copyright { flex: 1 1 100%; padding-top: 2rem; }
footer .bottom .copyright p { font-size: .8rem; }

footer .bottom .column { flex: 1; padding: 0 2rem; }

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    footer .top .container .content { width: 60%; }
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    footer .top .container .content { width: 70%; }

    footer .bottom .container .content { padding-top: 4rem; }
    footer .bottom .sitemap { margin-right: -1rem; margin-left: -1rem; }
    footer .bottom .column { padding: 0 1rem; }
    footer .bottom .about { padding: 0 1rem 6rem 1rem; }
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    footer .top .container .content { width: 100%; padding-top: 5rem; padding-bottom: 5rem; }

    footer .bottom .container .content { padding-top: 2rem; }
    footer .bottom .sitemap { flex: 0 0 100%; padding-bottom: 3rem; order: 2; }
    footer .bottom .about { flex: 0 0 60%; padding: 0 0 3rem 0; order: 1; }
    footer .bottom .copyright { order: 3; }
}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    footer h5 { margin-bottom: .5rem; }

    footer .top .container .content { padding-top: 7rem; padding-bottom: 7rem; }
    footer .top p { width: 70%; }

    footer .bottom .container .content { padding-top: 1.5rem; }
    footer .bottom .sitemap { padding-bottom: 2rem; margin-left: 0; margin-right: 0; }
    footer .bottom .about { flex: 0 0 80%; }
    footer .bottom .column { flex: 1 1 100%; padding: 0 0 2rem 0; }
    footer .bottom .copyright { padding-top: 0; }
}