/*-------------------*/
/* Table Of Contents */
/*-------------------*/

/* CSS Variables (Colors & Styles) */
/* CSS Variables (Colors & Styles) [Image & SVG Links To Modals] */
/* CSS Variables (Colors & Styles) [Modals] */
/* CSS Variables (Colors & Styles) [FAQs] */
/* CSS Variables (Font Size) */

/* Custom CSS */

/* Icons | SVG */

/* Sections (Regular & Alternate Background Colors) */
/* Section -- Banner Image */
/* Section -- H1 & H2 Intro Heading */
/* Section -- Why Choose Us */
/* Section -- Doctors */
/* Section -- Review */
/* Section -- Services */
/* Section -- Financing */
/* Section -- Find Our Office */
/* Section -- FAQs */

/* Modal */
/* Responsiveness */





/*===========================================================================*/
/* CSS Variables (Colors & Styles) */
/*===========================================================================*/

/* Odd Sections (Intro, Doctors, Services, Find) */
:root {
    --background-color: #eaebed;
    --intro-h1-color: #000;
    --intro-h2-color: #000;
    --h2-color: #000;
    --image-h3-color: #2e2d2d;
    --svg-color: #000;
    --svg-h3-color: #777;
    --focus-color: #000;
}

/* Even Sections [Colored Background] (Why, Review, Financing, FAQs) */
:root {
    --alt-background-color: #131712;
    --alt-h2-color: #fff;
    --alt-content-color: #fff;
    --alt-a-color: #f9a628;
    --alt-a-color-hover: #d5c052;
    --quotation-color: #fff;
    --alt-svg-color: #fff;
    --alt-svg-h3-color: #fff;
    --alt-focus-color: #fff;
}

/* Doctor & Service Images */
:root {
    --doctor-images-container-width: 1075px;
    --doctor-image-width: 375px;

    --service-images-container-width: 1200px;
    --service-image-width: 350px;
}

/*===========================================================================*/
/* CSS Variables (Colors & Styles) [Image & SVG Links To Modals] */
/*===========================================================================*/

/* Works when there is no "Off" class */
:root {
    /* Image Modals (Doctors & Services) */
    --image-modal-h3-color: #f9a628;
    --image-modal-h3-color-hover: #d5c052;

    /* SVG Modals (Financing) */
    --svg-modal-h3-color: #f9a628;
    --svg-modal-h3-color-hover: #d5c052;
}

/*===========================================================================*/
/* CSS Variables (Colors & Styles) [Modals] */
/*===========================================================================*/

/* Modals */
:root {
    --modal-background-color: #eaebed;
    --modal-h3-color: #000;
    --modal-content-color: #222;
    --modal-a-color: #f9a628;
    --modal-a-color-hover: #d5c052;
    --modal-close-button-color: #f9a628;
    --modal-close-button-color-hover: #d5c052;
    --modal-focus-color: #000;
}

/*===========================================================================*/
/* CSS Variables (Colors & Styles) [FAQs] */
/*===========================================================================*/

/* FAQs */
:root {
    /* Container */
    --faq-max-width: 900px;

    /* H3 Heading */
    --faq-h3-background-color: transparent;
    --faq-h3-color: var(--alt-a-color);
    --faq-h3-color-hover: var(--alt-a-color-hover);
    --faq-h3-color-active: var(--alt-a-color-hover);

    /* Icon */
    --faq-icon-color: var(--alt-a-color);
    --faq-icon-color-hover: var(--alt-a-color-hover);
    --faq-icon-color-active: var(--alt-a-color-hover);

    /* Links */
    --faq-a-color: var(--alt-a-color);
    --faq-a-color-hover: var(--alt-a-color-hover);

    /* Border */
    --faq-border-type: solid;
    --faq-border-color: #fff;
    --side-border-color: transparent;
    --faq-border-width: 2px; 
    --faq-border-radius: 0; /* keep at 0 if "--side-border-color" value is transparent */

    /* Content */
    --faq-content-background-color: transparent;
    --faq-content-color: var(--alt-content-color);
    --faq-content-padding: 10px 20px 0;
}

/*===========================================================================*/
/* CSS Variables (Font Size) */
/*===========================================================================*/

/* Desktop -- Above 1024px */
:root {
    --intro-h1-font: 24px;
    --intro-h2-font: 54px;
    --h2-font: 54px;
    --why-h3-icon-font: 24px;
    --doctor-h3-image-font: 18px;
    --doctor-h3-icon-font: 22px;
    --review-content-font: 20px;
    --service-h3-image-font: 26px;
    --financing-h3-icon-font: 22px;
    --faq-h3-font: 24px;
    --faq-icon-size: 24px;
}

