/* ===================================
    About Us Page
====================================== */

/* hero */
#about-hero {
    background-image: url(/img/bkgd-about-us-hero.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: calc(100vh - 178px);
    display: flex;
    align-items: center;
    justify-content: center;
}

    #about-hero h1 {
        font-size: 120px;
        line-height: .7;
        font-weight: 500;
    }

    #about-hero h3 {
        font-size: 50px;
        line-height: 1;
        font-weight: 500;
    }

@media screen and (orientation: portrait) {
    #about-hero {
        background-image: url(/img/bkgd-about-us-hero-portrait.jpg);
        background-position: center top;
    }
}

@media (max-width: 1399px) {
    #about-hero {
        height: calc(100vh - 166px);
    }
}

@media (max-width: 1199px) {
    #about-hero {
        height: calc(100vh - 152px);
    }
}

@media (max-width: 991px) {
    #about-hero {
        height: calc(100vh - 215px);
    }
}

@media (max-width: 767px) {
    #about-hero {
        height: calc(100vh - 245px);
    }

        #about-hero h1 {
            font-size: 85px;
        }

        #about-hero h3 {
            font-size: 35px;
        }
}

@media (max-width: 575px) {
    #about-hero h1 {
        font-size: 70px;
    }

    #about-hero h3 {
        font-size: 28px;
    }
}

@media (max-width: 449px) {
    #about-hero h1 {
        font-size: 55px;
    }

    #about-hero h3 {
        font-size: 22px;
    }
}

/* stats section */
#about-stats {
    background-image: url(/img/bkgd-stats.jpg);
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 5px 0px 20px 0px;
}

    #about-stats .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 225px;
    }

        #about-stats .icon img {
            max-width: 100%;
            max-height: 85%;
            height: auto;
        }

    #about-stats .stat-number {
        font-size: 42px;
        line-height: 1;
        font-weight: 300;
        padding-top: 10px;
    }

    #about-stats .stat-label {
        font-size: 25px;
        line-height: 1;
        font-weight: 700;
    }

@media (max-width: 1399px) {
    #about-stats .icon {
        height: 200px;
    }
}

@media (max-width: 1199px) {
    #about-stats {
        padding: 0px 0px 20px 0px;
    }

        #about-stats .icon {
            height: 175px;
        }

        #about-stats .stat-number {
            font-size: 36px;
            padding-top: 0px;
        }

        #about-stats .stat-label {
            font-size: 20px;
        }
}

@media (max-width: 991px) {
    #about-stats {
        padding: 0px 0px 30px 0px;
    }

        #about-stats .icon img {
            max-width: 75%;
            max-height: 75%;
            margin-top: 25px;
        }
}

@media (max-width: 767px) {
    #about-stats {
        padding: 10px 0px 30px 0px;
    }

        #about-stats .icon {
            height: auto;
        }

            #about-stats .icon img {
                max-width: 90%;
                max-height: 85%;
            }

        #about-stats .stat-number {
            padding-top: 10px;
        }
}

/* values & mission section */
#about-values-mission {
    background-image: url(/img/bkgd-blue-textured.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 50px;
}

    #about-values-mission h2 {
        font-size: 100px;
        line-height: .9;
    }

    #about-values-mission p {
        font-size: 32px;
        line-height: 1.3;
        font-weight: 500;
    }

        #about-values-mission p.left {
            margin: 35px 0px;
        }

        #about-values-mission p.right {
            margin: 85px 0px;
        }

    #about-values-mission ul li {
        font-size: 30px;
        line-height: 1.1;
        font-weight: 400;
        margin: 35px 0px;
    }

@media (max-width: 1399px) {
    #about-values-mission h2 {
        font-size: 88px;
    }

    #about-values-mission p {
        font-size: 30px;
    }

        #about-values-mission p.left {
            margin: 30px 0px;
        }

        #about-values-mission p.right {
            margin: 65px 0px;
        }

    #about-values-mission ul li {
        font-size: 28px;
        margin: 30px 0px;
    }
}

@media (max-width: 1199px) {
    #about-values-mission h2 {
        font-size: 72px;
    }

    #about-values-mission p {
        font-size: 26px;
    }

        #about-values-mission p.left {
            margin: 24px 0px;
        }

        #about-values-mission p.right {
            margin: 55px 0px;
        }

    #about-values-mission ul {
        padding-left: 25px;
    }

        #about-values-mission ul li {
            font-size: 24px;
            margin: 24px 0px;
        }
}

