/* =============================================================================
 *  mobile.css — responsive overrides for Stellar Software Solutions
 *
 *  Loaded AFTER css/styles.css on every key page. Only contains media-query
 *  overrides for viewports below the Bootstrap md breakpoint; desktop layout
 *  is untouched.
 * ========================================================================== */

/* iOS disables viewport zoom when form inputs have font-size >= 16px.
 * Without this rule, focusing any input in the contact / apply form on
 * iPhone auto-zooms the page, breaking the form layout. */
@media (max-width: 767.98px) {
    input.form-control,
    select.form-control,
    textarea.form-control {
        font-size: 16px !important;
    }
}

/* -----------------------------------------------------------------------------
 *  Inside-banner (page headers) — compress on small screens
 * -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .inside-banner {
        padding: 30px 15px;
    }
    .inside-banner h1 {
        font-size: 1.9rem;
        line-height: 1.2;
    }
}
@media (max-width: 479.98px) {
    .inside-banner h1 {
        font-size: 1.55rem;
    }
}

/* -----------------------------------------------------------------------------
 *  Section padding — the default `section-padding` is ~80px top/bottom which
 *  wastes a lot of vertical space on phones. Tighten it up.
 * -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .section-padding {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* -----------------------------------------------------------------------------
 *  Contact page — the inline 3rem / 2rem fonts on the right-hand form card
 *  overflow on anything narrower than a tablet. Scale them down.
 * -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .contact-form__wrapper h4[style],
    .contact-form__wrapper h4 {
        font-size: 1.75rem !important;
    }
    .contact-form__wrapper > p[style],
    .contact-form__wrapper > p {
        font-size: 1rem !important;
        margin-bottom: 1.25rem !important;
    }
    /* The contact card has inline `height:50%` which breaks scrolling. */
    .col-md-5.shadow-lg.contact-main {
        height: auto !important;
        margin-top: 30px;
    }
    .contact-form__wrapper {
        padding: 24px !important;
    }
    /* Left column — remove its inline padding-left:30px on mobile. */
    .can-help .col-md-7[style] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    /* The location / phone / email button group stacks awkwardly; make it flow
     * vertically and centered. */
    .can-help__content-btn-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }
    .can-help__content-btn-group .theme-btn {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------------
 *  Careers page — accordion buttons + apply CTA
 * -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .careers {
        padding: 24px 0 60px !important;
    }
    .careers .accordion-body {
        padding: 18px 16px !important;
    }
    .careers .accordion-body .apply-cta {
        text-align: center !important;
    }
    .careers .accordion-body .apply-cta a {
        width: 100%;
        text-align: center;
    }
    .careers-list li {
        word-break: break-word;
    }
}

