@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&family=Roboto:wght@100;400&display=swap');

body,
html {
    font-family: "Poppins", sans-serif;
}

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

.content-section {
    flex: 1;
    /* This will make the content section grow to fill available space */
}

.hero-section {
    background: linear-gradient(180deg, #bbc0ff, #ffffff);
    padding: 50px 10%;
    color: white;
    text-align: center;
}

.hero-section * {
    color: #5403ff;
}

.content-section {
    padding: 20px 10%;
    text-align: center;
}

.footer-section {
    background: #6e6e6e;
    padding: 10px 10%;
    color: white;
    text-align: center;
}

.logo {
    background-image: url(ab_logo.png);
    height: 200px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@media (max-width: 600px) {

    .hero-section,
    .content-section,
    .footer-section {
        padding: 50px 5%;
    }
}