/* ===================================== */ /* FOOTER CONTAINER */ /* ===================================== */ .footer-container { width: 100%; background: rgba(3, 15, 170, 0.93); padding: 25px 60px; display: flex; justify-content: space-between; align-items: flex-start; font-family: "Inter", sans-serif; color: #FFFFFF; /* =========================== 📱 RESPONSIVIDADE =========================== */ /* Tablets e celulares — empilha tudo */ @media (max-width: 768px) { flex-direction: column; padding: 25px 20px; align-items: flex-start; } } /* ===================================== */ /* LADO ESQUERDO */ /* ===================================== */ .footer-left { margin-top: 100px; @media (max-width: 768px) { margin-top: 40px; } @media (max-width: 480px) { margin-top: 20px; } } .footer-left p { margin: 0 0 4px 270px; font-size: 14px; font-weight: 600; @media (max-width: 768px) { margin-left: 0; /* remove o deslocamento gigante */ font-size: 13px; } @media (max-width: 480px) { font-size: 12px; } } /* ===================================== */ /* LADO DIREITO */ /* ===================================== */ .footer-right { display: flex; flex-direction: column; align-items: center; margin-top: 100px; gap: 0px; margin-right: 300px; @media (max-width: 1024px) { margin-right: 100px; } @media (max-width: 768px) { margin-right: 0; align-items: flex-start; /* tudo fica alinhado à esquerda */ margin-top: 40px; } @media (max-width: 480px) { margin-top: 20px; } } /* Redes sociais */ .social-wrapper { width: 100%; display: flex; justify-content: flex-start; margin-bottom: 0; @media (max-width: 768px) { margin-top: 5px; } } .social-section { display: flex; align-items: center; gap: 10px; margin-bottom: 0; @media (max-width: 480px) { gap: 6px; } } .social-label { font-size: 14px; font-weight: 500; @media (max-width: 480px) { font-size: 13px; } } .social-icon i { font-size: 22px; color: #FFF; cursor: pointer; transition: 0.2s; @media (max-width: 480px) { font-size: 19px; } } .social-icon i:hover { opacity: 0.7; } /* Botão */ .footer-button-wrapper { margin-top: 0; @media (max-width: 768px) { margin-top: 10px; } }