body { background: #4F5574; color: white; font: medium "Gotham Pro", sans-serif; margin: 0; padding: 0; } .banner { background: rgba(0, 0, 0, 0.39); border-radius: 3vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2%; max-width: 95vw; margin: .5% auto; } .banner-img { display: flex; justify-content: center; align-items: center; width: 100%; } .banner-img img { width: 100%; max-width: 450px; height: auto; margin: 1.5%; } .desc { width: 100%; max-width: 600px; text-align: center; margin: 1% auto; word-wrap: break-word; padding: 0 2%; box-sizing: border-box; font-size: 16px; } .desc-xl { text-align: center; display: flex; margin: 1% auto; word-wrap: break-word; width: 100%; max-width: 500px; font-weight: bold; padding: 10px 2%; box-sizing: border-box; } .features-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; padding: 80px 20px; max-width: 1200px; margin: auto; } .features { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 300px; } .features svg { margin-bottom: 15px; } .text { font-size: 22px; font-weight: bold; } footer p{ word-wrap: break-word; text-align: center; } footer a { color: white } @media (min-width: 768px) { .desc { font-size: 20px; } } @media (max-width: 768px) { .footer-wrapper { position: relative; min-height: 100%; } footer { flex: 0 0 auto; width: 100%; background: rgba(0, 0, 0, 0.39); position: absolute; left: 0; bottom: 0; } } @media (min-width: 1200px) { .desc { font-size: 24px; } .features-container { flex-direction: row; align-items: center; gap: 200px; } footer { flex: 0 0 auto; width: 100%; background: rgba(0, 0, 0, 0.39); position: absolute; left: 0; bottom: 0; } }