/* Keep the public header and page content in the same flow on smaller screens. */
.main-menu ul li.mobile-join-link{display:none}

@media (max-width:991px){
    header.main-header{position:relative;left:auto;right:auto;top:auto;width:100%;max-width:none;margin:0}
    header.main-header .header-sticky{position:relative}
    header.main-header .container-fluid{padding-left:15px;padding-right:15px}
    .hero{margin-top:0;padding:64px 0 58px}
    .hero.hero-slider-layout .hero-slide{padding:64px 0 58px}
    .page-header{margin-top:0;padding:72px 0 64px}
    .hero-benefits-box{margin-top:70px}
    .hero::after{background:linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.3)),linear-gradient(180deg,transparent 35%,rgba(0,0,0,.76) 100%)}
    .responsive-menu{z-index:101}
    .slicknav_menu{position:relative;z-index:101}
    .slicknav_nav{max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain}
    .slicknav_nav li a,.slicknav_nav .slicknav_row{min-height:40px;display:flex;align-items:center}
    .slicknav_nav .mobile-join-link a{font-weight:700}
    img,video,iframe{max-width:100%}
    .google-map .row{margin-left:0;margin-right:0}
    .google-map .row>*{padding-left:0;padding-right:0}
}

@media (max-width:575px){
    .top-bar{padding:7px 0;font-size:11px;line-height:1.3}
    .top-bar .container-fluid{overflow-wrap:anywhere}
    .top-bar a{display:inline-block;margin-top:3px}
    .navbar{padding:10px 0}
    .navbar-brand{min-width:0}
    .navbar-brand img{display:block;width:auto;max-width:min(220px,calc(100vw - 100px));height:auto;max-height:52px}
    .hero{padding:46px 0 52px}
    .hero.hero-slider-layout .hero-slide{padding:46px 0 52px}
    .hero .section-title h1{font-size:clamp(28px,8vw,38px);line-height:1.15;overflow-wrap:break-word}
    .hero .section-title h3{font-size:12px;line-height:1.4}
    .hero-benefits-box{display:grid;grid-template-columns:1fr;gap:18px;margin-top:56px}
    .hero-benefit-item{width:100%;padding:17px 0 0;border-top:1px solid rgba(255,255,255,.35)}
    .hero-benefit-item-header{margin-bottom:7px}
    .hero-benefit-item-content p{line-height:1.5}
    .page-header{padding:55px 0 48px}
    .page-header-box h1{font-size:clamp(27px,8vw,38px);overflow-wrap:anywhere}
    .page-header-box ol{flex-wrap:wrap}
    .section-title h2,.section-title h1{overflow-wrap:anywhere}
    .footer-menu ul{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px}
    .footer-menu ul li{margin:0}
}