/* ========================================
   Migang's - Responsive Styles
   ======================================== */

/* Large Devices (Desktop) */
@media only screen and (min-width: 1200px) {
    .carousel-caption2 {
        padding: 0 80px;
    }
    .carousel-caption2 h1 {
        font-size: 60px;
    }
    .carousel-caption2 p {
        font-size: 24px;
    }
}

/* ========================================
   MOBILE BREAKPOINT (max-width: 991px)
   Shows: mobile header, slide menu, bottom nav, mobile footer
   Hides: desktop topbar, desktop nav, desktop footer
   ======================================== */
@media only screen and (max-width: 991px) {

    /* --- Override webslidemenu.css conflicts --- */
    html {
        overflow: visible !important;
        height: auto !important;
    }
    body {
        height: auto !important;
        overflow: visible !important;
    }
    .wsmenucontainer {
        overflow: visible !important;
    }
    .overlapblackbg {
        display: none !important;
    }

    /* --- Hide desktop components --- */
    .top-header,
    .wsmainfull,
    .desktop-footer,
    .scroll-up {
        display: none !important;
    }

    /* --- Show mobile components --- */
    .m-header {
        display: block !important;
    }
    .m-bottom-nav {
        display: flex !important;
    }
    .m-footer {
        display: block !important;
    }

    /* --- Ensure mobile slide menu is accessible --- */
    .m-slide-menu {
        display: flex !important;
    }
    .m-overlay {
        display: none !important;
    }
    .m-overlay.active {
        display: block !important;
    }

    /* --- Body padding for fixed header + bottom nav --- */
    body {
        padding-top: 56px;
        padding-bottom: 60px;
    }
    body.header-sticky-active {
        padding-top: 56px;
    }

    /* --- Visibility toggles --- */
    .visible-lg, .visible-md {
        display: none !important;
    }
    .visible-sm, .visible-xs {
        display: block !important;
    }

    /* --- Global body text for tablet --- */
    body.gray_bg {
        font-size: 17px;
        line-height: 28px;
    }

    /* --- Hero / Carousel --- */
    .carousel-caption2 {
        padding: 40px 30px 0;
        text-align: center;
    }
    .carousel-caption2 h1 {
        font-size: 42px;
    }
    .carousel-caption2 p {
        font-size: 20px;
    }

    /* --- Section headings --- */
    .about-section h2,
    .about-section-title,
    .qnasecbg h2,
    .service-detail-section h2,
    .tab-pane h2 {
        font-size: 34px;
    }

    .cta-section h2 {
        font-size: 34px;
    }
    .cta-section p {
        font-size: 19px;
    }

    .page-banner h1 {
        font-size: 40px;
    }
    .page-banner p {
        font-size: 19px;
    }

    /* --- Acclamations section --- */
    .acclamations-section {
        margin: 30px 0;
        padding: 45px 0;
    }
    .acclamations-title {
        font-size: 22px;
        margin-bottom: 35px;
    }
    .acclamations-logos {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px 35px;
        max-width: 750px;
    }
    .partner-logo {
        gap: 10px;
    }
    .partner-icon {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }
    .partner-name {
        font-size: 19px;
    }

    /* --- Section row --- */
    .section-row {
        margin: 28px auto 0;
        padding: 0 15px;
    }

    /* --- Card text --- */
    .newcard-body h3 {
        font-size: 21px;
    }
    .newcard-body p {
        font-size: 16px;
    }

    .qna-card-body h4 {
        font-size: 21px;
    }
    .qna-card-body p {
        font-size: 16px;
    }

    .developer-card-body h4 {
        font-size: 21px;
    }
    .developer-card-body p {
        font-size: 16px;
    }

    .blog-card-body h4 {
        font-size: 21px;
    }
    .blog-card-body p {
        font-size: 16px;
    }

    .career-card h4 {
        font-size: 21px;
    }
    .career-card p {
        font-size: 16px;
    }

    .team-card-body h4 {
        font-size: 21px;
    }
    .team-card-body p {
        font-size: 16px;
    }

    /* --- Tab / About section --- */
    .tab-pane h4 {
        font-size: 24px;
    }
    .tab-pane p {
        font-size: 17px;
    }

    .approach-item h5 {
        font-size: 19px;
    }
    .approach-item p {
        font-size: 16px;
    }

    .why-choose-item h5 {
        font-size: 19px;
    }
    .why-choose-item p {
        font-size: 16px;
    }

    /* --- Service page --- */
    .service-detail-section h3 {
        font-size: 24px;
    }
    .service-detail-section p,
    .service-detail-section ul li {
        font-size: 16px;
    }
    .service-sidebar h4 {
        font-size: 21px;
    }
    .service-sidebar ul li a {
        font-size: 16px;
    }

    /* --- Contact page --- */
    .contact-info-box h4 {
        font-size: 23px;
    }
    .contact-info-box p,
    .contact-info-box .contact-detail a {
        font-size: 16px;
    }
    .contact-form-box h3 {
        font-size: 24px;
    }

    /* --- Accordion --- */
    .panel-heading a {
        font-size: 17px;
    }
    .panel-body p {
        font-size: 17px;
    }
    .panel-body h4 {
        font-size: 22px;
    }

    /* --- About tabs layout --- */
    .why-choose-grid {
        grid-template-columns: 1fr;
    }
    .qna-cards {
        flex-direction: column;
    }
    .qna-card {
        min-width: 100%;
    }
    .tab2 {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .tab2 button {
        width: auto;
        max-width: none;
        font-size: 14px;
        padding: 10px 18px;
    }

    /* --- Service cards --- */
    .bannerblwcards {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .newcard {
        max-width: 48%;
        width: 48%;
    }

    /* --- Footer links spacing --- */
    .footer-links {
        margin-bottom: 20px;
    }
    .footer-links li a {
        font-size: 16px;
    }
    .footerbg h4 {
        font-size: 19px;
    }

    /* --- Global contactinfo (desktop topbar) --- */
    .global.contactinfo {
        display: none;
    }

    /* --- Modal --- */
    .modal-body p {
        font-size: 17px;
    }
    .modal-body ul li {
        font-size: 17px;
    }
    .modal-body h4 {
        font-size: 22px;
    }
}

/* ========================================
   PHONES (max-width: 767px)
   ======================================== */
@media only screen and (max-width: 767px) {

    /* --- Global body text for phones --- */
    body.gray_bg {
        font-size: 17px;
        line-height: 28px;
    }

    /* --- Hero / Carousel --- */
    .carousel-caption2 {
        padding: 0 18px;
        top: 30%;
    }
    .carousel-caption2 h1 {
        font-size: 36px;
        line-height: 1.2;
    }
    .carousel-caption2 p {
        font-size: 20px;
        line-height: 1.5;
    }
    .hmindbtn {
        padding: 14px 28px;
        font-size: 18px;
    }
    .hmindbtntesti {
        padding: 12px 24px;
        font-size: 17px;
    }

    /* --- Service cards --- */
    .newibdexsection {
        padding: 12px 0;
    }
    .newcard img {
        height: 110px;
    }
    .newcard-body {
        padding: 15px 18px 18px;
    }
    .newcard-body h3 {
        font-size: 22px;
    }
    .newcard-body p {
        font-size: 17px;
        line-height: 1.7;
    }
    .btnviewsevice {
        font-size: 17px;
    }

    /* --- Tab buttons --- */
    .tab2 button {
        font-size: 15px;
        padding: 12px 20px;
    }

    /* --- About / Tabs section --- */
    .ftconpd {
        padding: 35px 18px;
    }
    .about-section {
        padding: 40px 0;
    }
    .about-section h2,
    .about-section-title {
        font-size: 30px;
    }
    .tab-pane h2 {
        font-size: 30px;
    }
    .tab-pane h4 {
        font-size: 24px;
    }
    .tab-pane p {
        font-size: 17px;
        line-height: 1.8;
    }

    /* --- Q&A section --- */
    .qnasecbg {
        padding: 45px 0;
    }
    .qnasecbg h2 {
        font-size: 30px;
    }
    .qna-card-body h4 {
        font-size: 22px;
    }
    .qna-card-body p {
        font-size: 17px;
    }

    /* --- Acclamations section --- */
    .acclamations-section {
        margin: 25px 0;
        padding: 35px 0 40px;
    }
    .acclamations-title {
        font-size: 19px;
        letter-spacing: 1.5px;
        margin-bottom: 28px;
    }
    .acclamations-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 30px;
        max-width: 500px;
    }
    .partner-logo {
        gap: 9px;
        justify-content: center;
    }
    .partner-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    .partner-name {
        font-size: 17px;
    }

    /* --- Section row --- */
    .section-row {
        margin: 22px auto 0;
        padding: 0 15px;
    }

    /* --- Approach items --- */
    .approach-item {
        flex-direction: column;
        text-align: center;
        padding: 18px;
    }
    .approach-item h5 {
        font-size: 20px;
    }
    .approach-item p {
        font-size: 17px;
    }

    /* --- Why choose items --- */
    .why-choose-item h5 {
        font-size: 19px;
    }
    .why-choose-item p {
        font-size: 17px;
    }

    /* --- CTA section --- */
    .cta-section {
        padding: 45px 0;
        margin-bottom: 0;
        padding-bottom: 35px;
    }
    .cta-section h2 {
        font-size: 30px;
    }
    .cta-section p {
        font-size: 19px;
    }
    .cta-section .btn-cta {
        padding: 14px 28px;
        font-size: 18px;
    }

    /* --- Page banner --- */
    .page-banner {
        padding: 45px 18px;
    }
    .page-banner h1 {
        font-size: 34px;
    }
    .page-banner p {
        font-size: 18px;
    }

    /* --- Service detail --- */
    .service-detail-section {
        padding: 35px 18px;
    }
    .service-detail-section h2 {
        font-size: 30px;
    }
    .service-detail-section h3 {
        font-size: 24px;
    }
    .service-detail-section p,
    .service-detail-section ul li {
        font-size: 17px;
    }

    /* --- Contact section --- */
    .contact-section {
        padding: 35px 0;
    }
    .contact-info-box {
        padding: 22px;
    }
    .contact-info-box h4 {
        font-size: 23px;
    }
    .contact-info-box p,
    .contact-info-box .contact-detail a {
        font-size: 17px;
    }
    .contact-form-box {
        padding: 22px;
    }
    .contact-form-box h3 {
        font-size: 24px;
    }
    .form-group label {
        font-size: 17px;
    }
    .form-control {
        font-size: 16px;
    }

    /* --- Services grid (healthcare cards) --- */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* --- Developer / Blog / Career / Team cards --- */
    .developer-card-body h4,
    .blog-card-body h4,
    .career-card h4,
    .team-card-body h4 {
        font-size: 22px;
    }
    .developer-card-body p,
    .blog-card-body p,
    .career-card p,
    .team-card-body p {
        font-size: 17px;
    }
    .developer-card-body .btn {
        font-size: 17px;
    }

    /* --- Counter section --- */
    .counter-box h3 {
        font-size: 36px;
    }
    .counter-box p {
        font-size: 16px;
    }

    /* --- Social links --- */
    .social-links a {
        width: 38px;
        height: 38px;
        line-height: 38px;
        font-size: 16px;
    }

    /* --- Footer --- */
    .footerbg {
        padding: 40px 0 25px;
    }
    .footerbg h4 {
        font-size: 19px;
    }
    .footer-links li a {
        font-size: 17px;
    }
    .copyright {
        font-size: 15px;
    }

    /* --- Service cards: stack on phones --- */
    .bannerblwcards {
        flex-direction: column;
        align-items: center;
    }
    .newcard {
        max-width: 100%;
        width: 100%;
    }

    /* --- Modal --- */
    .modal-body {
        padding: 20px;
    }
    .modal-body p {
        font-size: 17px;
    }
    .modal-body ul li {
        font-size: 17px;
    }
    .modal-body h4 {
        font-size: 22px;
    }
    .modal-title {
        font-size: 20px;
    }
}

/* ========================================
   EXTRA SMALL (max-width: 479px)
   ======================================== */
@media only screen and (max-width: 479px) {

    /* --- Global body text for small phones --- */
    body.gray_bg {
        font-size: 16px;
        line-height: 26px;
    }

    /* --- Hero / Carousel --- */
    .carousel-caption2 h1 {
        font-size: 30px;
    }
    .carousel-caption2 p {
        font-size: 18px;
    }
    .hmindbtn {
        padding: 12px 24px;
        font-size: 17px;
    }

    /* --- Tab buttons --- */
    .tab2 button {
        font-size: 14px;
        padding: 10px 16px;
    }

    /* --- Section headings --- */
    .about-section h2,
    .about-section-title,
    .qnasecbg h2,
    .service-detail-section h2,
    .tab-pane h2 {
        font-size: 26px;
    }

    .cta-section h2 {
        font-size: 26px;
    }

    .page-banner h1 {
        font-size: 30px;
    }

    /* --- Card text --- */
    .newcard-body h3,
    .qna-card-body h4,
    .developer-card-body h4,
    .blog-card-body h4,
    .career-card h4,
    .team-card-body h4 {
        font-size: 20px;
    }
    .newcard-body p,
    .qna-card-body p,
    .developer-card-body p,
    .blog-card-body p,
    .career-card p,
    .team-card-body p {
        font-size: 16px;
    }

    /* --- Accordion --- */
    .panel-heading a {
        font-size: 16px;
        padding: 12px 15px;
    }
    .panel-body h4 {
        font-size: 20px;
    }
    .panel-body p {
        font-size: 16px;
    }

    /* --- Approach & Why Choose --- */
    .approach-item h5,
    .why-choose-item h5 {
        font-size: 18px;
    }
    .approach-item p,
    .why-choose-item p {
        font-size: 16px;
    }

    /* --- Service detail --- */
    .service-detail-section h2 {
        font-size: 26px;
    }
    .service-detail-section h3 {
        font-size: 22px;
    }

    /* --- Contact --- */
    .contact-info-box h4,
    .contact-form-box h3 {
        font-size: 21px;
    }

    /* --- Counter --- */
    .counter-box h3 {
        font-size: 32px;
    }

    /* --- Offices list --- */
    .offices-list {
        flex-direction: column;
        gap: 10px;
    }
    .tech-icons img {
        width: 30px;
        height: 30px;
    }

    /* --- Tighter mobile header --- */
    .m-cta-btn {
        padding: 7px 13px;
        font-size: 14px;
    }

    /* --- Acclamations section --- */
    .acclamations-section {
        margin: 20px 0;
        padding: 28px 0 35px;
    }
    .acclamations-title {
        font-size: 16px;
        letter-spacing: 1px;
        margin-bottom: 22px;
    }
    .acclamations-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 25px;
        max-width: 360px;
    }
    .partner-logo {
        gap: 7px;
    }
    .partner-icon {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    .partner-name {
        font-size: 15px;
    }

    /* --- CTA --- */
    .cta-section h2 {
        font-size: 26px;
    }
    .cta-section p {
        font-size: 17px;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .top-header,
    .wsmainfull,
    .m-header,
    .m-bottom-nav,
    .m-footer,
    .scroll-up,
    .cta-section,
    .footerbg {
        display: none !important;
    }
    body {
        padding-top: 0;
        padding-bottom: 0;
    }
    body.header-sticky-active {
        padding-top: 0;
    }
}