.hero {
    text-align: center;
    color: white;
    height: 100vh;
    background-image: linear-gradient(0deg, #1f2933 0%, rgba(31, 41, 51, 0.2) 100% 100%), url(../images/univa-group-photo.jpg);
    background-position: center;
    background-size: cover;

    padding: 20vh var(--section-padding-x) 0;
    margin-bottom: 5vh;

    .section-inner {
        max-width: 52rem;
    }

    button.secondary {
        color: white;
        border: 1px solid white;
    }

    h1 {
        line-height: 2.2rem;
        padding-bottom: 1.2rem;
        color: white;

    }

    p {
        padding-bottom: 1.2rem;
        max-width: 44ch;
        color: white;
        margin: auto;
    }

    /*tablet styles */

    @media (min-width: 800px) {
        height: 70vh;
        margin-bottom: 0;

        p {
            max-width: 60ch;
            line-height: 1.5rem;
        }

        h1 {
            line-height: 4rem;
            font-weight: 550;
        }
    }

    /*desktop styles */

    @media (min-width: 1000px) {}
}



.callouts {
    text-align: center;

    .callout-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 8vh;

        p {
            font-size: 1.2rem;
            font-weight: 500;
        }

        .callout-icon-container {
            display: flex;
            margin: auto;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;

            border-radius: 100%;
            height: 96px;
            width: 96px;
            background-color: var(--callout-background);

            svg {
                height: 36px;
                width: 36px;
                color: var(--callout-icon);
            }
        }
    }

    /*tablet styles */
    @media (min-width: 800px) {
        .section-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .callout-item {
            max-width: 900px;
            margin-bottom: 0;
        }
    }

    /*desktop styles */

    @media (min-width: 1000px) {
        .section-inner {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }

}


.objection-busters {
    background-color: var(--light-bg);
    text-align: center;


    h2 {
        margin-bottom: 1.2rem;
    }

    p {
        color: var(--secondary-text);
        padding-bottom: 3rem;
    }

    .card {
        background-color: white;
        border-radius: var(--card-radius);
        padding: var(--card-padding);
        margin-bottom: 1.4em;

        h3 {
            font-weight: 500;
            padding-bottom: 1rem;
        }

        p {
            font-size: 1rem;
            line-height: 1.5rem;
            max-width: 28ch;
            margin: auto;
            padding-bottom: 0;
        }

        .icon-container {

            background-color: var(--light-pink);
            border-radius: 100%;
            height: 82px;
            width: 82px;
            display: flex;
            margin: auto;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;

            svg {
                height: 32px;
                width: 32px;
                color: var(--pink);
            }

        }
    }

    /*tablet styles */
    @media (min-width: 800px) {
        .card-grid {
            max-width: 700px;
            margin: auto;
            display: grid;
            gap: 30px;
            grid-template-columns: 1fr 1fr;

            .item-spanning {
                grid-column: 1/3;
            }

            .card {
                margin: 0;
            }
        }
    }

    /*desktop styles */

    @media (min-width: 1000px) {
        .card-grid {
            grid-template-columns: 1fr 1fr 1fr;
            max-width: 70vw;

            .item-spanning {
                grid-column: initial;
            }
        }


    }
}

.learn-more {
    text-align: left;

    img {
        border-radius: var(--card-radius);
        margin-bottom: 2rem;
    }

    p {
        color: var(--secondary-text);
    }


    /*tablet styles */
    @media (min-width: 800px) {

        .section-inner {
            display: flex;
            gap: 20px;
        }

        img {
            max-width: 40vw;

        }

    }

    /*desktop styles */

    @media (min-width: 1000px) {
        .section-inner {
            justify-content: center;
            gap: 5rem;
            align-items: center;
        }

        img {
            max-width: 20vw;
        }
    }
}

.our-ndis-services {
    background-color: var(--light-bg);

    .card {
        background-color: white;
        border-radius: var(--card-radius);
        padding: var(--card-padding);
        margin-bottom: 1.4em;

        p.secondary {
            margin-bottom: 0;
        }


        .icon-container {

            border-radius: 100%;
            height: 82px;
            width: 82px;
            display: flex;
            margin: auto;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;


            background-color: var(--callout-background);

            svg {
                height: 36px;
                width: 36px;
                color: var(--callout-icon);
            }

        }
    }

    a.service-card {
        color: inherit;
        display: block;
        text-decoration: none;
    }

    a.button {
        color: black;
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        border-radius: var(--radius);
        text-decoration: none;

        svg {
            height: 24px;
            width: 24px;
            display: inline;
        }
    }

    /*tablet styles */
    @media (min-width: 800px) {
        .card-container {
            max-width: 700px;
            margin: auto;
            margin-bottom: 2rem;

            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;

            .card {
                margin: 0;
                flex: 0 1 calc((100% - 1.5rem) / 2);
                max-width: calc((100% - 1.5rem) / 2);
            }

        }

        button.secondary {
            display: flex;
            margin:auto;
        }
    }

    /*desktop styles */

    @media (min-width: 1000px) {
        .card-container {
            max-width: 60vw;

            .card {
                flex-basis: calc((100% - 3rem) / 3);
                max-width: calc((100% - 3rem) / 3);
            }
        }
    }
}