/**********************************************************************/
/***                              Home                              ***/
/**********************************-***********************************/


.home-container {
    padding: 0rem !important;
    margin: 0rem !important;
    z-index: 20;
}


/**********************************************************************/
/***                             Header                             ***/
/**********************************-***********************************/


.home-header {
    background-image: linear-gradient(var(--80__overlay), var(--80__overlay)), url('../media/pointing-to-blueprints.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh !important;
    background-attachment: fixed;
    top: 0rem;
    left: 0rem;
}

.header-hero {
    color: var(--almost__white) !important;
}

.hero-container {
    height: 75vh;
    width: 100% !important;
    display: grid;
    grid-template-rows: repeat(3, min-content);
    grid-template-columns: 1fr;
    grid-template-areas: 
        "title"
        "body"
        "buttons";
    align-content: center ;
}

.hero-title {
    grid-area: title;
}

.hero-title h1 {
    font-size: 4rem;
    margin: 2rem 0rem 0rem;
}

.hero-body {
    grid-area: body;
}

.hero-body p {
    font-size: 1.6rem;
    margin: 2rem 0rem 1rem 0rem;
}

.hero-buttons {
    grid-area: buttons;
    height: auto;
}

.hero-buttons > a {
    background-color: var(--alameda__gray__6) !important;
    color: var(--phthalo__green) !important;
    border-radius: 2.7rem !important;
    margin: 2rem 1.5rem 0rem 0rem !important;
    transition: all 0.25s linear;
}

.hero-buttons > a:hover {
    color: var(--almost__white) !important;
    transition: all 0.25s linear;
}


/**********************************************************************/
/***                           Home Blurb                           ***/
/**********************************-***********************************/


.home-blurb {
    background: var(--phthalo__green);
    padding: 10rem 0rem !important;
}

.blurb-container .row {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, max-content);
    grid-template-areas:
        "img"
        "txt";
}

.blurb-heading {
    grid-area: img;
    width: 100% !important;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, max-content);
    grid-template-areas: 
        "image"
        "title";
    justify-self: center;
    align-content: center;
    padding: 0rem 3rem;
}

.heading-logo {
    grid-area: image;
    justify-self: center;
    margin-bottom: 2rem;
}

.logo-img {
    width: 25rem;
    height: auto;
}

.heading-title {
    grid-area: title;
}

.heading-title h2 {
    margin: 2.5rem 0rem !important;
}

.blurb-text {
    grid-area: txt;
    width: 100% !important;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, max-content);
    grid-template-areas:
        "txthdr" 
        "titl-1"
        "body-1"
        "titl-2"
        "body-2"
        "titl-3"
        "body-3";
    justify-self: center;
}

.blurb-text-header {
    grid-area: txthdr;
    justify-self: center;
    align-self: center;
    margin-bottom: 2rem;
}

.blurb-text-header blockquote {
    font-size: 1.7rem !important;
    border-left: 0.5rem solid var(--alameda__gray__6);
}

.blurb-text-header figcaption {
    font-size: 1.5rem !important;
}

.blurb-text h4,
.blurb-text p {
    color: var(--dark__slate__gray);
}

.blurb-text p {
    font-size: 1.5rem;
    text-align: justify;
}

.blurb-text a {
    color: var(--almost__white);
}

.blurb-title-one {
    grid-area: titl-1;
    align-self: center;
}

.blurb-title-two {
    grid-area: titl-2;
    align-self: center;
}

.blurb-title-three {
    grid-area: titl-3;
    align-self: center;
}

.blurb-body-one {
    grid-area: body-1;
    align-self: center;
}

.blurb-body-two {
    grid-area: body-2;
    align-self: center;
}

.blurb-body-three {
    grid-area: body-3;
    align-self: center;
}

.blurb-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--alameda__gray__6) !important;
    background: rgba(245, 250, 250, 0.2);
    height: 2rem;
    line-height: 2.1rem;
    border-radius: 2rem !important;
    box-shadow: 0rem 0.2rem 0.5rem rgba(37, 78, 88, 0.3);
    transition: all 0.25s linear;
}

.blurb-link:hover,
.blurb-link:active {
    font-weight: 700;
    background: rgba(245, 250, 250, 0.4);
    transition: all 0.25s linear;
}


/**********************************************************************/
/***                          Home Parallax                         ***/
/**********************************-***********************************/


.parallax-container {
    background-color: var(--parallax__overlay);
    height: 65vh;
}


/**********************************************************************/
/***                          Home Services                         ***/
/**********************************-***********************************/