@media (max-width: 991px) {
    #about-values-mission h2 {
        font-size: 54px;
    }

    #about-values-mission p {
        font-size: 20px;
    }

        #about-values-mission p.left {
            margin: 18px 0px;
        }

        #about-values-mission p.right {
            margin: 50px 0px;
        }

    #about-values-mission ul {
        padding-left: 20px;
    }

        #about-values-mission ul li {
            font-size: 18px;
            margin: 18px 0px;
        }
}

@media (max-width: 767px) {
    #about-values-mission h2 {
        font-size: 46px;
        text-align: center;
    }

    #about-values-mission div.right {
        margin-top: 24px;
    }

    #about-values-mission p {
        font-size: 26px;
    }

        #about-values-mission p.left {
            margin: 18px 0px;
        }

        #about-values-mission p.right {
            margin: 18px 0px;
        }

    #about-values-mission ul {
        padding-left: 25px;
    }

        #about-values-mission ul li {
            font-size: 22px;
            margin: 18px 0px;
        }
}

@media (max-width: 575px) {
    #about-values-mission h2 {
        font-size: 38px;
    }

    #about-values-mission p {
        font-size: 20px;
    }

    #about-values-mission ul {
        padding-left: 20px;
    }

        #about-values-mission ul li {
            font-size: 16px;
        }
}

@media (max-width: 449px) {
    #about-values-mission h2 {
        font-size: 30px;
    }

    #about-values-mission p {
        font-size: 16px;
    }

    #about-values-mission ul li {
        font-size: 14px;
    }
}

/* dedicated-appointment-times */
#dedicated-appointment-times {
    background-color: var(--bkgd-off-white) !important;
    padding: 5px 0px;
    background-image: url(/img/pin-up3-left.png), url(/img/pin-up3-right.png);
    background-repeat: no-repeat;
    background-position: 50px center, right 50px center;
}

    #dedicated-appointment-times .dat-text {
        padding: 25px 0px;
        font-size: 50px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

        #dedicated-appointment-times .dat-text img {
            height: 65%;
            vertical-align: middle;
            margin: 0 10px;
        }

@media (max-width: 1399px) {
    #dedicated-appointment-times .dat-text {
        font-size: 45px;
    }
}

@media (max-width: 1199px) {
    #dedicated-appointment-times .dat-text {
        font-size: 35px;
    }

        #dedicated-appointment-times .dat-text img {
            height: 55%;
        }
}

@media (max-width: 991px) {
    #dedicated-appointment-times {
        background-size: auto 80px;
        background-position: 30px center, right 30px center;
    }

        #dedicated-appointment-times .dat-text {
            padding: 15px 0px;
            font-size: 30px;
        }

            #dedicated-appointment-times .dat-text img {
                height: 40%;
                margin: 0 5px;
            }
}

@media (max-width: 767px) {
    #dedicated-appointment-times {
        background-size: auto 85px;
    }

        #dedicated-appointment-times .dat-text {
            font-size: 24px;
        }

            #dedicated-appointment-times .dat-text img {
                margin: 0 5px 3px 5px;
            }
}

@media (max-width: 669px) {
    #dedicated-appointment-times .dat-text {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    #dedicated-appointment-times {
        background-image: unset;
    }

        #dedicated-appointment-times .dat-text {
            font-size: 16px;
        }
}

@media (max-width: 379px) {
    #dedicated-appointment-times .dat-text {
        font-size: 14px;
    }

        #dedicated-appointment-times .dat-text img {
            height: 25%;
        }
}

/* values & mission section */
#our-story {
    background-image: url(/img/bkgd-beige-textured.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 50px;
}

    #our-story h2 {
        font-size: 88px;
        line-height: 1;
    }

    #our-story p {
        font-size: 28px;
        line-height: 1.5;
        font-weight: 500;
        text-align: justify;
    }

@media (max-width: 1399px) {
    #our-story h2 {
        font-size: 80px;
    }

    #our-story p {
        font-size: 24px;
    }
}

@media (max-width: 1199px) {
    #our-story h2 {
        font-size: 68px;
    }

    #our-story p {
        font-size: 20px;
    }
}

@media (max-width: 991px) {
    #our-story h2 {
        font-size: 50px;
    }

    #our-story p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    #our-story {
        padding-bottom: 50px;
    }

        #our-story h2 {
            font-size: 65px;
            text-align: center;
        }

        #our-story div.right {
            margin-top: 5px;
        }

        #our-story p {
            font-size: 24px;
        }
}

