/******************************

INDEX:

******************************/
.mobile-appointment-link {
    display: none;
}

@media(max-width:1199px) {
    .mobile-appointment-link {
        display: list-item !important;
    }

    .section-title h2 {
        font-size: 32px;
        line-height: 42px;
    }

    .home.site-header .site-branding img.logo-img {
        display: none;
    }

    .home.site-header .site-branding img.logo-img.stickylogo {
        display: inline-block;
    }

    .home-slider-one>.container {
        width: 100%;
        padding: 0;
        max-width: 100%;
    }

    .home-slider-one>.container .row {
        margin-right: 0;
        margin-left: 0;
    }

    .ts-search-outer {
        padding: 0 50px;
    }

    .ts-search-overlay input[type="search"] {
        font-size: 13px;
    }

    /** Header responsive **/
    .site-header .header-button,
    .site-header .pre-header {
        display: none;
    }

    .ipad-view-search {
        display: block;
    }

    .site-header .site-header-menu {
        padding: 30px 0;
    }

    .site-header .site-branding img {
        max-height: 40px;
    }

    .site-header .sticky-header .site-branding img {
        max-height: 35px;
    }

    /** Main menu resoposive **/
    .navbar-toggler {
        border: none;
        font-size: 30px;
        padding: 0;
        outline: none;
    }

    .sticky-header .navbar-toggler {
        top: 10px;
    }

    .navbar-toggler:hover,
    .navbar-toggler:focus {
        outline: none;
    }

    .main-menu .navbar-collapse {
        position: absolute;
        width: 100%;
        left: 0;
        background-color: #f7f8fa;
        z-index: 99;
        top: 70px;
        border-top: 3px solid #7fc540;
    }

    .sticky-header .navbar-collapse {
        top: 60px;
    }

    .main-menu .navigation>li {
        float: none;
    }

    .site-header .site-navigation ul.navigation>li>a {
        height: auto;
        line-height: inherit;
        padding: 10px 15px;
        margin: 0;
        border-bottom: 1px solid rgba(9, 22, 42, 0.15);
    }

    .site-header .site-navigation ul.navigation>li.active>a,
    .site-header .site-navigation .dropdown ul li.active>a {
        background-color: #ffffff;
    }

    .main-menu .navigation>li>ul,
    .main-menu .navigation>li>ul>li>ul {
        border-top: none;
        box-shadow: inherit;
        width: 100%;
        display: none;
        position: inherit;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    .main-menu .navigation>li>ul>li>ul {
        left: 0;
        top: 100%;
    }

    .main-menu .navigation>li.dropdown>ul.open,
    .main-menu .navigation>li.dropdown>ul.open li.dropdown>ul.open {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .menu-right-box {
        position: relative;
        right: 30px;
        top: 10px;
    }

    .site-header .site-navigation ul.navigation .righticon {
        font-size: 22px;
        display: block;
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        display: block;
        border-left: 1px solid rgba(120, 120, 120, 0.2);
        height: 45px;
        width: 45px;
        cursor: pointer;
        text-align: center;
        line-height: 45px;
    }

    .site-header .menu-right-box {
        display: none !important;
    }

    /** header-style-1 **/
    .header-style-1 .menu-right-box {
        display: none !important;
    }

    /** header-style-2 **/
    .header-style-2 .site-navigation {
        text-align: right;
    }

    .header-style-2.site-header .site-navigation ul.navigation {
        text-align: left;
    }

    .header-style-2.site-header .navbar-toggler {
        color: #42464e;
    }

    /** Header Style 2 **/
    .site-header.header-style-2 {
        background-color: #7fc540 !important;
        position: inherit;
    }

    .header-style-2 .site-header-menu {
        background-color: #7fc540;
    }

    .header-style-2 .social-links-wrapper {
        display: none;
    }

    .header-style-2 .headerlogo,
    .header-style-2 .sticky-header .headerlogo {
        border-right: none;
    }

    .header-style-2 .headerlogo {
        padding-right: 0;
        padding-left: 20px;
    }

    .header-style-2 .headerlogo,
    .header-style-2 .social-links-wrapper,
    .header-style-2 .menu-right-box {
        height: 70px;
        line-height: 70px;
    }

    .header-style-2 .sticky-header .headerlogo,
    .header-style-2 .sticky-header .social-links-wrapper,
    .header-style-2 .sticky-header .menu-right-box {
        height: 60px;
        line-height: 60px;
    }

    .header-style-2 .navbar-toggler {
        right: 30px;
        top: 20px;
        color: #ffffff;
    }

    .header-style-2.site-header .site-navigation ul.navigation {
        text-align: left;
    }

    .header-style-2.site-header .main-menu .navigation>li>ul a {
        padding-left: 30px;
    }

    .header-style-2.site-header .site-navigation ul.navigation>li>a {
        color: #313131;
    }

    .header-style-2 .site-navigation {
        width: auto;
        text-align: left;
    }

    .header-style-2 .site-header-menu.sticky-header {
        padding: 20px 0;
    }

    .header-style-2.site-header .site-navigation ul.navigation>li.active>a {
        color: #7fc540 !important;
    }

    .header-style-2.site-header .site-navigation ul.navigation>li>a {
        color: #313131 !important;
    }

    .header-style-2 .sticky-header .navbar-collapse {
        top: 50px;
    }

    .header-style-2 .choice-optical-header-logo {
        width: 120px;
        height: 50px;
    }

    .header-style-2 .choice-optical-header-logo .choice-logo {
        width: 120px;
        height: 50px;
        max-height: none;
    }

    /* Contact mobile layout: keep the logo beside a visible vertical menu. */
    .contact-page .site-header .site-header-menu {
        padding: 0;
        background: #ffffff;
    }

    .contact-page .site-header .site-header-menu>.container {
        width: 100%;
        max-width: none;
        padding: 0 10px;
    }

    .contact-page .site-header .site-header-menu>.container>.row,
    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        min-height: 280px;
        align-items: center !important;
    }

    .contact-page .site-header .site-branding {
        display: flex;
        align-items: center;
        align-self: stretch;
        padding-left: 25px;
    }

    .contact-page .site-header .site-branding img.choice-optical-logo,
    .contact-page .site-header .site-branding img.logo-img {
        width: 205px;
        max-width: 100%;
        max-height: none;
    }

    .contact-page .site-navigation {
        flex: 0 0 120px;
        align-self: stretch;
        display: flex;
        align-items: center;
        margin-left: auto !important;
    }

    .contact-page .main-menu,
    .contact-page .main-menu .navbar-header,
    .contact-page .main-menu .navigation {
        width: 100%;
    }

    .contact-page .main-menu .navigation {
        margin: 0;
        padding: 0;
    }

    .contact-page .main-menu .navigation>li {
        float: none;
        width: 100%;
    }

    .contact-page .main-menu .navigation>li>a {
        min-height: 51px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border-bottom: 1px solid #e7e7e7;
        white-space: nowrap;
    }

    .contact-page .main-menu .navigation .righticon {
        top: 3px;
        right: 0;
        height: 45px;
        width: 36px;
        line-height: 45px;
    }

    .contact-page .inner-banner,
    .contact-page .page-content>section.section-mdt>.container {
        display: none;
    }

    .contact-page .page-content>section.section-mdt {
        padding: 0;
        background: #ffffff;
    }

    .contact-page .contact-appointment {
        width: 100%;
        margin: 0;
        box-shadow: none;
    }

    .contact-page .appointment-inner {
        width: 100%;
        padding: 38px 0 0;
    }

    .contact-page .appointment-inner h3 {
        margin: 0 0 12px;
        padding: 0;
        font-size: 28px;
        line-height: 1.35;
    }

    .contact-page .appointment-inner>p {
        margin: 0 0 8px;
        line-height: 1.8;
    }

    .contact-page .contact-form {
        width: 100%;
    }

    .contact-page .contact-form .form-row {
        margin-left: 0;
        margin-right: 0;
    }

    .contact-page .contact-form .form-group {
        width: 100%;
        padding: 26px 0 24px;
        margin: 0 !important;
        border-bottom: 1px solid #e5e5e5;
    }

    .contact-page .contact-form .form-control {
        width: 100%;
    }

    /*
     * Service mobile navigation: keep the Pages submenu collapsed until
     * its arrow is tapped, matching the aligned vertical menu reference.
     */
    .service-page .main-menu .navigation>li.dropdown>ul {
        display: none;
        position: static;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transform: none;
    }

    .service-page .main-menu .navigation>li.dropdown>ul.open {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .service-page .main-menu .navigation>li.dropdown>.righticon {
        display: block;
    }

    .service-page .main-menu .navigation>li>a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        margin: 0;
        padding: 10px 16px;
        line-height: 28px;
    }

    .service-page .main-menu .navigation>li>ul a {
        display: block;
        min-height: 0;
        margin: 0;
        padding: 13px 22px;
        line-height: 16px;
    }

    /*
     * Contact and FAQ use the same tablet navigation as the supplied
     * responsive reference: logo on the left, a compact vertical menu on
     * the right. Their markup also has a real collapse container so the
     * menu can switch to the hamburger layout on phones.
     */
    .faq-page .site-header .site-header-menu {
        padding: 0;
        background: #ffffff;
    }

    .faq-page .site-header .site-header-menu>.container {
        width: 100%;
        max-width: none;
        padding: 0 10px;
    }

    .faq-page .site-header .site-header-menu>.container>.row,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        min-height: 280px;
        align-items: center !important;
    }

    .faq-page .site-header .site-branding {
        display: flex;
        align-items: center;
        align-self: stretch;
        padding-left: 25px;
    }

    .faq-page .site-header .site-branding img.logo-img {
        width: 205px;
        max-width: 100%;
        max-height: none;
    }

    .faq-page .site-navigation {
        flex: 0 0 120px;
        align-self: stretch;
        display: flex;
        align-items: center;
        margin-left: auto !important;
    }

    .faq-page .main-menu,
    .faq-page .main-menu .navbar-header,
    .faq-page .main-menu .navigation {
        width: 100%;
    }

    .faq-page .main-menu .navigation {
        margin: 0;
        padding: 0;
    }

    .faq-page .main-menu .navigation>li {
        float: none;
        width: 100%;
    }

    .faq-page .main-menu .navigation>li>a {
        min-height: 51px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border-bottom: 1px solid #e7e7e7;
        white-space: nowrap;
    }

    .faq-page .main-menu .navigation .righticon {
        top: 3px;
        right: 0;
        height: 45px;
        width: 36px;
        line-height: 45px;
    }

    .faq-page .main-menu .navbar-collapse,
    .contact-page .main-menu .navbar-collapse {
        position: static;
        width: auto;
        display: block !important;
        border-top: 0;
        background: transparent;
    }

    .faq-page .main-menu .navbar-header .navbar-toggler,
    .contact-page .main-menu .navbar-header .navbar-toggler {
        display: none;
    }

    /** Header Style 3 **/
    .header-style-3 .site-navigation {
        margin-left: auto !important;
    }

    .header-style-3.site-header {
        background-color: #ffffff;
        z-index: 999;
    }

    .header-style-3.site-header .site-header-menu {
        background-color: #ffffff !important;
    }

    .header-style-3.site-header .menu-right-box,
    .header-style-3.site-header .header-top-wrapper {
        display: none;
    }

    .header-style-3.site-header .site-navigation .main-menu {
        margin-left: 0;
    }

    .header-style-3.site-header .site-header-menu {
        padding: 20px 0;
    }

    .header-style-3.site-header .site-header-menu-inner {
        background-color: inherit;
        line-height: normal !important;
    }

    .header-style-3.site-header .site-header-menu.sticky-header {
        background-color: #ffffff;
        -webkit-box-shadow: 0px 13px 25px -12px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 13px 25px -12px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 13px 25px -12px rgba(0, 0, 0, 0.25);
        z-index: 99;
    }

    .header-style-3.site-header .site-header-menu-inner:after {
        display: none;
    }

    .header-style-3.site-header .site-navigation ul.navigation>li>a {
        color: #313131;
    }

    .header-style-3.site-header .site-header-menu {
        position: relative;
        margin-bottom: 0;
    }

    .header-style-3 .site-header-menu .site-branding {
        display: block;
    }

    .header-style-3 .site-branding {
        display: none;
    }

    .site-header .site-header-menu {
        z-index: 99;
    }

    .header-style-3.site-header .site-navigation ul.navigation>li>a {
        height: auto;
        line-height: inherit;
        padding: 10px 15px;
    }

    /** counter-section **/
    .counter-section {
        margin-top: 0px;
        padding-top: 80px;
    }

    .db-circle canvas {
        max-width: none;
    }

    /** projects-style-1 **/
    .projects-style-1 .project-link {
        height: 30px;
        width: 30px;
        line-height: 30px;
    }

    .projects-style-1 .projects-box-title h6 {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 0;
    }

    /** iconbox-style-5 **/
    .iconbox-style-5 {
        padding: 46px 15px 40px;
    }

    /** img-overlap-top **/
    .img-overlap-top {
        margin-top: -0px;
    }

    /** best-clinic-content **/
    .best-clinic-content {
        width: auto;
        margin-left: 30px;
    }
}

@media only screen and (max-width:1200px) and (min-width:991px) {
    .service-style-3 .service-desc {
        padding: 0 60px;
    }
}

