diff --git a/css/styles.css b/css/styles.css index 9f99b27..4f1eee7 100644 --- a/css/styles.css +++ b/css/styles.css @@ -652,6 +652,56 @@ img { color: #444; } +.footer-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 40px; + padding-bottom: 30px; + border-bottom: 1px solid #e0e0e0; + max-width: 1200px; + margin-left: auto; + margin-right: auto; +} + +.footer-logo { + margin: 0; +} + +.footer-logo img { + height: 90px; + transition: transform 0.3s; +} + +.footer-logo img:hover { + transform: scale(1.05); +} + +.footer-contact-info { + text-align: right; +} + +.footer-contact { + font-size: 18px; + font-weight: 600; + margin-bottom: 10px; + color: #333; +} + +.footer-email { + font-size: 16px; +} + +.footer-email a { + color: #555; + text-decoration: none; + transition: color 0.2s; +} + +.footer-email a:hover { + color: var(--primary-red); +} + .footer-columns { display: flex; flex-wrap: wrap; @@ -670,12 +720,6 @@ img { margin-bottom: 30px; } -.footer-column:first-child { - display: flex; - flex-direction: column; - align-items: flex-start; -} - .footer-title { font-size: 18px; font-weight: 700; @@ -744,20 +788,6 @@ img { opacity: 0.8; } -.footer-logo { - margin-bottom: 25px; - align-self: flex-start; -} - -.footer-logo img { - height: 90px; - transition: transform 0.3s; -} - -.footer-logo img:hover { - transform: scale(1.05); -} - .footer-social { display: flex; justify-content: center; @@ -785,22 +815,6 @@ img { box-shadow: 0 5px 15px rgba(0,0,0,0.1); } -.footer-email { - font-size: 16px; - align-self: flex-start; - margin-bottom: 5px; -} - -.footer-email a { - color: #555; - text-decoration: none; - transition: color 0.2s; -} - -.footer-email a:hover { - color: var(--primary-red); -} - @media (max-width: 1000px) { .footer { margin-left: 0; @@ -808,6 +822,21 @@ img { padding: 40px 20px 20px; } + .footer-header { + flex-direction: column; + text-align: center; + margin-bottom: 30px; + padding-bottom: 20px; + } + + .footer-logo { + margin-bottom: 20px; + } + + .footer-contact-info { + text-align: center; + } + .footer-columns { flex-direction: column; align-items: center; @@ -820,10 +849,6 @@ img { max-width: 400px; } - .footer-column:first-child { - align-items: center; - } - .footer-title::after { left: 50%; transform: translateX(-50%); diff --git a/includes/footer.php b/includes/footer.php index cf04da1..eb63ebc 100644 --- a/includes/footer.php +++ b/includes/footer.php @@ -1,14 +1,17 @@