@media (max-width: 575px) {
    #our-story h2 {
        font-size: 52px;
    }

    #our-story p {
        font-size: 20px;
    }
}

@media (max-width: 449px) {
    #our-story h2 {
        font-size: 46px;
    }

    #our-story p {
        font-size: 16px;
    }
}

/* unique-membership-options */
#unique-membership-options {
    background-color: var(--bkgd-off-white) !important;
    padding: 5px 0px;
    background-image: url(/img/pin-up4-left.png), url(/img/pin-up4-right.png);
    background-repeat: no-repeat;
    background-position: 50px center, right 50px center;
}

    #unique-membership-options .umo-text {
        padding: 25px 0px;
        font-size: 50px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

        #unique-membership-options .umo-text img {
            height: 65%;
            vertical-align: middle;
            margin: 0 10px;
        }

@media (max-width: 1399px) {
    #unique-membership-options .umo-text {
        font-size: 45px;
    }
}

@media (max-width: 1199px) {
    #unique-membership-options .umo-text {
        font-size: 35px;
    }

        #unique-membership-options .umo-text img {
            height: 55%;
        }
}

@media (max-width: 991px) {
    #unique-membership-options {
        background-size: auto 80px;
        background-position: 30px center, right 30px center;
    }

        #unique-membership-options .umo-text {
            padding: 15px 0px;
            font-size: 30px;
        }

            #unique-membership-options .umo-text img {
                height: 40%;
                margin: 0 5px;
            }
}

@media (max-width: 767px) {
    #unique-membership-options {
        background-size: auto 85px;
    }

        #unique-membership-options .umo-text {
            font-size: 24px;
        }

            #unique-membership-options .umo-text img {
                margin: 0 5px 3px 5px;
            }
}

@media (max-width: 669px) {
    #unique-membership-options .umo-text {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    #unique-membership-options { 
        background-image: unset;
    }

        #unique-membership-options .umo-text {
            font-size: 16px;
        }
}

@media (max-width: 379px) {
    #unique-membership-options .umo-text {
        font-size: 15px;
    }

        #unique-membership-options .umo-text img {
            height: 25%;
        }
}

/* were-different */
#were-different {
    background-image: url(/img/bkgd-green-textured.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

    #were-different div.left {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    #were-different div.right {
        background-image: url(/img/were-different-barber.jpg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-clip: content-box;
        min-height: 100%;
    }

    #were-different h2 {
        font-size: 88px;
        line-height: .9;
    }

    #were-different p {
        font-size: 28px;
        line-height: 1.5;
        font-weight: 500;
        text-align: justify;
    }

@media (max-width: 1399px) {
    #were-different h2 {
        font-size: 80px;
    }

    #were-different p {
        font-size: 24px;
    }
}

@media (max-width: 1199px) {
    #were-different h2 {
        font-size: 68px;
    }

    #were-different p {
        font-size: 20px;
    }
}

@media (max-width: 991px) {
    #were-different h2 {
        font-size: 50px;
    }

    #were-different p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    #were-different h2 {
        font-size: 65px;
        text-align: center;
    }

    #were-different div.left {
        text-align: center;
    }

    #were-different div.right {
        margin-top: 5px;
    }

    #were-different p {
        font-size: 24px;
    }
}

@media (max-width: 575px) {
    #were-different h2 {
        font-size: 52px;
    }

    #were-different p {
        font-size: 20px;
    }
}

@media (max-width: 449px) {
    #were-different h2 {
        font-size: 46px;
    }

    #were-different p {
        font-size: 16px;
    }
}

/* franchising */
#franchising {
    background-color: var(--bkgd-off-white) !important;
    padding: 5px 0px;
}

    #franchising .franchising-text {
        padding: 0px;
        font-size: 34px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

        #franchising .franchising-text img {
            margin: 0;
        }

        #franchising .franchising-text br {
            display: none;
        }

@media (max-width: 1399px) {
    #franchising .franchising-text {
        font-size: 28px;
    }
}

@media (max-width: 1199px) {
    #franchising .franchising-text {
        font-size: 24px;
    }

        #franchising .franchising-text img {
            width: 10%;
        }

        #franchising .franchising-text .btn {
            padding: 8px 20px !important
        }
}

@media (max-width: 991px) {
    #franchising .franchising-text {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    #franchising .franchising-text {
        font-size: 18px;
        padding-top: 20px;
    }

        #franchising .franchising-text br {
            display: none;
        }

        #franchising .franchising-text .btn {
            padding: 5px 20px !important
        }
}