/* Mobile-only responsive rules for Home page
   - Do not change desktop styling.
   - All overrides are inside media queries. */

/* Tablet-ish */
@media (max-width: 991px) {
    /* Hero / slider */
    #rev_slider_1_1_wrapper,
    .rs-module-wrap,
    .rs-module {
        max-height: none;
    }

    .os-phrases h2 {
        /* a little smaller on tablet and centered */
        font-size: clamp(20px, 4.8vw, 34px);
        text-align: center;
    }

    /* slightly more breathing room for top of slider content on tablets */
    #rrzb_1 {
        padding-top: 22px !important;
    }

    /* add top margin to the hero overlay content to avoid overlap with header */
    .os-phrases,
    .rev_row_zone_bottom,
    .rs-zone {
        margin-top: 12px !important;
    }

    .sofex-feature-video .video-content {
        padding-top: 8px !important;
    }

    /* Increase hero height on tablet to make the visual stronger */
    .sofex-feature-video .video-wrap {
        height: 56vh !important;
        min-height: 320px;
    }

    /* push page content a bit below the hero (tablet only) */
    .page_content_wrap .content {
        margin-top: 12px !important;
    }

    /* Highlights grid -> 2 columns */
    .hs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .hs-card {
        padding: 20px;
        min-height: 260px;
    }

    /* Services/feature items -> two across */
    .sc_services_columns_wrap .trx_addons_column-1_4,
    .sc_services_columns_wrap .trx_addons_column-1_4.trx_addons_column-1_2-tablet {
        width: 50% !important;
        box-sizing: border-box;
        padding: 10px !important;
    }

    .sc_services_item_content {
        min-height: 220px !important;
    }

    /* Partners cards */
    .container11 .trx_addons_column-1_3 {
        width: 50% !important;
        padding: 8px;
    }

    .container11 .post_featured {
        height: 200px !important;
        background-size: contain !important;
    }

    /* Footer store buttons stacked */
    .store-buttons {
        gap: 14px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    /* Page padding */
    .elementor-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Hero text sizing and top margin for content */
    .os-phrases h2 {
        font-size: clamp(16px, 6.8vw, 28px) !important;
        line-height: 1.08 !important;
    }

    .os-phrases,
    .rev_row_zone_bottom,
    .rs-zone {
        margin-top: 18px !important; /* added top margin so header doesn't overlap text */
    }

    .sofex-feature-video .video-content {
        padding-top: 12px !important; /* gentle spacing inside hero */
    }

    /* Increase hero height for phones for better visual balance */
    .sofex-feature-video .video-wrap {
        height: 48vh !important;
        min-height: 260px;
    }

    .sofex-feature-video .video-content h2 {
        font-size: clamp(16px, 6.0vw, 24px);
    }

    .sofex-feature-video .video-content p {
        font-size: clamp(11px, 3.6vw, 14px);
    }

    /* add a little top margin so following content doesn't overlap */
    #rrzb_1 {
        padding-top: 22px !important;
        margin-bottom: 8px !important;
    }

    .page_content_wrap .content {
        margin-top: 16px !important;
    }

    /* make counter slightly smaller on phones/tablets */
    .sc_skills_item_title .counter {
        font-size: 3.2em !important;
    }

    /* Highlights -> single column */
    .hs-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hs-card {
        padding: 18px;
        min-height: 220px;
    }

    /* Services -> full width stacked */
    .sc_services_columns_wrap .trx_addons_column-1_4,
    .sc_services_columns_wrap .trx_addons_column-1_4.trx_addons_column-1_2-tablet {
        width: 100% !important;
        padding: 8px !important;
    }

    .sc_services_item_content {
        min-height: 180px !important;
        background-size: cover !important;
    }

    /* Partners -> single column, images smaller */
    .container11 .trx_addons_column-1_3 {
        width: 100% !important;
        padding: 8px;
    }

    .container11 .post_featured {
        height: 150px !important;
        background-size: contain !important;
    }

    /* Partner name CTA */
    .container11 .item_more_link {
        font-size: 16px !important;
        padding: 10px !important;
        display: block;
        text-align: center;
    }

    /* Mobile menu: increase tap areas */
    .menu_mobile_nav a,
    .menu_mobile_nav a span,
    .sc_layouts_menu_mobile_button_burger a {
        font-size: 18px !important;
        padding: 14px 12px !important;
        display: block;
    }

    /* Modal / popup responsive sizing */
    .adp-popup-wrap2 {
        padding: 12px;
    }

    .adp-popup-outer,
    .adp-popup-container,
    .adp-popup-content {
        width: 100% !important;
        max-width: 560px !important;
        margin: 0 auto !important;
    }

    .adp-popup-inner {
        padding: 14px !important;
    }

    /* Footer store buttons full width on small screens */
    .store-buttons {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .store-btn {
        width: 100%;
        max-width: 100%;
    }
}

/* Very small phones */
@media (max-width: 460px) {

    .color-scheme-silver a:link {
        color: #ca9d60 !important;
    }
    .color-scheme-silver a:visited {
        color: #ca9d60 !important;
    }
    .days, .hours, .minutes, .seconds, .seperator {
        font-size: 55px !important;
    }

    .hero-vedio-height {
        position: absolute;
        display: block;
        overflow: hidden;
        height: 120% !important;
        width: 100%;
        z-index: 20;
        opacity: 1;
        visibility: inherit;
    }

    .hero-content-mobile {
        margin-top: 40px;
    }

    .rs-fullwidth-wrap {
        position: relative;
        width: 100%;
        height: 420px;
        display: block;
        overflow: visible;
        max-width: none !important;
    }

    .os-phrases h2 {
        font-size: 30px !important; /* smaller text on very small phones */
        line-height: 1.05 !important;
    }

    .hs-title {
        font-size: 18px !important;
    }

    .container11 .item_more_link {
        font-size: 15px !important;
        padding: 8px 6px !important;
    }

    .track img {
        width: 180px;
        height: 260px;
    }

    .container11 .post_featured {
        height: 130px !important;
    }

    .trx_addons_columns_wrap {
        margin-right: 0;
    }

    .trx_addons_column-1_3 {
        margin-left: 15px;
        margin-right: 15px;
    }

    /* increase hero height slightly and ensure content is pushed down */
    .sofex-feature-video .video-wrap {
        height: 52vh !important;
        min-height: 260px;
    }

    /* more top spacing so header and hero text do not overlap */
    #rrzb_1 {
        padding-top: 28px !important;
        margin-bottom: 8px !important;
    }

    .page_content_wrap .content {
        margin-top: 18px !important;
    }

    /* Make counter much smaller on the smallest phones */
    .sc_skills_item_title .counter {
        font-size: 2.4em !important;
    }
    .mesoc_header {
        margin-top: 100px;
    }
    .os-fontsize { 
        font-size : 55px !important;
    }
    .MsoNormal {
        margin-left: 5px !important;
        text-align: justify;
 
    }
}

/* Accessibility / prevent background scrolling when modal is open
   — JS should toggle .modal-open on <body> when showing popups */
@media (max-width: 991px) {
    body.modal-open {
        overflow: hidden !important;
        touch-action: none;
    }
}