/* =====================================================================
   Beacon Medicare — Responsive enhancements
   Additive only. Keeps the existing design; improves small screens.
   Brand: #007dc7
   ===================================================================== */

/* Fluid media everywhere */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Never let a page scroll sideways.
   Use `clip` (not `hidden`) so it doesn't create a scroll container —
   `hidden` here would break every `position: sticky` element on the page. */
html,
body {
    overflow-x: clip;
}

/* Long words / URLs shouldn't blow out the layout */
p,
li,
td,
th,
h1, h2, h3, h4, h5 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Any raw <table> in page content becomes horizontally scrollable
   on small screens instead of breaking the layout */
@media (max-width: 767px) {
    .main table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ------- Tablet / phone typography & spacing ------- */
@media (max-width: 991px) {
    .main .container {
        padding-left: 18px;
        padding-right: 18px;
    }
    /* Tame the giant inline top margins used across pages */
    .main .container[style*="margin-top:50px"],
    .main .container[style*="margin-top: 50px"] {
        margin-top: 24px !important;
    }
    .page-header {
        padding: 22px 0;
    }
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.35rem; }
    h4 { font-size: 1.15rem; }
}

@media (max-width: 575px) {
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.2rem; }
    body { font-size: 14px; }

    /* Stack the footer neatly and center it */
    #footer .footer-copyright .row > [class*="col-"] {
        text-align: center;
        margin-bottom: 10px;
    }
    #footer .social-icons {
        justify-content: center;
        display: flex;
    }
    /* Order-now button goes full width so it's easy to tap */
    .header-nav-main .order-now {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 6px;
    }
}

/* ------- Mobile navigation menu polish ------- */
@media (max-width: 991px) {
    .header-nav-main nav > ul > li > a {
        padding: 12px 15px;
        border-bottom: 1px solid rgba(0, 0, 0, .06);
        font-size: 15px;
    }
    .header-nav-main .dropdown-menu {
        box-shadow: none;
        border: 0;
        padding-left: 12px;
    }
    /* Make the hamburger clearly tappable */
    .header-btn-collapse-nav {
        background: #007dc7;
        color: #fff;
        padding: 8px 12px;
        font-size: 18px;
    }
    .header-btn-collapse-nav:hover,
    .header-btn-collapse-nav:focus {
        background: #0069ab;
        color: #fff;
    }
}

/* ------- Cards / product & team grids ------- */
@media (max-width: 767px) {
    .thumbnail,
    .card,
    .featured-box {
        margin-bottom: 20px;
    }
    /* Center content that was floated/aligned on desktop */
    .text-right-sm-center {
        text-align: center !important;
    }
}

/* Forms: comfortable tap targets on phones */
@media (max-width: 575px) {
    .form-control,
    .btn {
        font-size: 16px; /* prevents iOS zoom on focus */
    }
    .btn-lg {
        width: 100%;
    }
}

/* Utility: horizontal scroll wrapper you can add around wide blocks */
.responsive-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}