/* Tablet -- Below 1025px */
:root {
    --intro-h1-font-tablet: 23px;
    --intro-h2-font-tablet: 48px;
    --h2-font-tablet: 48px;
    --why-h3-icon-font-tablet: 24px;
    --doctor-h3-image-font-tablet: 23px;
    --doctor-h3-icon-font-tablet: 22px;
    --review-content-font-tablet: 20px;
    --service-h3-image-font-tablet: 25px;
    --financing-h3-icon-font-tablet: 20px;
    --faq-h3-font-tablet: 22px;
    --faq-icon-size-tablet: 22px;
}

/* Mobile -- Below 768px */
:root {
    --intro-h1-font-mobile: 22px;
    --intro-h2-font-mobile: 42px;
    --h2-font-mobile: 42px;
    --why-h3-icon-font-mobile: 22px;
    --doctor-h3-image-font-mobile: 22px;
    --doctor-h3-icon-font-mobile: 20px;
    --review-content-font-mobile: 20px;
    --service-h3-image-font-mobile: 24px;
    --financing-h3-icon-font-mobile: 20px;
    --faq-h3-font-mobile: 21px;
    --faq-icon-size-mobile: 21px;
}

/*===========================================================================*/
/* Custom CSS */
/*===========================================================================*/

/* Add custom CSS here */

.location-page {

    #interior-banner {
        display: none;
    }

    .location-page-section {

        &.alt-background {

        }
    }
}

/*===========================================================================*/
/* Icons | SVG */
/*===========================================================================*/

.location-page-section {

    .location-icon {
        display: grid;
        gap: 10px 0;
        align-content: start;
        margin: 0 auto;
        padding: 0;
        flex: 0 1 33.33%;

        svg {
            height: 100px;
            width: 110px;
            max-width: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }

        .svg-container {

            &:not(.no-fill) svg path {
                fill: var(--svg-color);
                stroke: none;
            }

            &.no-fill svg {
                stroke: var(--svg-color);
                fill: transparent;

                path {
                    fill: none;
                }
            }
        }

        h3 {
            color: var(--svg-h3-color);
            line-height: 1.25;
            padding: 0 10px;
        }
    }

    &.alt-background {

        .location-icon {

            .svg-container {

                &:not(.no-fill) svg path {
                    fill: var(--alt-svg-color);
                    stroke: none;
                }

                &.no-fill svg {
                    stroke: var(--alt-svg-color);
                    fill: transparent;

                    path {
                        fill: none;
                    }
                }
            }

            h3 {
                color: var(--alt-svg-h3-color);
            }
        }
    }
}

/*===========================================================================*/
/* Sections (Regular & Alternate Background Colors) */
/*===========================================================================*/

/* All Sections */
.location-page-section {

    .container {
        display: block;
        margin: 0 auto;
        max-width: 1000px;
        padding: 20px 0;
        text-align: center;
        width: 100%;
    }

    .wrap {
        display: block;
        margin: 0 auto;
        max-width: 1050px;
        padding: 20px 0;
        text-align: center;
        width: 100%;
    }

    h2 {
        font-size: var(--h2-font);
        text-align: center;
        max-width: 1380px;
        margin: 0 auto;
        padding: 0 0 20px;

    }

    h3 {
        margin: 0;
        padding: 0;
        text-align: center;
    }

    p {
        margin: 0;
        padding: 10px 0;
    }

    /* Odd Sections (Intro, Doctors, Services, Find) */
    &:not(.alt-background) {

        h2 {
            color: var(--h2-color);
        }

        /* Show outline for tab & shift-tab key events */
        & :focus-visible {
            outline: 2px solid var(--focus-color) !important; /* over-ride site or default color */
            outline-offset: 2px;
            transition: none;
        }

        /* Hide outline for mouse click events  */
        & :focus:not(:focus-visible) {
            outline: none !important;
            transition: none;
        }

        /* Fallback for older browsers that don't support "focus-visible" */
        & :focus {
            outline: 2px solid var(--focus-color) !important; /* over-ride site or default color */
            outline-offset: 2px;
            transition: none;
        }
    }

    /* Even Sections [Colored Background] (Why, Review, Financing, FAQs) */
    &.alt-background {
        background: var(--alt-background-color);
        background-image: url(assets/images/bg.png);

        h2 {
            color: var(--alt-h2-color);
        }

        /* Content color, excluding the HTML elements within the "not()" varirable */
        *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(a):not(button):not(input):not(select):not(textarea) {
            color: var(--alt-content-color);
        }

        /* <a> color & hover color, except for <a class="btn"> elements */
        a:not(.btn):not(.btn-alt) {
            color: var(--alt-a-color);

            &:hover {
                color: var(--alt-a-color-hover);
            }
        }

        /* Show outline for tab & shift-tab key events */
        & :focus-visible {
            outline: 2px solid var(--alt-focus-color) !important; /* over-ride site or default color */
            outline-offset: 2px;
            transition: none;
        }

        /* Hide outline for mouse click events  */
        & :focus:not(:focus-visible) {
            outline: none !important;
            transition: none;
        }

        /* Fallback for older browsers that don't support "focus-visible" */
        & :focus {
            outline: 2px solid var(--alt-focus-color) !important; /* over-ride site or default color */
            outline-offset: 2px;
            transition: none;
        }
    }
}

