/* =====================================================================
   MOBILE / TABLET OVERRIDES
   Paste at the very END of your stylesheet so it wins over earlier rules
   (including your existing 991px / 575px media queries).
   ===================================================================== */
.footer-mobile {
    display: none;
}

@media (max-width: 991px) {

    html {
        scroll-padding-top: 140px;
    }

    body {
        font-size: 15px;
    }

    /* your .container has padding: 0, so phones need side padding */
    .container {
        padding: 0 14px;
    }

    /* removes fixed desktop widths */
    .faq-section .container {
        width: 100%;
    }

    /* ---------- Header menu as pills (header markup not seen, adjust if needed) ---------- */
    .main-menu {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .main-nav ul {
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .main-nav .menu-items {
        padding: 0 !important;
        background: #fff;
        border-radius: 20px;
    }

    .main-nav .menu-items a {
        display: block;
        padding: 5px 14px;
        font-size: 16px;
    }

    .main-nav .menu-items.active::before,
    .main-nav .menu-items.active::after,
    .main-nav .menu-items:hover::before,
    .main-nav .menu-items:hover::after {
        display: none;
    }

    .main-nav .menu-items:hover a {
        color: #000 !important;
    }

    .main-nav .menu-items.active a {
        color: #fff !important;
    }

    /* ---------- 1. Hero ---------- */
    .protect-section {
        padding: 16px 0 24px;
    }

    .protect-title {
        font-size: 17px;
    }

    .protect-subtitle {
        font-size: 15px;
        font-weight: 600;
        margin-top: 4px;
    }

    .protect-section .protect-main {
        align-items: stretch !important;
        gap: 18px !important;
    }

    .content-section,
    .video-section {
        width: 100%;
    }

    .protect-text {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 4px;
    }

    .content-section .protect-text.mb-4 {
        margin-bottom: 16px !important;
    }

    .main-steps-section {
        width: 100%;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }

    .step {
        gap: 6px;
    }

    .step-num {
        font-size: 28px;
    }

    .step-label {
        font-size: 15px;
        white-space: nowrap;
    }

    .protect-section .cta-row,
    .protect-section .social-row {
        display: none !important;
    }

    .play-btn {
        width: 52px;
        height: 52px;
        font-size: 28px;
    }

    .video-caption {
        position: absolute;
        left: 50%;
        bottom: 12px;
        transform: translateX(-50%);
        padding: 6px 12px;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
        background: rgba(0, 0, 0, .55);
        border-radius: 4px;
        pointer-events: none;
    }

    .video-wrap.playing .video-caption {
        display: none;
    }

    .protect-mobile-btn {
        display: block;
        margin-top: 18px;
        padding: 11px 12px;
        color: #30519C;
        font-size: 15px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        border: 2px solid #30519C;
        border-radius: 4px;
    }

    /* ---------- 2. Guesswork ---------- */
    .guesswork-section {
        padding: 16px 0;
    }

    .guesswork-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .guesswork-intro,
    .guesswork-question,
    .guesswork-card-text {
        display: none;
    }

    .guesswork-cards {
        gap: 12px 0;
    }

    .guesswork-card {
        width: 48.5%;
        padding: 4px 4px 14px;
    }

    .guesswork-card-img {
        height: 128px;
    }

    .guesswork-card-title {
        font-size: 16px;
        margin: 14px 0px 0;
    }

    .guesswork-footer {
        font-size: 16px;
        margin-top: 16px;
    }

    /* ---------- 3. Assessments (cards become a simple list) ---------- */
    .assessments-section {
        padding: 16px 0;
    }

    .assessments-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .assessments-grid {
        display: none !important;
    }

    .assessments-mobile-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 0;
        margin: 0 0 20px;
        padding: 0;
        list-style: none;
    }

    .assessments-mobile-list li {
        width: 50%;
        display: flex;
        align-items: flex-start;
        gap: 7px;
        padding-right: 8px;
        font-size: 15px;
        line-height: 1.4;
    }

    .assessments-mobile-list img {
        width: 17px;
        margin-top: 3px;
        flex-shrink: 0;
    }

    .assessment-btn {
        display: block;
        padding: 10px 12px;
        font-size: 15px;
        text-align: center;
    }

    /* ---------- 4. Path (vertical cards, number inside card) ---------- */
    .path-section {
        padding: 16px 0;
    }

    .path-title {
        font-size: 18px;
        text-align: left !important;
        margin-bottom: 16px;
    }

    .path-steps {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px 0;
    }

    .path-steps::before {
        display: none;
    }

    .path-step {
        width: 100%;
        text-align: left;
    }

    .path-num {
        position: absolute;
        top: 14px;
        left: 16px;
        width: 30px;
        height: 30px;
        font-size: 17px;
        z-index: 1;
    }

    .path-card {
        margin-top: 0;
        padding: 14px 16px;
    }

    .path-card::before {
        display: none;
    }

    .path-card h3 {
        margin: 0 0 6px;
        padding-left: 42px;
        font-size: 17px;
        line-height: 30px;
    }

    .path-card p {
        font-size: 15px;
    }

    .path-card p br {
        display: none;
    }

    /* ---------- 5. Report (list collapses behind "read more") ---------- */
    .report-section {
        padding: 16px 0;
    }

    .report-content,
    .report-media {
        width: 100%;
    }

    .report-media {
        margin-top: 16px;
    }

    .report-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .report-title strong {
        display: block;
    }

    .report-intro {
        max-width: 100%;
        margin-bottom: 16px;
        font-size: 15px;
    }

    .report-list li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 12px;
        font-size: 15px;
    }

    .report-list li img {
        width: 22px;
        margin-top: 3px;
        flex-shrink: 0;
    }

    .report-list li span {
        flex: 1;
        padding-left: 14px;
    }

    .report-content:not(.expanded) .report-list li:nth-child(n+4),
    .report-content:not(.expanded) .report-closing {
        display: none;
    }

    .report-content.expanded .report-more {
        display: none !important;
    }

    .report-content.expanded .report-dot {
        display: inline !important;
    }

    .report-more {
        color: #0D6EFD;
        text-decoration: underline;
        cursor: pointer;
    }

    .report-closing {
        font-size: 15px;
    }

    /* ---------- 6. Answers ---------- */
    .answers-section {
        padding: 16px 0;
    }

    .answers-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .answers-cards {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 18px;
    }

    .answers-card {
        width: 100%;
        align-items: center;
        gap: 14px;
        padding: 8px;
    }

    .answers-card-img {
        width: 130px;
        height: 115px;
    }

    .answers-card-body h3 {
        font-size: 18px;
    }

    .answers-card-body p {
        font-size: 15px;
        line-height: 1.4;
    }

    .answers-card-body p br {
        display: none;
    }

    .answers-note {
        display: none;
    }

    .answers-btn {
        display: block;
        padding: 10px 12px;
        font-size: 15px;
        text-align: center;
    }

    /* ---------- 7. Headlines (all posts become the same compact card) ---------- */
    .headlines-section {
        padding: 24px 0;
    }

    .headlines-head {
        margin-bottom: 16px;
    }

    .headlines-title {
        font-size: 18px;
        line-height: 1.35;
    }

    .headlines-title-hl {
        font-weight: 700;
    }

    .headlines-intro {
        display: none;
    }

    .headlines-section .col-md-6 {
        width: 100%;
    }

    .webdev-blog-main {
        margin-bottom: 10px;
    }

    .webdev-blog-item {
        margin-bottom: 10px !important;
        padding-bottom: 0;
    }

    .webdev-blog-main a,
    .webdev-blog-item a {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 8px;
        background: #fff;
        border-radius: 8px;
    }

    .webdev-blog-main img.mainblogimg,
    .webdev-blog-item .webdev-blog-thumb {
        width: 44%;
        height: 96px;
        flex-shrink: 0;
        object-fit: cover;
        object-position: center;
        border-radius: 6px;
    }

    .webdev-blog-content,
    .webdev-blog-content-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        padding: 0;
        background: transparent;
    }

    .webdev-blog-main h3.webdev-blog-title,
    .webdev-blog-title-small {
        order: 1;
        margin: 0;
        font-size: 16px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .webdev-blog-meta {
        order: 2;
        margin-top: 8px;
    }

    .webdev-blog-meta .author {
        display: none;
    }

    .webdev-blog-meta .date {
        float: none;
        font-size: 15px;
    }

    .webdev-blog-desc,
    .webdev-blog-desc-small {
        display: none;
    }

    /* ---------- 8. FAQ ---------- */
    .faq-section {
        padding: 16px 0;
    }

    .faq-main-section {
        gap: 0;
    }

    .faq-media {
        display: none;
    }

    .faq-content {
        width: 100%;
    }

    .faq-title {
        margin-bottom: 14px;
        font-size: 18px;
        text-align: center;
    }

    .faq-title-hl {
        color: #30519C;
        font-weight: 700;
    }

    .faq-accordion .accordion-button {
        padding: 10px 14px;
        font-size: 16px;
    }

    .faq-accordion .accordion-body {
        width: 100%;
        padding: 10px 4px 2px;
        font-size: 15px;
    }

    /* ---------- 9. Consultation form (2 columns) ---------- */
    .consult-section {
        padding: 24px 0;
    }

    .consult-head {
        margin-bottom: 16px;
    }

    .consult-title,
    .consult-subtitle {
        font-size: 18px;
    }

    .consult-subtitle {
        margin-bottom: 0;
    }

    .consult-intro {
        display: none;
    }

    .consult-fields {
        gap: 12px 0;
        margin-bottom: 18px;
    }

    .consult-field {
        width: 48.5%;
    }

    .consult-input-wrap>i {
        left: 12px;
        font-size: 18px;
    }

    .consult-input {
        height: 44px;
        padding: 0 8px 0 44px;
        font-size: 16px;
    }

    .consult-btn {
        width: 100%;
        padding: 12px 10px;
        font-size: 15px;
    }

    /* ---------- 10. Footer (best effort, footer markup not seen) ---------- */
    .innerfootercont {
        width: 100% !important;
        margin-top: 16px !important;
    }

    .footer-contact-section {
        padding: 20px 14px !important;
    }

    .footer-info,
    .footer-logo,
    .footer-contact-info {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .innerfooterlogo {
        padding-left: 0 !important;
    }

    .footer-bottom-wrapper {
        padding: 5px 14px 20px !important;
    }

    .main-header .container {
        padding: 0 16px;
    }

    /* Row 1: logo + actions (white). Row 2: tab strip (light blue-grey) */
    .main-header .inner-content {
        flex-wrap: wrap;
        row-gap: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .main-header .logo {
        order: 1;
        padding: 10px 0;
    }

    .main-header .header-btns {
        order: 2;
        gap: 20px !important;
    }

    .webdev-blog-item-main,
    .webdev-blog-thumb-wrap {
        cursor: pointer;
        background: #fff;
        display: flex;
        gap: 10px;
        align-items: center;
        border-radius: 6px;
    }

    .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        transform: translate(0, -50%) !important;
        top: 50% !important;
    }

    h2.mainblogtitlepopup {
        font-size: 18px;
    }

    .main-blog-content .inner-content .blog-content-wrap img {
        height: 300px;
        width: 100% !important;
        object-fit: cover;
    }

    div#formModalCenter section.form-section section.consult-section {
        padding: 20px 15px;
    }

    .modal-dialog .modal-content {
        width: 100% !important;
    }

    .main-header .logo img {
        width: 150px;
        height: auto;
    }

    .language-selector i {
        font-size: 30px;
    }

    .language-selector .dropdown-toggle {
        padding: 4px 6px;
    }

    .header-phone {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        color: #E2211C;
        font-size: 40px;
        line-height: 1;
        text-decoration: none;
    }

    /* Tab strip: full-bleed, shadow under the logo row */
    .main-header .main-menu {
        order: 3;
        width: calc(100% + 32px);
        min-width: 0;
        margin: 0 -16px;
        padding: 8px 18px 0;
        background: #F4F6FB;
        border-bottom: 2px solid #30519C;
        align-items: flex-start !important;
    }

    .main-nav {
        width: 100%;
    }

    .main-nav ul {
        flex-wrap: nowrap;
        align-items: flex-start !important;
        gap: 10px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .main-nav ul::-webkit-scrollbar {
        display: none;
    }

    .main-nav .menu-items {
        flex: 0 0 auto;
        padding: 0 !important;
    }

    /* Remove desktop vertical connector lines */
    .main-nav .menu-items.active::before,
    .main-nav .menu-items.active::after,
    .main-nav .menu-items:hover::before,
    .main-nav .menu-items:hover::after {
        display: none !important;
    }

    /* Inactive: white pill with light blue border */
    .main-nav .menu-items a {
        display: block;
        padding: 2px 16px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        color: #000 !important;
        background: #fff;
        border: 1px solid #DCE5F5;
        border-radius: 999px;
        white-space: nowrap;
    }

    .main-nav .menu-items.active {
        font-weight: 500;
    }

    /* Active: blue tab, rounded on top only, sits on the strip's bottom edge */
    .main-nav .menu-items.active a {
        padding: 6px 8px;
        font-weight: 500;
        color: #fff !important;
        background: #30519C;
        border-color: #30519C;
        border-radius: 8px 8px 0 0;
    }

    /* ---------- Footer: show mobile block ---------- */
    .footer-mobile {
        display: block;
        padding: 24px 16px 20px;
        background: #fff;
    }

    .footer-m-contact {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 0 12px;
    }

    .footer-m-contact a {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        color: #30519C;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.35;
        text-decoration: none;
    }

    .footer-m-contact .footer-icon {
        flex: 0 0 auto;
        width: 22px;
        margin-top: 1px;
    }

    .footer-m-brand {
        margin-top: 22px;
        text-align: center;
    }

    .footer-m-brand img {
        width: 150px;
        height: auto;
    }

    .footer-m-text {
        margin: 10px auto 12px;
        max-width: 340px;
        color: #000;
        font-size: 15px;
        line-height: 1.5;
    }

    .footer-m-regions {
        margin: 0;
        color: #000;
        font-size: 14px;
        word-spacing: 2px;
    }

    .footer-m-regions i {
        margin: 0 4px;
        font-style: normal;
    }

    .footer-m-divider {
        margin: 20px 0 16px;
        border: 0;
        border-top: 1px solid #000;
        opacity: 1;
    }

    .footer-m-social {
        gap: 6px;
        justify-content: center;
    }

    .footer-m-social .icon-box {
        width: 30px;
        height: 30px;
        background: transparent;
        box-shadow: none;
    }

    .footer-m-copy {
        margin: 14px 0 0;
        text-align: center;
        color: #000;
        font-size: 14px;
    }
}