/******HERO*****/
main {
    padding-bottom: 10%;
}

.hero {
    padding: 14%;
    background-image: url("../images/pexels-pixabay.fbd6a3f261a1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    text-align: end;
    color: #FFF;
    font-size: 36px;
}

.rates,
.speed,
.satisfaction,
.bill_payments {
    display: flex;
    margin: 20% 0;
    background-position-y: bottom;
    background-repeat: no-repeat;
    flex-direction: row;
    justify-content: space-between;
    height: 300px;
}

/* Note: Some classes are repeated to allow for cascading
to avoid too many reptition. Eg .content{} and .speed .content{} */
.speed {
    flex-direction: row-reverse;
    background-image: url("../images/luminary.0da584295bc4.svg");
}

.rates {
    background-image: url("../images/stock_chart.12aae4fc3b0e.svg");
}

.satisfaction {
    flex-direction: row-reverse;
    background-image: url("../images/curve_line.b74ef7896659.svg");
}

.bill_payments {
    background-image: url("../images/icon_grid.44fc422f80b2.svg");
}

/* Make images circular */
.happy {
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 50%;
}

.happy img {
    width: auto;
    height: 150%;
    margin: auto;
}

.content {
    margin-top: auto;
    margin-bottom: auto;
    width: 50%;
    text-align: end;
}

.speed .content,
.satisfaction .content {
    text-align: start;
}

.start {
    background-color: whitesmoke;
    box-shadow: 10px 10px var(--navbar-text-line-focus);
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    border: 2px solid var(--navbar-bg-contrast-scrolled);
    border-radius: 10px;
    padding: 5%;
    display: flex;
    justify-content: space-around;
}

.start h3,
.start a,
.start p {
    text-align: center;
    width: 30%;
    margin: auto;
    cursor: default;
}

.start a img {
    width: 70%;
    cursor: pointer;
}

@media screen and (max-width: 1000px) {
    .hero {
        padding: 20% 14%;
        font-size: 36px;
        background-size: 150%;
    }

    .start h3,
    .start a,
    .start p {
        text-align: center;
        width: max-content;
    }
}

@media screen and (max-width: 700px) {
    .hero {
        padding: 50% 10%;
        font-size: 18px;
        background-size: 200%;
    }

    .start h3,
    .start a,
    .start p {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .start .wa_qr {
        width: 40%;
    }

    .rates,
    .speed,
    .satisfaction,
    .bill_payments {
        flex-direction: column;
        background-position-y: 100%;
        background-repeat: none;
        height: 50vh;
    }

    .happy {
        margin-top: auto;
        margin-bottom: auto;
    }

    .satisfaction {
        background-position-x: 100%;

    }

    .rates {
        background-position-x: 50%;
    }

    .content {
        margin-top: 10%;
        text-align: justify;
        width: 100%;
    }

    .happy {
        width: 200px;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
    }

    .happy img {
        height: 150%;
    }

    .start {
        flex-direction: column;
    }

    .start h3,
    .start a,
    .start p {
        width: 90%;
    }
}

@media screen and (max-width: 400px) {
    .happy {
        width: 165px;
        height: 165px;
    }
}