.amplify-section { position: relative; } .amplify-background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .amplify-background-image img { width: 100%; height: 100%; /* Make image cover the entire section */ object-fit: cover; } .amplify-wrapper{ height: 100%; padding: 5%; display: flex; justify-content: space-between; align-items: center; gap: 4rem; } .amplify-counter,.amplify-typewriter{ z-index: 3; } .amplify-typewriter { flex: 1; height: 100%; align-items: self-start; display: flex; flex-direction: column; justify-content: space-evenly; } .amplify-counter{ display: flex; gap: 4rem; flex: 1; height: 100%; } .amplify-counter-details{ display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; } .counter{ font-size: 3.5vw; font-weight: 700; } .amplify-slogan{ font-size: 2.5vw; font-weight: 700; } .amplify-typewriter-text{ font-size: 3vw; font-weight: 700; } .typewriter-wrapper{ display: flex; flex-direction: column; gap: 1rem; } .amplify-para{ font-size: 1.2vw; font-weight: 400; color: #6d6b6b; } .counter-text{ font-size: 1vw; font-weight: 500; } /* media queries */ @media (max-width: 575.98px) { .amplify-wrapper { flex-direction: column; gap: 0; } .amplify-slogan { font-size: 6vw; } .amplify-typewriter-text { font-size: 7vw; } .amplify-para { font-size: 4vw; } .counter { font-size: 6.5vw; } .counter-text { font-size: 4vw; } .amplify-counter { gap: 1rem; } } @media (min-width: 576px) and (max-width: 767.98px) { .amplify-wrapper { flex-direction: column; gap: 0; } .amplify-slogan { font-size: 5vw; } .amplify-typewriter-text { font-size: 6vw; } .amplify-para { font-size: 3vw; } .counter { font-size: 5.5vw; } .counter-text { font-size: 3vw; } .amplify-counter { gap: 1rem; } } @media (min-width: 768px) and (max-width: 991.98px) { .amplify-wrapper { flex-direction: column; gap: 0; } .amplify-slogan { font-size: 3vw; } .amplify-typewriter-text { font-size: 4vw; } .amplify-para { font-size: 2.5vw; } .counter { font-size: 4.5vw; } .counter-text { font-size: 2vw; } .amplify-counter { gap: 1rem; width: 100%; justify-content: space-between; } } @media (min-width: 992px) and (max-width: 1199.98px) { .counter{ font-size: 3vw; } } @media (min-width: 1200px) and (max-width: 1399.98px) {} @media (min-width: 1400px) {}