/*
===============
Hero
===============
*/
.hero {
    min-height: 100vh;
    background: var(--clr-primary-5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-banner {
    text-align: center;
    color: var(--clr-white);


}
.hero-banner h1 {
    text-transform: uppercase;
    font-size: 2.5rem;
}
.hero-banner p {
    max-width: 35rem;
    margin-left: auto;
    margin-right: auto;
    color: var(--clr-white);
    letter-spacing: var(--spacing);
}
.hero-btn {
    padding: 0.9rem 1.6rem;
    font-size: 1.25rem;
    background: var(--clr-white);
    color: var(--clr-primary-5);
}
.hero-btn:hover {
    background: transparent;
    color: var(--clr-white);
    border-color: var(--clr-white);
}
@media screen and (min-width: 768px) {
    .hero {
        background: linear-gradient(rgb(44, 174, 186, 0.7), rgba(0, 0, 0, 0.7)),
        url("service-bcg.jpg") center/cover no-repeat;
    }
    .hero-banner {
        padding: 0;
    }
    .hero-banner p {
        max-width: 45rem;
    }
}

/*
===============
Services
===============
*/
/* small screen layout setup */
/* bg-grey in globals */

/*
we chose to use margins and padding not grid
to ensure that at least on the users phone that do not support css grid, our content will be displayed

*/
.service{
    background: var(--clr-white);
    padding: 3rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: var(--radius);
    text-align: center;
    transition: var(--transition);
}

.service-icon{
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.service .underline {
    width: 3rem;
    height: 0.12rem;
    transition: var(--transition);
}

.service p{
    transition: var(--transition);
}

.service:hover{
    background: var(--clr-primary-6);
    color: var(--clr-white);
}
/* overiding the specificity that we set in our global variables */
.service:hover p {
    color: var(--clr-white);
}
.service:hover .underline {
    background: var(--clr-white);
}

.services-btn{
    text-align: center;
}

@media screen and (min-width: 676px){
    .services-center{
        display: grid;
        grid-template-columns: 1fr 1fr;
        -moz-column-gap: 2rem;
        column-gap: 2rem;
    }
}

@media screen and (min-width: 992px){
    .services-center{

        grid-template-columns: repeat(3,1fr);

    }
}