@media(max-width:1024px) {

    /** Slick Slider **/
    .slick-prev {
        left: 0;
    }

    .slick-next {
        right: 0;
    }

    /** Section Padding **/
    .section-md {
        padding-top: 70px;
        padding-bottom: 50px;
    }

    /** Section Title **/
    .section-title {
        margin-bottom: 30px;
    }

    .section-title h2 {
        font-size: 28px;
        line-height: 38px;
    }

    /** Banner **/
    .home-banner .carousel-item h1 {
        line-height: 40px;
        letter-spacing: 0;
        font-size: 30px;
        margin-bottom: 5px;
        margin-top: 0;
    }

    .home-banner .carousel-item .tagline {
        font-size: 14px;
    }

    .home-banner.home-slider-two .square-shape {
        padding: 20px 20px 0 20px;
    }

    .home-banner.home-slider-two .carousel-item .shapewrapper-inner {
        padding: 3px 10px;
        font-size: 13px;
    }

    .home-banner.home-slider-two .carousel-item .tagline {
        font-size: 16px;
        letter-spacing: 1px;
    }

    .home-banner.home-slider-three .carousel-item .shapewrapper-inner {
        letter-spacing: 1px;
    }

    .home-banner .play-video a {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .home-banner .play-video a i {
        color: #323232;
        font-size: 20px;
        line-height: 50px;
    }

    .home-banner .video-tagline {
        letter-spacing: 0;
    }

    /** Home **/
    .intro-section {
        padding-top: 30px;
    }

    .intro-section .container>.row {
        margin: 0;
    }

    .iconbox-style-3 {
        padding: 20px 15px;
    }

    .sing-owner {
        padding-top: 15px;
        padding-bottom: 20px;
    }

    .counter-section {
        margin-top: 0;
        padding-top: 70px;
        padding-bottom: 50px;
    }

    .step-section {
        padding-top: 70px;
    }

    .step-section>.container>.row {
        padding-bottom: 50px;
    }

    /** Home 02**/
    .pricing-tablebox {
        padding: 30px 15px;
    }

    .expert-eye {
        margin-top: -248px;
        padding-top: 240px;
    }

    .offer-service .section-title h2 {
        font-size: 30px;
        line-height: 40px;
    }

    /** Home 03 **/
    .iconbox-style-5 {
        padding: 30px 20px 30px;
    }

    .best-clinic-content {
        width: 100%;
        padding: 40px 15px;
        margin: 0;
        max-width: 100%;
        height: auto;
    }

    .our-team {
        padding-bottom: 250px;
    }

    .our-team-sec>.container>.row {
        margin-top: -118px;
    }

    .our-team-sec .teambox-thumbnail {
        height: 300px;
    }

    .right-bg-effect {
        display: none;
    }

    .iconbox-style-7 .iconbox-icon {
        margin-bottom: 15px;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .iconbox-style-7 .iconbox-icon i {
        font-size: 30px;
        line-height: 30px;
    }

    .iconbox-style-7 .iconbox-title h2 {
        font-size: 17px;
        line-height: 22px;
        margin-bottom: 8px;
    }

    .iconbox-style-7 .iconbox-desc,
    .iconbox-style-7 .iconbox-desc p,
    .iconbox-style-7 .iconbox-desc a {
        font-size: 13.5px;
        line-height: 20px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /** Blog **/
    .sidebar .widget.widget-flickr a {
        width: 70px;
        height: 70px;
    }
}

@media(max-width:991px) {

    /** Section Title **/
    .section-title h2 br {
        display: none;
    }

    .iconbox-style-7 .iconbox-inner.d-flex {
        display: flex;
        align-items: flex-start;
    }

    .iconbox-style-7 .iconbox-inner>.iconbox-inner {
        flex: 1 1 auto;
        min-width: 0;
    }

    .iconbox-style-7 .iconbox-icon {
        margin-right: 8px;
        margin-bottom: 8px;
        flex-shrink: 0;
    }

    .iconbox-style-7 .iconbox-icon i {
        font-size: 24px;
        line-height: 24px;
    }

    .iconbox-style-7 .iconbox-title h2 {
        font-size: 15px;
        line-height: 20px;
        margin-bottom: 6px;
    }

    .iconbox-style-7 .iconbox-desc,
    .iconbox-style-7 .iconbox-desc p,
    .iconbox-style-7 .iconbox-desc a {
        font-size: 11px;
        line-height: 18px;
        white-space: nowrap;
    }

    .appointment-sec .appointment-illustration {
        width: 68%;
    }

    .appointment-image {
        display: none;
    }

    .client-style img {
        width: 100%;
    }

    .contact-appointment,
    .appointment-from .container>.row {
        margin-left: -15px;
    }

    /** project-sec **/
    .project-sec .col {
        -webkit-flex-basis: 50%;
        /* Safari 6.1+ */
        flex-basis: 50%;
    }

    .project-sec .col img {
        width: 100%;
    }

    /** open-time **/
    .open-time .timelist-blok span {
        float: none;
        display: block;
    }

    /** best-clinic-colum **/
    .best-clinic-colum {
        display: none;
    }

    /** breadcrumb-section **/
    .breadcrumb-section {
        display: block !important
    }

    .breadcrumb-section .breadcrumb {
        padding-left: 0;
    }
}

@media(max-width:767px) {

    /*
     * Match the reference mobile layout: the transparent appointment image
     * should behave like a normal responsive image, filling the column
     * width and keeping its natural aspect ratio.
     */
    .appointment-sec>.container>.row>.col-lg-6:last-child {
        height: auto;
        min-height: 0;
        display: block;
        overflow: visible;
        background-color: #fff;
    }

    .appointment-sec .appointment-illustration {
        width: 100%;
        height: auto;
        max-height: none;
        max-width: 100%;
        margin: 0;
        object-fit: initial;
    }

    .section-md.skin-bg-color .counter .counter-contents span {
        display: inline-block;
        min-width: 1ch;
        visibility: visible;
        opacity: 1;
    }

    /* Keep treatment copy and checklists inside the phone viewport. */
    .section-md.bg-lightgrey .tab-pane .row>.treat-us {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
        width: 100%;
        padding-right: 0;
    }

    .section-md.bg-lightgrey .tab-pane .list li .list-content {
        display: inline-block;
        max-width: calc(100% - 25px);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* The footer uses legacy col-xs-* classes; restore full-width stacking
       on Bootstrap 4 phones so paragraphs and links can wrap. */
    .site-footer>.container>.row>[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .site-footer p,
    .site-footer a,
    .site-footer .footer-widget-title {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /* Reduce the gap between the About banner and the Experts section. */
    .about-page .about-experts-section {
        padding-top: 24px;
    }

    /* ------------------------
        padding
    ------------------------*/

    /* ------------------------
        Margin
    ------------------------*/
    h3 {
        font-size: 24px;
        line-height: 34px;
    }

    h4 {
        font-size: 22px;
        line-height: 32px;
    }

    h5 {
        font-size: 20px;
        line-height: 30px;
    }

    /** Section Title **/
    .section-title h2 {
        font-size: 26px;
        line-height: 36px;
    }

    /** Banner **/
    .home-slider-first .col-8 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .home-banner .carousel-item h1 {
        line-height: 32px;
        letter-spacing: 0;
        font-size: 22px;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .home-banner .carousel-item .tagline {
        font-size: 14px;
    }

    .home-banner .carousel-caption {
        right: 0;
        left: 0;
    }

    .home-banner .carousel-item .shapewrapper-inner {
        letter-spacing: 1px;
        font-size: 13px;
    }

    .home-banner:hover .carousel-control-prev,
    .home-banner:hover .carousel-control-next {
        display: none;
    }

    .home-banner.home-slider-two .square-shape {
        border: none;
        padding: 0;
    }

    .home-banner.home-slider-two .tagline {
        display: none;
    }

    .home-banner.home-slider-two .carousel-item h1 {
        font-size: 22px;
        line-height: 30px;
    }

    .home-banner.home-slider-two .carousel-item h1 strong {
        font-weight: 700;
    }

    .home-banner.home-slider-two .carousel-item .shapewrapper-inner {
        padding: 2px 7px;
        font-size: 11px;
    }

    .home-banner.home-slider-three .video-tagline {
        display: none;
    }

    .home-banner .play-video a {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

    .home-banner .play-video a i {
        font-size: 18px;
        line-height: 40px;
    }

    /*.home-banner.home-slider-first .carousel-item h1 br { display: none; }*/
    .home-banner.home-slider-three .carousel-item .shapewrapper-inner {
        font-size: 12px;
    }

    .carousel-caption .btn {
        font-size: 11px;
        padding: 10px 35px !important;
        line-height: normal !important;
    }

    /** Home 03 **/
    .appointment-sec .appointment-illustration {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .bottom-footer {
        margin-top: 20px;
    }

    /** Home 01 **/
    .iconbox-style-2 {
        margin-bottom: 30px;
    }

    .intro-section .container>.row {
        margin-top: 0;
        padding-top: 0px;
    }

    .iconbox-border {
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
    }

    .db-fid-boxstyle-style2 {
        margin-bottom: 20px;
    }

    .counter-style-1,
    .counter-style-2 {
        margin-bottom: 30px;
    }

    .testimonial-box {
        padding: 30px 15px 20px;
    }

    .counter-style-1 .counter-contents {
        font-size: 40px;
        line-height: 46px;
    }

    .appointment-inner {
        padding: 30px 15px;
    }

    .blog-style-3.d-flex,
    .iconbox-style-6 .d-flex {
        display: block !important;
    }

    .blog-style-3 .blog-content {
        padding-left: 0px;
        padding-top: 20px;
    }

    .blog-style-3 .blog-thumbnail {
        width: 100%;
    }

    .our-blog.pr-4 {
        padding-right: 0 !important;
    }

    .our-blog.mr-2 {
        margin-right: 0 !important;
    }

    /** Home 02 **/
    .iconbox-style-4 {
        margin-bottom: 30px;
    }

    .step-section>.container>.row {
        padding-bottom: 20px;
    }

    .our-pricing-sec {
        padding-top: 60px;
        padding-bottom: 170px;
    }

    .pricing-table-sec>.container>.row>.col-md-4 {
        margin-bottom: 30px;
    }

    .accordion.accordion-02 .card-header a {
        padding-left: 16px;
        padding-right: 35px;
        font-size: 14px;
    }

    /** Home 03 **/
    .best-clinic-content {
        padding: 40px 0;
    }

    .our-team {
        padding-top: 50px;
        padding-bottom: 210px;
    }

    .counter-style-2 {
        text-align: center;
    }

    .teambox-style-1 {
        margin-bottom: 30px;
    }

    /** Client **/
    .tooltip-top {
        text-align: center;
    }

    .client-style img {
        width: auto;
    }

    /** Projects Service Iconbox**/
    .iconbox-style-1,
    .service-style-3 {
        margin-bottom: 30px;
    }

    /** Teambox **/
    .entry-author-box,
    .teambox-style-3.d-flex {
        display: block !important;
    }

    .teambox-style-3 .teambox-thumbnail {
        padding: 0;
        margin-bottom: 30px;
    }

    .teambox-style-3 .col-lg-6 {
        padding: 0;
    }

    /** Blog Details **/
    .comment-meta .reply {
        position: static;
    }

    .entry-author-content {
        margin-left: 0;
        margin-top: 20px;
    }

    /** Contact **/
    .contact-appointment {
        margin-bottom: 0px;
        margin-top: 50px;
    }

    /** service-style-3 **/
    .service-style-3 .service-desc {
        padding: 0 60px;
    }

    /** #myTab.nav-classic **/
    #myTab.nav-classic .nav-link {
        padding: 14px 14px;
    }
}

@media(max-width:575px) {
    .project-sec .col {
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
    }

    /** #myTab.nav-classic **/
    #myTab.nav-classic {
        display: block;
    }

    .home-banner .carousel-item h1 {
        line-height: 28px;
        font-size: 18px;
    }

    .our-team-sec>.container>.row {
        margin-top: -190px;
    }

    /*
     * The staff photos are square. Let the mobile card use the full
     * column width instead of cropping every photo to a fixed 220px.
     * This keeps the narrow reference view square while allowing the
     * card to grow on wider phones.
     */
    .our-team-sec .teambox-thumbnail {
        height: auto;
    }

    .our-team-sec .teambox-thumbnail img {
        display: block;
        width: 100%;
        height: auto;
    }

}

@media(max-width:375px) {
    .home-banner .carousel-item h1 {
        line-height: 28px;
        font-size: 18px;
        margin-top: 0;
    }

    .home-banner .carousel-item .shapewrapper-inner {
        letter-spacing: 0.2px;
        font-size: 11px;
    }

    .home-banner.home-slider-two .carousel-item h1 {
        font-size: 18px;
        line-height: 24px;
    }
}

/*
 * custom-bootstrap-margin-padding.scss
 * -----------------------------------------------
*/

/* Margin */
.m-0 {
    margin: 0px !important;
}

.m-10 {
    margin: 10px !important;
}

.m-15 {
    margin: 15px !important;
}

.m-20 {
    margin: 20px !important;
}

.m-25 {
    margin: 25px !important;
}

.m-30 {
    margin: 30px !important;
}

.m-40 {
    margin: 40px !important;
}

.m-50 {
    margin: 50px !important;
}

.m-60 {
    margin: 60px !important;
}

.m-70 {
    margin: 70px !important;
}

.m-80 {
    margin: 80px !important;
}

.m-90 {
    margin: 90px !important;
}

.m-100 {
    margin: 100px !important;
}

.m-110 {
    margin: 110px !important;
}

.m-120 {
    margin: 120px !important;
}

.m-130 {
    margin: 130px !important;
}

.m-140 {
    margin: 140px !important;
}

.m-150 {
    margin: 150px !important;
}

.m-160 {
    margin: 160px !important;
}

.m-170 {
    margin: 170px !important;
}

.m-180 {
    margin: 180px !important;
}

.m-190 {
    margin: 190px !important;
}

.m-200 {
    margin: 200px !important;
}

.m--10 {
    margin: -10px !important;
}

.m--15 {
    margin: -15px !important;
}

.m--20 {
    margin: -20px !important;
}

.m--25 {
    margin: -25px !important;
}

.m--30 {
    margin: -30px !important;
}

.m--40 {
    margin: -40px !important;
}

.m--50 {
    margin: -50px !important;
}

.m--60 {
    margin: -60px !important;
}

.m--70 {
    margin: -70px !important;
}

.m--80 {
    margin: -80px !important;
}

.m--90 {
    margin: -90px !important;
}

.m--100 {
    margin: -100px !important;
}

.m--110 {
    margin: -110px !important;
}

.m--120 {
    margin: -120px !important;
}

.m--130 {
    margin: -130px !important;
}

.m--140 {
    margin: -140px !important;
}

.m--150 {
    margin: -150px !important;
}

.m--160 {
    margin: -160px !important;
}

.m--170 {
    margin: -170px !important;
}

.m--180 {
    margin: -180px !important;
}

.m--190 {
    margin: -190px !important;
}

.m--200 {
    margin: -200px !important;
}

.mt-0 {
    margin-top: 0px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-25 {
    margin-top: 25px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

.mt-60 {
    margin-top: 60px !important;
}

.mt-70 {
    margin-top: 70px !important;
}

.mt-80 {
    margin-top: 80px !important;
}

.mt-90 {
    margin-top: 90px !important;
}

.mt-100 {
    margin-top: 100px !important;
}

.mt-110 {
    margin-top: 110px !important;
}

.mt-120 {
    margin-top: 120px !important;
}

.mt-130 {
    margin-top: 130px !important;
}

.mt-140 {
    margin-top: 140px !important;
}

.mt-150 {
    margin-top: 150px !important;
}

.mt-160 {
    margin-top: 160px !important;
}

.mt-170 {
    margin-top: 170px !important;
}

.mt-180 {
    margin-top: 180px !important;
}

.mt-190 {
    margin-top: 190px !important;
}

.mt-200 {
    margin-top: 200px !important;
}

.mt--10 {
    margin-top: -10px !important;
}

.mt--15 {
    margin-top: -15px !important;
}

.mt--20 {
    margin-top: -20px !important;
}

.mt--25 {
    margin-top: -25px !important;
}

.mt--30 {
    margin-top: -30px !important;
}

.mt--40 {
    margin-top: -40px !important;
}

.mt--50 {
    margin-top: -50px !important;
}

.mt--60 {
    margin-top: -60px !important;
}

.mt--70 {
    margin-top: -70px !important;
}

.mt--80 {
    margin-top: -80px !important;
}

.mt--90 {
    margin-top: -90px !important;
}

.mt--100 {
    margin-top: -100px !important;
}

.mt--110 {
    margin-top: -110px !important;
}

.mt--120 {
    margin-top: -120px !important;
}

.mt--130 {
    margin-top: -130px !important;
}

.mt--140 {
    margin-top: -140px !important;
}

.mt--150 {
    margin-top: -150px !important;
}

.mt--160 {
    margin-top: -160px !important;
}

.mt--170 {
    margin-top: -170px !important;
}

.mt--180 {
    margin-top: -180px !important;
}

.mt--190 {
    margin-top: -190px !important;
}

.mt--200 {
    margin-top: -200px !important;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-25 {
    margin-bottom: 25px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.mb-70 {
    margin-bottom: 70px !important;
}

.mb-80 {
    margin-bottom: 80px !important;
}

.mb-90 {
    margin-bottom: 90px !important;
}

.mb-100 {
    margin-bottom: 100px !important;
}

.mb-110 {
    margin-bottom: 110px !important;
}

.mb-120 {
    margin-bottom: 120px !important;
}

.mb-130 {
    margin-bottom: 130px !important;
}

.mb-140 {
    margin-bottom: 140px !important;
}

.mb-150 {
    margin-bottom: 150px !important;
}

.mb-160 {
    margin-bottom: 160px !important;
}

.mb-170 {
    margin-bottom: 170px !important;
}

.mb-180 {
    margin-bottom: 180px !important;
}

.mb-190 {
    margin-bottom: 190px !important;
}

.mb-200 {
    margin-bottom: 200px !important;
}

.mb--10 {
    margin-bottom: -10px !important;
}

.mb--15 {
    margin-bottom: -15px !important;
}

.mb--20 {
    margin-bottom: -20px !important;
}

.mb--25 {
    margin-bottom: -25px !important;
}

.mb--30 {
    margin-bottom: -30px !important;
}

.mb--40 {
    margin-bottom: -40px !important;
}

.mb--50 {
    margin-bottom: -50px !important;
}

.mb--60 {
    margin-bottom: -60px !important;
}

.mb--70 {
    margin-bottom: -70px !important;
}

.mb--80 {
    margin-bottom: -80px !important;
}

.mb--90 {
    margin-bottom: -90px !important;
}

.mb--100 {
    margin-bottom: -100px !important;
}

.mb--110 {
    margin-bottom: -110px !important;
}

.mb--120 {
    margin-bottom: -120px !important;
}

.mb--130 {
    margin-bottom: -130px !important;
}

.mb--140 {
    margin-bottom: -140px !important;
}

.mb--150 {
    margin-bottom: -150px !important;
}

.mb--160 {
    margin-bottom: -160px !important;
}

.mb--170 {
    margin-bottom: -170px !important;
}

.mb--180 {
    margin-bottom: -180px !important;
}

.mb--190 {
    margin-bottom: -190px !important;
}

.mb--200 {
    margin-bottom: -200px !important;
}

.mr-0 {
    margin-right: 0px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.mr-25 {
    margin-right: 25px !important;
}

.mr-30 {
    margin-right: 30px !important;
}

.mr-40 {
    margin-right: 40px !important;
}

.mr-50 {
    margin-right: 50px !important;
}

.mr-60 {
    margin-right: 60px !important;
}

.mr-70 {
    margin-right: 70px !important;
}

.mr-80 {
    margin-right: 80px !important;
}

.mr-90 {
    margin-right: 90px !important;
}

.mr-100 {
    margin-right: 100px !important;
}

.mr-110 {
    margin-right: 110px !important;
}

.mr-120 {
    margin-right: 120px !important;
}

.mr-130 {
    margin-right: 130px !important;
}

.mr-140 {
    margin-right: 140px !important;
}

.mr-150 {
    margin-right: 150px !important;
}

.mr-160 {
    margin-right: 160px !important;
}

.mr-170 {
    margin-right: 170px !important;
}

.mr-180 {
    margin-right: 180px !important;
}

.mr-190 {
    margin-right: 190px !important;
}

.mr-200 {
    margin-right: 200px !important;
}

.mr--10 {
    margin-right: -10px !important;
}

.mr--15 {
    margin-right: -15px !important;
}

.mr--20 {
    margin-right: -20px !important;
}

.mr--25 {
    margin-right: -25px !important;
}

.mr--30 {
    margin-right: -30px !important;
}

.mr--40 {
    margin-right: -40px !important;
}

.mr--50 {
    margin-right: -50px !important;
}

.mr--60 {
    margin-right: -60px !important;
}

.mr--70 {
    margin-right: -70px !important;
}

.mr--80 {
    margin-right: -80px !important;
}

.mr--90 {
    margin-right: -90px !important;
}

.mr--100 {
    margin-right: -100px !important;
}

.mr--110 {
    margin-right: -110px !important;
}

.mr--120 {
    margin-right: -120px !important;
}

.mr--130 {
    margin-right: -130px !important;
}

.mr--140 {
    margin-right: -140px !important;
}

.mr--150 {
    margin-right: -150px !important;
}

.mr--160 {
    margin-right: -160px !important;
}

.mr--170 {
    margin-right: -170px !important;
}

.mr--180 {
    margin-right: -180px !important;
}

.mr--190 {
    margin-right: -190px !important;
}

.mr--200 {
    margin-right: -200px !important;
}

.ml-0 {
    margin-left: 0px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.ml-25 {
    margin-left: 25px !important;
}

.ml-30 {
    margin-left: 30px !important;
}

.ml-40 {
    margin-left: 40px !important;
}

.ml-50 {
    margin-left: 50px !important;
}

.ml-60 {
    margin-left: 60px !important;
}

.ml-70 {
    margin-left: 70px !important;
}

.ml-80 {
    margin-left: 80px !important;
}

.ml-90 {
    margin-left: 90px !important;
}

.ml-100 {
    margin-left: 100px !important;
}

.ml-110 {
    margin-left: 110px !important;
}

.ml-120 {
    margin-left: 120px !important;
}

.ml-130 {
    margin-left: 130px !important;
}

.ml-140 {
    margin-left: 140px !important;
}

.ml-150 {
    margin-left: 150px !important;
}

.ml-160 {
    margin-left: 160px !important;
}

.ml-170 {
    margin-left: 170px !important;
}

.ml-180 {
    margin-left: 180px !important;
}

.ml-190 {
    margin-left: 190px !important;
}

.ml-200 {
    margin-left: 200px !important;
}

.ml--10 {
    margin-left: -10px !important;
}

.ml--15 {
    margin-left: -15px !important;
}

.ml--20 {
    margin-left: -20px !important;
}

.ml--25 {
    margin-left: -25px !important;
}

.ml--30 {
    margin-left: -30px !important;
}

.ml--40 {
    margin-left: -40px !important;
}

.ml--50 {
    margin-left: -50px !important;
}

.ml--60 {
    margin-left: -60px !important;
}

.ml--70 {
    margin-left: -70px !important;
}

.ml--80 {
    margin-left: -80px !important;
}

.ml--90 {
    margin-left: -90px !important;
}

.ml--100 {
    margin-left: -100px !important;
}

.ml--110 {
    margin-left: -110px !important;
}

.ml--120 {
    margin-left: -120px !important;
}

.ml--130 {
    margin-left: -130px !important;
}

.ml--140 {
    margin-left: -140px !important;
}

.ml--150 {
    margin-left: -150px !important;
}

.ml--160 {
    margin-left: -160px !important;
}

.ml--170 {
    margin-left: -170px !important;
}

.ml--180 {
    margin-left: -180px !important;
}

.ml--190 {
    margin-left: -190px !important;
}

.ml--200 {
    margin-left: -200px !important;
}

@media (max-width:1199px) {

    /** Margin for lg class **/
    .m-lg-0 {
        margin: 0px !important;
    }

    .m-lg-10 {
        margin: 10px !important;
    }

    .m-lg-15 {
        margin: 15px !important;
    }

    .m-lg-20 {
        margin: 20px !important;
    }

    .m-lg-25 {
        margin: 25px !important;
    }

    .m-lg-30 {
        margin: 30px !important;
    }

    .m-lg-40 {
        margin: 40px !important;
    }

    .m-lg-50 {
        margin: 50px !important;
    }

    .m-lg-60 {
        margin: 60px !important;
    }

    .m-lg-70 {
        margin: 70px !important;
    }

    .m-lg-80 {
        margin: 80px !important;
    }

    .m-lg-90 {
        margin: 90px !important;
    }

    .m-lg-100 {
        margin: 100px !important;
    }

    .m-lg-110 {
        margin: 110px !important;
    }

    .m-lg-120 {
        margin: 120px !important;
    }

    .m-lg-130 {
        margin: 130px !important;
    }

    .m-lg-140 {
        margin: 140px !important;
    }

    .m-lg-150 {
        margin: 150px !important;
    }

    .m-lg-160 {
        margin: 160px !important;
    }

    .m-lg-170 {
        margin: 170px !important;
    }

    .m-lg-180 {
        margin: 180px !important;
    }

    .m-lg-190 {
        margin: 190px !important;
    }

    .m-lg-200 {
        margin: 200px !important;
    }

    .m-lg--10 {
        margin: -10px !important;
    }

    .m-lg--15 {
        margin: -15px !important;
    }

    .m-lg--20 {
        margin: -20px !important;
    }

    .m-lg--25 {
        margin: -25px !important;
    }

    .m-lg--30 {
        margin: -30px !important;
    }

    .m-lg--40 {
        margin: -40px !important;
    }

    .m-lg--50 {
        margin: -50px !important;
    }

    .m-lg--60 {
        margin: -60px !important;
    }

    .m-lg--70 {
        margin: -70px !important;
    }

    .m-lg--80 {
        margin: -80px !important;
    }

    .m-lg--90 {
        margin: -90px !important;
    }

    .m-lg--100 {
        margin: -100px !important;
    }

    .m-lg--110 {
        margin: -110px !important;
    }

    .m-lg--120 {
        margin: -120px !important;
    }

    .m-lg--130 {
        margin: -130px !important;
    }

    .m-lg--140 {
        margin: -140px !important;
    }

    .m-lg--150 {
        margin: -150px !important;
    }

    .m-lg--160 {
        margin: -160px !important;
    }

    .m-lg--170 {
        margin: -170px !important;
    }

    .m-lg--180 {
        margin: -180px !important;
    }

    .m-lg--190 {
        margin: -190px !important;
    }

    .m-lg--200 {
        margin: -200px !important;
    }

    .mt-lg-0 {
        margin-top: 0px !important;
    }

    .mt-lg-10 {
        margin-top: 10px !important;
    }

    .mt-lg-15 {
        margin-top: 15px !important;
    }

    .mt-lg-20 {
        margin-top: 20px !important;
    }

    .mt-lg-25 {
        margin-top: 25px !important;
    }

    .mt-lg-30 {
        margin-top: 30px !important;
    }

    .mt-lg-40 {
        margin-top: 40px !important;
    }

    .mt-lg-50 {
        margin-top: 50px !important;
    }

    .mt-lg-60 {
        margin-top: 60px !important;
    }

    .mt-lg-70 {
        margin-top: 70px !important;
    }

    .mt-lg-80 {
        margin-top: 80px !important;
    }

    .mt-lg-90 {
        margin-top: 90px !important;
    }

    .mt-lg-100 {
        margin-top: 100px !important;
    }

    .mt-lg-110 {
        margin-top: 110px !important;
    }

    .mt-lg-120 {
        margin-top: 120px !important;
    }

    .mt-lg-130 {
        margin-top: 130px !important;
    }

    .mt-lg-140 {
        margin-top: 140px !important;
    }

    .mt-lg-150 {
        margin-top: 150px !important;
    }

    .mt-lg-160 {
        margin-top: 160px !important;
    }

    .mt-lg-170 {
        margin-top: 170px !important;
    }

    .mt-lg-180 {
        margin-top: 180px !important;
    }

    .mt-lg-190 {
        margin-top: 190px !important;
    }

    .mt-lg-200 {
        margin-top: 200px !important;
    }

    .mt-lg--10 {
        margin-top: -10px !important;
    }

    .mt-lg--15 {
        margin-top: -15px !important;
    }

    .mt-lg--20 {
        margin-top: -20px !important;
    }

    .mt-lg--25 {
        margin-top: -25px !important;
    }

    .mt-lg--30 {
        margin-top: -30px !important;
    }

    .mt-lg--40 {
        margin-top: -40px !important;
    }

    .mt-lg--50 {
        margin-top: -50px !important;
    }

    .mt-lg--60 {
        margin-top: -60px !important;
    }

    .mt-lg--70 {
        margin-top: -70px !important;
    }

    .mt-lg--80 {
        margin-top: -80px !important;
    }

    .mt-lg--90 {
        margin-top: -90px !important;
    }

    .mt-lg--100 {
        margin-top: -100px !important;
    }

    .mt-lg--110 {
        margin-top: -110px !important;
    }

    .mt-lg--120 {
        margin-top: -120px !important;
    }

    .mt-lg--130 {
        margin-top: -130px !important;
    }

    .mt-lg--140 {
        margin-top: -140px !important;
    }

    .mt-lg--150 {
        margin-top: -150px !important;
    }

    .mt-lg--160 {
        margin-top: -160px !important;
    }

    .mt-lg--170 {
        margin-top: -170px !important;
    }

    .mt-lg--180 {
        margin-top: -180px !important;
    }

    .mt-lg--190 {
        margin-top: -190px !important;
    }

    .mt-lg--200 {
        margin-top: -200px !important;
    }

    .mb-lg-0 {
        margin-bottom: 0px !important;
    }

    .mb-lg-10 {
        margin-bottom: 10px !important;
    }

    .mb-lg-15 {
        margin-bottom: 15px !important;
    }

    .mb-lg-20 {
        margin-bottom: 20px !important;
    }

    .mb-lg-25 {
        margin-bottom: 25px !important;
    }

    .mb-lg-30 {
        margin-bottom: 30px !important;
    }

    .mb-lg-40 {
        margin-bottom: 40px !important;
    }

    .mb-lg-50 {
        margin-bottom: 50px !important;
    }

    .mb-lg-60 {
        margin-bottom: 60px !important;
    }

    .mb-lg-70 {
        margin-bottom: 70px !important;
    }

    .mb-lg-80 {
        margin-bottom: 80px !important;
    }

    .mb-lg-90 {
        margin-bottom: 90px !important;
    }

    .mb-lg-100 {
        margin-bottom: 100px !important;
    }

    .mb-lg-110 {
        margin-bottom: 110px !important;
    }

    .mb-lg-120 {
        margin-bottom: 120px !important;
    }

    .mb-lg-130 {
        margin-bottom: 130px !important;
    }

    .mb-lg-140 {
        margin-bottom: 140px !important;
    }

    .mb-lg-150 {
        margin-bottom: 150px !important;
    }

    .mb-lg-160 {
        margin-bottom: 160px !important;
    }

    .mb-lg-170 {
        margin-bottom: 170px !important;
    }

    .mb-lg-180 {
        margin-bottom: 180px !important;
    }

    .mb-lg-190 {
        margin-bottom: 190px !important;
    }

    .mb-lg-200 {
        margin-bottom: 200px !important;
    }

    .mb-lg--10 {
        margin-bottom: -10px !important;
    }

    .mb-lg--15 {
        margin-bottom: -15px !important;
    }

    .mb-lg--20 {
        margin-bottom: -20px !important;
    }

    .mb-lg--25 {
        margin-bottom: -25px !important;
    }

    .mb-lg--30 {
        margin-bottom: -30px !important;
    }

    .mb-lg--40 {
        margin-bottom: -40px !important;
    }

    .mb-lg--50 {
        margin-bottom: -50px !important;
    }

    .mb-lg--60 {
        margin-bottom: -60px !important;
    }

    .mb-lg--70 {
        margin-bottom: -70px !important;
    }

    .mb-lg--80 {
        margin-bottom: -80px !important;
    }

    .mb-lg--90 {
        margin-bottom: -90px !important;
    }

    .mb-lg--100 {
        margin-bottom: -100px !important;
    }

    .mb-lg--110 {
        margin-bottom: -110px !important;
    }

    .mb-lg--120 {
        margin-bottom: -120px !important;
    }

    .mb-lg--130 {
        margin-bottom: -130px !important;
    }

    .mb-lg--140 {
        margin-bottom: -140px !important;
    }

    .mb-lg--150 {
        margin-bottom: -150px !important;
    }

    .mb-lg--160 {
        margin-bottom: -160px !important;
    }

    .mb-lg--170 {
        margin-bottom: -170px !important;
    }

    .mb-lg--180 {
        margin-bottom: -180px !important;
    }

    .mb-lg--190 {
        margin-bottom: -190px !important;
    }

    .mb-lg--200 {
        margin-bottom: -200px !important;
    }

    .mr-lg-0 {
        margin-right: 0px !important;
    }

    .mr-lg-10 {
        margin-right: 10px !important;
    }

    .mr-lg-15 {
        margin-right: 15px !important;
    }

    .mr-lg-20 {
        margin-right: 20px !important;
    }

    .mr-lg-25 {
        margin-right: 25px !important;
    }

    .mr-lg-30 {
        margin-right: 30px !important;
    }

    .mr-lg-40 {
        margin-right: 40px !important;
    }

    .mr-lg-50 {
        margin-right: 50px !important;
    }

    .mr-lg-60 {
        margin-right: 60px !important;
    }

    .mr-lg-70 {
        margin-right: 70px !important;
    }

    .mr-lg-80 {
        margin-right: 80px !important;
    }

    .mr-lg-90 {
        margin-right: 90px !important;
    }

    .mr-lg-100 {
        margin-right: 100px !important;
    }

    .mr-lg-110 {
        margin-right: 110px !important;
    }

    .mr-lg-120 {
        margin-right: 120px !important;
    }

    .mr-lg-130 {
        margin-right: 130px !important;
    }

    .mr-lg-140 {
        margin-right: 140px !important;
    }

    .mr-lg-150 {
        margin-right: 150px !important;
    }

    .mr-lg-160 {
        margin-right: 160px !important;
    }

    .mr-lg-170 {
        margin-right: 170px !important;
    }

    .mr-lg-180 {
        margin-right: 180px !important;
    }

    .mr-lg-190 {
        margin-right: 190px !important;
    }

    .mr-lg-200 {
        margin-right: 200px !important;
    }

    .mr-lg--10 {
        margin-right: -10px !important;
    }

    .mr-lg--15 {
        margin-right: -15px !important;
    }

    .mr-lg--20 {
        margin-right: -20px !important;
    }

    .mr-lg--25 {
        margin-right: -25px !important;
    }

    .mr-lg--30 {
        margin-right: -30px !important;
    }

    .mr-lg--40 {
        margin-right: -40px !important;
    }

    .mr-lg--50 {
        margin-right: -50px !important;
    }

    .mr-lg--60 {
        margin-right: -60px !important;
    }

    .mr-lg--70 {
        margin-right: -70px !important;
    }

    .mr-lg--80 {
        margin-right: -80px !important;
    }

    .mr-lg--90 {
        margin-right: -90px !important;
    }

    .mr-lg--100 {
        margin-right: -100px !important;
    }

    .mr-lg--110 {
        margin-right: -110px !important;
    }

    .mr-lg--120 {
        margin-right: -120px !important;
    }

    .mr-lg--130 {
        margin-right: -130px !important;
    }

    .mr-lg--140 {
        margin-right: -140px !important;
    }

    .mr-lg--150 {
        margin-right: -150px !important;
    }

    .mr-lg--160 {
        margin-right: -160px !important;
    }

    .mr-lg--170 {
        margin-right: -170px !important;
    }

    .mr-lg--180 {
        margin-right: -180px !important;
    }

    .mr-lg--190 {
        margin-right: -190px !important;
    }

    .mr-lg--200 {
        margin-right: -200px !important;
    }

    .ml-lg-0 {
        margin-left: 0px !important;
    }

    .ml-lg-10 {
        margin-left: 10px !important;
    }

    .ml-lg-15 {
        margin-left: 15px !important;
    }

    .ml-lg-20 {
        margin-left: 20px !important;
    }

    .ml-lg-25 {
        margin-left: 25px !important;
    }

    .ml-lg-30 {
        margin-left: 30px !important;
    }

    .ml-lg-40 {
        margin-left: 40px !important;
    }

    .ml-lg-50 {
        margin-left: 50px !important;
    }

    .ml-lg-60 {
        margin-left: 60px !important;
    }

    .ml-lg-70 {
        margin-left: 70px !important;
    }

    .ml-lg-80 {
        margin-left: 80px !important;
    }

    .ml-lg-90 {
        margin-left: 90px !important;
    }

    .ml-lg-100 {
        margin-left: 100px !important;
    }

    .ml-lg-110 {
        margin-left: 110px !important;
    }

    .ml-lg-120 {
        margin-left: 120px !important;
    }

    .ml-lg-130 {
        margin-left: 130px !important;
    }

    .ml-lg-140 {
        margin-left: 140px !important;
    }

    .ml-lg-150 {
        margin-left: 150px !important;
    }

    .ml-lg-160 {
        margin-left: 160px !important;
    }

    .ml-lg-170 {
        margin-left: 170px !important;
    }

    .ml-lg-180 {
        margin-left: 180px !important;
    }

    .ml-lg-190 {
        margin-left: 190px !important;
    }

    .ml-lg-200 {
        margin-left: 200px !important;
    }

    .ml-lg--10 {
        margin-left: -10px !important;
    }

    .ml-lg--15 {
        margin-left: -15px !important;
    }

    .ml-lg--20 {
        margin-left: -20px !important;
    }

    .ml-lg--25 {
        margin-left: -25px !important;
    }

    .ml-lg--30 {
        margin-left: -30px !important;
    }

    .ml-lg--40 {
        margin-left: -40px !important;
    }

    .ml-lg--50 {
        margin-left: -50px !important;
    }

    .ml-lg--60 {
        margin-left: -60px !important;
    }

    .ml-lg--70 {
        margin-left: -70px !important;
    }

    .ml-lg--80 {
        margin-left: -80px !important;
    }

    .ml-lg--90 {
        margin-left: -90px !important;
    }

    .ml-lg--100 {
        margin-left: -100px !important;
    }

    .ml-lg--110 {
        margin-left: -110px !important;
    }

    .ml-lg--120 {
        margin-left: -120px !important;
    }

    .ml-lg--130 {
        margin-left: -130px !important;
    }

    .ml-lg--140 {
        margin-left: -140px !important;
    }

    .ml-lg--150 {
        margin-left: -150px !important;
    }

    .ml-lg--160 {
        margin-left: -160px !important;
    }

    .ml-lg--170 {
        margin-left: -170px !important;
    }

    .ml-lg--180 {
        margin-left: -180px !important;
    }

    .ml-lg--190 {
        margin-left: -190px !important;
    }

    .ml-lg--200 {
        margin-left: -200px !important;
    }
}

@media (max-width:991px) {
    .m-md-0 {
        margin: 0px !important;
    }

    .m-md-10 {
        margin: 10px !important;
    }

    .m-md-15 {
        margin: 15px !important;
    }

    .m-md-20 {
        margin: 20px !important;
    }

    .m-md-25 {
        margin: 25px !important;
    }

    .m-md-30 {
        margin: 30px !important;
    }

    .m-md-40 {
        margin: 40px !important;
    }

    .m-md-50 {
        margin: 50px !important;
    }

    .m-md-60 {
        margin: 60px !important;
    }

    .m-md-70 {
        margin: 70px !important;
    }

    .m-md-80 {
        margin: 80px !important;
    }

    .m-md-90 {
        margin: 90px !important;
    }

    .m-md-100 {
        margin: 100px !important;
    }

    .m-md-110 {
        margin: 110px !important;
    }

    .m-md-120 {
        margin: 120px !important;
    }

    .m-md-130 {
        margin: 130px !important;
    }

    .m-md-140 {
        margin: 140px !important;
    }

    .m-md-150 {
        margin: 150px !important;
    }

    .m-md-160 {
        margin: 160px !important;
    }

    .m-md-170 {
        margin: 170px !important;
    }

    .m-md-180 {
        margin: 180px !important;
    }

    .m-md-190 {
        margin: 190px !important;
    }

    .m-md-200 {
        margin: 200px !important;
    }

    .m-md--10 {
        margin: -10px !important;
    }

    .m-md--15 {
        margin: -15px !important;
    }

    .m-md--20 {
        margin: -20px !important;
    }

    .m-md--25 {
        margin: -25px !important;
    }

    .m-md--30 {
        margin: -30px !important;
    }

    .m-md--40 {
        margin: -40px !important;
    }

    .m-md--50 {
        margin: -50px !important;
    }

    .m-md--60 {
        margin: -60px !important;
    }

    .m-md--70 {
        margin: -70px !important;
    }

    .m-md--80 {
        margin: -80px !important;
    }

    .m-md--90 {
        margin: -90px !important;
    }

    .m-md--100 {
        margin: -100px !important;
    }

    .m-md--110 {
        margin: -110px !important;
    }

    .m-md--120 {
        margin: -120px !important;
    }

    .m-md--130 {
        margin: -130px !important;
    }

    .m-md--140 {
        margin: -140px !important;
    }

    .m-md--150 {
        margin: -150px !important;
    }

    .m-md--160 {
        margin: -160px !important;
    }

    .m-md--170 {
        margin: -170px !important;
    }

    .m-md--180 {
        margin: -180px !important;
    }

    .m-md--190 {
        margin: -190px !important;
    }

    .m-md--200 {
        margin: -200px !important;
    }

    .mt-md-0 {
        margin-top: 0px !important;
    }

    .mt-md-10 {
        margin-top: 10px !important;
    }

    .mt-md-15 {
        margin-top: 15px !important;
    }

    .mt-md-20 {
        margin-top: 20px !important;
    }

    .mt-md-25 {
        margin-top: 25px !important;
    }

    .mt-md-30 {
        margin-top: 30px !important;
    }

    .mt-md-40 {
        margin-top: 40px !important;
    }

    .mt-md-50 {
        margin-top: 50px !important;
    }

    .mt-md-60 {
        margin-top: 60px !important;
    }

    .mt-md-70 {
        margin-top: 70px !important;
    }

    .mt-md-80 {
        margin-top: 80px !important;
    }

    .mt-md-90 {
        margin-top: 90px !important;
    }

    .mt-md-100 {
        margin-top: 100px !important;
    }

    .mt-md-110 {
        margin-top: 110px !important;
    }

    .mt-md-120 {
        margin-top: 120px !important;
    }

    .mt-md-130 {
        margin-top: 130px !important;
    }

    .mt-md-140 {
        margin-top: 140px !important;
    }

    .mt-md-150 {
        margin-top: 150px !important;
    }

    .mt-md-160 {
        margin-top: 160px !important;
    }

    .mt-md-170 {
        margin-top: 170px !important;
    }

    .mt-md-180 {
        margin-top: 180px !important;
    }

    .mt-md-190 {
        margin-top: 190px !important;
    }

    .mt-md-200 {
        margin-top: 200px !important;
    }

    .mt-md--10 {
        margin-top: -10px !important;
    }

    .mt-md--15 {
        margin-top: -15px !important;
    }

    .mt-md--20 {
        margin-top: -20px !important;
    }

    .mt-md--25 {
        margin-top: -25px !important;
    }

    .mt-md--30 {
        margin-top: -30px !important;
    }

    .mt-md--40 {
        margin-top: -40px !important;
    }

    .mt-md--50 {
        margin-top: -50px !important;
    }

    .mt-md--60 {
        margin-top: -60px !important;
    }

    .mt-md--70 {
        margin-top: -70px !important;
    }

    .mt-md--80 {
        margin-top: -80px !important;
    }

    .mt-md--90 {
        margin-top: -90px !important;
    }

    .mt-md--100 {
        margin-top: -100px !important;
    }

    .mt-md--110 {
        margin-top: -110px !important;
    }

    .mt-md--120 {
        margin-top: -120px !important;
    }

    .mt-md--130 {
        margin-top: -130px !important;
    }

    .mt-md--140 {
        margin-top: -140px !important;
    }

    .mt-md--150 {
        margin-top: -150px !important;
    }

    .mt-md--160 {
        margin-top: -160px !important;
    }

    .mt-md--170 {
        margin-top: -170px !important;
    }

    .mt-md--180 {
        margin-top: -180px !important;
    }

    .mt-md--190 {
        margin-top: -190px !important;
    }

    .mt-md--200 {
        margin-top: -200px !important;
    }

    .mb-md-0 {
        margin-bottom: 0px !important;
    }

    .mb-md-10 {
        margin-bottom: 10px !important;
    }

    .mb-md-15 {
        margin-bottom: 15px !important;
    }

    .mb-md-20 {
        margin-bottom: 20px !important;
    }

    .mb-md-25 {
        margin-bottom: 25px !important;
    }

    .mb-md-30 {
        margin-bottom: 30px !important;
    }

    .mb-md-40 {
        margin-bottom: 40px !important;
    }

    .mb-md-50 {
        margin-bottom: 50px !important;
    }

    .mb-md-60 {
        margin-bottom: 60px !important;
    }

    .mb-md-70 {
        margin-bottom: 70px !important;
    }

    .mb-md-80 {
        margin-bottom: 80px !important;
    }

    .mb-md-90 {
        margin-bottom: 90px !important;
    }

    .mb-md-100 {
        margin-bottom: 100px !important;
    }

    .mb-md-110 {
        margin-bottom: 110px !important;
    }

    .mb-md-120 {
        margin-bottom: 120px !important;
    }

    .mb-md-130 {
        margin-bottom: 130px !important;
    }

    .mb-md-140 {
        margin-bottom: 140px !important;
    }

    .mb-md-150 {
        margin-bottom: 150px !important;
    }

    .mb-md-160 {
        margin-bottom: 160px !important;
    }

    .mb-md-170 {
        margin-bottom: 170px !important;
    }

    .mb-md-180 {
        margin-bottom: 180px !important;
    }

    .mb-md-190 {
        margin-bottom: 190px !important;
    }

    .mb-md-200 {
        margin-bottom: 200px !important;
    }

    .mb-md--10 {
        margin-bottom: -10px !important;
    }

    .mb-md--15 {
        margin-bottom: -15px !important;
    }

    .mb-md--20 {
        margin-bottom: -20px !important;
    }

    .mb-md--25 {
        margin-bottom: -25px !important;
    }

    .mb-md--30 {
        margin-bottom: -30px !important;
    }

    .mb-md--40 {
        margin-bottom: -40px !important;
    }

    .mb-md--50 {
        margin-bottom: -50px !important;
    }

    .mb-md--60 {
        margin-bottom: -60px !important;
    }

    .mb-md--70 {
        margin-bottom: -70px !important;
    }

    .mb-md--80 {
        margin-bottom: -80px !important;
    }

    .mb-md--90 {
        margin-bottom: -90px !important;
    }

    .mb-md--100 {
        margin-bottom: -100px !important;
    }

    .mb-md--110 {
        margin-bottom: -110px !important;
    }

    .mb-md--120 {
        margin-bottom: -120px !important;
    }

    .mb-md--130 {
        margin-bottom: -130px !important;
    }

    .mb-md--140 {
        margin-bottom: -140px !important;
    }

    .mb-md--150 {
        margin-bottom: -150px !important;
    }

    .mb-md--160 {
        margin-bottom: -160px !important;
    }

    .mb-md--170 {
        margin-bottom: -170px !important;
    }

    .mb-md--180 {
        margin-bottom: -180px !important;
    }

    .mb-md--190 {
        margin-bottom: -190px !important;
    }

    .mb-md--200 {
        margin-bottom: -200px !important;
    }

    .mr-md-0 {
        margin-right: 0px !important;
    }

    .mr-md-10 {
        margin-right: 10px !important;
    }

    .mr-md-15 {
        margin-right: 15px !important;
    }

    .mr-md-20 {
        margin-right: 20px !important;
    }

    .mr-md-25 {
        margin-right: 25px !important;
    }

    .mr-md-30 {
        margin-right: 30px !important;
    }

    .mr-md-40 {
        margin-right: 40px !important;
    }

    .mr-md-50 {
        margin-right: 50px !important;
    }

    .mr-md-60 {
        margin-right: 60px !important;
    }

    .mr-md-70 {
        margin-right: 70px !important;
    }

    .mr-md-80 {
        margin-right: 80px !important;
    }

    .mr-md-90 {
        margin-right: 90px !important;
    }

    .mr-md-100 {
        margin-right: 100px !important;
    }

    .mr-md-110 {
        margin-right: 110px !important;
    }

    .mr-md-120 {
        margin-right: 120px !important;
    }

    .mr-md-130 {
        margin-right: 130px !important;
    }

    .mr-md-140 {
        margin-right: 140px !important;
    }

    .mr-md-150 {
        margin-right: 150px !important;
    }

    .mr-md-160 {
        margin-right: 160px !important;
    }

    .mr-md-170 {
        margin-right: 170px !important;
    }

    .mr-md-180 {
        margin-right: 180px !important;
    }

    .mr-md-190 {
        margin-right: 190px !important;
    }

    .mr-md-200 {
        margin-right: 200px !important;
    }

    .mr-md--10 {
        margin-right: -10px !important;
    }

    .mr-md--15 {
        margin-right: -15px !important;
    }

    .mr-md--20 {
        margin-right: -20px !important;
    }

    .mr-md--25 {
        margin-right: -25px !important;
    }

    .mr-md--30 {
        margin-right: -30px !important;
    }

    .mr-md--40 {
        margin-right: -40px !important;
    }

    .mr-md--50 {
        margin-right: -50px !important;
    }

    .mr-md--60 {
        margin-right: -60px !important;
    }

    .mr-md--70 {
        margin-right: -70px !important;
    }

    .mr-md--80 {
        margin-right: -80px !important;
    }

    .mr-md--90 {
        margin-right: -90px !important;
    }

    .mr-md--100 {
        margin-right: -100px !important;
    }

    .mr-md--110 {
        margin-right: -110px !important;
    }

    .mr-md--120 {
        margin-right: -120px !important;
    }

    .mr-md--130 {
        margin-right: -130px !important;
    }

    .mr-md--140 {
        margin-right: -140px !important;
    }

    .mr-md--150 {
        margin-right: -150px !important;
    }

    .mr-md--160 {
        margin-right: -160px !important;
    }

    .mr-md--170 {
        margin-right: -170px !important;
    }

    .mr-md--180 {
        margin-right: -180px !important;
    }

    .mr-md--190 {
        margin-right: -190px !important;
    }

    .mr-md--200 {
        margin-right: -200px !important;
    }

    .ml-md-0 {
        margin-left: 0px !important;
    }

    .ml-md-10 {
        margin-left: 10px !important;
    }

    .ml-md-15 {
        margin-left: 15px !important;
    }

    .ml-md-20 {
        margin-left: 20px !important;
    }

    .ml-md-25 {
        margin-left: 25px !important;
    }

    .ml-md-30 {
        margin-left: 30px !important;
    }

    .ml-md-40 {
        margin-left: 40px !important;
    }

    .ml-md-50 {
        margin-left: 50px !important;
    }

    .ml-md-60 {
        margin-left: 60px !important;
    }

    .ml-md-70 {
        margin-left: 70px !important;
    }

    .ml-md-80 {
        margin-left: 80px !important;
    }

    .ml-md-90 {
        margin-left: 90px !important;
    }

    .ml-md-100 {
        margin-left: 100px !important;
    }

    .ml-md-110 {
        margin-left: 110px !important;
    }

    .ml-md-120 {
        margin-left: 120px !important;
    }

    .ml-md-130 {
        margin-left: 130px !important;
    }

    .ml-md-140 {
        margin-left: 140px !important;
    }

    .ml-md-150 {
        margin-left: 150px !important;
    }

    .ml-md-160 {
        margin-left: 160px !important;
    }

    .ml-md-170 {
        margin-left: 170px !important;
    }

    .ml-md-180 {
        margin-left: 180px !important;
    }

    .ml-md-190 {
        margin-left: 190px !important;
    }

    .ml-md-200 {
        margin-left: 200px !important;
    }

    .ml-md--10 {
        margin-left: -10px !important;
    }

    .ml-md--15 {
        margin-left: -15px !important;
    }

    .ml-md--20 {
        margin-left: -20px !important;
    }

    .ml-md--25 {
        margin-left: -25px !important;
    }

    .ml-md--30 {
        margin-left: -30px !important;
    }

    .ml-md--40 {
        margin-left: -40px !important;
    }

    .ml-md--50 {
        margin-left: -50px !important;
    }

    .ml-md--60 {
        margin-left: -60px !important;
    }

    .ml-md--70 {
        margin-left: -70px !important;
    }

    .ml-md--80 {
        margin-left: -80px !important;
    }

    .ml-md--90 {
        margin-left: -90px !important;
    }

    .ml-md--100 {
        margin-left: -100px !important;
    }

    .ml-md--110 {
        margin-left: -110px !important;
    }

    .ml-md--120 {
        margin-left: -120px !important;
    }

    .ml-md--130 {
        margin-left: -130px !important;
    }

    .ml-md--140 {
        margin-left: -140px !important;
    }

    .ml-md--150 {
        margin-left: -150px !important;
    }

    .ml-md--160 {
        margin-left: -160px !important;
    }

    .ml-md--170 {
        margin-left: -170px !important;
    }

    .ml-md--180 {
        margin-left: -180px !important;
    }

    .ml-md--190 {
        margin-left: -190px !important;
    }

    .ml-md--200 {
        margin-left: -200px !important;
    }

    .pt-md-00 {
        padding-top: 0px !important;
    }

    .pt-md-10 {
        padding-top: 10px !important;
    }

    .pt-md-15 {
        padding-top: 15px !important;
    }

    .pt-md-20 {
        padding-top: 20px !important;
    }

    .pt-md-25 {
        padding-top: 25px !important;
    }

    .pt-md-30 {
        padding-top: 30px !important;
    }

    .pt-md-35 {
        padding-top: 35px !important;
    }

    .pt-md-40 {
        padding-top: 40px !important;
    }

    .pt-md-45 {
        padding-top: 45px !important;
    }

    .pt-md-50 {
        padding-top: 50px !important;
    }

    .pt-md-60 {
        padding-top: 60px !important;
    }

    .pt-md-70 {
        padding-top: 70px !important;
    }

    .pt-md-90 {
        padding-top: 90px !important;
    }

    .pb-md-0 {
        padding-bottom: 0px !important;
    }

    .pb-md-10 {
        padding-bottom: 10px !important;
    }

    .pb-md-15 {
        padding-bottom: 15px !important;
    }

    .pb-md-20 {
        padding-bottom: 20px !important;
    }

    .pb-md-25 {
        padding-bottom: 25px !important;
    }

    .pb-md-30 {
        padding-bottom: 30px !important;
    }

    .pb-md-35 {
        padding-bottom: 35px !important;
    }

    .pb-md-40 {
        padding-bottom: 40px !important;
    }

    .pb-md-45 {
        padding-bottom: 45px !important;
    }

    .pb-md-50 {
        padding-bottom: 50px !important;
    }

    .pb-md-60 {
        padding-bottom: 60px !important;
    }

    .pb-md-70 {
        padding-bottom: 70px !important;
    }

    .pl-md-10 {
        padding-left: 10px !important;
    }

    .pl-md-15 {
        padding-left: 15px !important;
    }

    .pl-md-20 {
        padding-left: 20px !important;
    }

    .pl-md-25 {
        padding-left: 25px !important;
    }

    .pl-md-30 {
        padding-left: 30px !important;
    }

    .pl-md-35 {
        padding-left: 35px !important;
    }

    .pl-md-40 {
        padding-left: 40px !important;
    }

    .pl-md-45 {
        padding-left: 45px !important;
    }

    .pl-md-50 {
        padding-left: 50px !important;
    }

    .pr-md-10 {
        padding-right: 10px !important;
    }

    .pr-md-15 {
        padding-right: 15px !important;
    }

    .pr-md-20 {
        padding-right: 20px !important;
    }

    .pr-md-25 {
        padding-right: 25px !important;
    }

    .pr-md-30 {
        padding-right: 30px !important;
    }

    .pr-md-35 {
        padding-right: 35px !important;
    }

    .pr-md-40 {
        padding-right: 40px !important;
    }

    .pr-md-45 {
        padding-right: 45px !important;
    }

    .pr-md-50 {
        padding-right: 50px !important;
    }
}

@media (max-width:767px) {
    .m-sm-0 {
        margin: 0px !important;
    }

    .m-sm-10 {
        margin: 10px !important;
    }

    .m-sm-15 {
        margin: 15px !important;
    }

    .m-sm-20 {
        margin: 20px !important;
    }

    .m-sm-25 {
        margin: 25px !important;
    }

    .m-sm-30 {
        margin: 30px !important;
    }

    .m-sm-40 {
        margin: 40px !important;
    }

    .m-sm-50 {
        margin: 50px !important;
    }

    .m-sm-60 {
        margin: 60px !important;
    }

    .m-sm-70 {
        margin: 70px !important;
    }

    .m-sm-80 {
        margin: 80px !important;
    }

    .m-sm-90 {
        margin: 90px !important;
    }

    .m-sm-100 {
        margin: 100px !important;
    }

    .m-sm-110 {
        margin: 110px !important;
    }

    .m-sm-120 {
        margin: 120px !important;
    }

    .m-sm-130 {
        margin: 130px !important;
    }

    .m-sm-140 {
        margin: 140px !important;
    }

    .m-sm-150 {
        margin: 150px !important;
    }

    .m-sm-160 {
        margin: 160px !important;
    }

    .m-sm-170 {
        margin: 170px !important;
    }

    .m-sm-180 {
        margin: 180px !important;
    }

    .m-sm-190 {
        margin: 190px !important;
    }

    .m-sm-200 {
        margin: 200px !important;
    }

    .m-sm--10 {
        margin: -10px !important;
    }

    .m-sm--15 {
        margin: -15px !important;
    }

    .m-sm--20 {
        margin: -20px !important;
    }

    .m-sm--25 {
        margin: -25px !important;
    }

    .m-sm--30 {
        margin: -30px !important;
    }

    .m-sm--40 {
        margin: -40px !important;
    }

    .m-sm--50 {
        margin: -50px !important;
    }

    .m-sm--60 {
        margin: -60px !important;
    }

    .m-sm--70 {
        margin: -70px !important;
    }

    .m-sm--80 {
        margin: -80px !important;
    }

    .m-sm--90 {
        margin: -90px !important;
    }

    .m-sm--100 {
        margin: -100px !important;
    }

    .m-sm--110 {
        margin: -110px !important;
    }

    .m-sm--120 {
        margin: -120px !important;
    }

    .m-sm--130 {
        margin: -130px !important;
    }

    .m-sm--140 {
        margin: -140px !important;
    }

    .m-sm--150 {
        margin: -150px !important;
    }

    .m-sm--160 {
        margin: -160px !important;
    }

    .m-sm--170 {
        margin: -170px !important;
    }

    .m-sm--180 {
        margin: -180px !important;
    }

    .m-sm--190 {
        margin: -190px !important;
    }

    .m-sm--200 {
        margin: -200px !important;
    }

    .mt-sm-0 {
        margin-top: 0px !important;
    }

    .mt-sm-10 {
        margin-top: 10px !important;
    }

    .mt-sm-15 {
        margin-top: 15px !important;
    }

    .mt-sm-20 {
        margin-top: 20px !important;
    }

    .mt-sm-25 {
        margin-top: 25px !important;
    }

    .mt-sm-30 {
        margin-top: 30px !important;
    }

    .mt-sm-40 {
        margin-top: 40px !important;
    }

    .mt-sm-50 {
        margin-top: 50px !important;
    }

    .mt-sm-60 {
        margin-top: 60px !important;
    }

    .mt-sm-70 {
        margin-top: 70px !important;
    }

    .mt-sm-80 {
        margin-top: 80px !important;
    }

    .mt-sm-90 {
        margin-top: 90px !important;
    }

    .mt-sm-100 {
        margin-top: 100px !important;
    }

    .mt-sm-110 {
        margin-top: 110px !important;
    }

    .mt-sm-120 {
        margin-top: 120px !important;
    }

    .mt-sm-130 {
        margin-top: 130px !important;
    }

    .mt-sm-140 {
        margin-top: 140px !important;
    }

    .mt-sm-150 {
        margin-top: 150px !important;
    }

    .mt-sm-160 {
        margin-top: 160px !important;
    }

    .mt-sm-170 {
        margin-top: 170px !important;
    }

    .mt-sm-180 {
        margin-top: 180px !important;
    }

    .mt-sm-190 {
        margin-top: 190px !important;
    }

    .mt-sm-200 {
        margin-top: 200px !important;
    }

    .mt-sm--10 {
        margin-top: -10px !important;
    }

    .mt-sm--15 {
        margin-top: -15px !important;
    }

    .mt-sm--20 {
        margin-top: -20px !important;
    }

    .mt-sm--25 {
        margin-top: -25px !important;
    }

    .mt-sm--30 {
        margin-top: -30px !important;
    }

    .mt-sm--40 {
        margin-top: -40px !important;
    }

    .mt-sm--50 {
        margin-top: -50px !important;
    }

    .mt-sm--60 {
        margin-top: -60px !important;
    }

    .mt-sm--70 {
        margin-top: -70px !important;
    }

    .mt-sm--80 {
        margin-top: -80px !important;
    }

    .mt-sm--90 {
        margin-top: -90px !important;
    }

    .mt-sm--100 {
        margin-top: -100px !important;
    }

    .mt-sm--110 {
        margin-top: -110px !important;
    }

    .mt-sm--120 {
        margin-top: -120px !important;
    }

    .mt-sm--130 {
        margin-top: -130px !important;
    }

    .mt-sm--140 {
        margin-top: -140px !important;
    }

    .mt-sm--150 {
        margin-top: -150px !important;
    }

    .mt-sm--160 {
        margin-top: -160px !important;
    }

    .mt-sm--170 {
        margin-top: -170px !important;
    }

    .mt-sm--180 {
        margin-top: -180px !important;
    }

    .mt-sm--190 {
        margin-top: -190px !important;
    }

    .mt-sm--200 {
        margin-top: -200px !important;
    }

    .mb-sm-0 {
        margin-bottom: 0px !important;
    }

    .mb-sm-10 {
        margin-bottom: 10px !important;
    }

    .mb-sm-15 {
        margin-bottom: 15px !important;
    }

    .mb-sm-20 {
        margin-bottom: 20px !important;
    }

    .mb-sm-25 {
        margin-bottom: 25px !important;
    }

    .mb-sm-30 {
        margin-bottom: 30px !important;
    }

    .mb-sm-40 {
        margin-bottom: 40px !important;
    }

    .mb-sm-50 {
        margin-bottom: 50px !important;
    }

    .mb-sm-60 {
        margin-bottom: 60px !important;
    }

    .mb-sm-70 {
        margin-bottom: 70px !important;
    }

    .mb-sm-80 {
        margin-bottom: 80px !important;
    }

    .mb-sm-90 {
        margin-bottom: 90px !important;
    }

    .mb-sm-100 {
        margin-bottom: 100px !important;
    }

    .mb-sm-110 {
        margin-bottom: 110px !important;
    }

    .mb-sm-120 {
        margin-bottom: 120px !important;
    }

    .mb-sm-130 {
        margin-bottom: 130px !important;
    }

    .mb-sm-140 {
        margin-bottom: 140px !important;
    }

    .mb-sm-150 {
        margin-bottom: 150px !important;
    }

    .mb-sm-160 {
        margin-bottom: 160px !important;
    }

    .mb-sm-170 {
        margin-bottom: 170px !important;
    }

    .mb-sm-180 {
        margin-bottom: 180px !important;
    }

    .mb-sm-190 {
        margin-bottom: 190px !important;
    }

    .mb-sm-200 {
        margin-bottom: 200px !important;
    }

    .mb-sm--10 {
        margin-bottom: -10px !important;
    }

    .mb-sm--15 {
        margin-bottom: -15px !important;
    }

    .mb-sm--20 {
        margin-bottom: -20px !important;
    }

    .mb-sm--25 {
        margin-bottom: -25px !important;
    }

    .mb-sm--30 {
        margin-bottom: -30px !important;
    }

    .mb-sm--40 {
        margin-bottom: -40px !important;
    }

    .mb-sm--50 {
        margin-bottom: -50px !important;
    }

    .mb-sm--60 {
        margin-bottom: -60px !important;
    }

    .mb-sm--70 {
        margin-bottom: -70px !important;
    }

    .mb-sm--80 {
        margin-bottom: -80px !important;
    }

    .mb-sm--90 {
        margin-bottom: -90px !important;
    }

    .mb-sm--100 {
        margin-bottom: -100px !important;
    }

    .mb-sm--110 {
        margin-bottom: -110px !important;
    }

    .mb-sm--120 {
        margin-bottom: -120px !important;
    }

    .mb-sm--130 {
        margin-bottom: -130px !important;
    }

    .mb-sm--140 {
        margin-bottom: -140px !important;
    }

    .mb-sm--150 {
        margin-bottom: -150px !important;
    }

    .mb-sm--160 {
        margin-bottom: -160px !important;
    }

    .mb-sm--170 {
        margin-bottom: -170px !important;
    }

    .mb-sm--180 {
        margin-bottom: -180px !important;
    }

    .mb-sm--190 {
        margin-bottom: -190px !important;
    }

    .mb-sm--200 {
        margin-bottom: -200px !important;
    }

    .mr-sm-0 {
        margin-right: 0px !important;
    }

    .mr-sm-10 {
        margin-right: 10px !important;
    }

    .mr-sm-15 {
        margin-right: 15px !important;
    }

    .mr-sm-20 {
        margin-right: 20px !important;
    }

    .mr-sm-25 {
        margin-right: 25px !important;
    }

    .mr-sm-30 {
        margin-right: 30px !important;
    }

    .mr-sm-40 {
        margin-right: 40px !important;
    }

    .mr-sm-50 {
        margin-right: 50px !important;
    }

    .mr-sm-60 {
        margin-right: 60px !important;
    }

    .mr-sm-70 {
        margin-right: 70px !important;
    }

    .mr-sm-80 {
        margin-right: 80px !important;
    }

    .mr-sm-90 {
        margin-right: 90px !important;
    }

    .mr-sm-100 {
        margin-right: 100px !important;
    }

    .mr-sm-110 {
        margin-right: 110px !important;
    }

    .mr-sm-120 {
        margin-right: 120px !important;
    }

    .mr-sm-130 {
        margin-right: 130px !important;
    }

    .mr-sm-140 {
        margin-right: 140px !important;
    }

    .mr-sm-150 {
        margin-right: 150px !important;
    }

    .mr-sm-160 {
        margin-right: 160px !important;
    }

    .mr-sm-170 {
        margin-right: 170px !important;
    }

    .mr-sm-180 {
        margin-right: 180px !important;
    }

    .mr-sm-190 {
        margin-right: 190px !important;
    }

    .mr-sm-200 {
        margin-right: 200px !important;
    }

    .mr-sm--10 {
        margin-right: -10px !important;
    }

    .mr-sm--15 {
        margin-right: -15px !important;
    }

    .mr-sm--20 {
        margin-right: -20px !important;
    }

    .mr-sm--25 {
        margin-right: -25px !important;
    }

    .mr-sm--30 {
        margin-right: -30px !important;
    }

    .mr-sm--40 {
        margin-right: -40px !important;
    }

    .mr-sm--50 {
        margin-right: -50px !important;
    }

    .mr-sm--60 {
        margin-right: -60px !important;
    }

    .mr-sm--70 {
        margin-right: -70px !important;
    }

    .mr-sm--80 {
        margin-right: -80px !important;
    }

    .mr-sm--90 {
        margin-right: -90px !important;
    }

    .mr-sm--100 {
        margin-right: -100px !important;
    }

    .mr-sm--110 {
        margin-right: -110px !important;
    }

    .mr-sm--120 {
        margin-right: -120px !important;
    }

    .mr-sm--130 {
        margin-right: -130px !important;
    }

    .mr-sm--140 {
        margin-right: -140px !important;
    }

    .mr-sm--150 {
        margin-right: -150px !important;
    }

    .mr-sm--160 {
        margin-right: -160px !important;
    }

    .mr-sm--170 {
        margin-right: -170px !important;
    }

    .mr-sm--180 {
        margin-right: -180px !important;
    }

    .mr-sm--190 {
        margin-right: -190px !important;
    }

    .mr-sm--200 {
        margin-right: -200px !important;
    }

    .ml-sm-0 {
        margin-left: 0px !important;
    }

    .ml-sm-10 {
        margin-left: 10px !important;
    }

    .ml-sm-15 {
        margin-left: 15px !important;
    }

    .ml-sm-20 {
        margin-left: 20px !important;
    }

    .ml-sm-25 {
        margin-left: 25px !important;
    }

    .ml-sm-30 {
        margin-left: 30px !important;
    }

    .ml-sm-40 {
        margin-left: 40px !important;
    }

    .ml-sm-50 {
        margin-left: 50px !important;
    }

    .ml-sm-60 {
        margin-left: 60px !important;
    }

    .ml-sm-70 {
        margin-left: 70px !important;
    }

    .ml-sm-80 {
        margin-left: 80px !important;
    }

    .ml-sm-90 {
        margin-left: 90px !important;
    }

    .ml-sm-100 {
        margin-left: 100px !important;
    }

    .ml-sm-110 {
        margin-left: 110px !important;
    }

    .ml-sm-120 {
        margin-left: 120px !important;
    }

    .ml-sm-130 {
        margin-left: 130px !important;
    }

    .ml-sm-140 {
        margin-left: 140px !important;
    }

    .ml-sm-150 {
        margin-left: 150px !important;
    }

    .ml-sm-160 {
        margin-left: 160px !important;
    }

    .ml-sm-170 {
        margin-left: 170px !important;
    }

    .ml-sm-180 {
        margin-left: 180px !important;
    }

    .ml-sm-190 {
        margin-left: 190px !important;
    }

    .ml-sm-200 {
        margin-left: 200px !important;
    }

    .ml-sm--10 {
        margin-left: -10px !important;
    }

    .ml-sm--15 {
        margin-left: -15px !important;
    }

    .ml-sm--20 {
        margin-left: -20px !important;
    }

    .ml-sm--25 {
        margin-left: -25px !important;
    }

    .ml-sm--30 {
        margin-left: -30px !important;
    }

    .ml-sm--40 {
        margin-left: -40px !important;
    }

    .ml-sm--50 {
        margin-left: -50px !important;
    }

    .ml-sm--60 {
        margin-left: -60px !important;
    }

    .ml-sm--70 {
        margin-left: -70px !important;
    }

    .ml-sm--80 {
        margin-left: -80px !important;
    }

    .ml-sm--90 {
        margin-left: -90px !important;
    }

    .ml-sm--100 {
        margin-left: -100px !important;
    }

    .ml-sm--110 {
        margin-left: -110px !important;
    }

    .ml-sm--120 {
        margin-left: -120px !important;
    }

    .ml-sm--130 {
        margin-left: -130px !important;
    }

    .ml-sm--140 {
        margin-left: -140px !important;
    }

    .ml-sm--150 {
        margin-left: -150px !important;
    }

    .ml-sm--160 {
        margin-left: -160px !important;
    }

    .ml-sm--170 {
        margin-left: -170px !important;
    }

    .ml-sm--180 {
        margin-left: -180px !important;
    }

    .ml-sm--190 {
        margin-left: -190px !important;
    }

    .ml-sm--200 {
        margin-left: -200px !important;
    }
}

@media (max-width:575px) {
    .m-xs-0 {
        margin: 0px !important;
    }

    .m-xs-10 {
        margin: 10px !important;
    }

    .m-xs-15 {
        margin: 15px !important;
    }

    .m-xs-20 {
        margin: 20px !important;
    }

    .m-xs-25 {
        margin: 25px !important;
    }

    .m-xs-30 {
        margin: 30px !important;
    }

    .m-xs-40 {
        margin: 40px !important;
    }

    .m-xs-50 {
        margin: 50px !important;
    }

    .m-xs-60 {
        margin: 60px !important;
    }

    .m-xs-70 {
        margin: 70px !important;
    }

    .m-xs-80 {
        margin: 80px !important;
    }

    .m-xs-90 {
        margin: 90px !important;
    }

    .m-xs-100 {
        margin: 100px !important;
    }

    .m-xs-110 {
        margin: 110px !important;
    }

    .m-xs-120 {
        margin: 120px !important;
    }

    .m-xs-130 {
        margin: 130px !important;
    }

    .m-xs-140 {
        margin: 140px !important;
    }

    .m-xs-150 {
        margin: 150px !important;
    }

    .m-xs-160 {
        margin: 160px !important;
    }

    .m-xs-170 {
        margin: 170px !important;
    }

    .m-xs-180 {
        margin: 180px !important;
    }

    .m-xs-190 {
        margin: 190px !important;
    }

    .m-xs-200 {
        margin: 200px !important;
    }

    .m-xs--10 {
        margin: -10px !important;
    }

    .m-xs--15 {
        margin: -15px !important;
    }

    .m-xs--20 {
        margin: -20px !important;
    }

    .m-xs--25 {
        margin: -25px !important;
    }

    .m-xs--30 {
        margin: -30px !important;
    }

    .m-xs--40 {
        margin: -40px !important;
    }

    .m-xs--50 {
        margin: -50px !important;
    }

    .m-xs--60 {
        margin: -60px !important;
    }

    .m-xs--70 {
        margin: -70px !important;
    }

    .m-xs--80 {
        margin: -80px !important;
    }

    .m-xs--90 {
        margin: -90px !important;
    }

    .m-xs--100 {
        margin: -100px !important;
    }

    .m-xs--110 {
        margin: -110px !important;
    }

    .m-xs--120 {
        margin: -120px !important;
    }

    .m-xs--130 {
        margin: -130px !important;
    }

    .m-xs--140 {
        margin: -140px !important;
    }

    .m-xs--150 {
        margin: -150px !important;
    }

    .m-xs--160 {
        margin: -160px !important;
    }

    .m-xs--170 {
        margin: -170px !important;
    }

    .m-xs--180 {
        margin: -180px !important;
    }

    .m-xs--190 {
        margin: -190px !important;
    }

    .m-xs--200 {
        margin: -200px !important;
    }

    .mt-xs-0 {
        margin-top: 0px !important;
    }

    .mt-xs-10 {
        margin-top: 10px !important;
    }

    .mt-xs-15 {
        margin-top: 15px !important;
    }

    .mt-xs-20 {
        margin-top: 20px !important;
    }

    .mt-xs-25 {
        margin-top: 25px !important;
    }

    .mt-xs-30 {
        margin-top: 30px !important;
    }

    .mt-xs-40 {
        margin-top: 40px !important;
    }

    .mt-xs-50 {
        margin-top: 50px !important;
    }

    .mt-xs-60 {
        margin-top: 60px !important;
    }

    .mt-xs-70 {
        margin-top: 70px !important;
    }

    .mt-xs-80 {
        margin-top: 80px !important;
    }

    .mt-xs-90 {
        margin-top: 90px !important;
    }

    .mt-xs-100 {
        margin-top: 100px !important;
    }

    .mt-xs-110 {
        margin-top: 110px !important;
    }

    .mt-xs-120 {
        margin-top: 120px !important;
    }

    .mt-xs-130 {
        margin-top: 130px !important;
    }

    .mt-xs-140 {
        margin-top: 140px !important;
    }

    .mt-xs-150 {
        margin-top: 150px !important;
    }

    .mt-xs-160 {
        margin-top: 160px !important;
    }

    .mt-xs-170 {
        margin-top: 170px !important;
    }

    .mt-xs-180 {
        margin-top: 180px !important;
    }

    .mt-xs-190 {
        margin-top: 190px !important;
    }

    .mt-xs-200 {
        margin-top: 200px !important;
    }

    .mt-xs--10 {
        margin-top: -10px !important;
    }

    .mt-xs--15 {
        margin-top: -15px !important;
    }

    .mt-xs--20 {
        margin-top: -20px !important;
    }

    .mt-xs--25 {
        margin-top: -25px !important;
    }

    .mt-xs--30 {
        margin-top: -30px !important;
    }

    .mt-xs--40 {
        margin-top: -40px !important;
    }

    .mt-xs--50 {
        margin-top: -50px !important;
    }

    .mt-xs--60 {
        margin-top: -60px !important;
    }

    .mt-xs--70 {
        margin-top: -70px !important;
    }

    .mt-xs--80 {
        margin-top: -80px !important;
    }

    .mt-xs--90 {
        margin-top: -90px !important;
    }

    .mt-xs--100 {
        margin-top: -100px !important;
    }

    .mt-xs--110 {
        margin-top: -110px !important;
    }

    .mt-xs--120 {
        margin-top: -120px !important;
    }

    .mt-xs--130 {
        margin-top: -130px !important;
    }

    .mt-xs--140 {
        margin-top: -140px !important;
    }

    .mt-xs--150 {
        margin-top: -150px !important;
    }

    .mt-xs--160 {
        margin-top: -160px !important;
    }

    .mt-xs--170 {
        margin-top: -170px !important;
    }

    .mt-xs--180 {
        margin-top: -180px !important;
    }

    .mt-xs--190 {
        margin-top: -190px !important;
    }

    .mt-xs--200 {
        margin-top: -200px !important;
    }

    .mb-xs-0 {
        margin-bottom: 0px !important;
    }

    .mb-xs-10 {
        margin-bottom: 10px !important;
    }

    .mb-xs-15 {
        margin-bottom: 15px !important;
    }

    .mb-xs-20 {
        margin-bottom: 20px !important;
    }

    .mb-xs-25 {
        margin-bottom: 25px !important;
    }

    .mb-xs-30 {
        margin-bottom: 30px !important;
    }

    .mb-xs-40 {
        margin-bottom: 40px !important;
    }

    .mb-xs-50 {
        margin-bottom: 50px !important;
    }

    .mb-xs-60 {
        margin-bottom: 60px !important;
    }

    .mb-xs-70 {
        margin-bottom: 70px !important;
    }

    .mb-xs-80 {
        margin-bottom: 80px !important;
    }

    .mb-xs-90 {
        margin-bottom: 90px !important;
    }

    .mb-xs-100 {
        margin-bottom: 100px !important;
    }

    .mb-xs-110 {
        margin-bottom: 110px !important;
    }

    .mb-xs-120 {
        margin-bottom: 120px !important;
    }

    .mb-xs-130 {
        margin-bottom: 130px !important;
    }

    .mb-xs-140 {
        margin-bottom: 140px !important;
    }

    .mb-xs-150 {
        margin-bottom: 150px !important;
    }

    .mb-xs-160 {
        margin-bottom: 160px !important;
    }

    .mb-xs-170 {
        margin-bottom: 170px !important;
    }

    .mb-xs-180 {
        margin-bottom: 180px !important;
    }

    .mb-xs-190 {
        margin-bottom: 190px !important;
    }

    .mb-xs-200 {
        margin-bottom: 200px !important;
    }

    .mb-xs--10 {
        margin-bottom: -10px !important;
    }

    .mb-xs--15 {
        margin-bottom: -15px !important;
    }

    .mb-xs--20 {
        margin-bottom: -20px !important;
    }

    .mb-xs--25 {
        margin-bottom: -25px !important;
    }

    .mb-xs--30 {
        margin-bottom: -30px !important;
    }

    .mb-xs--40 {
        margin-bottom: -40px !important;
    }

    .mb-xs--50 {
        margin-bottom: -50px !important;
    }

    .mb-xs--60 {
        margin-bottom: -60px !important;
    }

    .mb-xs--70 {
        margin-bottom: -70px !important;
    }

    .mb-xs--80 {
        margin-bottom: -80px !important;
    }

    .mb-xs--90 {
        margin-bottom: -90px !important;
    }

    .mb-xs--100 {
        margin-bottom: -100px !important;
    }

    .mb-xs--110 {
        margin-bottom: -110px !important;
    }

    .mb-xs--120 {
        margin-bottom: -120px !important;
    }

    .mb-xs--130 {
        margin-bottom: -130px !important;
    }

    .mb-xs--140 {
        margin-bottom: -140px !important;
    }

    .mb-xs--150 {
        margin-bottom: -150px !important;
    }

    .mb-xs--160 {
        margin-bottom: -160px !important;
    }

    .mb-xs--170 {
        margin-bottom: -170px !important;
    }

    .mb-xs--180 {
        margin-bottom: -180px !important;
    }

    .mb-xs--190 {
        margin-bottom: -190px !important;
    }

    .mb-xs--200 {
        margin-bottom: -200px !important;
    }

    .mr-xs-0 {
        margin-right: 0px !important;
    }

    .mr-xs-10 {
        margin-right: 10px !important;
    }

    .mr-xs-15 {
        margin-right: 15px !important;
    }

    .mr-xs-20 {
        margin-right: 20px !important;
    }

    .mr-xs-25 {
        margin-right: 25px !important;
    }

    .mr-xs-30 {
        margin-right: 30px !important;
    }

    .mr-xs-40 {
        margin-right: 40px !important;
    }

    .mr-xs-50 {
        margin-right: 50px !important;
    }

    .mr-xs-60 {
        margin-right: 60px !important;
    }

    .mr-xs-70 {
        margin-right: 70px !important;
    }

    .mr-xs-80 {
        margin-right: 80px !important;
    }

    .mr-xs-90 {
        margin-right: 90px !important;
    }

    .mr-xs-100 {
        margin-right: 100px !important;
    }

    .mr-xs-110 {
        margin-right: 110px !important;
    }

    .mr-xs-120 {
        margin-right: 120px !important;
    }

    .mr-xs-130 {
        margin-right: 130px !important;
    }

    .mr-xs-140 {
        margin-right: 140px !important;
    }

    .mr-xs-150 {
        margin-right: 150px !important;
    }

    .mr-xs-160 {
        margin-right: 160px !important;
    }

    .mr-xs-170 {
        margin-right: 170px !important;
    }

    .mr-xs-180 {
        margin-right: 180px !important;
    }

    .mr-xs-190 {
        margin-right: 190px !important;
    }

    .mr-xs-200 {
        margin-right: 200px !important;
    }

    .mr-xs--10 {
        margin-right: -10px !important;
    }

    .mr-xs--15 {
        margin-right: -15px !important;
    }

    .mr-xs--20 {
        margin-right: -20px !important;
    }

    .mr-xs--25 {
        margin-right: -25px !important;
    }

    .mr-xs--30 {
        margin-right: -30px !important;
    }

    .mr-xs--40 {
        margin-right: -40px !important;
    }

    .mr-xs--50 {
        margin-right: -50px !important;
    }

    .mr-xs--60 {
        margin-right: -60px !important;
    }

    .mr-xs--70 {
        margin-right: -70px !important;
    }

    .mr-xs--80 {
        margin-right: -80px !important;
    }

    .mr-xs--90 {
        margin-right: -90px !important;
    }

    .mr-xs--100 {
        margin-right: -100px !important;
    }

    .mr-xs--110 {
        margin-right: -110px !important;
    }

    .mr-xs--120 {
        margin-right: -120px !important;
    }

    .mr-xs--130 {
        margin-right: -130px !important;
    }

    .mr-xs--140 {
        margin-right: -140px !important;
    }

    .mr-xs--150 {
        margin-right: -150px !important;
    }

    .mr-xs--160 {
        margin-right: -160px !important;
    }

    .mr-xs--170 {
        margin-right: -170px !important;
    }

    .mr-xs--180 {
        margin-right: -180px !important;
    }

    .mr-xs--190 {
        margin-right: -190px !important;
    }

    .mr-xs--200 {
        margin-right: -200px !important;
    }

    .ml-xs-0 {
        margin-left: 0px !important;
    }

    .ml-xs-10 {
        margin-left: 10px !important;
    }

    .ml-xs-15 {
        margin-left: 15px !important;
    }

    .ml-xs-20 {
        margin-left: 20px !important;
    }

    .ml-xs-25 {
        margin-left: 25px !important;
    }

    .ml-xs-30 {
        margin-left: 30px !important;
    }

    .ml-xs-40 {
        margin-left: 40px !important;
    }

    .ml-xs-50 {
        margin-left: 50px !important;
    }

    .ml-xs-60 {
        margin-left: 60px !important;
    }

    .ml-xs-70 {
        margin-left: 70px !important;
    }

    .ml-xs-80 {
        margin-left: 80px !important;
    }

    .ml-xs-90 {
        margin-left: 90px !important;
    }

    .ml-xs-100 {
        margin-left: 100px !important;
    }

    .ml-xs-110 {
        margin-left: 110px !important;
    }

    .ml-xs-120 {
        margin-left: 120px !important;
    }

    .ml-xs-130 {
        margin-left: 130px !important;
    }

    .ml-xs-140 {
        margin-left: 140px !important;
    }

    .ml-xs-150 {
        margin-left: 150px !important;
    }

    .ml-xs-160 {
        margin-left: 160px !important;
    }

    .ml-xs-170 {
        margin-left: 170px !important;
    }

    .ml-xs-180 {
        margin-left: 180px !important;
    }

    .ml-xs-190 {
        margin-left: 190px !important;
    }

    .ml-xs-200 {
        margin-left: 200px !important;
    }

    .ml-xs--10 {
        margin-left: -10px !important;
    }

    .ml-xs--15 {
        margin-left: -15px !important;
    }

    .ml-xs--20 {
        margin-left: -20px !important;
    }

    .ml-xs--25 {
        margin-left: -25px !important;
    }

    .ml-xs--30 {
        margin-left: -30px !important;
    }

    .ml-xs--40 {
        margin-left: -40px !important;
    }

    .ml-xs--50 {
        margin-left: -50px !important;
    }

    .ml-xs--60 {
        margin-left: -60px !important;
    }

    .ml-xs--70 {
        margin-left: -70px !important;
    }

    .ml-xs--80 {
        margin-left: -80px !important;
    }

    .ml-xs--90 {
        margin-left: -90px !important;
    }

    .ml-xs--100 {
        margin-left: -100px !important;
    }

    .ml-xs--110 {
        margin-left: -110px !important;
    }

    .ml-xs--120 {
        margin-left: -120px !important;
    }

    .ml-xs--130 {
        margin-left: -130px !important;
    }

    .ml-xs--140 {
        margin-left: -140px !important;
    }

    .ml-xs--150 {
        margin-left: -150px !important;
    }

    .ml-xs--160 {
        margin-left: -160px !important;
    }

    .ml-xs--170 {
        margin-left: -170px !important;
    }

    .ml-xs--180 {
        margin-left: -180px !important;
    }

    .ml-xs--190 {
        margin-left: -190px !important;
    }

    .ml-xs--200 {
        margin-left: -200px !important;
    }

    .pt-sm-00 {
        padding-top: 0px !important;
    }

    .pt-sm-10 {
        padding-top: 10px !important;
    }

    .pt-sm-15 {
        padding-top: 15px !important;
    }

    .pt-sm-20 {
        padding-top: 20px !important;
    }

    .pt-sm-25 {
        padding-top: 25px !important;
    }

    .pt-sm-30 {
        padding-top: 30px !important;
    }

    .pt-sm-35 {
        padding-top: 35px !important;
    }

    .pt-sm-40 {
        padding-top: 40px !important;
    }

    .pt-sm-45 {
        padding-top: 45px !important;
    }

    .pt-sm-50 {
        padding-top: 50px !important;
    }

    .pb-sm-0 {
        padding-bottom: 0px !important;
    }

    .pb-sm-10 {
        padding-bottom: 10px !important;
    }

    .pb-sm-15 {
        padding-bottom: 15px !important;
    }

    .pb-sm-20 {
        padding-bottom: 20px !important;
    }

    .pb-sm-25 {
        padding-bottom: 25px !important;
    }

    .pb-sm-30 {
        padding-bottom: 30px !important;
    }

    .pb-sm-35 {
        padding-bottom: 35px !important;
    }

    .pb-sm-40 {
        padding-bottom: 40px !important;
    }

    .pb-sm-45 {
        padding-bottom: 45px !important;
    }

    .pb-sm-50 {
        padding-bottom: 50px !important;
    }

    .pl-sm-10 {
        padding-left: 10px !important;
    }

    .pl-sm-15 {
        padding-left: 15px !important;
    }

    .pl-sm-20 {
        padding-left: 20px !important;
    }

    .pl-sm-25 {
        padding-left: 25px !important;
    }

    .pl-sm-30 {
        padding-left: 30px !important;
    }

    .pl-sm-35 {
        padding-left: 35px !important;
    }

    .pl-sm-40 {
        padding-left: 40px !important;
    }

    .pl-sm-45 {
        padding-left: 45px !important;
    }

    .pl-sm-50 {
        padding-left: 50px !important;
    }

    .pr-sm-0 {
        padding-right: 0 !important;
    }

    .pr-sm-10 {
        padding-right: 10px !important;
    }

    .pr-sm-15 {
        padding-right: 15px !important;
    }

    .pr-sm-20 {
        padding-right: 20px !important;
    }

    .pr-sm-25 {
        padding-right: 25px !important;
    }

    .pr-sm-30 {
        padding-right: 30px !important;
    }

    .pr-sm-35 {
        padding-right: 35px !important;
    }

    .pr-sm-40 {
        padding-right: 40px !important;
    }

    .pr-sm-45 {
        padding-right: 45px !important;
    }

    .pr-sm-50 {
        padding-right: 50px !important;
    }
}

@media (min-width:992px) {
    .blog-right-col {
        -ms-flex: 0 0 66%;
        flex: 0 0 66%;
        max-width: 70.811%;
    }

    .blog-left-col {
        -ms-flex: 0 0 34%;
        flex: 0 0 34%;
        max-width: 27.914%;
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1200px;
    }

    /** header-style-2 **/
    .header-style-2.site-header .site-navigation ul.navigation>li>a {
        color: #ffffff !important;
    }

    .site-header.header-style-2 .site-navigation ul.navigation>li.active>a:hover,
    .site-header.header-style-2 .site-navigation ul.navigation>li>a:hover,
    .site-header.header-style-2 .site-navigation ul.navigation>li.active>a {
        color: #ffffff;
    }

    .header-style-2.site-header .site-navigation ul.navigation {
        float: none;
        right: 0;
        left: 0;
        text-align: center;
        margin: 0 auto;
    }
}

@media (min-width:1200px) {
    .right-bg-effect {
        width: 25%;
    }
}

@media(min-width:1480px) {
    .right-bg-effect {
        width: 29%;
    }
}

@media(min-width:1680px) {
    .right-bg-effect {
        width: 33%;
    }
}

/*
 * Phone header and contact form
 * ----------------------------
 * The original template's desktop navigation rules are quite specific. Keep
 * the mobile override at the end of this file so it wins over those rules,
 * including the Bootstrap collapse display rule.
 */
@media (max-width: 767px) {
    .contact-page {
        overflow-x: hidden;
    }

    .contact-page .site-header .pre-header {
        display: none;
    }

    .contact-page .site-header .site-header-menu {
        position: relative;
        padding: 18px 0;
        background: #ffffff;
        z-index: 1000;
    }

    .contact-page .site-header .site-header-menu>.container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .contact-page .site-header .site-header-menu>.container>.row,
    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        min-height: 0;
        flex-wrap: wrap;
    }

    .contact-page .site-header .site-branding {
        align-self: center;
        padding-left: 0;
        line-height: 0;
    }

    .contact-page .site-header .site-branding img.logo-img {
        display: block;
        width: 250px;
        max-width: calc(100vw - 92px);
        max-height: 72px;
        height: auto;
    }

    .contact-page .site-navigation {
        position: relative;
        flex: 0 0 auto;
        align-self: center;
        display: block;
        margin-left: auto;
    }

    .contact-page .main-menu {
        position: relative;
    }

    .contact-page .main-menu .navbar-header {
        width: auto;
        line-height: 1;
    }

    .contact-page .main-menu .navbar-header .navbar-toggler {
        display: block;
        width: 58px;
        height: 58px;
        margin: 0;
        padding: 0;
        border: 2px solid #cbe9b4;
        border-radius: 8px;
        color: #42464e;
        background: #ffffff;
        font-size: 32px;
        line-height: 54px;
        text-align: center;
    }

    .contact-page .main-menu .navbar-header .navbar-toggler:focus {
        outline: 2px solid rgba(127, 197, 64, 0.45);
        outline-offset: 2px;
    }

    .contact-page .main-menu .navbar-collapse {
        position: static;
        width: 100%;
        max-height: none;
        overflow: visible;
        border-top: 3px solid #7fc540;
        background-color: #f7f8fa;
        box-shadow: none;
        z-index: auto;
    }

    .contact-page .main-menu .navbar-collapse:not(.show) {
        display: none !important;
    }

    .contact-page .main-menu .navbar-collapse.show {
        display: block !important;
    }

    /*
     * When the menu is open, move navigation onto its own full-width row.
     * :has() is supported by current mobile browsers and avoids adding a
     * second menu state just for layout.
     */
    .contact-page .site-navigation:has(.navbar-collapse.show),
    .contact-page .main-menu:has(.navbar-collapse.show) {
        flex: 0 0 100%;
        width: 100%;
        margin-left: 0 !important;
    }

    .contact-page .main-menu:has(.navbar-collapse.show) .navbar-header {
        width: 100%;
        min-height: 58px;
    }

    .contact-page .main-menu .navigation {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .contact-page .main-menu .navigation>li {
        float: none;
        width: 100%;
    }

    .contact-page .main-menu .navigation>li>a {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 10px 16px;
        border-bottom: 1px solid rgba(9, 22, 42, 0.12);
        line-height: 28px;
    }

    .contact-page .main-menu .navigation>li.active>a {
        color: #7fc540;
        background-color: #f7f8fa;
    }

    .contact-page .main-menu .navigation>li>ul {
        width: 100%;
    }

    /*
     * Restore the contact page content that the template's older tablet
     * override hides. The banner must remain above the intro and form on
     * phones, including when the navigation has just been opened.
     */
    .contact-page .inner-banner {
        display: table !important;
        height: 250px;
        min-height: 250px;
        background-position: center center;
        background-size: cover;
    }

    .contact-page .inner-banner .inner-page-title {
        font-size: 28px;
        line-height: 36px;
        text-align: center;
    }

    .contact-page .inner-banner .breadcrumb-section {
        display: none !important;
    }

    .contact-page .page-content>section.section-mdt {
        display: block;
        padding: 46px 0 58px;
        background: #f7f8fa;
    }

    .contact-page .page-content>section.section-mdt>.container {
        display: block !important;
    }

    .contact-page .page-content>section.section-mdt>.container>.row:first-child {
        margin-left: 0;
        margin-right: 0;
    }

    .contact-page .page-content>section.section-mdt .section-title {
        margin-bottom: 34px;
    }

    /* Prevent the form row's desktop negative margins from causing sideways scroll. */
    .contact-page .contact-appointment {
        width: 100%;
        margin: 38px 0 0;
        overflow: hidden;
        box-shadow: 0 4px 18px rgba(20, 35, 45, 0.08);
    }

    .contact-page .appointment-image {
        display: none;
    }

    .contact-page .appointment-inner {
        width: 100%;
        padding: 32px 16px 30px;
    }

    .contact-page .appointment-inner h3 {
        margin: 0 0 16px;
        color: #42464e;
        font-size: 32px;
        line-height: 1.28;
        letter-spacing: -0.5px;
    }

    .contact-page .appointment-inner>p {
        margin: 0 0 32px;
        color: #42464e;
        font-size: 17px;
        line-height: 1.8;
    }

    .contact-page .contact-form .form-row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .contact-page .contact-form .form-group {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin: 0 8px 28px !important;
        padding: 0 !important;
        border-bottom: 0;
    }

    .contact-page .contact-form .form-label {
        margin-bottom: 8px;
        font-size: 16px;
        line-height: 24px;
    }

    .contact-page .contact-form .form-control {
        width: 100%;
        height: 42px;
        min-height: 42px;
        padding: 0 0 7px;
        font-size: 16px;
    }

    .contact-page .contact-form textarea.form-control {
        min-height: 92px;
        height: 92px;
    }

    .contact-page .contact-form .form-group:last-child {
        margin-bottom: 0;
    }
}

/*
 * Final mobile Pages menu states
 * ------------------------------
 * Submenu items are green by default. The current page is the only white
 * submenu row with green text, matching the mobile reference.
 */
@media (max-width: 767px) {

    body.about-page .site-header .site-navigation ul.navigation>li.dropdown>a,
    body.faq-page .site-header .site-navigation ul.navigation>li.dropdown>a,
    body.service-page .site-header .site-navigation ul.navigation>li.dropdown>a,
    body.contact-page .site-header .site-navigation ul.navigation>li.dropdown>a {
        color: #30343a !important;
        background: #f7f8fa !important;
    }

    body.about-page .site-header .site-navigation ul.navigation>li.dropdown.active>a,
    body.faq-page .site-header .site-navigation ul.navigation>li.dropdown.active>a {
        color: #7fc540 !important;
        background: #ffffff !important;
    }

    body.about-page .main-menu .navigation>li.dropdown>ul>li>a,
    body.faq-page .main-menu .navigation>li.dropdown>ul>li>a,
    body.service-page .main-menu .navigation>li.dropdown>ul>li>a,
    body.contact-page .main-menu .navigation>li.dropdown>ul>li>a {
        color: #ffffff !important;
        background: #7fc540 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    body.about-page .main-menu .navigation>li.dropdown>ul>li.active>a,
    body.about-page .main-menu .navigation>li.dropdown>ul>li:first-child>a,
    body.faq-page .main-menu .navigation>li.dropdown>ul>li.active>a,
    body.faq-page .main-menu .navigation>li.dropdown>ul>li:last-child>a,
    body.about-page .main-menu .navigation>li.dropdown>ul>li>a:hover,
    body.about-page .main-menu .navigation>li.dropdown>ul>li>a:focus,
    body.faq-page .main-menu .navigation>li.dropdown>ul>li>a:hover,
    body.faq-page .main-menu .navigation>li.dropdown>ul>li>a:focus,
    body.service-page .main-menu .navigation>li.dropdown>ul>li>a:hover,
    body.service-page .main-menu .navigation>li.dropdown>ul>li>a:focus,
    body.contact-page .main-menu .navigation>li.dropdown>ul>li>a:hover,
    body.contact-page .main-menu .navigation>li.dropdown>ul>li>a:focus {
        color: #7fc540 !important;
        background: #ffffff !important;
        border-bottom-color: #dedfe1 !important;
    }
}

/*
 * Contact mobile Pages dropdown
 * -----------------------------
 * Submenu rows stay white until the user hovers or focuses one. The touched
 * row then uses the same green treatment as the reference menu.
 */
@media (max-width: 767px) {
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li>a {
        color: #30343a !important;
        background: #ffffff !important;
        border-bottom: 1px solid #dedfe1 !important;
    }

    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li.active>a {
        color: #ffffff !important;
        background: #7fc540 !important;
        border-bottom-color: rgba(255, 255, 255, 0.3) !important;
    }

    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li:last-child>a {
        border-bottom: 0 !important;
    }
}

/* Keep the Home mobile menu typography and row sizing consistent with the
   About, FAQ, Service, and Contact page menus. */
@media (max-width: 767px) {
    body.home-page .main-menu .navigation>li>a {
        display: flex !important;
        align-items: center !important;
        min-height: 51px !important;
        height: 51px !important;
        padding: 10px 18px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        text-transform: uppercase !important;
    }

    body.home-page .main-menu .navigation>li.dropdown>ul.open>li>a {
        display: block !important;
        min-height: 51px !important;
        height: 51px !important;
        padding: 10px 34px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        text-transform: uppercase !important;
    }
}

/* Match the Home mobile navbar sizing on every inner page. */
/* @media (max-width: 767px) {
    body.about-page .main-menu .navigation > li > a,
    body.faq-page .main-menu .navigation > li > a,
    body.service-page .main-menu .navigation > li > a,
    body.contact-page .main-menu .navigation > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 51px !important;
        height: 51px !important;
        padding: 10px 18px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        text-transform: uppercase !important;
    }

    body.about-page .main-menu .navigation > li.dropdown > ul.open > li > a,
    body.faq-page .main-menu .navigation > li.dropdown > ul.open > li > a,
    body.service-page .main-menu .navigation > li.dropdown > ul.open > li > a,
    body.contact-page .main-menu .navigation > li.dropdown > ul.open > li > a {
        display: block !important;
        min-height: 51px !important;
        height: 51px !important;
        padding: 10px 34px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        text-transform: uppercase !important;
    }
} */

/* Mobile Pages submenu: consistent hover and active states on every page. */
@media (max-width: 767px) {

    body.home-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    body.about-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    body.faq-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    body.service-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li>a {
        color: #7fc540 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #dedfe1 !important;
    }

    body.home-page .main-menu .navigation>li.dropdown>ul.open>li.active>a,
    body.about-page .main-menu .navigation>li.dropdown>ul.open>li.active>a,
    body.faq-page .main-menu .navigation>li.dropdown>ul.open>li.active>a,
    body.service-page .main-menu .navigation>li.dropdown>ul.open>li.active>a,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li.active>a {
        color: #7fc540 !important;
        background: #ffffff !important;
    }

    body.home-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.home-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    body.about-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.about-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    body.faq-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.faq-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    body.service-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.service-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus {
        color: #ffffff !important;
        background: #7fc540 !important;
        border-bottom-color: rgba(255, 255, 255, 0.3) !important;
    }
}

/*
 * Mobile navigation colors
 * ------------------------
 * Match the Home menu: Pages uses the Choice Optical green accent, and
 * hovering or focusing any menu item uses the same accent without changing
 * the logo styling.
 */
@media (max-width: 767px) {

    body.home-page .main-menu .navigation>li>a:hover,
    body.about-page .main-menu .navigation>li>a:hover,
    body.service-page .main-menu .navigation>li>a:hover,
    body.faq-page .main-menu .navigation>li>a:hover,
    body.contact-page .main-menu .navigation>li>a:hover,
    body.home-page .main-menu .navigation>li>a:focus,
    body.about-page .main-menu .navigation>li>a:focus,
    body.service-page .main-menu .navigation>li>a:focus,
    body.faq-page .main-menu .navigation>li>a:focus,
    body.contact-page .main-menu .navigation>li>a:focus {
        color: #7fc540 !important;
        background: #ffffff !important;
    }

    body.home-page .main-menu .navigation>li.dropdown>a,
    body.about-page .main-menu .navigation>li.dropdown>a,
    body.service-page .main-menu .navigation>li.dropdown>a,
    body.faq-page .main-menu .navigation>li.dropdown>a,
    body.contact-page .main-menu .navigation>li.dropdown>a,
    body.home-page .main-menu .navigation>li.dropdown:hover>a,
    body.about-page .main-menu .navigation>li.dropdown:hover>a,
    body.service-page .main-menu .navigation>li.dropdown:hover>a,
    body.faq-page .main-menu .navigation>li.dropdown:hover>a,
    body.contact-page .main-menu .navigation>li.dropdown:hover>a,
    body.home-page .main-menu .navigation>li.dropdown:focus-within>a,
    body.about-page .main-menu .navigation>li.dropdown:focus-within>a,
    body.service-page .main-menu .navigation>li.dropdown:focus-within>a,
    body.faq-page .main-menu .navigation>li.dropdown:focus-within>a,
    body.contact-page .main-menu .navigation>li.dropdown:focus-within>a {
        color: #7fc540 !important;
        background: #ffffff !important;
    }

    body.home-page .main-menu .navigation>li.active:not(.dropdown)>a,
    body.about-page .main-menu .navigation>li.active:not(.dropdown)>a,
    body.service-page .main-menu .navigation>li.active:not(.dropdown)>a,
    body.faq-page .main-menu .navigation>li.active:not(.dropdown)>a,
    body.contact-page .main-menu .navigation>li.active:not(.dropdown)>a {
        color: #7fc540 !important;
        background: #ffffff !important;
    }
}

/*
 * Contact form mobile alignment
 * ----------------------------
 * Keep the generous field rows from the mobile reference. The form controls
 * provide the single separator line; the group itself should not add a
 * second, offset border.
 */
@media (max-width: 767px) {
    .contact-page .contact-appointment {
        width: calc(100% - 20px);
        margin: 10px 10px 0;
    }

    .contact-page .appointment-inner {
        padding: 20px 20px 30px;
    }

    .contact-page .appointment-inner h3 {
        font-size: 28px;
        line-height: 1.3;
        letter-spacing: -0.25px;
        margin-bottom: 14px;
    }

    .contact-page .appointment-inner>p {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 58px;
    }

    .contact-page .contact-form .form-row {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .contact-page .contact-form .form-group {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin: 0 !important;
        padding: 42px 20px 18px !important;
        border-bottom: 0;
    }

    .contact-page .contact-form .form-label {
        margin-bottom: 8px;
        font-size: 17px;
        line-height: 24px;
    }

    .contact-page .contact-form .form-control {
        width: 100%;
        height: 42px;
        min-height: 42px;
        padding: 0 0 7px;
        font-size: 16px;
        border-bottom: 2px solid #eeeeee;
    }

    .contact-page .contact-form textarea.form-control {
        height: 92px;
        min-height: 92px;
    }

    .contact-page .contact-form .form-group:last-child {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    .contact-page .footerlogo {
        text-align: center;
    }

    .contact-page .choice-optical-footer-logo {
        width: 230px;
        max-width: 80vw;
        margin: 0 auto 20px !important;
    }

    .contact-page .site-footer p,
    .contact-page .site-footer a {
        overflow-wrap: anywhere;
    }
}

/*
 * Contact + FAQ responsive navigation
 * -----------------------------------
 * Keep both inner pages consistent with the supplied mobile references:
 * tablets show the vertical menu beside the logo, while phones put the
 * hamburger on its own row and open the links full width below it.
 */
@media (min-width: 768px) and (max-width: 1199px) {

    .contact-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu {
        padding: 0;
        background: #ffffff;
    }

    .contact-page .site-header .site-header-menu>.container,
    .faq-page .site-header .site-header-menu>.container {
        width: 100%;
        max-width: none;
        padding: 0 10px;
    }

    .contact-page .site-header .site-header-menu>.container>.row,
    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .faq-page .site-header .site-header-menu>.container>.row,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        min-height: 280px;
        align-items: center !important;
    }

    .contact-page .site-header .site-branding,
    .faq-page .site-header .site-branding {
        display: flex;
        align-self: stretch;
        align-items: center;
        padding-left: 25px;
    }

    .contact-page .site-header .site-branding img.logo-img,
    .faq-page .site-header .site-branding img.logo-img {
        width: 205px;
        max-width: 100%;
        max-height: none;
    }

    .contact-page .site-navigation,
    .faq-page .site-navigation {
        flex: 0 0 135px;
        align-self: stretch;
        display: flex;
        align-items: center;
        margin-left: auto !important;
    }

    .contact-page .main-menu,
    .contact-page .main-menu .navbar-collapse,
    .contact-page .main-menu .navigation,
    .faq-page .main-menu,
    .faq-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navigation {
        width: 100%;
    }

    .contact-page .main-menu .navbar-header,
    .faq-page .main-menu .navbar-header {
        display: none;
    }

    .contact-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse {
        display: block !important;
        position: static;
        max-height: none;
        overflow: visible;
        border-top: 0;
        background: transparent;
    }

    .contact-page .main-menu .navigation,
    .faq-page .main-menu .navigation {
        margin: 0;
        padding: 0;
    }

    .contact-page .main-menu .navigation>li,
    .faq-page .main-menu .navigation>li {
        float: none;
        width: 100%;
    }

    .contact-page .main-menu .navigation>li>a,
    .faq-page .main-menu .navigation>li>a {
        min-height: 61px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 10px 12px 10px 18px;
        border-bottom: 1px solid #e7e7e7;
        line-height: 28px;
        white-space: nowrap;
    }

    .contact-page .main-menu .navigation>li:first-child>a,
    .faq-page .main-menu .navigation>li:first-child>a {
        border-top: 1px solid #e7e7e7;
    }

    .contact-page .main-menu .navigation>li>ul,
    .faq-page .main-menu .navigation>li>ul {
        display: none;
    }

    .contact-page .main-menu .navigation .righticon,
    .faq-page .main-menu .navigation .righticon {
        top: 8px;
        right: 0;
        width: 40px;
        height: 45px;
        line-height: 45px;
    }
}

@media (max-width: 767px) {

    .contact-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu {
        padding: 18px 0 0;
        background: #ffffff;
    }

    .contact-page .site-header .site-header-menu>.container,
    .faq-page .site-header .site-header-menu>.container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .contact-page .site-header .site-header-menu>.container>.row,
    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .faq-page .site-header .site-header-menu>.container>.row,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        min-height: 0;
        flex-wrap: wrap;
        align-items: center !important;
    }

    .contact-page .site-header .site-branding,
    .faq-page .site-header .site-branding {
        flex: 0 0 100%;
        width: 100%;
        align-self: center;
        padding: 0 0 18px 20px;
        line-height: 0;
    }

    .contact-page .site-header .site-branding img.logo-img,
    .faq-page .site-header .site-branding img.logo-img {
        display: block;
        width: 250px;
        max-width: calc(100vw - 72px);
        max-height: 72px;
        height: auto;
    }

    .contact-page .site-navigation,
    .faq-page .site-navigation {
        flex: 0 0 100%;
        width: 100%;
        align-self: center;
        display: block;
        margin-left: 0 !important;
    }

    .contact-page .main-menu,
    .contact-page .main-menu .navbar-header,
    .contact-page .main-menu .navbar-collapse,
    .contact-page .main-menu .navigation,
    .faq-page .main-menu,
    .faq-page .main-menu .navbar-header,
    .faq-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navigation {
        width: 100%;
    }

    .contact-page .main-menu .navbar-header,
    .faq-page .main-menu .navbar-header {
        min-height: 58px;
        line-height: 1;
    }

    .contact-page .main-menu .navbar-header .navbar-toggler,
    .faq-page .main-menu .navbar-header .navbar-toggler {
        display: block;
        width: 58px;
        height: 58px;
        margin: 0 0 0 0;
        padding: 0;
        border: 2px solid #cbe9b4;
        border-radius: 8px;
        color: #42464e;
        background: #ffffff;
        font-size: 32px;
        line-height: 54px;
        text-align: center;
    }

    .contact-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse {
        position: static;
        width: 100%;
        max-height: none;
        overflow: visible;
        border-top: 3px solid #7fc540;
        background-color: #f7f8fa;
        box-shadow: none;
    }

    .contact-page .main-menu .navbar-collapse:not(.show),
    .faq-page .main-menu .navbar-collapse:not(.show) {
        display: none !important;
    }

    .contact-page .main-menu .navbar-collapse.show,
    .faq-page .main-menu .navbar-collapse.show {
        display: block !important;
    }

    .contact-page .main-menu .navigation,
    .faq-page .main-menu .navigation {
        margin: 0;
        padding: 0;
    }

    .contact-page .main-menu .navigation>li,
    .faq-page .main-menu .navigation>li {
        float: none;
        width: 100%;
    }

    .contact-page .main-menu .navigation>li>a,
    .faq-page .main-menu .navigation>li>a {
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 10px 16px 10px 18px;
        border-bottom: 1px solid rgba(9, 22, 42, 0.12);
        line-height: 28px;
        white-space: nowrap;
    }

    .contact-page .main-menu .navigation .righticon,
    .faq-page .main-menu .navigation .righticon {
        top: 6px;
        right: 0;
        width: 46px;
        height: 45px;
        line-height: 45px;
    }
}

/*
 * Phone header row
 * ----------------
 * Match the supplied phone reference: the logo and hamburger share the
 * first row, and the opened menu occupies the full row underneath them.
 */
@media (max-width: 767px) {

    .contact-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu {
        padding: 18px 0;
        position: relative;
    }

    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center !important;
        flex-wrap: nowrap;
    }

    .contact-page .site-header .site-branding,
    .faq-page .site-header .site-branding {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        flex: initial;
        padding: 0 0 0 20px;
        align-self: center;
    }

    .contact-page .site-header .site-branding img.logo-img,
    .faq-page .site-header .site-branding img.logo-img {
        width: 205px;
        max-width: calc(100vw - 100px);
        max-height: 72px;
    }

    .contact-page .site-navigation,
    .faq-page .site-navigation {
        display: contents;
        width: auto;
        flex: initial;
        margin-left: 0 !important;
    }

    .contact-page .main-menu,
    .faq-page .main-menu {
        display: contents;
        position: static;
    }

    .contact-page .main-menu .navbar-header,
    .faq-page .main-menu .navbar-header {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-height: 0;
        align-self: center;
        justify-self: end;
    }

    .contact-page .main-menu .navbar-header .navbar-toggler,
    .faq-page .main-menu .navbar-header .navbar-toggler {
        margin: 0;
    }

    .contact-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        position: static;
        margin-top: 0;
    }
}

/*
 * Service + inner-page mobile menu finishing touches
 * ---------------------------------------------------
 * The Service page uses the same header structure but had an older rule that
 * hid the Pages expand control. Remove the decorative hamburger frame from
 * all three inner pages and restore the normal dropdown interaction.
 */
@media (max-width: 767px) {

    .contact-page .main-menu .navbar-header .navbar-toggler,
    .faq-page .main-menu .navbar-header .navbar-toggler,
    .service-page .main-menu .navbar-header .navbar-toggler {
        border: 0 !important;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .contact-page .main-menu .navbar-header .navbar-toggler:focus,
    .faq-page .main-menu .navbar-header .navbar-toggler:focus,
    .service-page .main-menu .navbar-header .navbar-toggler:focus {
        outline: none;
    }

    .service-page {
        overflow-x: hidden;
    }

    .service-page .site-header .pre-header {
        display: none;
    }

    .service-page .site-header .site-header-menu {
        position: relative;
        padding: 18px 0;
        background: #ffffff;
    }

    .service-page .site-header .site-header-menu>.container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .service-page .site-header .site-header-menu>.container>.row,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .service-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center !important;
        flex-wrap: nowrap;
    }

    .service-page .site-header .site-branding {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        flex: initial;
        align-self: center;
        padding: 0 0 0 20px;
        line-height: 0;
    }

    .service-page .site-header .site-branding img.logo-img {
        display: block;
        width: 205px;
        max-width: calc(100vw - 100px);
        max-height: 72px;
        height: auto;
    }

    .service-page .site-navigation {
        display: contents;
        width: auto;
        flex: initial;
        margin-left: 0 !important;
    }

    .service-page .main-menu {
        display: contents;
        position: static;
    }

    .service-page .main-menu .navbar-header {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-height: 0;
        align-self: center;
        justify-self: end;
    }

    .service-page .main-menu .navbar-header .navbar-toggler {
        display: block;
        width: 58px;
        height: 58px;
        margin: 0;
        padding: 0;
        color: #42464e;
        font-size: 32px;
        line-height: 54px;
        text-align: center;
    }

    .service-page .main-menu .navbar-collapse {
        grid-column: 1 / -1;
        grid-row: 2;
        display: none !important;
        position: static;
        width: 100%;
        max-height: none;
        overflow: visible;
        margin-top: 0;
        border-top: 3px solid #7fc540;
        background: #f7f8fa;
        box-shadow: none;
    }

    .service-page .main-menu .navbar-collapse.show {
        display: block !important;
    }

    .service-page .main-menu .navigation {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .service-page .main-menu .navigation>li {
        float: none;
        width: 100%;
    }

    .service-page .main-menu .navigation>li>a {
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 10px 16px 10px 18px;
        border-bottom: 1px solid rgba(9, 22, 42, 0.12);
        line-height: 28px;
        white-space: nowrap;
    }

    /* Restore the Pages arrow and let the click handler control its submenu. */
    .service-page .main-menu .navigation>li.dropdown>.righticon {
        display: block !important;
        top: 6px;
        right: 0;
        width: 46px;
        height: 45px;
        line-height: 45px;
        font-size: 22px;
        cursor: pointer;
    }

    .service-page .main-menu .navigation>li.dropdown>ul {
        display: none !important;
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        border-top: 0;
        box-shadow: none;
    }

    .service-page .main-menu .navigation>li.dropdown>ul.open {
        display: block !important;
    }
}

/*
 * Compact sticky mobile header for the FAQ and Contact pages
 * -----------------------------------------------------------
 * These pages previously inherited a tablet-only vertical menu, which made
 * the header several hundred pixels tall on smaller screens. Keep the
 * navigation bar in the document flow, make it sticky while scrolling, and
 * let the hamburger menu open below the bar.
 */
@media (max-width: 1199px) {

    .contact-page,
    .faq-page {
        overflow-x: hidden;
    }

    .contact-page .site-header,
    .faq-page .site-header {
        position: sticky !important;
        top: 0;
        z-index: 1000;
    }

    .contact-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu {
        position: relative !important;
        top: auto;
        z-index: 1000;
        width: 100%;
        padding: 14px 0;
        background: #ffffff;
        box-shadow: 0 6px 18px rgba(31, 46, 24, 0.12);
    }

    .contact-page .site-header .site-header-menu>.container,
    .faq-page .site-header .site-header-menu>.container {
        width: 100%;
        max-width: none;
        padding-left: 15px;
        padding-right: 15px;
    }

    .contact-page .site-header .site-header-menu>.container>.row,
    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .faq-page .site-header .site-header-menu>.container>.row,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        min-height: 62px;
        flex-wrap: nowrap;
        align-items: center !important;
    }

    .contact-page .site-header .site-branding,
    .faq-page .site-header .site-branding {
        flex: 1 1 auto;
        width: auto;
        align-self: center;
        padding: 0 15px 0 10px;
        line-height: 0;
    }

    .contact-page .site-header .site-branding img.logo-img,
    .faq-page .site-header .site-branding img.logo-img {
        display: block;
        width: 205px;
        max-width: 100%;
        max-height: 62px;
        height: auto;
    }

    .contact-page .site-navigation,
    .faq-page .site-navigation {
        position: static;
        flex: 0 0 auto;
        width: auto;
        align-self: center;
        display: block;
        margin-left: auto !important;
    }

    .contact-page .main-menu,
    .faq-page .main-menu {
        position: static;
        width: auto;
    }

    .contact-page .main-menu .navbar-header,
    .faq-page .main-menu .navbar-header {
        width: auto;
        min-height: 0;
        line-height: 1;
    }

    .contact-page .main-menu .navbar-header .navbar-toggler,
    .faq-page .main-menu .navbar-header .navbar-toggler {
        display: block;
        width: 48px;
        height: 48px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        color: #42464e;
        background: transparent;
        font-size: 29px;
        line-height: 48px;
        text-align: center;
    }

    .contact-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        border-top: 3px solid #7fc540;
        background: #f7f8fa;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
    }

    .contact-page .main-menu .navbar-collapse:not(.show),
    .faq-page .main-menu .navbar-collapse:not(.show) {
        display: none !important;
    }

    .contact-page .main-menu .navbar-collapse.show,
    .faq-page .main-menu .navbar-collapse.show {
        display: block !important;
    }

    .contact-page .main-menu .navigation,
    .faq-page .main-menu .navigation {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .contact-page .main-menu .navigation>li,
    .faq-page .main-menu .navigation>li {
        float: none;
        width: 100%;
    }

    .contact-page .main-menu .navigation>li>a,
    .faq-page .main-menu .navigation>li>a {
        display: flex;
        align-items: center;
        min-height: 52px;
        margin: 0;
        padding: 10px 18px;
        line-height: 28px;
        border-bottom: 1px solid rgba(9, 22, 42, 0.12);
    }
}

@media (max-width: 767px) {

    .contact-page .site-header,
    .faq-page .site-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1100;
    }

    .contact-page .page-content,
    .faq-page .page-content {
        padding-top: 86px;
    }

    .contact-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu {
        padding: 12px 0;
    }

    .contact-page .site-header .site-header-menu>.container,
    .faq-page .site-header .site-header-menu>.container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .contact-page .site-header .site-branding,
    .faq-page .site-header .site-branding {
        padding-left: 5px;
    }

    .contact-page .site-header .site-branding img.logo-img,
    .faq-page .site-header .site-branding img.logo-img {
        width: 180px;
        max-width: calc(100vw - 90px);
        max-height: 58px;
    }

    .contact-page .main-menu .navbar-header .navbar-toggler,
    .faq-page .main-menu .navbar-header .navbar-toggler {
        width: 44px;
        height: 44px;
        font-size: 27px;
        line-height: 44px;
    }
}

/*
 * Service page mobile sticky header
 * --------------------------------
 * Keep the Service header stable while scrolling without changing the other
 * inner pages.
 */
@media (max-width: 767px) {
    .service-page {
        overflow-x: hidden !important;
    }

    .service-page .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1100 !important;
    }

    .service-page .site-header .pre-header {
        display: none !important;
    }

    .service-page .page-content {
        padding-top: 86px !important;
    }

    .service-page .site-header .site-header-menu {
        position: relative !important;
        width: 100% !important;
        padding: 12px 0 !important;
        background: #ffffff !important;
        box-shadow: 0 6px 18px rgba(31, 46, 24, 0.12) !important;
    }

    .service-page .site-header .site-header-menu>.container {
        width: 100% !important;
        max-width: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .service-page .site-header .site-header-menu>.container>.row,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .service-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        min-height: 0 !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .service-page .site-header .site-branding {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        flex: initial !important;
        align-self: center !important;
        padding: 0 0 0 5px !important;
        line-height: 0 !important;
    }

    .service-page .site-header .site-branding img.logo-img {
        display: block !important;
        width: 180px !important;
        max-width: calc(100vw - 90px) !important;
        max-height: 58px !important;
        height: auto !important;
    }

    .service-page .site-navigation {
        display: contents !important;
        width: auto !important;
        flex: initial !important;
        margin-left: 0 !important;
    }

    .service-page .main-menu {
        display: contents !important;
        position: static !important;
    }

    .service-page .main-menu .navbar-header {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-height: 0 !important;
        align-self: center !important;
        justify-self: end !important;
    }

    .service-page .main-menu .navbar-header .navbar-toggler {
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #42464e !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 27px !important;
        line-height: 44px !important;
        text-align: center !important;
    }

    .service-page .main-menu .navbar-collapse {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 86px) !important;
        overflow-y: auto !important;
        margin-top: 0 !important;
        border-top: 3px solid #7fc540 !important;
        background: #f7f8fa !important;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12) !important;
        z-index: 1200 !important;
    }

    .service-page .main-menu .navbar-collapse:not(.show) {
        display: none !important;
    }

    .service-page .main-menu .navbar-collapse.show {
        display: block !important;
    }
}

/*
 * About page mobile header
 * ------------------------
 * Keep About consistent with Service, FAQ, and Contact: a compact fixed
 * header, a two-column logo/menu row, and a scrollable menu below it.
 */
@media (max-width: 767px) {
    .about-page {
        overflow-x: hidden !important;
    }

    .about-page .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1100 !important;
        background: #ffffff !important;
    }

    .about-page .site-header .pre-header {
        display: none !important;
    }

    .about-page .page-content {
        padding-top: 86px !important;
    }

    .about-page .site-header .site-header-menu {
        position: relative !important;
        width: 100% !important;
        padding: 12px 0 !important;
        background: #ffffff !important;
        box-shadow: 0 6px 18px rgba(31, 46, 24, 0.12) !important;
    }

    .about-page .site-header .site-header-menu>.container,
    .about-page .site-header .site-header-menu>.container>.row,
    .about-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .about-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        min-height: 0 !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .about-page .site-header .site-branding {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        flex: initial !important;
        align-self: center !important;
        padding: 0 0 0 5px !important;
        line-height: 0 !important;
    }

    .about-page .site-header .site-branding img.logo-img {
        display: block !important;
        width: 180px !important;
        max-width: calc(100vw - 90px) !important;
        max-height: 58px !important;
        height: auto !important;
    }

    .about-page .site-navigation,
    .about-page .main-menu {
        display: contents !important;
        width: auto !important;
        position: static !important;
    }

    .about-page .main-menu .navbar-header {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-height: 0 !important;
        align-self: center !important;
        justify-self: end !important;
    }

    .about-page .main-menu .navbar-header .navbar-toggler {
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        color: #42464e !important;
        background: transparent !important;
        font-size: 27px !important;
        line-height: 44px !important;
        text-align: center !important;
    }

    .about-page .main-menu .navbar-collapse {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        position: static !important;
        width: 100% !important;
        max-height: calc(100vh - 76px) !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 3px solid #7fc540 !important;
        background: #f7f8fa !important;
        box-shadow: none !important;
    }

    .about-page .main-menu .navbar-collapse:not(.show) {
        display: none !important;
    }

    .about-page .main-menu .navbar-collapse.show {
        display: block !important;
    }

    .about-page .main-menu .navigation {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .about-page .main-menu .navigation>li {
        float: none !important;
        width: 100% !important;
    }

    .about-page .main-menu .navigation>li>a {
        display: flex !important;
        align-items: center !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 10px 18px !important;
        line-height: 28px !important;
        border-bottom: 1px solid rgba(9, 22, 42, 0.12) !important;
    }

    .about-page .main-menu .navigation>li.dropdown>ul {
        display: none !important;
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .about-page .main-menu .navigation>li.dropdown>ul.open {
        display: block !important;
    }
}

/*
 * Final Choice Optical mobile polish
 * ---------------------------------
 * Keep the header/logo treatment consistent between the Service and Contact
 * pages, and prevent the footer/form from inheriting oversized template
 * spacing on narrow screens.
 */
.contact-page .contact-appointment {
    width: calc(100% - 74px);
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

@media (max-width: 767px) {
    .contact-page .contact-appointment {
        width: calc(100% - 30px);
        margin: 28px auto 0;
    }

    .contact-page .appointment-inner {
        padding: 24px 18px 26px;
    }

    .contact-page .appointment-inner h3 {
        font-size: 24px;
        line-height: 1.32;
        margin-bottom: 10px;
    }

    .contact-page .appointment-inner>p {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 20px;
    }

    .contact-page .contact-form .form-group {
        margin-bottom: 18px !important;
        padding: 0 !important;
    }

    .contact-page .contact-form .form-label {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 4px;
    }

    .contact-page .contact-form .form-control {
        height: 36px;
        min-height: 36px;
        font-size: 14px;
        padding-bottom: 5px;
    }

    .contact-page .contact-form textarea.form-control {
        height: 70px;
        min-height: 70px;
    }

    .contact-page .contact-form .form-group:last-child {
        padding-top: 4px !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* The footer logo follows the text column instead of drifting to center. */
    .contact-page .footerlogo {
        text-align: left;
    }

    .contact-page .choice-optical-footer-logo,
    .service-page .choice-optical-footer-logo {
        width: 205px;
        max-width: 75vw;
        margin: 0 0 16px !important;
    }

    .contact-page .site-footer .bottom-footer,
    .service-page .site-footer .bottom-footer {
        text-align: left;
        padding: 20px 0 24px;
    }

    .contact-page .site-footer .bottom-footer .row,
    .service-page .site-footer .bottom-footer .row {
        display: flex;
        flex-direction: column;
    }

    .contact-page .site-footer .bottom-footer .col-sm-6,
    .service-page .site-footer .bottom-footer .col-sm-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .contact-page .site-footer .bottom-footer .col-sm-6+.col-sm-6,
    .service-page .site-footer .bottom-footer .col-sm-6+.col-sm-6 {
        margin-top: 8px;
    }

    .contact-page .site-footer .bottom-footer .list-inline,
    .service-page .site-footer .bottom-footer .list-inline {
        margin-bottom: 0;
    }

    /* One compact header pattern: wordmark on the left and menu beside it. */
    .contact-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu {
        padding: 10px 0 !important;
    }

    .contact-page .site-header .site-branding img.logo-img,
    .service-page .site-header .site-branding img.logo-img {
        width: 180px !important;
        max-width: calc(100vw - 88px) !important;
        max-height: 56px !important;
    }

    .contact-page .main-menu .navbar-header .navbar-toggler,
    .service-page .main-menu .navbar-header .navbar-toggler {
        width: 44px !important;
        height: 44px !important;
        font-size: 27px !important;
        line-height: 44px !important;
    }
}

/*
 * Match the About page's mobile/tablet header on Contact and Service.
 * The About page keeps the full wordmark in a normal-flow white bar with
 * the hamburger immediately beside it; these pages should use the same
 * proportions and menu behavior.
 */
@media (max-width: 1199px) {

    .contact-page .site-header,
    .service-page .site-header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        z-index: 999 !important;
    }

    .contact-page .page-content,
    .service-page .page-content {
        padding-top: 0 !important;
    }

    .contact-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu {
        position: relative !important;
        padding: 20px 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .contact-page .site-header .site-header-menu>.container,
    .service-page .site-header .site-header-menu>.container {
        width: 100% !important;
        max-width: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .contact-page .site-header .site-header-menu>.container>.row,
    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .service-page .site-header .site-header-menu>.container>.row,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        display: flex !important;
        min-height: 72px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .contact-page .site-header .site-branding,
    .service-page .site-header .site-branding {
        flex: 1 1 auto !important;
        width: auto !important;
        align-self: center !important;
        padding: 0 15px 0 10px !important;
        line-height: 0 !important;
    }

    .contact-page .site-header .site-branding img.logo-img,
    .service-page .site-header .site-branding img.logo-img {
        display: block !important;
        width: auto !important;
        max-width: calc(100vw - 90px) !important;
        max-height: 72px !important;
        height: auto !important;
    }

    .contact-page .site-navigation,
    .service-page .site-navigation {
        position: static !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: auto !important;
        align-self: center !important;
    }

    .contact-page .main-menu,
    .service-page .main-menu {
        position: static !important;
        display: block !important;
        width: auto !important;
    }

    .contact-page .main-menu .navbar-header,
    .service-page .main-menu .navbar-header {
        width: auto !important;
        min-height: 0 !important;
        line-height: 1 !important;
    }

    .contact-page .main-menu .navbar-header .navbar-toggler,
    .service-page .main-menu .navbar-header .navbar-toggler {
        display: block !important;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #42464e !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 29px !important;
        line-height: 48px !important;
        text-align: center !important;
    }

    .contact-page .main-menu .navbar-collapse,
    .service-page .main-menu .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 112px) !important;
        overflow-y: auto !important;
        border-top: 3px solid #7fc540 !important;
        background: #f7f8fa !important;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12) !important;
        z-index: 1200 !important;
    }

    .contact-page .main-menu .navbar-collapse:not(.show),
    .service-page .main-menu .navbar-collapse:not(.show) {
        display: none !important;
    }

    .contact-page .main-menu .navbar-collapse.show,
    .service-page .main-menu .navbar-collapse.show {
        display: block !important;
    }

    .contact-page .main-menu .navigation,
    .service-page .main-menu .navigation {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .contact-page .main-menu .navigation>li,
    .service-page .main-menu .navigation>li {
        float: none !important;
        width: 100% !important;
    }

    .contact-page .main-menu .navigation>li>a,
    .service-page .main-menu .navigation>li>a {
        display: flex !important;
        align-items: center !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 10px 18px !important;
        line-height: 28px !important;
        border-bottom: 1px solid rgba(9, 22, 42, 0.12) !important;
    }
}

/*
 * Final mobile/tablet header behavior for Contact and Service
 * ------------------------------------------------------------
 * Keep the complete header in view while the page scrolls. The imported
 * template has several older responsive rules that switch the header back to
 * normal flow, which causes the logo and navigation to disappear on phones.
 * The header itself is sticky so the open menu can still grow below it.
 */
@media (max-width: 1199px) {

    .contact-page .site-header,
    .service-page .site-header {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        z-index: 1100 !important;
        background: #ffffff !important;
    }

    .contact-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .contact-page .site-header .site-header-menu.sticky-header,
    .service-page .site-header .site-header-menu.sticky-header {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        background: #ffffff !important;
        box-shadow: 0 6px 18px rgba(31, 46, 24, 0.12) !important;
    }

    /* The script adds this class after scrolling; don't let it detach the
       menu from the sticky header on smaller screens. */
    .contact-page .site-header .site-header-menu.sticky-header,
    .service-page .site-header .site-header-menu.sticky-header {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .contact-page .site-header .site-navigation ul.navigation>li>a,
    .service-page .site-header .site-navigation ul.navigation>li>a {
        height: auto !important;
        line-height: 28px !important;
    }
}

@media (max-width: 767px) {

    .contact-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .contact-page .site-header .site-header-menu.sticky-header,
    .service-page .site-header .site-header-menu.sticky-header {
        padding: 10px 0 !important;
    }

    .contact-page .site-header .site-header-menu>.container,
    .service-page .site-header .site-header-menu>.container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .contact-page .site-header .site-branding img.logo-img,
    .service-page .site-header .site-branding img.logo-img {
        display: block !important;
        width: auto !important;
        max-width: calc(100vw - 88px) !important;
        max-height: 56px !important;
        height: auto !important;
    }

    .contact-page .main-menu .navbar-header .navbar-toggler,
    .service-page .main-menu .navbar-header .navbar-toggler {
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #42464e !important;
        font-size: 27px !important;
        line-height: 44px !important;
    }

    .contact-page .main-menu .navbar-collapse,
    .service-page .main-menu .navbar-collapse {
        top: 100% !important;
        max-height: calc(100vh - 76px) !important;
        overflow-y: auto !important;
    }
}

/*
 * Shared inner-page phone header
 * ------------------------------
 * About and FAQ still inherit the template's old 280px tablet header, while
 * Service and Contact have several earlier page-specific variants. Finish
 * all inner pages with the same compact header as the supplied mobile
 * reference: full wordmark on the left, hamburger on the right, and the
 * navigation below the green divider.
 */
@media (max-width: 767px) {

    .about-page .site-header,
    .faq-page .site-header,
    .service-page .site-header,
    .contact-page .site-header {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 1100 !important;
        background: #ffffff !important;
    }

    .about-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .contact-page .site-header .site-header-menu {
        position: relative !important;
        width: 100% !important;
        height: 100px !important;
        min-height: 100px !important;
        padding: 0 !important;
        background: #ffffff !important;
        border-bottom: 3px solid #7fc540 !important;
        box-shadow: 0 2px 8px rgba(31, 46, 24, 0.08) !important;
        overflow: visible !important;
    }

    .about-page .site-header .site-header-menu>.container,
    .faq-page .site-header .site-header-menu>.container,
    .service-page .site-header .site-header-menu>.container,
    .contact-page .site-header .site-header-menu>.container,
    .about-page .site-header .site-header-menu>.container>.row,
    .faq-page .site-header .site-header-menu>.container>.row,
    .service-page .site-header .site-header-menu>.container>.row,
    .contact-page .site-header .site-header-menu>.container>.row,
    .about-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .about-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        height: 100px !important;
        min-height: 100px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .about-page .site-header .site-branding,
    .faq-page .site-header .site-branding,
    .service-page .site-header .site-branding,
    .contact-page .site-header .site-branding {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        align-self: center !important;
        width: auto !important;
        padding: 0 0 0 16px !important;
        line-height: 0 !important;
    }

    .about-page .site-header .site-branding img.logo-img,
    .faq-page .site-header .site-branding img.logo-img,
    .service-page .site-header .site-branding img.logo-img,
    .contact-page .site-header .site-branding img.logo-img {
        display: block !important;
        width: 130px !important;
        max-width: calc(100vw - 76px) !important;
        max-height: 52px !important;
        height: auto !important;
    }

    .about-page .site-navigation,
    .faq-page .site-navigation,
    .service-page .site-navigation,
    .contact-page .site-navigation {
        position: static !important;
        display: block !important;
        flex: 0 0 auto !important;
        align-self: center !important;
        width: auto !important;
        margin-left: auto !important;
        margin-right: 16px !important;
    }

    .about-page .main-menu .navbar-header,
    .faq-page .main-menu .navbar-header,
    .service-page .main-menu .navbar-header,
    .contact-page .main-menu .navbar-header {
        width: auto !important;
        min-height: 0 !important;
        line-height: 1 !important;
    }

    .about-page .main-menu .navbar-toggler,
    .faq-page .main-menu .navbar-toggler,
    .service-page .main-menu .navbar-toggler,
    .contact-page .main-menu .navbar-toggler {
        display: block !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        color: #42464e !important;
        background: transparent !important;
        font-size: 27px !important;
        line-height: 44px !important;
        text-align: center !important;
    }

    .about-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse,
    .service-page .main-menu .navbar-collapse,
    .contact-page .main-menu .navbar-collapse {
        position: absolute !important;
        top: 100px !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 3px solid #7fc540 !important;
        background: #f7f8fa !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .12) !important;
        z-index: 1200 !important;
    }

    .about-page .main-menu .navigation>li,
    .faq-page .main-menu .navigation>li,
    .service-page .main-menu .navigation>li,
    .contact-page .main-menu .navigation>li {
        float: none !important;
        width: 100% !important;
    }

    .about-page .main-menu .navigation>li>a,
    .faq-page .main-menu .navigation>li>a,
    .service-page .main-menu .navigation>li>a,
    .contact-page .main-menu .navigation>li>a {
        display: flex !important;
        align-items: center !important;
        min-height: 51px !important;
        height: 51px !important;
        margin: 0 !important;
        padding: 10px 18px !important;
        color: #30343a !important;
        background: #f7f8fa !important;
        border-bottom: 1px solid #dedfe1 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        text-transform: uppercase !important;
    }

    .about-page .main-menu .navigation>li.dropdown>a,
    .faq-page .main-menu .navigation>li.dropdown>a,
    .service-page .main-menu .navigation>li.dropdown>a,
    .contact-page .main-menu .navigation>li.dropdown>a {
        color: #7fc540 !important;
        background: #ffffff !important;
    }

    /* The Pages row is the single green navigation state in the reference.
       Do not also highlight whichever page is currently open. */
    .about-page .main-menu .navigation>li.active:not(.dropdown)>a,
    .faq-page .main-menu .navigation>li.active:not(.dropdown)>a,
    .service-page .main-menu .navigation>li.active:not(.dropdown)>a,
    .contact-page .main-menu .navigation>li.active:not(.dropdown)>a {
        color: #30343a !important;
        background: #f7f8fa !important;
    }
}

/*
 * Contact page: keep the navbar permanently fixed during scrolling.
 * ---------------------------------------------------------------
 * This is intentionally more explicit than the shared sticky rule because
 * the Contact page has legacy template overrides that can release a sticky
 * header from the top of the viewport.
 */
@media (max-width: 1199px) {
    .contact-page .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        z-index: 1100 !important;
    }

    .contact-page .page-content {
        padding-top: 112px !important;
    }

    .contact-page .site-header .site-header-menu,
    .contact-page .site-header .site-header-menu.sticky-header {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .contact-page .page-content {
        padding-top: 76px !important;
    }
}

/*
 * Contact form layout polish
 * --------------------------
 * Match the supplied mobile references: the form should run edge-to-edge
 * inside the page instead of sitting in a narrow outer card, and each field
 * should use a compact label/input row.
 */
.contact-page .appointment-image {
    background-position: 72% center;
}

@media (max-width: 767px) {
    .contact-page .page-content>section.section-mdt {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-page .contact-appointment {
        width: 100% !important;
        max-width: none !important;
        margin: 24px 0 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .contact-page .appointment-inner {
        padding: 22px 18px 26px !important;
    }

    .contact-page .appointment-inner h3 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .contact-page .appointment-inner>p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-bottom: 18px !important;
    }

    .contact-page .contact-form .form-group {
        margin: 0 0 10px !important;
        padding: 0 !important;
    }

    .contact-page .contact-form .form-label {
        margin-bottom: 2px !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .contact-page .contact-form .form-control {
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 0 4px !important;
        font-size: 14px !important;
    }

    .contact-page .contact-form textarea.form-control {
        height: 64px !important;
        min-height: 64px !important;
    }

    .contact-page .contact-form .form-group:last-child {
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
}

/*
 * Contact appointment row: remove the extra inset wrapper
 * --------------------------------------------------------
 * The form row already sits inside the page container, so the additional
 * calc(100% - ...) width creates a second visible box around it.
 */
.contact-page .contact-appointment {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (min-width: 768px) {
    .contact-page .appointment-inner {
        padding: 36px 44px 28px !important;
    }

    .contact-page .appointment-inner h3 {
        margin-bottom: 8px !important;
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    .contact-page .appointment-inner>p {
        margin-bottom: 20px !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .contact-page .contact-form form .form-group {
        margin-bottom: 16px !important;
    }

    .contact-page .contact-form .form-label {
        margin-bottom: 3px !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .contact-page .contact-form .form-control {
        height: 32px !important;
        min-height: 32px !important;
        font-size: 14px !important;
    }

    .contact-page .contact-form textarea.form-control {
        height: 66px !important;
        min-height: 66px !important;
    }

    .contact-page .contact-form .form-group:last-child {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {
    .contact-page .contact-appointment {
        width: 100% !important;
        margin: 24px 0 0 !important;
    }
}

/*
 * Full-bleed appointment panel
 * ----------------------------
 * The appointment row is nested inside a Bootstrap container. Break only
 * this row out of that container so the image and form do not get a second
 * left/right gutter around them.
 */
@media (min-width: 768px) {
    .contact-page .page-content>section.section-mdt>.container>.contact-appointment {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc((100% - 100vw) / 2) !important;
        margin-right: 0 !important;
    }
}

/*
 * Contact form panel sizing
 * ------------------------
 * Keep the appointment panel flush with the viewport on desktop. The panel
 * already uses the 4/8 Bootstrap columns from the markup, so the image stays
 * at one-third while the form occupies the remaining two-thirds.
 */
@media (min-width: 768px) {
    .contact-page .contact-appointment {
        margin-top: 0 !important;
    }

    .contact-page .page-content>section.section-mdt>.container>.contact-appointment {
        width: 100vw !important;
        max-width: none !important;
        margin-top: 0 !important;
        margin-left: calc((100% - 100vw) / 2) !important;
        margin-right: 0 !important;
    }

    .contact-page .appointment-inner {
        padding: 24px 38px 26px 20px !important;
    }
}

/*
 * Contact desktop layout below the wide-screen breakpoint
 * --------------------------------------------------------
 * The legacy template switches this page to its mobile treatment at 1199px.
 * Keep that treatment for phones only; tablet and normal desktop widths should
 * retain the same header, banner, and split image/form appointment panel.
 */
@media (min-width: 768px) and (max-width: 1199px) {
    .contact-page .site-header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
    }

    .contact-page .site-header .pre-header,
    .contact-page .site-header .header-button,
    .contact-page .site-header .menu-right-box {
        display: block !important;
    }

    .contact-page .site-header .menu-right-box {
        display: flex !important;
    }

    .contact-page .site-header .site-header-menu {
        position: relative !important;
        padding: 30px 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .contact-page .site-header .site-header-menu>.container {
        width: 100% !important;
        max-width: 960px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .contact-page .site-header .site-header-menu>.container>.row,
    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        min-height: 105px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .contact-page .site-header .site-branding {
        flex: 1 1 auto !important;
        align-self: center !important;
        padding-left: 0 !important;
    }

    .contact-page .site-header .site-branding img.logo-img {
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        max-height: 72px !important;
    }

    .contact-page .site-navigation {
        position: static !important;
        flex: 0 0 auto !important;
        width: auto !important;
        display: block !important;
        margin-left: auto !important;
        align-self: center !important;
    }

    .contact-page .main-menu,
    .contact-page .main-menu .navbar-header {
        position: static !important;
        width: auto !important;
        display: block !important;
    }

    .contact-page .main-menu .navbar-header .navbar-toggler {
        display: none !important;
    }

    .contact-page .main-menu .navbar-collapse {
        position: static !important;
        display: block !important;
        width: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .contact-page .main-menu .navigation {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .contact-page .main-menu .navigation>li {
        float: left !important;
        width: auto !important;
    }

    .contact-page .main-menu .navigation>li>a {
        display: block !important;
        min-height: 0 !important;
        height: 105px !important;
        line-height: 105px !important;
        margin: 0 10px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .contact-page .inner-banner {
        display: table !important;
        height: 300px !important;
        min-height: 0 !important;
    }

    .contact-page .page-content {
        padding-top: 0 !important;
    }

    .contact-page .page-content>section.section-mdt {
        display: block !important;
    }

    .contact-page .page-content>section.section-mdt>.container {
        display: block !important;
    }

    .contact-page .appointment-image {
        display: block !important;
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    .contact-page .appointment-inner {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
}

/*
 * Desktop contact card sizing
 * ---------------------------
 * Keep the appointment row centered with an even reference-style side gap and
 * remove the extra top gap so the image/form panel starts cleanly below the
 * contact info.
 */
@media (min-width: 768px) {
    .contact-page .contact-appointment {
        width: calc(100vw - 56px) !important;
        max-width: none !important;
        margin: 0 auto -150px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        overflow: hidden !important;
        box-shadow: 0 18px 46px rgba(31, 46, 24, 0.14) !important;
        border: 0 !important;
        border-radius: 2px !important;
    }

    .contact-page .page-content>section.section-mdt>.container>.contact-appointment {
        width: calc(100vw - 56px) !important;
        max-width: none !important;
        margin: 0 auto -150px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        overflow: hidden !important;
        box-shadow: 0 18px 46px rgba(31, 46, 24, 0.14) !important;
        border: 0 !important;
        border-radius: 2px !important;
    }

    .contact-page .appointment-image {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-page .appointment-inner {
        padding: 48px 48px 36px !important;
    }
}

/*
 * Shared phone header
 * -------------------
 * The imported template has several older <=1199px rules. On phones all
 * inner pages should use the same compact header as About: the complete logo
 * stays in the header and the navigation opens below it when the hamburger
 * is tapped.
 */
@media (max-width: 767px) {

    .about-page .site-header,
    .contact-page .site-header,
    .faq-page .site-header,
    .service-page .site-header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        z-index: 1100 !important;
        background: #ffffff !important;
    }

    .about-page .site-header .site-header-menu,
    .contact-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .about-page .site-header .site-header-menu.sticky-header,
    .contact-page .site-header .site-header-menu.sticky-header,
    .faq-page .site-header .site-header-menu.sticky-header,
    .service-page .site-header .site-header-menu.sticky-header {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        padding: 0 !important;
        background: #ffffff !important;
        border-bottom: 3px solid #7fc540 !important;
        box-shadow: none !important;
        height: 100px !important;
        min-height: 100px !important;
        overflow: visible !important;
    }

    /* Let the open menu occupy real page space instead of covering the hero. */
    .about-page .site-header .site-header-menu:has(.navbar-collapse.show),
    .contact-page .site-header .site-header-menu:has(.navbar-collapse.show),
    .faq-page .site-header .site-header-menu:has(.navbar-collapse.show),
    .service-page .site-header .site-header-menu:has(.navbar-collapse.show) {
        margin-bottom: 200px !important;
    }

    .about-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open),
    .contact-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open),
    .faq-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open),
    .service-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open) {
        margin-bottom: 296px !important;
    }

    .about-page .site-header .site-header-menu>.container,
    .contact-page .site-header .site-header-menu>.container,
    .faq-page .site-header .site-header-menu>.container,
    .service-page .site-header .site-header-menu>.container {
        width: 100% !important;
        max-width: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .about-page .site-header .site-header-menu>.container>.row,
    .about-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .contact-page .site-header .site-header-menu>.container>.row,
    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .faq-page .site-header .site-header-menu>.container>.row,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .service-page .site-header .site-header-menu>.container>.row,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .about-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .contact-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        display: flex !important;
        min-height: 97px !important;
        height: auto !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .about-page .site-header .site-branding,
    .contact-page .site-header .site-branding,
    .faq-page .site-header .site-branding,
    .service-page .site-header .site-branding {
        flex: 1 1 auto !important;
        width: auto !important;
        align-self: center !important;
        padding: 0 15px 0 10px !important;
        line-height: 0 !important;
    }

    .about-page .site-header .site-branding img,
    .contact-page .site-header .site-branding img,
    .faq-page .site-header .site-branding img,
    .service-page .site-header .site-branding img {
        display: block !important;
        width: auto !important;
        max-width: calc(100vw - 88px) !important;
        max-height: 60px !important;
        height: auto !important;
    }

    .about-page .site-navigation,
    .contact-page .site-navigation,
    .faq-page .site-navigation,
    .service-page .site-navigation {
        position: static !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: auto !important;
        align-self: center !important;
    }

    .about-page .main-menu,
    .contact-page .main-menu,
    .faq-page .main-menu,
    .service-page .main-menu {
        position: static !important;
        display: block !important;
        width: auto !important;
    }

    .about-page .main-menu .navbar-header,
    .contact-page .main-menu .navbar-header,
    .faq-page .main-menu .navbar-header,
    .service-page .main-menu .navbar-header {
        width: auto !important;
        min-height: 0 !important;
        line-height: 1 !important;
    }

    .about-page .main-menu .navbar-header .navbar-toggler,
    .contact-page .main-menu .navbar-header .navbar-toggler,
    .faq-page .main-menu .navbar-header .navbar-toggler,
    .service-page .main-menu .navbar-header .navbar-toggler {
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #42464e !important;
        font-size: 27px !important;
        line-height: 44px !important;
        text-align: center !important;
    }

    .about-page .main-menu .navbar-collapse,
    .contact-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse,
    .service-page .main-menu .navbar-collapse {
        position: absolute !important;
        top: calc(100% + 3px) !important;
        left: -15px !important;
        width: calc(100% + 30px) !important;
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        border-top: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
        z-index: 1200 !important;
    }

    .about-page .main-menu .navbar-collapse:not(.show),
    .contact-page .main-menu .navbar-collapse:not(.show),
    .faq-page .main-menu .navbar-collapse:not(.show),
    .service-page .main-menu .navbar-collapse:not(.show) {
        display: none !important;
    }

    .about-page .main-menu .navbar-collapse.show,
    .contact-page .main-menu .navbar-collapse.show,
    .faq-page .main-menu .navbar-collapse.show,
    .service-page .main-menu .navbar-collapse.show {
        display: block !important;
    }

    .about-page .main-menu .navigation,
    .contact-page .main-menu .navigation,
    .faq-page .main-menu .navigation,
    .service-page .main-menu .navigation {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .about-page .main-menu .navigation>li,
    .contact-page .main-menu .navigation>li,
    .faq-page .main-menu .navigation>li,
    .service-page .main-menu .navigation>li {
        float: none !important;
        width: 100% !important;
    }

    .about-page .main-menu .navigation>li>a,
    .contact-page .main-menu .navigation>li>a,
    .faq-page .main-menu .navigation>li>a,
    .service-page .main-menu .navigation>li>a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;

        margin: 0 !important;
        padding: 10px 56px 10px 18px !important;
        color: #25282d !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        border-bottom: 1px solid #e3e3e3 !important;
    }

    .about-page .main-menu .navigation .righticon,
    .contact-page .main-menu .navigation .righticon,
    .faq-page .main-menu .navigation .righticon,
    .service-page .main-menu .navigation .righticon {
        display: block !important;
        top: 3px !important;
        right: 0 !important;
        width: 48px !important;
        height: 45px !important;
        line-height: 45px !important;
        border-left: 0 !important;
        text-align: center !important;
    }

    /* Contact's old phone rules hid its banner and intro section. */
    .contact-page .page-content {
        padding-top: 0 !important;
    }

    .contact-page .inner-banner {
        display: table !important;
        height: 220px !important;
        min-height: 0 !important;
    }

    .contact-page .page-content>section.section-mdt {
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-page .page-content>section.section-mdt>.container {
        display: block !important;
    }

    .service-page .page-content {
        padding-top: 0 !important;
    }
}

/*
 * Final inner-page phone header behavior
 * --------------------------------------
 * Keep the compact header visible during scrolling while leaving it in the
 * document flow. This lets the open navigation add real space before the
 * banner instead of covering it.
 */
@media (max-width: 767px) {

    .about-page,
    .faq-page,
    .service-page {
        overflow-x: hidden !important;
    }

    .about-page .site-header,
    .faq-page .site-header,
    .service-page .site-header {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        z-index: 1100 !important;
        background: #ffffff !important;
    }

    .about-page .page-content,
    .faq-page .page-content,
    .service-page .page-content {
        padding-top: 0 !important;
    }

    .about-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .about-page .site-header .site-header-menu.sticky-header,
    .faq-page .site-header .site-header-menu.sticky-header,
    .service-page .site-header .site-header-menu.sticky-header {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        height: 100px !important;
        min-height: 100px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #ffffff !important;
        border-bottom: 3px solid #7fc540 !important;
        box-shadow: none !important;
    }

    .about-page .site-header .site-header-menu:has(.navbar-collapse.show),
    .faq-page .site-header .site-header-menu:has(.navbar-collapse.show),
    .service-page .site-header .site-header-menu:has(.navbar-collapse.show) {
        margin-bottom: 200px !important;
    }

    .about-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open),
    .faq-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open),
    .service-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open) {
        margin-bottom: 296px !important;
    }

    .about-page .main-menu .navigation>li.dropdown>a,
    .faq-page .main-menu .navigation>li.dropdown>a,
    .service-page .main-menu .navigation>li.dropdown>a {
        color: #7fc540 !important;
        background: #ffffff !important;
    }

    .about-page .main-menu .navigation>li.dropdown>.righticon,
    .faq-page .main-menu .navigation>li.dropdown>.righticon,
    .service-page .main-menu .navigation>li.dropdown>.righticon {
        left: auto !important;
        right: 0 !important;
        border-left: 0 !important;
        z-index: 2 !important;
    }
}

/*
 * Shared inner-page phone navigation
 * ----------------------------------
 * Keep the mobile menu consistent on About, FAQ, and Service. The menu must
 * remain in the header's document flow when opened so it pushes the banner
 * down instead of covering the top of the page.
 */
@media (max-width: 767px) {

    /*
     * Older inner-page rules add a large bottom margin when the collapse is
     * open. The menu now participates in normal flow, so that spacer would
     * create the blank area above the banner shown in the mobile reference.
     */
    .about-page .site-header .site-header-menu:has(.navbar-collapse.show),
    .faq-page .site-header .site-header-menu:has(.navbar-collapse.show),
    .service-page .site-header .site-header-menu:has(.navbar-collapse.show),
    .about-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open),
    .faq-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open),
    .service-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open) {
        margin-bottom: 0 !important;
    }

    .about-page .site-header .pre-header,
    .faq-page .site-header .pre-header,
    .service-page .site-header .pre-header,
    .about-page .site-header .menu-right-box,
    .faq-page .site-header .menu-right-box,
    .service-page .site-header .menu-right-box {
        display: none !important;
    }

    .about-page .site-header,
    .faq-page .site-header,
    .service-page .site-header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        z-index: 1100 !important;
        background: #ffffff !important;
    }

    .about-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .about-page .site-header .site-header-menu.sticky-header,
    .faq-page .site-header .site-header-menu.sticky-header,
    .service-page .site-header .site-header-menu.sticky-header {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding: 18px 0 0 !important;
        overflow: visible !important;
        background: #ffffff !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

    .about-page .site-header .site-header-menu>.container,
    .faq-page .site-header .site-header-menu>.container,
    .service-page .site-header .site-header-menu>.container {
        width: 100% !important;
        max-width: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .about-page .site-header .site-header-menu>.container>.row,
    .about-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .faq-page .site-header .site-header-menu>.container>.row,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .service-page .site-header .site-header-menu>.container>.row,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .about-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        min-height: 0 !important;
        height: auto !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .about-page .site-header .site-branding,
    .faq-page .site-header .site-branding,
    .service-page .site-header .site-branding {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        flex: initial !important;
        align-self: center !important;
        padding: 0 0 18px 20px !important;
        line-height: 0 !important;
    }

    .about-page .site-header .site-branding img.logo-img,
    .faq-page .site-header .site-branding img.logo-img,
    .service-page .site-header .site-branding img.logo-img {
        display: block !important;
        width: 140px !important;
        max-width: calc(100vw - 100px) !important;
        max-height: 72px !important;
        height: auto !important;
    }

    .about-page .site-navigation,
    .faq-page .site-navigation,
    .service-page .site-navigation,
    .about-page .main-menu,
    .faq-page .main-menu,
    .service-page .main-menu {
        display: contents !important;
        width: auto !important;
        flex: initial !important;
        margin-left: 0 !important;
        position: static !important;
    }

    .about-page .main-menu .navbar-header,
    .faq-page .main-menu .navbar-header,
    .service-page .main-menu .navbar-header {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-height: 0 !important;
        align-self: center !important;
        justify-self: end !important;
    }

    .about-page .main-menu .navbar-header .navbar-toggler,
    .faq-page .main-menu .navbar-header .navbar-toggler,
    .service-page .main-menu .navbar-header .navbar-toggler {
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #42464e !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 27px !important;
        line-height: 44px !important;
        text-align: center !important;
    }

    .about-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse,
    .service-page .main-menu .navbar-collapse {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        border-top: 3px solid #7fc540 !important;
        background: #ffffff !important;
        box-shadow: none !important;
        z-index: auto !important;
    }

    .about-page .main-menu .navbar-collapse:not(.show),
    .faq-page .main-menu .navbar-collapse:not(.show),
    .service-page .main-menu .navbar-collapse:not(.show) {
        display: none !important;
    }

    .about-page .main-menu .navbar-collapse.show,
    .faq-page .main-menu .navbar-collapse.show,
    .service-page .main-menu .navbar-collapse.show {
        display: block !important;
    }

    .about-page .main-menu .navigation,
    .faq-page .main-menu .navigation,
    .service-page .main-menu .navigation {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .about-page .main-menu .navigation>li,
    .faq-page .main-menu .navigation>li,
    .service-page .main-menu .navigation>li {
        float: none !important;
        width: 100% !important;
    }

    .about-page .main-menu .navigation>li>a,
    .faq-page .main-menu .navigation>li>a,
    .service-page .main-menu .navigation>li>a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 10px 56px 10px 20px !important;
        color: #25282d !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        text-transform: uppercase !important;
        border-bottom: 1px solid #e3e3e3 !important;
    }

    .about-page .main-menu .navigation>li.dropdown>a,
    .faq-page .main-menu .navigation>li.dropdown>a,
    .service-page .main-menu .navigation>li.dropdown>a {
        color: #7fc540 !important;
        background: #ffffff !important;
    }

    .about-page .main-menu .navigation .righticon,
    .faq-page .main-menu .navigation .righticon,
    .service-page .main-menu .navigation .righticon {
        display: block !important;
        position: absolute !important;
        top: 3px !important;
        right: 0 !important;
        width: 48px !important;
        height: 51px !important;
        line-height: 51px !important;
        border-left: 1px solid rgba(120, 120, 120, 0.2) !important;
        text-align: center !important;
        z-index: 2 !important;
    }

    .about-page .main-menu .navigation>li>ul,
    .faq-page .main-menu .navigation>li>ul,
    .service-page .main-menu .navigation>li>ul {
        display: none !important;
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        border-top: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .about-page .main-menu .navigation>li>ul.open,
    .faq-page .main-menu .navigation>li>ul.open,
    .service-page .main-menu .navigation>li>ul.open {
        display: block !important;
    }

    .about-page .main-menu .navigation>li>ul>li>a,
    .faq-page .main-menu .navigation>li>ul>li>a,
    .service-page .main-menu .navigation>li>ul>li>a {
        min-height: 50px !important;
        padding: 10px 20px 10px 34px !important;
        border-bottom: 1px solid #e3e3e3 !important;
    }
}

/*
 * Keep the phone menu typography identical on every inner page.
 * The active template classes previously made Pages or Service green,
 * which made the repeated mobile menu look inconsistent.
 */
@media (max-width: 767px) {

    .about-page .main-menu .navigation>li>a,
    .about-page .main-menu .navigation>li.active>a,
    .about-page .main-menu .navigation>li>a:hover,
    .about-page .main-menu .navigation>li>a:focus,
    .faq-page .main-menu .navigation>li>a,
    .faq-page .main-menu .navigation>li.active>a,
    .faq-page .main-menu .navigation>li>a:hover,
    .faq-page .main-menu .navigation>li>a:focus,
    .service-page .main-menu .navigation>li>a,
    .service-page .main-menu .navigation>li.active>a,
    .service-page .main-menu .navigation>li>a:hover,
    .service-page .main-menu .navigation>li>a:focus {
        color: #25282d !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
    }

    .about-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu {
        height: auto !important;
        min-height: 0 !important;
    }

    .about-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse,
    .service-page .main-menu .navbar-collapse {
        position: static !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /*
     * The open menu and the inner banner are consecutive blocks. Do not let
     * legacy page-content/header spacing create a gap or move the banner
     * behind the navigation.
     */
    .about-page .site-header,
    .faq-page .site-header,
    .service-page .site-header,
    .about-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .about-page .page-content,
    .faq-page .page-content,
    .service-page .page-content,
    .about-page .inner-banner,
    .faq-page .inner-banner,
    .service-page .inner-banner {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .about-page .page-content,
    .faq-page .page-content,
    .service-page .page-content {
        padding-top: 0 !important;
    }
}

/*
 * Match the Home page mobile dropdown behavior.
 * ----------------------------------------------
 * The inner-page hero stays at its normal document position while the open
 * white navigation overlays its upper portion. This prevents the Service and
 * About images from being pushed farther down when the hamburger is clicked.
 */
@media (max-width: 767px) {

    .about-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .about-page .site-header .site-header-menu.sticky-header,
    .faq-page .site-header .site-header-menu.sticky-header,
    .service-page .site-header .site-header-menu.sticky-header {
        height: 122px !important;
        min-height: 122px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        border-bottom: 0 !important;
    }

    .about-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        height: 122px !important;
        min-height: 122px !important;
        grid-template-rows: 122px auto !important;
    }

    .about-page .site-header .site-branding,
    .faq-page .site-header .site-branding,
    .service-page .site-header .site-branding {
        padding: 0 0 0 20px !important;
        align-self: center !important;
    }

    .about-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse,
    .service-page .main-menu .navbar-collapse {
        position: absolute !important;
        top: 122px !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 122px) !important;
        overflow-y: auto !important;
        margin: 0 !important;
        border-top: 3px solid #7fc540 !important;
        background: #ffffff !important;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12) !important;
        z-index: 1200 !important;
    }

    .about-page .main-menu .navigation>li>a,
    .faq-page .main-menu .navigation>li>a,
    .service-page .main-menu .navigation>li>a {
        min-height: 65px !important;
        height: 65px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .about-page .main-menu .navigation .righticon,
    .faq-page .main-menu .navigation .righticon,
    .service-page .main-menu .navigation .righticon {
        height: 62px !important;
        line-height: 62px !important;
    }

    .about-page .site-header .site-header-menu:has(.navbar-collapse.show),
    .faq-page .site-header .site-header-menu:has(.navbar-collapse.show),
    .service-page .site-header .site-header-menu:has(.navbar-collapse.show),
    .about-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open),
    .faq-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open),
    .service-page .site-header .site-header-menu:has(.navbar-collapse.show):has(.navigation > li.dropdown > ul.open) {
        margin-bottom: 0 !important;
    }
}

/*
 * Final mobile sticky header override
 * -----------------------------------
 * Keep the logo and hamburger visible while scrolling on every inner page.
 * This comes last because older template rules below/above the responsive
 * sections can otherwise reset the header back to normal document flow.
 */
@media (max-width: 767px) {

    .about-page .site-header,
    .service-page .site-header,
    .faq-page .site-header,
    .contact-page .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1100 !important;
        background: #ffffff !important;
    }

    .about-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu,
    .contact-page .site-header .site-header-menu {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        height: 122px !important;
        min-height: 122px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        background: #ffffff !important;
        border-bottom: 3px solid #7fc540 !important;
        box-shadow: 0 4px 12px rgba(31, 46, 24, 0.12) !important;
    }

    .about-page .page-content,
    .service-page .page-content,
    .faq-page .page-content,
    .contact-page .page-content {
        padding-top: 122px !important;
    }

    .about-page .main-menu .navbar-collapse,
    .service-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse,
    .contact-page .main-menu .navbar-collapse {
        top: 122px !important;
        max-height: calc(100vh - 122px) !important;
        z-index: 1200 !important;
    }
}

/*
 * Mobile menu side-cover and Pages submenu
 * ----------------------------------------
 * Keep the hero in place, darken the viewport around the open navigation,
 * and use the green submenu treatment from the supplied reference.
 */
@media (max-width: 767px) {

    .about-page .site-header .site-header-menu:has(.navbar-collapse.show)::after,
    .faq-page .site-header .site-header-menu:has(.navbar-collapse.show)::after,
    .service-page .site-header .site-header-menu:has(.navbar-collapse.show)::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: 100vh;
        min-height: 100vh;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.42);
        pointer-events: none;
        z-index: 1100;
    }

    .about-page .site-header .site-branding,
    .faq-page .site-header .site-branding,
    .service-page .site-header .site-branding,
    .about-page .main-menu .navbar-header,
    .faq-page .main-menu .navbar-header,
    .service-page .main-menu .navbar-header {
        position: relative !important;
        z-index: 1202 !important;
    }

    .about-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    .faq-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    .service-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    .about-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    .faq-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    .service-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    .about-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    .faq-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    .service-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus {
        min-height: 56px !important;
        height: 56px !important;
        padding: 10px 20px 10px 34px !important;
        color: #ffffff !important;
        background: #7fc540 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
    }

    .about-page .main-menu .navigation>li.dropdown>ul.open>li:last-child>a,
    .faq-page .main-menu .navigation>li.dropdown>ul.open>li:last-child>a,
    .service-page .main-menu .navigation>li.dropdown>ul.open>li:last-child>a {
        border-bottom: 0 !important;
    }

    .about-page .main-menu .navigation>li.dropdown>.righticon,
    .faq-page .main-menu .navigation>li.dropdown>.righticon,
    .service-page .main-menu .navigation>li.dropdown>.righticon {
        border-left: 1px solid rgba(120, 120, 120, 0.2) !important;
        z-index: 1201 !important;
    }
}

/*
 * Shared phone navigation
 * -----------------------
 * Keep the home navigation treatment consistent on every page: a compact
 * green brand bar followed by full-width, easy-to-tap menu rows.  The
 * existing desktop navigation and the contact page's form-specific mobile
 * layout are intentionally left untouched.
 */
@media (max-width: 767px) {

    .home-page .site-header,
    .about-page .site-header,
    .service-page .site-header,
    .faq-page .site-header,
    .contact-page .site-header {
        width: 100%;
        margin: 0;
        position: relative;
        z-index: 1100;
    }

    .home-page .site-header .site-header-menu,
    .about-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu {
        height: 100px !important;
        min-height: 100px !important;
        padding: 0 !important;
        background: #7fc540 !important;
        border-bottom: 3px solid #7fc540 !important;
        overflow: visible !important;
    }

    .home-page .site-header .site-header-menu>.container,
    .about-page .site-header .site-header-menu>.container,
    .service-page .site-header .site-header-menu>.container,
    .faq-page .site-header .site-header-menu>.container {
        width: 100%;
        max-width: none;
        padding: 0 16px;
    }

    .home-page .site-header .site-header-menu>.container>.row,
    .home-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .about-page .site-header .site-header-menu>.container>.row,
    .about-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .service-page .site-header .site-header-menu>.container>.row,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .faq-page .site-header .site-header-menu>.container>.row,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .home-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .about-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        height: 100px !important;
        min-height: 100px !important;
        align-items: center !important;
    }

    .home-page .site-header .site-branding,
    .about-page .site-header .site-branding,
    .service-page .site-header .site-branding,
    .faq-page .site-header .site-branding {
        padding: 0 0 0 4px !important;
        align-self: center !important;
    }

    .home-page .site-header .site-branding img,
    .about-page .site-header .site-branding img,
    .service-page .site-header .site-branding img,
    .faq-page .site-header .site-branding img {
        max-width: 205px;
        max-height: 58px !important;
        width: auto;
    }

    .home-page .site-navigation,
    .about-page .site-navigation,
    .service-page .site-navigation,
    .faq-page .site-navigation {
        margin-left: auto !important;
        margin-right: 0 !important;
        align-self: center !important;
    }

    .home-page .main-menu .navbar-toggler,
    .about-page .main-menu .navbar-toggler,
    .service-page .main-menu .navbar-toggler,
    .faq-page .main-menu .navbar-toggler {
        position: relative;
        top: auto;
        right: auto;
        color: #ffffff !important;
        font-size: 26px;
        line-height: 1;
    }

    .home-page .main-menu .navbar-collapse,
    .about-page .main-menu .navbar-collapse,
    .service-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse {
        position: absolute !important;
        top: 100px !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        margin: 0 !important;
        border-top: 3px solid #7fc540 !important;
        background: #f7f8fa !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
        z-index: 1200 !important;
    }

    .home-page .main-menu .navigation,
    .about-page .main-menu .navigation,
    .service-page .main-menu .navigation,
    .faq-page .main-menu .navigation {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .home-page .main-menu .navigation>li,
    .about-page .main-menu .navigation>li,
    .service-page .main-menu .navigation>li,
    .faq-page .main-menu .navigation>li {
        float: none;
        width: 100%;
    }

    .home-page .main-menu .navigation>li>a,
    .about-page .main-menu .navigation>li>a,
    .service-page .main-menu .navigation>li>a,
    .faq-page .main-menu .navigation>li>a {
        display: flex !important;
        align-items: center;
        min-height: 51px !important;
        height: 51px !important;
        padding: 10px 18px !important;
        margin: 0 !important;
        color: #30343a !important;
        background: #f7f8fa !important;
        border-bottom: 1px solid #dedfe1 !important;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
    }

    .home-page .main-menu .navigation>li.active>a,
    .about-page .main-menu .navigation>li.active>a,
    .service-page .main-menu .navigation>li.active>a,
    .faq-page .main-menu .navigation>li.active>a {
        color: #7fc540 !important;
        background: #ffffff !important;
    }

    .home-page .main-menu .navigation>li.dropdown>ul,
    .about-page .main-menu .navigation>li.dropdown>ul,
    .service-page .main-menu .navigation>li.dropdown>ul,
    .faq-page .main-menu .navigation>li.dropdown>ul {
        position: static !important;
        width: 100% !important;
        display: none;
        opacity: 0;
        visibility: hidden;
        transform: none !important;
        box-shadow: none !important;
    }

    .home-page .main-menu .navigation>li.dropdown>ul.open,
    .about-page .main-menu .navigation>li.dropdown>ul.open,
    .service-page .main-menu .navigation>li.dropdown>ul.open,
    .faq-page .main-menu .navigation>li.dropdown>ul.open {
        display: block !important;
        opacity: 1;
        visibility: visible;
    }

    .home-page .main-menu .navigation>li.dropdown>ul>li>a,
    .about-page .main-menu .navigation>li.dropdown>ul>li>a,
    .service-page .main-menu .navigation>li.dropdown>ul>li>a,
    .faq-page .main-menu .navigation>li.dropdown>ul>li>a {
        display: block;
        min-height: 45px;
        padding: 13px 34px !important;
        color: #ffffff !important;
        background: #7fc540 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .3) !important;
    }

    .home-page .main-menu .navigation .righticon,
    .about-page .main-menu .navigation .righticon,
    .service-page .main-menu .navigation .righticon,
    .faq-page .main-menu .navigation .righticon {
        display: block !important;
        top: 3px;
        right: 0;
        width: 46px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        border-left: 1px solid rgba(120, 120, 120, .2);
        z-index: 1201;
    }
}

/*
 * Inner pages follow the Contact mobile header exactly. Keep this block
 * after the general shared styles so older page-specific rules cannot make
 * About, Service, or FAQ taller/different again.
 */
@media (max-width: 767px) {

    .about-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu {
        height: 100px !important;
        min-height: 100px !important;
        padding: 0 !important;
        background: #ffffff !important;
        border-bottom: 3px solid #7fc540 !important;
        box-shadow: 0 2px 8px rgba(31, 46, 24, .08) !important;
        overflow: visible !important;
    }

    .about-page .site-header .site-header-menu>.container,
    .service-page .site-header .site-header-menu>.container,
    .faq-page .site-header .site-header-menu>.container,
    .about-page .site-header .site-header-menu>.container>.row,
    .service-page .site-header .site-header-menu>.container>.row,
    .faq-page .site-header .site-header-menu>.container>.row,
    .about-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12 {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .about-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        height: 100px !important;
        min-height: 100px !important;
        align-items: center !important;
    }

    .about-page .site-header .site-branding,
    .service-page .site-header .site-branding,
    .faq-page .site-header .site-branding {
        display: flex !important;
        align-items: center !important;
        align-self: center !important;
        padding: 0 0 0 16px !important;
    }

    .about-page .site-header .site-branding img,
    .service-page .site-header .site-branding img,
    .faq-page .site-header .site-branding img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: calc(100vw - 48px) !important;
        max-height: 28px !important;
        object-fit: contain !important;
    }

    .about-page .site-navigation,
    .service-page .site-navigation,
    .faq-page .site-navigation {
        flex: 0 0 auto !important;
        align-self: center !important;
        margin-left: auto !important;
        margin-right: 16px !important;
    }

    .about-page .main-menu .navbar-toggler,
    .service-page .main-menu .navbar-toggler,
    .faq-page .main-menu .navbar-toggler {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        color: #42464e !important;
        font-size: 26px !important;
        line-height: 1 !important;
    }

    .about-page .main-menu .navbar-collapse,
    .service-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse {
        position: absolute !important;
        top: 100px !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #f7f8fa !important;
        border-top: 3px solid #7fc540 !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .12) !important;
        z-index: 1200 !important;
    }

    .about-page .main-menu .navigation>li>a,
    .service-page .main-menu .navigation>li>a,
    .faq-page .main-menu .navigation>li>a {
        min-height: 51px !important;
        height: 51px !important;
        padding: 10px 18px !important;
        color: #30343a !important;
        background: #f7f8fa !important;
        border-bottom: 1px solid #dedfe1 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
    }

    .about-page .main-menu .navigation>li.active>a,
    .about-page .main-menu .navigation>li.dropdown>a,
    .service-page .main-menu .navigation>li.active>a,
    .service-page .main-menu .navigation>li.dropdown>a,
    .faq-page .main-menu .navigation>li.active>a,
    .faq-page .main-menu .navigation>li.dropdown>a {
        color: #7fc540 !important;
        background: #ffffff !important;
    }

    .about-page .main-menu .navigation>li.dropdown>.righticon,
    .service-page .main-menu .navigation>li.dropdown>.righticon,
    .faq-page .main-menu .navigation>li.dropdown>.righticon {
        top: 3px !important;
        right: 0 !important;
        width: 46px !important;
        height: 45px !important;
        line-height: 45px !important;
        border-left: 1px solid rgba(120, 120, 120, .2) !important;
        z-index: 1201 !important;
    }

    .about-page .main-menu .navigation>li.dropdown>ul.open,
    .service-page .main-menu .navigation>li.dropdown>ul.open,
    .faq-page .main-menu .navigation>li.dropdown>ul.open {
        display: block !important;
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .about-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    .service-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    .faq-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    .about-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    .service-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    .faq-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover {
        min-height: 45px !important;
        height: 45px !important;
        padding: 13px 34px !important;
        color: #ffffff !important;
        background: #7fc540 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .3) !important;
    }

    .about-page .site-header .site-header-menu:has(.navbar-collapse.show)::after,
    .service-page .site-header .site-header-menu:has(.navbar-collapse.show)::after,
    .faq-page .site-header .site-header-menu:has(.navbar-collapse.show)::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: 100vh;
        min-height: 100vh;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, .42);
        pointer-events: none;
        z-index: 1100;
    }

    .about-page .site-header .site-branding,
    .about-page .main-menu .navbar-header,
    .service-page .site-header .site-branding,
    .service-page .main-menu .navbar-header,
    .faq-page .site-header .site-branding,
    .faq-page .main-menu .navbar-header {
        position: relative !important;
        z-index: 1202 !important;
    }
}

/* The open menu should not dim the page. Keep the mobile banner visible
   underneath it, with the page title and breadcrumb readable on the image. */
@media (max-width: 767px) {

    .about-page .site-header .site-header-menu:has(.navbar-collapse.show)::after,
    .service-page .site-header .site-header-menu:has(.navbar-collapse.show)::after,
    .faq-page .site-header .site-header-menu:has(.navbar-collapse.show)::after,
    .contact-page .site-header .site-header-menu:has(.navbar-collapse.show)::after {
        display: none !important;
        content: none !important;
    }

    .about-page .inner-banner,
    .service-page .inner-banner,
    .faq-page .inner-banner,
    .contact-page .inner-banner {
        display: table !important;
        width: 100% !important;
        height: 248px !important;
        min-height: 248px !important;
        margin: 0 !important;
        background-position: center center !important;
    }

    .about-page .inner-banner .titlebar-main,
    .service-page .inner-banner .titlebar-main,
    .faq-page .inner-banner .titlebar-main,
    .contact-page .inner-banner .titlebar-main {
        display: table-cell !important;
        width: 100% !important;
        vertical-align: middle !important;
        padding: 26px 16px 0 !important;
    }

    .about-page .inner-banner .inner-page-title,
    .service-page .inner-banner .inner-page-title,
    .faq-page .inner-banner .inner-page-title,
    .contact-page .inner-banner .inner-page-title {
        margin: 0 0 12px !important;
        text-align: left !important;
        font-size: 40px !important;
        line-height: 1.2 !important;
    }

    .about-page .inner-banner .breadcrumb-section,
    .service-page .inner-banner .breadcrumb-section,
    .faq-page .inner-banner .breadcrumb-section,
    .contact-page .inner-banner .breadcrumb-section {
        justify-content: flex-start !important;
        text-align: left !important;
        margin: 0 !important;
    }

    .about-page .inner-banner .breadcrumb,
    .service-page .inner-banner .breadcrumb,
    .faq-page .inner-banner .breadcrumb,
    .contact-page .inner-banner .breadcrumb {
        justify-content: flex-start !important;
        margin: 0 !important;
    }
}

/* Final logo size parity with the Contact mobile header. */
@media (max-width: 767px) {

    .about-page .site-header .site-branding img,
    .service-page .site-header .site-branding img,
    .faq-page .site-header .site-branding img {
        display: block !important;
        width: 135px !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 58px !important;
        object-fit: contain !important;
    }

    /* Add the same clear space below the logo as the Contact header. */
    .about-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu {
        height: 110px !important;
        min-height: 110px !important;
    }

    .about-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        height: 110px !important;
        min-height: 110px !important;
    }

    .about-page .main-menu .navbar-collapse,
    .service-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse {
        top: 120px !important;
    }
}

/* Keep the menu flush with the shared 100px mobile header. */
@media (max-width: 767px) {

    .about-page .site-header .site-header-menu,
    .service-page .site-header .site-header-menu,
    .faq-page .site-header .site-header-menu,
    .about-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .service-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex,
    .faq-page .site-header .site-header-menu>.container>.row>.col-md-12>.d-flex {
        height: 100px !important;
        min-height: 100px !important;
    }

    .about-page .main-menu .navbar-collapse,
    .service-page .main-menu .navbar-collapse,
    .faq-page .main-menu .navbar-collapse {
        top: 100px !important;
    }

    /* The fixed header is 100px tall, so the content reserve must match it.
       Keeping the old 122px value creates a visible gap before the banner. */
    .about-page .page-content,
    .service-page .page-content,
    .faq-page .page-content {
        padding-top: 100px !important;
    }
}

/* Final mobile navigation state: never color the Pages parent green. */
@media (max-width: 767px) {

    body.about-page .site-header .site-navigation ul.navigation>li.dropdown>a,
    body.about-page .site-header .site-navigation ul.navigation>li.dropdown:hover>a,
    body.about-page .site-header .site-navigation ul.navigation>li.dropdown:focus-within>a,
    body.about-page .site-header .site-navigation ul.navigation>li.dropdown.active>a,
    body.faq-page .site-header .site-navigation ul.navigation>li.dropdown>a,
    body.faq-page .site-header .site-navigation ul.navigation>li.dropdown:hover>a,
    body.faq-page .site-header .site-navigation ul.navigation>li.dropdown:focus-within>a,
    body.faq-page .site-header .site-navigation ul.navigation>li.dropdown.active>a,
    body.service-page .site-header .site-navigation ul.navigation>li.dropdown>a,
    body.service-page .site-header .site-navigation ul.navigation>li.dropdown:hover>a,
    body.service-page .site-header .site-navigation ul.navigation>li.dropdown:focus-within>a,
    body.service-page .site-header .site-navigation ul.navigation>li.dropdown.active>a,
    body.contact-page .site-header .site-navigation ul.navigation>li.dropdown>a,
    body.contact-page .site-header .site-navigation ul.navigation>li.dropdown:hover>a,
    body.contact-page .site-header .site-navigation ul.navigation>li.dropdown:focus-within>a,
    body.contact-page .site-header .site-navigation ul.navigation>li.dropdown.active>a {}
}

/* Contact uses the same mobile banner breadcrumb as Service. */
@media (max-width: 767px) {
    body.contact-page .inner-banner .breadcrumb-section {
        display: flex !important;
        justify-content: flex-start !important;
        text-align: left !important;
        margin: 8px 0 0 !important;
    }

    body.contact-page .inner-banner .breadcrumb {
        display: flex !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.contact-page .inner-banner .titlebar-main {
        padding-top: 20px !important;
    }

    body.contact-page .inner-banner .inner-page-title {
        margin-bottom: 0 !important;
        text-align: left !important;
    }
}

/* Desktop Contact panel: match the reference's centered container instead
   of stretching the appointment row across the entire viewport. */
@media (min-width: 768px) {
    body.contact-page .page-content>section.section-mdt>.container>.contact-appointment {
        width: calc(100vw - 68px) !important;
        max-width: 1170px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 70px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    body.contact-page .contact-appointment .appointment-image {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.contact-page .contact-appointment .appointment-inner {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
        padding: 60px 60px 40px !important;
    }
}

/* Highlight only the exact page that is currently open. The Pages parent
   stays neutral even when About or FAQ is the current page. */
@media (max-width: 767px) {

    .about-page .main-menu .navigation>li>a,
    .service-page .main-menu .navigation>li>a,
    .faq-page .main-menu .navigation>li>a {
        color: #30343a !important;
        background: #f7f8fa !important;
    }

    .about-page .main-menu .navigation>li.active:not(.dropdown)>a,
    .service-page .main-menu .navigation>li.active:not(.dropdown)>a,
    .faq-page .main-menu .navigation>li.active:not(.dropdown)>a {
        color: #7fc540 !important;
        background: #ffffff !important;
    }

    .about-page .main-menu .navigation>li.active.dropdown>a,
    .service-page .main-menu .navigation>li.active.dropdown>a,
    .faq-page .main-menu .navigation>li.active.dropdown>a {
        color: #7fc540 !important;
        background: #ffffff !important;
    }

    /* Pages stays black when it is only opened; active About/FAQ rules below
       apply the green selected state. */
    .about-page.site-header .site-navigation ul.navigation>li.dropdown:hover>a,
    .about-page .site-header .site-navigation ul.navigation>li.dropdown:focus-within>a,
    .faq-page .site-header .site-navigation ul.navigation>li.dropdown:hover>a,
    .faq-page .site-header .site-navigation ul.navigation>li.dropdown:focus-within>a,
    .service-page .site-header .site-navigation ul.navigation>li.dropdown:hover>a,
    .service-page .site-header .site-navigation ul.navigation>li.dropdown:focus-within>a,
    .contact-page .site-header .site-navigation ul.navigation>li.dropdown:hover>a,
    .contact-page .site-header .site-navigation ul.navigation>li.dropdown:focus-within>a {
        color: #30343a !important;
        background: #f7f8fa !important;
    }

    /* About and FAQ keep the Pages parent in its active state while the
       submenu is open, matching the selected-page mobile reference. */
    .about-page .site-header .site-navigation ul.navigation>li.dropdown.active:hover>a,
    .about-page .site-header .site-navigation ul.navigation>li.dropdown.active:focus-within>a,
    .faq-page .site-header .site-navigation ul.navigation>li.dropdown.active:hover>a,
    .faq-page .site-header .site-navigation ul.navigation>li.dropdown.active:focus-within>a {

        background: #ffffff !important;
    }

    /* Dropdown children are neutral until the exact child page is selected. */
    .about-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    .faq-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    .service-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    .contact-page .main-menu .navigation>li.dropdown>ul.open>li>a {
        color: #30343a !important;
        background: #ffffff !important;
        border-bottom: 1px solid #dedfe1 !important;
    }

    .about-page .main-menu .navigation>li.dropdown>ul.open>li.active>a,
    .faq-page .main-menu .navigation>li.dropdown>ul.open>li.active>a,
    .service-page .main-menu .navigation>li.dropdown>ul.open>li.active>a,
    .contact-page .main-menu .navigation>li.dropdown>ul.open>li.active>a {
        color: #ffffff !important;
        background: #7fc540 !important;
    }

    /* Keep submenu rows neutral until they are hovered or focused. */
    body.about-page .main-menu .navigation>li.dropdown>ul.open>li:not(.active)>a,
    body.faq-page .main-menu .navigation>li.dropdown>ul.open>li:not(.active)>a,
    body.service-page .main-menu .navigation>li.dropdown>ul.open>li:not(.active)>a,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li:not(.active)>a,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li:not(.active)>a {
        color: #fff !important;
        background: #7fc540 !important;
        border-bottom-color: #dedfe1 !important;
    }
}

/* Hover/tap state for every inner-page Pages submenu. */
@media (max-width: 767px) {

    body.about-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.about-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    body.service-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.service-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    body.faq-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.faq-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus {
        color: #ffffff !important;
        background: #7fc540 !important;
        border-bottom-color: rgba(255, 255, 255, 0.3) !important;
    }
}

/* Open Pages submenu rows are neutral by default; hover/focus switches the
   interacted row to the green selected state. */
@media (max-width: 767px) {

    body.about-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    body.service-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    body.faq-page .main-menu .navigation>li.dropdown>ul.open>li>a,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li>a {
        min-height: 51px !important;
        height: 51px !important;
        padding: 10px 34px !important;
        color: #7fc540 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #dedfe1 !important;
    }

    body.about-page .main-menu .navigation>li.dropdown>ul.open>li.active>a,
    body.service-page .main-menu .navigation>li.dropdown>ul.open>li.active>a,
    body.faq-page .main-menu .navigation>li.dropdown>ul.open>li.active>a,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li.active>a,
    body.about-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.about-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    body.service-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.service-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    body.faq-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.faq-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li>a:hover,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li>a:focus {


        border-bottom-color: rgba(255, 255, 255, 0.3) !important;
    }

    body.about-page .main-menu .navigation>li.dropdown>ul.open>li:last-child>a,
    body.service-page .main-menu .navigation>li.dropdown>ul.open>li:last-child>a,
    body.faq-page .main-menu .navigation>li.dropdown>ul.open>li:last-child>a,
    body.contact-page .main-menu .navigation>li.dropdown>ul.open>li:last-child>a {
        border-bottom: 0 !important;
    }
}

/* Progress Bar / Impressive Skills Responsive Support */
@media (max-width: 767px) {
    .skill {
        position: relative;
        width: 100%;
        height: 6px;
        margin: 48px 0 20px 0 !important;
        background-color: #c0c0c0;
        border-radius: 3px;
        display: block;
    }

    .skill:not(:first-child) {
        margin-top: 50px !important;
    }

    .skill-title {
        position: absolute !important;
        bottom: calc(100% + 8px) !important;
        left: 0 !important;
        top: auto !important;
        margin-top: 0 !important;
        max-width: calc(100% - 50px) !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        color: #353535;
        white-space: normal;
    }

    .skill-bar .progress-number,
    .skill-bar .progress-type {
        position: absolute !important;
        bottom: calc(100% + 8px) !important;
        top: auto !important;
        margin-top: 0 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        color: #353535;
    }

    .skill-bar .progress-type {
        right: 0 !important;
    }

    .skill-bar .progress-number {
        right: 12px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .skill {
        margin: 40px 0 20px 0;
    }

    .skill:not(:first-child) {
        margin-top: 42px;
    }

    .skill-title {
        max-width: calc(100% - 55px);
        font-size: 13px;
    }
}