/* Give the mobile header and hero their own space. */
@media (max-width: 991px) {
    #navbar-spy.transparent-header { height: auto; position: relative; }
    #navbar-spy.transparent-header + section { margin-top: 0; }
    #navbar-spy #primary-menu { position: relative !important; top: auto; background: #252525; }
    #primary-menu > .container > .navbar-header {
        display: flex; align-items: center; justify-content: space-between;
        min-height: 76px; margin: 0; text-align: left;
    }
    #primary-menu .logo { display: flex; align-items: center; height: 76px; line-height: normal; }
    #primary-menu .logo img { max-width: calc(100vw - 110px); object-fit: contain; }
    #primary-menu .navbar-toggle {
        position: static; order: 2; float: none; transform: none;
        margin: 0; padding: 12px; border-color: #fff;
    }
    #primary-menu .navbar-toggle .icon-bar { background: #fff; }
    #primary-menu .navbar-collapse { float: none !important; margin: 0; max-height: 60vh; overflow-y: auto !important; }
    .services-page { padding-top: 0; }
    #hero .hero-heading, #hero .hero-copy { text-align: center !important; }
    #hero .tp-caption { margin: 0 !important; }
    #hero .hero-heading br, #hero .hero-copy br { display: none; }
    #hero .hero-action { padding-top: 0 !important; text-align: center; }
    #hero .hero-action .btn {
        width: auto; min-width: 180px; height: 48px; padding: 0 20px !important;
        margin: 0 !important; line-height: 46px; font-size: 13px !important;
    }
    #hero .hero-action .btn div { font-size: 13px !important; }
    #hero.hero-3 .cta-form { float: none; width: 100%; height: auto; margin: 0; }
}
@media (max-width: 767px) {
    #primary-menu .top-header-inner { padding: 10px 15px; gap: 8px; }
    #primary-menu .top-header-phones { flex-wrap: nowrap; gap: 16px; }
    #primary-menu .top-header-phone { font-size: 13px; min-height: 30px; }
    #primary-menu .top-header-social { gap: 12px; }
    #primary-menu .top-header-social a { min-width: 32px; min-height: 32px; }
    #hero.hero-3 .cta-form .cta { padding: 24px 16px; }
    #hero.hero-3 .cta-form .cta .cta-desc h5 { font-size: 23px; line-height: 1.3; }
}

@media (max-width: 991px) {
    #hero .hero-heading { font-family: 'Montserrat', Arial, sans-serif !important; font-weight: 700 !important; }
    #hero .hero-copy, #hero .hero-action .btn { font-family: 'Raleway', Arial, sans-serif !important; }
}

@media (max-width: 991px) {
    #hero .hero-heading { padding-bottom: 0 !important; }
}

/* Align the visible logo and the banner captions on small screens. */
@media (max-width: 991px) {
    #primary-menu > .container > .navbar-header::before,
    #primary-menu > .container > .navbar-header::after { display: none; content: none; }
    #primary-menu .logo { margin-left: 0; }
    #hero .hero-heading, #hero .hero-copy {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
        box-sizing: border-box;
    }
    #hero .hero-action { padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; }
}

/* Center each slide's complete content group vertically. */
@media (max-width: 991px) {
    #slider1 .tp-revslider-slidesli {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }
    #slider1 .tp-revslider-slidesli > .tp-parallax-wrap {
        position: relative !important;
        left: auto !important; top: auto !important;
        transform: none !important;
        flex: 0 0 auto;
    }
    #slider1 .tp-loop-wrap, #slider1 .tp-mask-wrap {
        position: relative !important;
        left: auto !important; top: auto !important;
        transform: none !important;
        overflow: visible !important;
    }
    #slider1 .tp-caption {
        position: relative !important;
        left: auto !important; top: auto !important;
        width: min(300px, calc(100vw - 40px)) !important;
        height: auto !important;
        padding: 0 !important; margin: 0 !important;
        transform: none !important;
        white-space: normal !important;
        text-align: center !important;
    }
}

@media (max-width: 991px) {
    #slider1 .tp-parallax-wrap, #slider1 .tp-loop-wrap, #slider1 .tp-mask-wrap, #slider1 .tp-caption {
        opacity: 1 !important;
    }
}

/* Keep the right side of the banner photo visible on phones. */
@media (max-width: 767px) {
    #hero #slider1 .tp-bgimg { background-position: right center !important; }
}