/*===========================================================================*/
/* Section -- Banner Image */
/*===========================================================================*/

.location-banner {

    img {
        width: 100%;
    }
}

/*===========================================================================*/
/* Section -- H1 & H2 Intro Heading */
/*===========================================================================*/

.location-title {
    padding: 30px 10px 10px;

    .container {

        h1 {
            color: var(--intro-h1-color);
            font-size: var(--intro-h1-font);
            margin-bottom: 20px;
            text-align: center;
            text-transform: uppercase;
        }

        h2 {
            font-size: var(--intro-h2-font);
            color: var(--intro-h2-color);
            line-height: 1.25;
        }
    }
}

/*===========================================================================*/
/* Why Choose Us */
/*===========================================================================*/

.location-why {
    padding: 60px 10px;

    h2 {
        padding: 0 0 40px;
    }

    .why-icons-container {
        display: flex;
        flex-wrap: wrap;
        gap: 50px 0;
        justify-content: center;
        margin: 25px auto 0;
        max-width: 1200px;

        .location-icon {

            h3 {
                font-size: var(--why-h3-icon-font);
            }
        }
    }
}

/*===========================================================================*/
/* Section -- Doctors */
/*===========================================================================*/

.location-doctors {

    .heading-and-doctors {
        display: flex;
        flex-direction: column-reverse;

        h2 {
            margin: 15px auto;
            padding: 0 10px 30px;
        }

        .doctor-images-container {
            max-width: var(--doctor-images-container-width);
            width: 100%;
            display: flex;
            justify-content: space-evenly;
            margin: 75px auto 50px;
            padding: 0 20px;
            flex-wrap: wrap;
            gap: 50px 20px;

            .doctor {
                display: grid;
                gap: 15px 0;
                margin: 0 auto;
                align-self: start;
                flex: 0 1 var(--doctor-image-width);
                max-width: max-content;

                img {
                    max-width: 100%;
                }

                h3 {
                    color: var(--image-h3-color);
                    font-size: var(--doctor-h3-image-font);
                    padding: 5px 0;

                    small {
                        display: block;
                        margin: 10px auto 0;
                    }
                }
            }

            /* H3 color when "off" class isn't present (For all icons) */
            &:not(.off) {

                .doctor {

                    /* H3 color when "off" class isn't present (For individual icons) */
                    &:not(.off) {

                        &:hover {

                            h3 {
                                color: var(--image-modal-h3-color-hover);
                            }
                        }

                        h3 {
                            color: var(--image-modal-h3-color);
                        }
                    }
                }
            }
        }
    }

    .doctor-icons-container {
        display: flex;
        flex-wrap: wrap;
        gap: 50px 0;
        margin: 0 auto;
        max-width: 1200px;
        padding: 20px 0 75px;

        .location-icon {
            gap: 5px 0;

            h3 {
                font-size: var(--doctor-h3-icon-font);
            }
        }
    }

    .doctor-bio-links {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 0 75px;
        gap: 15px;
    }
}

/*===========================================================================*/
/* Section -- Review */
/*===========================================================================*/