/* -----------------------------------------------------------------------------
 *  Apply-job page — form card
 * -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .apply-section {
        padding: 30px 0 60px !important;
    }
    .apply-card {
        padding: 20px !important;
        border-radius: 6px !important;
    }
    .apply-card .btn-apply,
    .apply-card .btn-back {
        display: block;
        width: 100%;
        margin: 8px 0 0 0 !important;
        text-align: center;
    }
}

/* -----------------------------------------------------------------------------
 *  AI & ML / service pages — hero thumbnails and two-column bottom sections
 * -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .rts-about-area-about .thumbnail-area-about {
        margin-bottom: 24px;
        text-align: center;
    }
    .rts-about-area-about .thumbnail-area-about img.small {
        max-width: 160px;
        margin-top: 12px;
    }
    .service-btm .col-md-6 {
        margin-bottom: 24px;
    }
    .service-btm .col-md-6:last-child {
        margin-bottom: 0;
    }
}

/* -----------------------------------------------------------------------------
 *  Header / nav — mobile sticky behavior and z-index fixes
 *
 *  Base styles.css has: .header-wrapper { position:absolute; z-index:2 }
 *  That combo causes two bugs on phones:
 *    (a) the navbar scrolls off-screen as you scroll down the page
 *    (b) z-index:2 is lower than most content sections, so the nav (and its
 *        expanded hamburger menu) gets visually covered when toggled open
 *
 *  Fix: on mobile (< 992px), hide the chatty red top bar to save vertical
 *  space, make the header stay pinned to the top of the viewport, and give
 *  it a z-index high enough to paint above every section below.
 * -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Keep the red top bar visible on mobile but compact it — stack the
       email / address block, reduce type size, tighten padding. */
    .header-top-bar {
        padding: 6px 0 !important;
        font-size: 11px !important;
        line-height: 1.35;
    }
    .header-top-bar .container > .row {
        margin: 0;
    }
    .header-top-bar .col-lg-8,
    .header-top-bar .col-lg-4 {
        padding: 0 8px;
    }
    .header-top-bar .top-bar-info {
        padding-left: 0 !important;
        margin-bottom: 4px !important;
    }
    .header-top-bar .top-bar-info li {
        display: block !important;
        margin-right: 0 !important;
        margin-bottom: 2px;
    }
    .header-top-bar .top-bar-info li a {
        margin-right: 0 !important;
    }
    .header-top-bar .top-right-bar {
        margin-top: 0 !important;
        text-align: left !important;
    }
    .header-top-bar .top-right-bar a {
        display: inline-block;
    }
    .header-top-bar .top-right-bar .h4 {
        font-size: 12px !important;
        font-weight: 500;
    }

    /* Pin the whole header (top bar + navbar) to the top of the viewport so
       it stays visible while the user scrolls. */
    .header-wrapper {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        z-index: 1040 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }

    /* Body gets a top offset roughly equal to the combined header height
       (top bar ~48px + nav ~60px) so the first content block isn't hidden
       underneath the fixed header. */
    body {
        padding-top: 110px;
    }

    /* Homepage hero already adds padding-top:142px to clear the old absolute
       header. With our fixed header + body offset, that's double-counting.
       Cancel the hero's extra top padding on mobile. */
    section.header,
    .header {
        padding-top: 20px !important;
    }

    /* Make the hamburger toggler obviously visible. The markup uses
       `navbar-dark` which gives a WHITE SVG icon — invisible against the
       white header background. Override the icon with a dark-stroke version
       and give the button a visible border + red tint so users can actually
       find the menu. */
    .navbar-toggler {
        padding: 8px 12px;
        border-color: rgba(249, 4, 3, 0.4) !important;
        background: rgba(249, 4, 3, 0.06);
    }
    .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(249, 4, 3, 0.25);
    }
    .navbar-dark .navbar-toggler-icon,
    .navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23222' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* Navbar itself establishes its own stacking context. */
    .header-wrapper nav.navbar {
        position: relative;
        z-index: 1040;
        padding: 6px 12px;
    }

    /* Expanded hamburger menu — this is the key overlap fix. Absolutely
       position the collapse below the navbar with a solid background and a
       z-index that sits above anything the page can throw at it. */
    .header-wrapper .navbar-collapse.show,
    .header-wrapper .navbar-collapse.collapsing {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 14px 22px 20px;
        z-index: 1050;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
        border-top: 1px solid #eee;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }

    /* Nav links inside the open dropdown — proper tappable targets with
       subtle dividers between items. */
    .header-wrapper .navbar-collapse .navbar-nav .nav-link {
        padding: 12px 4px !important;
        border-bottom: 1px solid #f3f3f3;
        font-size: 15px;
    }
    .header-wrapper .navbar-collapse .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    /* Services sub-menu (the dropdown inside the collapsed menu) */
    .header-wrapper .navbar-collapse .dropdown-menu {
        border: none;
        box-shadow: none;
        background: #fafafa;
        margin: 0;
        padding: 4px 0 4px 16px;
    }
    .header-wrapper .navbar-collapse .dropdown-menu .dropdown-item {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* -----------------------------------------------------------------------------
 *  Homepage — Expertises section
 *  The base stylesheet uses `float:left; width:29.5%` on each card, which
 *  tries to lay out 3-across even on phones. Force single-column stacking
 *  on mobile and 2-across on small tablets, with proper vertical gaps.
 * -------------------------------------------------------------------------- */

/* Clearfix on the container so the section doesn't collapse height-wise. */
.services .services-list::after {
    content: "";
    display: block;
    clear: both;
}

@media (max-width: 991.98px) {
    /* 2 cards per row on tablets. */
    .services .services-list li {
        width: calc(50% - 30px) !important;
    }
}

@media (max-width: 767.98px) {
    .services .services-list {
        padding: 0 10px;
        margin: 0 !important;
    }
    /* Stack cards full-width. */
    .services .services-list li {
        float: none !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
    /* Tighten the padding so content doesn't feel cramped. */
    .services .services-list li a {
        padding: 28px 20px 22px !important;
        font-size: 1.4rem !important;
    }
    /* Smaller circular icon badge on phones. */
    .services .services-list li a .icon {
        height: 88px !important;
        width: 88px !important;
        padding: 14px !important;
        margin-bottom: 10px;
    }
    /* Description paragraph — drop the enforced 130px min-height which
       creates empty dead space on mobile. */
    .services .services-list li a p {
        min-height: 0 !important;
        font-size: 13px !important;
        padding-top: 6px !important;
    }
    .services h2 {
        padding-bottom: 16px;
        font-size: 1.6rem;
    }

    /* "Our Services" feature cards (below Expertises) */
    .feature-block {
        margin-bottom: 22px;
    }
    .feature-block-one .inner-box .image-box img {
        width: 100%;
        height: auto;
    }

    /* About Us section */
    .about-box {
        padding: 0 10px;
    }
    .about-img {
        margin-top: 24px;
        text-align: center;
    }
}

/* -----------------------------------------------------------------------------
 *  Universal: no element should ever force horizontal scroll
 * -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body, html {
        overflow-x: hidden;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    table {
        display: block;
        overflow-x: auto;
    }
}