/* This file is used to style things only found on the home page -- eg. the testimonials carousel. */
/* You'll see things using the '#' instead of the '.' here. That's because a style defined by #name 
can only be applied to a single element with id 'name'. If you want to use a style defined by #name 
for more than one element, either duplicate it, or replace the '#' with a '.', and add it to elements 
with class="name". You'll also want to ensure the original element with the name id uses the name class too.*/

:root {
    --home-block-img-height: 70vh;
}

/* This styles the first introductory box on the home page. */
#intro {
    background-image: url("../img/home/intro.png");
    height: var(--home-block-img-height);
    width: auto;
}

/* This styles the box with the Our Services & ART booking button. */
#service-redirect {
    background-color: var(--secondary);
    color: var(--background-alt) !important;
    height: var(--home-block-img-height);
    width: auto;
}

/* This styles the ART applications box. */
#applications {
    background-image: url("../img/home/applications.png");
    color: var(--background-alt) !important;
    height: var(--home-block-img-height);
    width: auto;
}

/* This styles the appointment overview box. */
#appt-overview {
    background-image: url("../img/home/appt-overview.png");
    color: var(--background-alt) !important;
    height: var(--home-block-img-height);
    width: auto;
}

/* This styles the testimonials carousel towards the bottom of the home page. */
#testimonials {
    background-image: url("../img/home/testimonial-bg.png");
    color: var(--background-alt) !important;
    height: var(--home-block-img-height);
    width: auto;
}