/* =====================================================================
   mobile.css — mobile-friendliness overrides (loaded last)
   Added to make the portfolio responsive on phones and tablets.
   ===================================================================== */

/* Never allow sideways scrolling on small screens */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; }

.single-about-img img {
    height: auto !important;
    max-width: 100%;
}

/* ---------------------------------------------------------------------
   Navigation — collapsible hamburger menu (<= 991px)
   The toggle button appears at <=992px, so drive the menu at the same
   breakpoint. Overrides Bootstrap's "display:block!important" that would
   otherwise keep the menu expanded between 768px and 991px.
--------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    nav.navbar.bootsnav .navbar-collapse.menu-ui-design {
        display: none !important;
        height: auto !important;
        max-height: 78vh;
        overflow-y: auto;
        width: 100%;
        background: #fff;
        box-shadow: 0 8px 15px rgba(0, 0, 0, .15);
    }
    nav.navbar.bootsnav .navbar-collapse.menu-ui-design.in {
        display: block !important;
    }

    nav.navbar.bootsnav ul.nav.navbar-right {
        float: none !important;
        margin: 0;
    }
    nav.navbar.bootsnav ul.nav > li {
        float: none;
        border-bottom: 1px solid #f2f2f2;
    }
    nav.navbar.bootsnav ul.nav > li > a {
        padding: 14px 20px !important;
        display: block;
    }

    nav.navbar.bootsnav .navbar-header {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        float: none !important;
        width: 100%;
        margin: 0 !important;
        padding: 10px 0;
        min-height: 60px;
    }
    .navbar-header a.navbar-brand,
    .navbar-header a.navbar-brand:hover,
    .navbar-header a.navbar-brand:focus {
        order: 0;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        display: flex;
        align-items: center;
        font-size: 18px;
        line-height: 1.2;
    }
    nav.navbar.bootsnav .navbar-toggle {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        float: none !important;
        margin: 0 !important;
        border: none !important;   /* drop the red outline box */
        background: transparent !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
    }
}

/* ---------------------------------------------------------------------
   Welcome hero — scale down the oversized fixed heights / fonts
--------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .welcome-hero { height: 560px; }
    .header-text h2 { font-size: 40px; }
}
@media screen and (max-width: 767px) {
    .welcome-hero { height: 460px; padding: 0 15px; }
    .header-text h2 { font-size: 30px; line-height: 1.3; }
    .header-text p { font-size: 16px; margin: 20px 0 35px; }
    .header-text a { width: 170px; height: 52px; line-height: 52px; }
}
@media screen and (max-width: 400px) {
    .welcome-hero { height: 400px; }
    .header-text h2 { font-size: 24px; }
}

/* ---------------------------------------------------------------------
   Sections — tighten padding and center content on small screens
--------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .about { padding: 40px 0 60px; }
    .about-content { padding-top: 40px; }

    .section-heading h2 { font-size: 26px; }
    .single-about-txt h3 { font-size: 16px; }

    /* Stacked columns: add breathing room between text and image */
    .single-about-img { margin: 30px auto 0; text-align: center; }
    .single-about-img img { display: inline-block; }

    /* Education timeline blocks stack full width */
    .single-horizontal-timeline { margin: 20px auto; }
}

/* ---------------------------------------------------------------------
   Contact — stack form + info cards, keep controls tappable
--------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .contact { padding-bottom: 50px; }
    .single-contact-box { margin-bottom: 30px; }
    .contact-form .form-control { font-size: 16px; } /* prevent iOS zoom */
    .single-contact-btn .contact-btn,
    .contact-btn { width: 100%; }
}

/* ---------------------------------------------------------------------
   Results table — allow horizontal scroll instead of breaking layout
--------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------------------------------------------------------------
   Scroll-to-top button — hidden until scrolled (see mobile.js)
--------------------------------------------------------------------- */
#scroll-Top { display: none; }