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


.services-container .secondary-header {
    background-image: linear-gradient(var(--60__overlay), var(--60__overlay)), url('../media/bookshelf_with_lights.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 50vh !important;
    background-attachment: fixed;
    top: 0rem;
    left: 0rem;
    color: var(--almost__white);
}

.services-container .secondary-header blockquote {
    font-size: 1.8rem;
    border-left: 0.5rem solid var(--phthalo__green);
}

.services-container .secondary-header figcaption cite {
    font-size: 1.3rem;
}


/**********************************************************************/
/***                         Services Body                          ***/
/**********************************-***********************************/


.services-body {
    margin: 6rem auto;
}

.services-info {
    color: var(--dark__slate__gray);
    width: 100% !important;
}

.services-info p,
.services-info ul {
    font-size: 1.6rem;
    text-align: justify;
}

.services-info h2,
.services-info h3 {
    margin: 3rem 0rem;
}

.info-icon {
    padding-right: 1.2rem;
}

.info-icon ion-icon {
    background-color: var(--dark__cyan);
    font-size: 4rem;
    color: var(--almost__white);
    border-radius: 50%;
    align-items: center;
    padding: 1.2rem;
}

.table-of-contents {
    position: fixed;
    margin: 9rem 0rem 9rem 3rem;
}

.table-of-contents a {
    color: var(--dark__slate__gray) !important;
}

.table-of-contents a.active {
    border-left: 0.3rem solid var(--alameda__gray__6);
}

.table-of-contents a:hover {
    border-left: 0.15rem solid var(--alameda__gray__6);
}

.table-of-contents li {
    padding: 0.4rem 0rem;
}

.table-of-contents li a {
    font-size: 1.7rem;
    width: 100%;
}


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


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

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

    /******************************/
    /****   Secondary Header   ****/
    /******************************/

    .services-container .secondary-header blockquote {
        font-size: 1.9rem;
    }

    .services-container .secondary-header figcaption cite {
        font-size: 1.4rem;
    }

}

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


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

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

    /***************************/
    /****   About Stories   ****/
    /***************************/

    .services-info {
        width: 75% !important;
    }

}

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