/*
Copyright Robertson's Plumbing & Gasfitting 2024
Created By Tiger Lily Web Services 2024
Fort Saskatchewan, Alberta, Canada
*/

/*#region Small Screen Size (320px-749px)*/

/*#region Variables*/
:root
{
    --red: #D1332A;
    --dark-grey: #3D3D3D;
    --white: #F8F8F8;
    --med-grey: #D9D9D9;
}
/*#endregion Variables*/

/*#region Typography*/
body, a
{
    font-family: 'Roboto', sans-serif;
    color: black;
}

a
{
    text-decoration: none;
}

button
{
    cursor: pointer;
}

.hidden{
    position: absolute;
    max-height: 0vh;
    overflow: hidden;
}

h2{
    color: var(--red);
    font-size: 1.875rem;
    font-weight: 500;
    margin-bottom: 0.15rem;
}

p{
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.25rem;
}

section.core-values .heading p{
    font-size: 1rem;
    font-weight: 300;
    margin-left: 0.1rem;
}

section.core-values .values h3{
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

section.core-values .values p{
    font-size: 1rem;
    font-weight: 300;
    margin-bottom: 1.0625rem;
}

section.core-values .values .value:last-of-type p{
    margin-bottom: 0rem;
}

section.about h2{
    color: black;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.75rem;
}

section.testimonials p{
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 300;
    font-style: italic;
    margin-bottom: 1.75rem;
    text-align: center;
}

section.testimonials .author-rating p{
    font-weight: 500;
    margin-bottom: 0rem;
}

section.cta p{
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5rem;
    margin-bottom: 1.1875rem;
    color: var(--white);
}

/*#endregion Typography*/

section.core-values{
    background-image: url(../img/about-background-sm.jpg);
    background-position: center;
    background-size: cover;
    padding: 2.5rem 1rem;
}

section.core-values .inner-container{
    background-color: white;
    border-radius: 0.375rem;
    padding: 0.8rem 1rem 0rem 0.8rem;
}

section.core-values .heading svg{
    width: 100%;
    height: 0.625rem;
    margin-top: 0.125rem;
    margin-bottom: 0.5625rem;
}

section.core-values .inner-container svg.border{
    width: 124.31px;
    height: 74px;
    margin-left: -13.8px;
    margin-bottom: -0.25rem;
}

section.about .inner-container{
    padding: 1.5rem 1rem 1rem 1rem;
}

section.about .van-img{
    background-image: url(../img/van-sm.JPG);
    width: 100%;
    height: 190px;
    background-position: center;
    background-size: cover;
}

section.testimonials{
    border-top: 2px solid black;
}

section.testimonials .testimonial {
    opacity: 1;
    transition: opacity 2s linear;
    display: flex;
    align-items: center;
}

section.testimonials .hidden-testimonial {
    opacity: 0;
    position: absolute;
    max-height: 0vh;
    overflow: hidden;
}

section.testimonials .inner-container{
    padding: 2rem 1rem;
}

section.testimonials .author-rating{
    display: flex;
    align-items: center;
    justify-content: center;
}

section.testimonials .author-rating .star-rating{
    display: flex;
    align-items: center;
    margin-left: 6px;
}

section.testimonials .author-rating .star-rating .star svg{
    width: 15px;
    height: 15px;
    margin-right: 6px;
}

section.testimonials .author-rating .star-rating .star svg path{
    fill: var(--red);
}

section.testimonials .author-rating .star-rating .star:last-of-type{
    margin-right: 0px;
}

.cta-button{
    width: fit-content;
}

section.cta{
    background-image: url(../img/about-background-sm.jpg);
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1000px rgba(61, 61, 61, .65);
}

section.cta .inner-container{
    padding: 2rem 1.75rem;
}

/* #endregion */

/*#region Medium Screen Size (750px-1159px)*/

@media only screen and (min-width: 750px)
{
    section.core-values .heading svg{
        margin-bottom: 1.625rem;
    }

    section.core-values{
        padding: 3.3125rem 1.9375rem;
        background-image: url(../img/about-background-med.jpg);
    }

    section.core-values .values{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 40.625rem;
        margin: auto;
    }

    section.core-values .values .value{
        width: 18rem;
    }

    section.core-values .values .value:nth-of-type(odd){
        margin-right: 2.4375rem;
    }

    section.core-values .values .value:nth-of-type(5) p,
    section.core-values .values .value:nth-of-type(6) p{
        margin-bottom: 0rem;
    }

    section.core-values .inner-container svg.border{
        width: 197px;
        height: 129px;
        margin-left: -1.08rem;
        margin-top: -2.2rem;
        margin-bottom: -0.72rem;
    }

    section.about .inner-container{
        padding: 1.75rem;
    }

    section.about h2{
        margin-bottom: 0.75rem;
    }

    section.about .van-img{
        margin: 1.75rem;
        margin-top: 0rem;
        width: calc(100% - 3.5rem);
        height: 272px;
        background-image: url(../img/van-med.JPG);
    }

    section.testimonials .inner-container{
        padding: 2.3125rem 3rem;
    }

    section.cta{
        background-image: url(../img/about-background-med.jpg);
    }

    section.cta .inner-container{
        padding: 1.375rem 4.375rem 1.6875rem 4.375rem;
    }

    section.cta p{
        font-size: 1.5rem;
        line-height: 1.75rem;
        width: 34.375rem;
    }

}

/*#endregion Medium Screen Size (750px-1159px)*/

/*#region Large Screen Size (1160px-1439px)*/

@media only screen and (min-width: 1160px)
{
    h2{
        font-size: 2.5rem;
    }

    section.core-values .heading p{
        font-size: 1.25rem;
    }

    section.core-values{
        padding: 2.875rem 4.4375rem;
        background-image: url(../img/about-background-lg.jpg);
    }

    section.core-values .inner-container{
        padding: 1.3125rem 2.4375rem 0rem 2.4375rem;
        max-width: 1020px;
        margin: auto;
    }

    section.core-values .values{
        max-width: none;
    }

    section.core-values .values .value{
        width: 23.125rem;
    }

    section.core-values .values .value h3{
        font-size: 1.5rem;
    }

    section.core-values .values .value p{
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    section.core-values .inner-container svg.border{
        margin-left: -2.6rem;
        margin-top: -3.25rem;
    }

    section.about{
        display: flex;
        align-items: center;
        max-width: 1160px;
        margin: auto;
    }

    section.about h2{
        font-size: 1.75rem;
        margin-bottom: 1.0625rem;
    }

    section.about p{
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    section.about .van-img{
        background-image: url(../img/van-diagonal.png);
        width: 475px;
        height: 337px;
        margin: 0rem;
    }

    section.about .inner-container{
        max-width: 616px;
        padding-right: 0rem;
    }

    section.testimonials .inner-container{
        padding-left: 13.75rem;
        padding-right: 13.75rem;
        max-width: 560px;
    }

    section.cta{
        background-image: url(../img/about-background-lg.jpg);
    }

    section.cta .inner-container{
        padding: 1.875rem 7.5rem;
        max-width: 1065px;
    }

    section.cta p{
        font-size: 1.75rem;
        line-height: 2rem;
        width: 600px;
    }
}

/*#endregion Large Screen Size (1190px-1439px)*/

/*#region Extra Large Screen Size (1440px)*/

@media only screen and (min-width: 1440px)
{

}

/*#endregion Extra Large Screen Size (1440px)*/