.location-review {
    position: relative;
    padding: 60px 10px;

    .google-icon {

        img {
            display: block;
            margin: 0 auto;
        }
    }

    .container {
        padding: 5px 0 0;

        .review-text {
            max-width: 800px;
            margin: 0 auto;

            p {
                font-size: var(--review-content-font);
                font-weight: 400;
                position: relative;
                max-width: max-content;
                margin: 0 auto;

                /* Add quotation mark before the first <p> element */
                &:first-child {

                    &:before {
                        content: "\e838"; /* quotation mark (beginning) */
                        font-size: 40px;
                        font-family: fontello;
                        color: var(--quotation-color);
                        transform: rotate(180deg);
                        display: inline-block;
                        margin: 0 4px 0 0;
                        line-height: 1;
                    }
                }

                /* Add quotation mark after the last <p> element */
                &:last-child {

                    &:after {
                        content: "\e838"; /* quotation mark (end) */
                        font-size: 40px;
                        font-family: fontello;
                        color: var(--quotation-color);
                        display: inline-block;
                        margin: 0 0 0 8px;
                        position: absolute;
                        bottom: -6px;
                    }
                }
            }
        }
        
        author {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0 10px;
            margin: 20px auto 0;
            font-size: 20px;
            line-height: 35px;

            star {
                
                &:before {
                    content: '\e80f \e80f \e80f \e80f \e80f';
                    color: #f4bd17;
                    font-family: fontello;
                    font-size: 35px;
                }
            }

            strong {
                font-weight: 700;

                &:before {
                    content: '\2014'; /* long dash character */
                    padding: 0 5px 0 0;
                }
            }
        }
    }
}

/*===========================================================================*/
/* Section -- Services */
/*===========================================================================*/

.location-services {
    padding: 60px 10px;

    .service-icons-container {
        max-width: var(--service-images-container-width);
        display: flex;
        justify-content: center;
        margin: 0 auto;
        padding: 25px 0 0;
        flex-wrap: wrap;
        gap: 50px 20px;

        .service {
            flex: 0 1 var(--service-image-width);
            margin: 0 auto;
            padding: 0;
            transition: 0.4s all;
            max-width: max-content;

            &:not(.off) {

                &:hover {
                    transform: scale(1.05);
                    transition: 0.4s all;
                }
            }

            h3 {
                color: var(--image-h3-color);
                display: grid;
                font-size: var(--service-h3-image-font);
                margin: 10px 0 0;
  
                small {
                    display: block;
                    padding: 0 0 3px;
                }
            }
        }

        /* H3 color when "off" class isn't present (For all icons) */
        &:not(.off) {

            .service {

                /* H3 color when "off" class isn't present (For individual icons) */
                &:not(.off) {

                    &:hover {

                        h3 {
                            color: var(--image-modal-h3-color-hover);
                        }
                    }

                    h3 {
                        color: var(--image-modal-h3-color);
                    }
                }
            }
        }
    }
}

/*===========================================================================*/
/* Section -- Financing */
/*===========================================================================*/

.location-financing {
    margin: auto;
    padding: 60px 10px;

    .financing-icons-container {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        max-width: 1200px;
        padding: 25px 0 0;
        gap: 40px 0;
        justify-content: space-around;

        .location-icon {
            flex: 0 1 250px;
            gap: 5px 0;
            margin: 0;

            h3 {
                font-size: var(--financing-h3-icon-font);
            }
        }

        /* H3 color when "off" class isn't present (For all icons) */
        &:not(.off) {

            .location-icon {

                /* H3 color when "off" class isn't present (For individual icons) */
                &:not(.off) {

                    &:hover {

                        h3 {
                            color: var(--svg-modal-h3-color-hover);
                        }
                    }

                    h3 {
                        color: var(--svg-modal-h3-color);
                    }
                }
            }
        }
    }
}

/*===========================================================================*/
/* Section -- Find Our Office */
/*===========================================================================*/

.location-find-us {
    padding: 60px 10px 30px;
}

/*===========================================================================*/
/* Section -- FAQs */
/*===========================================================================*/

