.footer-container { display: flex; flex-direction: column; align-items: center; } #footer-nav { padding: 0; margin-top: 10px; } nav ul, #footer-nav ul { display: flex; justify-content: center; list-style: none; padding: 10px 0; margin: 0; } #footer-nav ul { position: relative; list-style-type: none; flex-direction: row; background-color: var(--color-destin-sand); border-radius: 5px; width: fit-content; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } nav ul li, #footer-nav ul li { margin: 0 20px; border-radius: 5px; } nav ul li a, #footer-nav ul li a { font-family: 'Arial', sans-serif; font-size: 1rem; font-weight: bold; color: var(--color-dark-green); text-decoration: underline; padding: 8px 15px; border-radius: 10px; transition: background-color 0.3s ease, color 0.3s ease; } nav ul li a:hover, #footer-nav ul li a:hover { background-color: var(--color-destin-sand); color: var(--color-dark-green); border: solid .5px var(--color-dark-green); padding: 7px 14px; box-shadow: var(--shadow-medium); } /* |--↓-↓-↓ Start Footer ↓-↓-↓--| */ #footer { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } #newsletter-container { display: inline-block; margin-bottom: 10px; text-align: center; } #email-input { display: inline-block; width: 55%; padding: 5px 10px; text-align: center; border-radius: 10px; box-shadow: var(--shadow-subtle); } button#submit-btn { display: inline-block; padding: 5px 10px; border-radius: 10px; cursor: pointer; box-shadow: var(--shadow-subtle); z-index: 5; } footer div label { font-size: 1.2rem; font-weight: bold; color: var(--color-dark-green); } #newsletter-form { display: inline-block; background-color: var(--color-soft-golden); border: solid var(--color-destin-sand); border-radius: 10px; width: 60%; padding: 5px; text-align: center; box-shadow: var(--shadow-medium); } #social-media { position: relative; display: flex; flex-direction: column; justify-content: center; text-align: center; } #social-media h3 { text-align: center; } #social-media ul { position: relative; display: inline-block; list-style-type: none; text-align: center; } #social-media ul li { display: inline-block; margin: 0 10px; padding: 0 10px; color: var(--color-dark-green); } #social-media ul li a { font-family: 'Arial', sans-serif; font-size: 1rem; color: var(--color-dark-green); text-decoration: none; padding: 8px 15px; border-radius: 5px; transition: background-color 0.3s ease, color 0.3s ease; } #social-media ul li a:hover { background-color: var(--color-soft-golden); color: var(--color-destin-sand); box-shadow: var(--shadow-strong); } #copyright { text-align: center; margin-bottom: 20px; font-size: 1.1rem; color: var(--color-dark-green); } #copyright a { color: var(--color-dark-green); font-weight: 600; font-size: 1.1rem; text-decoration: one; } #copyright a:hover { color: var(--color-destin-white); }