@media (min-width: 768px) and (max-width: 1024px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: min(100% - 2.5rem, 100%);
        padding-inline: clamp(1rem, 2.2vw, 1.25rem);
    }

    h1 {
        font-size: clamp(2.1rem, 4.8vw, 3rem);
        line-height: 1.2;
    }

    h2 {
        font-size: clamp(1.7rem, 3.5vw, 2.3rem);
        line-height: 1.25;
    }

    h3 {
        font-size: clamp(1.25rem, 2.5vw, 1.55rem);
        line-height: 1.35;
    }

    p,
    li,
    .faq-answer,
    .contact-pane-intro,
    .modal-content p {
        font-size: clamp(0.98rem, 1.8vw, 1.08rem);
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    button,
    .btn,
    .nav-links a,
    .mobile-menu a,
    .section-nav-text {
        font-size: clamp(0.96rem, 1.8vw, 1.05rem);
        line-height: 1.35;
    }

    html[lang="ar"] h1,
    html[lang="ar"] h2,
    html[lang="ar"] h3,
    html[lang="ar"] p,
    html[lang="ar"] li,
    html[lang="ar"] button,
    html[lang="ar"] .btn,
    html[lang="ar"] .nav-links a,
    html[lang="ar"] .mobile-menu a {
        letter-spacing: normal !important;
        line-height: 1.75;
    }

    .grid-3,
    .inl-011,
    .inl-025,
    .inl-037,
    .contact-methods-grid,
    .social-media-buttons,
    .demo-form-grid,
    .x4i-rd-summary-grid,
    .x4i-rd-phase-item,
    .x4i-rd-diff-grid,
    .x4i-rd-flow-grid,
    .x4i-rd-compare-grid,
    .x4i-rd-legacy-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .card,
    .loss-card,
    .value-anchor-card,
    .contact-method-card,
    .contact-modal-body,
    .contact-tab-pane {
        padding: clamp(1rem, 2.2vw, 1.2rem);
        border-radius: 16px;
    }

    a,
    button,
    .btn,
    .social-btn,
    .contact-tab,
    .contact-method-card,
    .section-nav-item,
    .section-nav-toggle,
    .carousel-fixed-btn,
    .carousel__navigation-button,
    .mobile-menu a,
    .mobile-menu .nav-btn,
    .close-mobile-menu,
    .mobile-language-btn,
    .mobile-theme-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    .nav-links,
    .mobile-menu {
        gap: 10px;
    }

    .mobile-menu,
    .contact-modal-body,
    .section-nav-items,
    .applications-carousel,
    .about-cards,
    .contact-pane-shell {
        overflow-x: hidden;
    }

    #applications .carousel-track .card {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    img,
    video {
        max-width: 100%;
        height: auto;
    }

    .card:hover,
    .loss-card:hover,
    .value-anchor-card:hover,
    .section-nav-item:hover,
    .social-btn:hover,
    .about-card-vertical:hover {
        transform: none !important;
    }

    body[dir="rtl"] .mobile-menu a,
    body[dir="rtl"] .contact-modal-body,
    body[dir="rtl"] .section-nav-item {
        text-align: right;
    }
}