.location-faqs {
    padding: 60px 10px 45px;

    .location-accordion {
        border-top: var(--faq-border-type);
        border-color: var(--faq-border-color);
        border-left: var(--faq-border-type);
        border-left-color: var(--side-border-color);
        border-right: var(--faq-border-type);
        border-right-color: var(--side-border-color);
        border-width: var(--faq-border-width);
        border-radius: var(--faq-border-radius);
        border-bottom: none;
        margin: 20px auto;
        overflow: hidden;
        text-align: left;
        max-width: var(--faq-max-width);

        .faq-wrapper {

            .faq-toggle {
                background-color: var(--faq-h3-background-color);
                position: relative;
                cursor: pointer;
                clear: both;
                display: block;
                margin: 0 auto;
                width: 100%;
                padding: 10px 20px 10px 60px;
                border-bottom: var(--faq-border-type);
                border-color: var(--faq-border-color);
                border-width: var(--faq-border-width);

                /* Toggle Icon */
                &:before {
                    content: '\e840';
                    font-family: fontello;
                    color: var(--faq-icon-color);
                    font-size: var(--faq-icon-size);
                    position: absolute;
                    top: 50%;
                    left: 20px;
                    transform: translateY(-50%);
                }

                &:hover {

                    &:before {
                        color: var(--faq-icon-color-hover);
                    }

                    h3 {
                        color: var(--faq-h3-color-hover);
                    }
                }

                &.active {
                    border: none;

                    &:before {
                        content: '\e841';
                        color: var(--faq-icon-color-active);
                    }

                    h3 {
                        color: var(--faq-h3-color-active);
                    }
                }

                h3 {
                    color: var(--faq-h3-color);
                    font-size: var(--faq-h3-font);
                    text-align: left;
                }
            }

            .faq-content {
                background-color: var(--faq-content-background-color);
                display: none;
                padding: var(--faq-content-padding);
                border-bottom: var(--faq-border-type);
                border-color: var(--faq-border-color);
                border-width: var(--faq-border-width);

                /* Content color, excluding the HTML elements within the "not()" varirable */
                *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(a):not(button):not(input):not(select):not(textarea) {
                    color: var(--faq-content-color);
                }

                /* <a> color & hover color, except for <a class="btn"> elements */
                a:not(.btn):not(.btn-alt) {
                    color: var(--faq-a-color);

                    &:hover {
                        color: var(--faq-a-color-hover);
                    }
                }

                p {
                    margin: 0 0 20px;
                    padding: 0;
                }

                .btn,
                .btn-alt {
                    margin: 20px 0;

                    &.center {
                        margin: 20px auto;
                    }
                }
            }
        }
    }
}

/*===========================================================================*/
/* Modal */
/*===========================================================================*/

/* disable scrolling for main body when modal is active */
html.disable-scroll,
body.disable-scroll {
    overflow: hidden;
}

/* adjust for 17px scrollbar width */
html.disable-scroll {
    padding: 0 17px 0 0;
}

.off {
    pointer-events: none;
    cursor: not-allowed;
}

.location-page-modal-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 10000000000;

    .location-page-modal-content {
        background: var(--modal-background-color);
        padding: 50px 20px 20px;
        border-radius: 10px;
        position: relative;
        max-width: 1000px;
        width: 90%; /* add padding at the left & right sides */
        max-height: 90%; /* add padding at the top & bottom */
        overflow: auto;
        margin: auto;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        top: 50%;
        transform: translateY(-50%);

        h3 {
            color: var(--modal-h3-color);
            margin: 0 auto 25px;
            max-width: 90%;
            text-align: center;

            small {
                display: block;
                margin: 10px auto 0;
            }
        }

        /* Content color, excluding the HTML elements within the "not()" varirable */
        *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(a):not(button):not(input):not(select):not(textarea) {
            color: var(--modal-content-color);
        }

        /* <a> color & hover color, except for <a class="btn"> elements */
        a:not(.btn):not(.btn-alt) {
            color: var(--modal-a-color);

            &:hover {
                color: var(--modal-a-color-hover);
            }
        }

        ul,
        ol {
            overflow: visible; /* prevent from cropping or hiding on certain screen widths & heights */
            margin-bottom: 0;
        }

        .btn,
        .btn-alt {
            max-width: max-content;
            margin: 10px 0;

            &.center {
                margin: 10px auto;
            }
        }

        /* Show outline for tab & shift-tab key events */
        & :focus-visible {
            outline: 2px solid var(--modal-focus-color) !important; /* over-ride site or default color */
            outline-offset: 2px;
            transition: none;
        }

        /* Hide outline for mouse click events  */
        & :focus:not(:focus-visible) {
            outline: none !important;
            transition: none;
        }

        /* Fallback for older browsers that don't support "focus-visible" */
        & :focus {
            outline: 2px solid var(--modal-focus-color) !important; /* over-ride site or default color */
            outline-offset: 2px;
            transition: none;
        }

        .close-location-page-modal {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 30px;
            cursor: pointer;
            line-height: 1;
            color: var(--modal-close-button-color);

            &:hover {
                color: var(--modal-close-button-color-hover);
            }
        }
    }
}

/*===========================================================================*/
/* Responsiveness */
/*===========================================================================*/

