.footer { color: #000000; background: #ffffff; padding: 40px 0; } .container { width: 90%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .left { display: flex; flex-direction: column; gap: 15px; } .logo { width: 60px; opacity: 0.9; border-radius: 100%; } .copy { font-size: 14px; opacity: 0.7; } .center { display: flex; flex-direction: column; gap: 14px; font-size: 16px; } .center a { color: #000000; text-decoration: none; cursor: pointer; transition: 0.3s ease; } .center a:hover { color: #484848; } .right { text-align: right; } .phone { color: #000000; font-size: 20px; font-weight: 600; } .mail { margin-top: 6px; display: inline-block; font-size: 16px; color: #000000; } .mail:hover { color: #525252; } /* Mobile */ @media (max-width: 900px) { .container { gap: 40px; text-align: center; } .right { text-align: center; } } @media (max-width: 700px){ .logo { width: 40px; opacity: 0.9; border-radius: 100%; } .center { display: flex; flex-direction: column; gap: 4px; font-size: 10px; } .footer { padding: 20px 0; } .left { gap: 10px; } .copy { font-size: 10px; } .center a:hover { color: #fff; } .right { text-align: right; } .phone { color: #fff; font-size: 14px; font-weight: 400; } .mail { margin-top: 6px; display: inline-block; font-size: 10px; color: #bfbfbf; } .mail:hover { color: #fff; } } @media (max-width: 460px){ .logo { width: 40px; opacity: 0.9; border-radius: 100%; } .center { display: flex; flex-direction: column; gap: 4px; font-size: 10px; width: 30%; } .footer { padding: 20px 0; } .left { gap: 10px; width: 30%; align-items: center; } .copy { font-size: 10px; } .center a:hover { color: #fff; } .right { text-align: right; } .phone { color: #fff; font-size: 10px; font-weight: 400; } .mail { margin-top: 6px; display: inline-block; font-size: 10px; color: #bfbfbf; } .mail:hover { color: #fff; } }