@import url("main.inc.css");

/* Styles specific for home.inc.php */

/*
This stylesheet handles styles specific for home.inc.php.
It is included by index.php.


***************************
** Begin Default Styles **
*/
main > div:not([id="hero"]) > div, #reviews {
    max-width: 750px;
}

#hero {
    background-image: url(../images/hero.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    width: 100%;
    padding-top: 96px;
    padding-left: 10%;
    padding-right: 10%;
}

#hero > div {
    background-color: rgba(255,255,255,0.8);
    max-width: 596px;
    padding: 48px;
}

#intro > img, #about > img {
    margin-top: 19px;
}

#intro li, #contact > div > ul:nth-child(2) li, #contact > div > ul:last-child {
    display: flex;
}

#intro li {
    align-items: start;
}

#services {
    background-color: var(--secondaryBgColor);
}

#services h2 {
    margin-top: 24px;
}

#reviews {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#reviews li {
    position: relative;
    margin-top: 48px;
    text-align: left;
}

#reviews li::before, #reviews li::after {
    content: '';
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    position: absolute;
    top: -24px;
}

#reviews li::before {
    background-image: url(../images/open-quote.svg);
    left: 0;
}

#reviews li::after {
    background-image: url(../images/close-quote.svg);
    right: 0;
}

#reviews li div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 9.6px;
}

.monogram {
    width: 48px;
    height: auto;
    margin-right: 19px;
}

#contact ul {
    margin-bottom: 96px;
}

#contact > div > ul:first-child li {
    align-items: center;
}

#contact > div > ul:last-child li + li {
    margin-top: 0;
    margin-left: 19px;
}

iframe {
    width: 100%;
    max-width: 750px;
    max-height: 750px;
    aspect-ratio: 1;
    border: none;
}

/*

** End Default Styles **
*************************

**************************
** Begin Tablet Styles **
*/

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

    #intro > img, #services > img, #about > img {
        margin-top: 13px;
    }
    
    #services h2 {
        margin-top: unset;
    }

    #services li + li {
        margin-top: 48px;
    }

    #reviews {
        justify-content: center;
    }

    #reviews li::before, #reviews li::after {
        width: 32px;
        height: 32px;
        top: -32px;
    }

    iframe {
        width: 50%;
        margin-top: 13px;
    }


} /* End 1000px */

/*
** End Tablet Styles **
***********************

*************************
** Begin Laptop Styles **
*/

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

    #services em {
        display: block;
        margin-bottom: 19px;
    }

    #services li + li {
        margin-top: 96px;
    }

    #reviews {
        padding: unset;
    }
    
    #reviews li::before, #reviews li::after {
        width: 48px;
        height: 48px;
        top: -48px;
    }

    #reviews li {
        margin-top: 96px;
    }

} /* End 1336px */

/*
** End Laptop Styles **
***********************
*/