@media screen and (max-width: 1024px) {

    /* All Sections */
    .location-page-section {

        h2 {
            font-size: var(--h2-font-tablet);

        }

        .location-icon {
            h3 {
                font-size: var(--svg-icon-font-tablet);
            }
        }

        /*  H1 & H2 Intro Heading */
        &.location-title {
            .container {
                h1 {
                    font-size: var(--intro-h1-font-tablet);
                }
                h2 {
                    font-size: var(--intro-h2-font-tablet);
                }
            }
        }

        /* Why Choose Section */
        &.location-why {
            .why-icons-container {
                .location-icon {
                    h3 {
                        font-size: var(--why-h3-icon-font-tablet);
                    }
                }
            }
        }

        /* Meet the Doctors Section */
        &.location-doctors {
            .heading-and-doctors {
                .doctor-images-container {
                    .doctor {
                        h3 {
                            font-size: var(--doctor-h3-image-font-tablet);
                        }
                    }
                }
            }
            .doctor-icons-container {
                .location-icon {
                    h3 {
                        font-size: var(--doctor-h3-icon-font-tablet);
                    }
                }
            }
        }

        /* Review Section */
        &.location-review {
            .container {
                p {
                    font-size: var(--review-content-font-tablet);
                }
            }
        }

        /* Services Section */
        &.location-services {
            .service-icons-container {
                .service {
                    h3 {
                        font-size: var(--service-h3-image-font-tablet);
                    }
                }
            }
        }

        /* Financing Section */
        &.location-financing {
            .financing-icons-container {
                .location-icon {
                    h3 {
                        font-size: var(--financing-h3-icon-font-tablet);
                    }
                }
            }
        }

        /* FAQS Section */
        &.location-faqs {
            .location-accordion {
                .faq-wrapper {
                    .faq-toggle {

                        &:before {
                            font-size: var(--faq-icon-size-tablet);
                        }

                        h3 {
                            font-size: var(--faq-h3-font-tablet);
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 767px) {

    /* All Sections */
    .location-page-section {

        h2 {
            font-size: var(--h2-font-mobile);

        }

        .location-icon {
            h3 {
                font-size: var(--svg-icon-font-mobile);
            }
        }

        /*  H1 & H2 Intro Heading */
        &.location-title {
            .container {
                h1 {
                    font-size: var(--intro-h1-font-mobile);
                }
                h2 {
                    font-size: var(--intro-h2-font-mobile);
                }
            }
        }

        /* Why Choose Section */
        &.location-why {
            .why-icons-container {
                .location-icon {
                    h3 {
                        font-size: var(--why-h3-icon-font-mobile);
                    }
                }
            }
        }

        /* Meet the Doctors Section */
        &.location-doctors {
            .heading-and-doctors {
                .doctor-images-container {
                    .doctor {
                        h3 {
                            font-size: var(--doctor-h3-image-font-mobile);
                        }
                    }
                }
            }
            .doctor-icons-container {
                .location-icon {
                    h3 {
                        font-size: var(--doctor-h3-icon-font-mobile);
                    }
                }
            }
        }

        /* Review Section */
        &.location-review {
            .container {
                p {
                    font-size: var(--review-content-font-mobile);
                }
            }
        }

        /* Services Section */
        &.location-services {
            .service-icons-container {
                .service {
                    h3 {
                        font-size: var(--service-h3-image-font-mobile);
                    }
                }
            }
        }

        /* Financing Section */
        &.location-financing {
            .financing-icons-container {
                .location-icon {
                    h3 {
                        font-size: var(--financing-h3-icon-font-mobile);
                    }
                }
            }
        }

        /* FAQS Section */
        &.location-faqs {
            .location-accordion {
                .faq-wrapper {
                    .faq-toggle {

                        &:before {
                            font-size: var(--faq-icon-size-mobile);
                        }

                        h3 {
                            font-size: var(--faq-h3-font-mobile);
                        }
                    }
                }
            }
        }
    }
}

/* SVG Icons (2 Columns) */
@media screen and (max-width: 850px) {
    
    .location-page-section {

        .location-icon {
            flex: 0 1 50%;
        }

        &.alt-background {

            .location-icon {
                flex: 0 1 50%;
            }
        }
    }
}

/* SVG Icons (1 Column) */
@media screen and (max-width: 490px) {

    .location-page-section {

        .location-icon {
            flex: 0 1 100%;
        }

        &.alt-background {

            .location-icon {
                flex: 0 1 100%;
            }
        }
    }
}