* {
    box-sizing: border-box;
    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);
    --grey500: hsl(234, 12%, 34%);
    --grey400: hsl(212, 6%, 44%);
    --white: hsl(0, 0%, 100%);
    font-family: "Poppins", sans-serif;
    color: var(--grey400);    
}
*::after, *::before {
    box-sizing: border-box;
}

body {
    padding: 5rem 10rem 0;
    overflow-x: hidden;
}
main {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 10rem 1fr 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    grid-row-gap: 2rem;
}

.header {
    text-align: center;
    grid-row: 1;
    grid-column: 1 / 6;
    line-height: 0.8rem; 
    padding: 19rem;
    margin-bottom: 2rem;

}
.reliable {
    font-weight: 400;
    font-size: 1.5rem
}
.powered {
    color: var(--grey500);
}
.headpara {
    margin-top: 2rem;
    line-height: 1.5rem;
    font-weight: 500;
    padding: 0 10rem;
}
.supervisor, .builder, .karma, .calculator {
    border-radius: 0.5rem;
    box-shadow: 0 1rem 1rem #dce6ef;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 25rem;
}
h2 {
    color: var(--grey500);
    font-weight: 600;
    margin-bottom: -0.5rem
}

.supervisor {
    place-content: center;
    border-top: 5px solid var(--cyan);
    grid-column: 2;
    grid-row: 2 / 4;
}

.builder {
    border-top: 5px solid var(--red);
    grid-column: 3;
    grid-row: 2/3;

}

.karma {
    border-top: 5px solid var(--orange);
    grid-column: 3;
    grid-row: 3 / 4;
}
.calculator {
    border-top: 5px solid var(--blue);
    grid-column:  4;
    grid-row: 2 / 4;
}

img {
    margin: 2rem 1rem 2rem 15rem;
}

/* Breakpoint for mobile devices */

@media screen and (max-width: 38rem) {
    body {
     padding: 2rem;
    }
    main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1rem;
    }
    .header {
        width: 90vw;
        display: inline;
        padding: 0rem;
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.5rem;
    }
    .headpara {
        margin: auto;
        padding: 0;
    }
}