.home-services {
    background: var(--almost__white);
    color: var(--dark__slate__gray);
    padding: 6rem 0rem;
}

.services-heading {
    margin-bottom: 4rem;
}

.services-items {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 4rem 0rem;
}

.services-block {
    width: 100% !important;
}

.services-block p {
    font-size: 1.5rem;
    text-align: justify;
}

.services-block h4 {
    color: var(--dark__cyan);
}

.services-block a {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--alameda__gray__6) !important;
    background: rgba(245, 250, 250, 0.25);
    height: 2rem;
    line-height: 2.1rem;
    border-radius: 2rem !important;
    box-shadow: 0rem 0.2rem 0.5rem rgba(37, 78, 88, 0.4);
    transition: all 0.25s linear;
}

.services-block a:hover,
.services-block a:active {
    font-weight: 700;
    background: rgba(245, 250, 250, 0.4);
    transition: all 0.25s linear;
}

.services-icon ion-icon {
    background-color: var(--dark__cyan);
    font-size: 2.8rem;
    color: var(--almost__white);
    border-radius: 50%;
    align-items: center;
    padding: 1.2rem;
    transition: all 0.25s linear;
}


/**********************************************************************/
/***                       Home Testimonials                        ***/
/**********************************-***********************************/


.home-testimonials {
    background: var(--medium__brown);
    color: var(--almost__white);
    height: 75vh;
    padding-bottom: 2rem;
}

.testimonials-container .row .slider {
    /* height: 10rem; */
    height: 75vh !important;
}

.testimonials-container .row .slider .slides {
    background-color: transparent;
    font-size: 1.5rem;
    height: 65vh !important;
    /* margin: 4rem; */
}

.slider .indicators {
    display: none;
    height: 5rem;
    justify-content: center;
    align-items: center;
}

.slider .indicators .indicator-item {
    background-color: var(--alameda__gray__6);
}

.slider .indicators .indicator-item.active {
    background-color: var(--almost__white);
}

.caption blockquote {
    border-left: 0.5rem solid var(--alameda__gray__6);
}


/**********************************************************************/
/***                         Media Queries                          ***/
/**********************************-***********************************/


/****  screen and (min-width: 600px)  ****/

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

    /*******************/
    /****   Blurb   ****/
    /*******************/

    .blurb-text {
        grid-area: txt;
        width: 100% !important;
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: repeat(4, 1fr);
        grid-template-areas:
            "txthdr txthdr" 
            "titl-1 body-1"
            "titl-2 body-2"
            "titl-3 body-3";
        justify-self: right;
        padding: 0rem 3rem;
    }

    .blurb-title-one,
    .blurb-title-two,
    .blurb-title-three {
        align-self: center;
    }

    .blurb-body-one,
    .blurb-body-two,
    .blurb-body-three {
        padding-left: 3rem;
    }

    /**********************/
    /****   Services   ****/
    /**********************/

    .services-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem 4rem;
    }

}

/****  screen and (min-width: 600px)  ****/


/****  screen and (min-width: 899px)  ****/

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

    /*******************/
    /****   Blurb   ****/
    /*******************/

    .blurb-container .row {
        display: grid;
        grid-template-columns: 1.5fr 2fr;
        grid-template-rows: 1fr;
        grid-template-areas:
            "img txt";
    }

    .blurb-text {
        grid-template-columns: max-content 2fr;
    }

    .blurb-text h4 {
        padding: 0rem;
    }

    /**********************/
    /****   Services   ****/
    /**********************/

    /*.services-items {
        grid-template-columns: repeat(3, 1fr);
        gap: 8rem 4rem;
    } */  /* Saved for re-enabling the hidden services */

    .services-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 8rem 4rem;
    }

    /**************************/
    /****   Testimonials   ****/
    /**************************/

    .home-testimonials {
        height: 55vh;
    }
    
    .testimonials-container .row .slider {
        height: 55vh !important;
    }
    
    .testimonials-container .row .slider .slides {
        font-size: 1.6rem !important;
        height: 45vh !important;
    }

    .slider .indicators {
        display: flex;
        padding-bottom: 2rem;
    }

}

/****  screen and (min-width: 899px)  ****/


/****  screen and (min-width: 1023px)  ****/

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

    /**************************/
    /****   Testimonials   ****/
    /**************************/

    .home-testimonials {
        height: 45vh;
    }
    
    .testimonials-container .row .slider {
        height: 45vh !important;
    }
    
    .testimonials-container .row .slider .slides {
        height: 35vh !important;
    }

}

/****  screen and (min-width: 1023px)  ****/