* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Sora", sans-serif; font-optical-sizing: auto; background-color: #000; } html, body { height: 100%; } .home-section, .define-us-section, .services-section, .expertise-section, .amplify-section, .partners-section, .contact-us-section { height: 100vh; } a { text-decoration: none; color: inherit; } main { display: flex; flex-direction: column; flex-grow: 1; margin: 0; } footer { color: white; padding: 0 5%; min-height: 12rem; width: 100vw; } .main-wrapper { border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; overflow: hidden; } header { background: #fff; } .home-section { background-color: #fff; } .expertise-section { background-color: #fff; } .amplify-section { background-color: #fff; } .services-section { background-color: #fff; z-index: 2; } .define-us-section { background-color: #fff; z-index: 3; } .partners-section { background-color: #fff; } .container { max-width: 1200px; margin: 0 auto; } footer { color: white; min-height: 50%; width: 100vw; } footer a { color: #ffd868; } .jump-to-page { margin: 2rem auto 1rem; } /* Here's the styles that do matter for parallax */ header, main, .placeholder { position: relative; } header { z-index: 2; /* border-bottom: 1px solid #85867e; */ } main { z-index: 1; } /* .placeholder { z-index: 1; } */ footer { position: fixed; bottom: 0; } /* Define scrollbar track */ ::-webkit-scrollbar { width: 5px; /* Width of the scrollbar */ } /* Define scrollbar thumb */ ::-webkit-scrollbar-thumb { background: #000; /* Color of the scrollbar thumb */ border-radius: 6px; /* Rounded corners for the thumb */ } /* Define scrollbar track */ ::-webkit-scrollbar-track { background: #fff; /* Color of the scrollbar track */ } /* media queries */ @media (max-width: 575.98px) { .services-section { height: 354vh; } .mobile-services-hidden{ display: none; } footer { min-height: 75%; } } @media (min-width: 576px) and (max-width: 767.98px) { footer { color: white; min-height: 80%; width: 100vw; } } @media (min-width: 768px) and (max-width: 991.98px) {} @media (min-width: 992px) and (max-width: 1199.98px) {} @media (min-width: 1200px) and (max-width: 1399.98px) { footer { color: white; min-height: 65%; width: 100vw; } } @media (min-width: 1400px) { footer { color: white; min-height: 65%; width: 100vw; } }