/*----------------------------------------
   Sitewide responsive layer (loaded last on every page).
   Phones / tablets / iPads / laptops / desktops / large monitors / TVs.
----------------------------------------*/

/* ---------- Large monitors & TVs: scale the whole layout up ----------
   The site is designed in px for ~1440-1920px screens; on 2K/4K displays
   running at 1x it renders tiny. zoom scales everything proportionally.
   --mx-zoom lets 100vw-based widths compensate (100vw / zoom). */
:root {
  --mx-zoom: 1;
}

@media only screen and (min-width: 2200px) {
  :root { --mx-zoom: 1.2; }
  html { zoom: 1.2; }
}

@media only screen and (min-width: 2500px) {
  :root { --mx-zoom: 1.35; }
  html { zoom: 1.35; }
}

@media only screen and (min-width: 3000px) {
  :root { --mx-zoom: 1.6; }
  html { zoom: 1.6; }
}

@media only screen and (min-width: 3600px) {
  :root { --mx-zoom: 2; }
  html { zoom: 2; }
}

.home-service-section .service-wrap .service-marquee,
.about-service-section .service-wrap .service-marquee {
  width: calc(100vw / var(--mx-zoom));
}

/* ---------- Header: laptops / iPad landscape (992-1399px) ---------- */
.header-logo {
  flex-shrink: 0;
}

.header-menu .main-menu > li > a,
.header-menu .main-menu > li {
  white-space: nowrap;
}

@media only screen and (min-width: 992px) and (max-width: 1399px) {
  .header-menu .main-menu > li {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
  /* Keep the phone number, drop the email block to give the menu room */
  .header-meta .header-info:not(.mar-r-20) {
    display: none !important;
  }
  .header-meta .header-info.mar-r-20 {
    margin-right: 0 !important;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-menu .main-menu > li {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .header-menu .main-menu > li > a {
    font-size: 14px;
  }
  .header-meta .header-info {
    display: none !important;
  }
}

/* ---------- Homepage hero: stack on tablets so cards don't cover text ---------- */
@media only screen and (max-width: 991px) {
  .tech-hero-section-6 .row > [class*="col-md-6"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .tech-hero-section-6 .hero-content {
    max-width: none;
    padding-top: 60px;
  }
  .tech-hero-section-6 .hero-images {
    padding-top: 30px;
    text-align: center;
  }
  .tech-hero-section-6 .hero-images .images img {
    width: 100%;
    max-width: 520px;
  }
  .tech-hero-section-6 .hero-images::before {
    left: 50% !important;
    transform: translate(-50%, 50px) !important;
  }
}

/* ---------- Platform page heroes: stack on tablets ---------- */
@media only screen and (max-width: 991px) {
  .ai-hero-section .row > [class*="col-lg-6"],
  .mxtech-hero-section .row > [class*="col-lg-6"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .ai-copilot-window,
  .mxtech-code-window {
    margin-top: 40px;
  }
}

/* ---------- Typography safety on small screens ---------- */
@media only screen and (max-width: 767px) {
  h1, h2, h3, .title {
    overflow-wrap: break-word;
  }
  .section-title2 .title,
  .section-title .title {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.25 !important;
  }
}

/* ---------- Very small phones (< 380px) ---------- */
@media only screen and (max-width: 379px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .btn {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

/* ---------- Landscape phones: trim tall hero padding ---------- */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  .page-banner-section {
    min-height: 240px !important;
    padding-top: 100px !important;
  }
  .tech-hero-section-6 .hero-content {
    padding-top: 40px;
  }
}

/* =========================================================
   Lite mode (html.mx-lite, set by magic-ui.js on phones/tablets/low-memory).
   iOS Safari kills the page ("A problem repeatedly occurred") when dozens of
   backdrop-filters, big blurs and masked/animated layers run at once.
   ========================================================= */
.mx-lite *,
.mx-lite *::before,
.mx-lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mx-lite .mx-beam,
.mx-lite .mx-spot,
.mx-lite .mx-flicker,
.mx-lite .mx-fx-orb,
.mx-lite .mx-retro-grid,
.mx-lite .mx-cursor-glow {
  display: none !important;
}

/* Kept on phones, but as soft gradients that only move (no blur filter,
   which is what made iOS run out of graphics memory). */
.mx-lite .mx-aurora i,
.mx-lite .mx-amb i,
.mx-lite .mx-banner-aurora i {
  filter: none !important;
  will-change: transform;
}

.mx-lite .mx-aurora i {
  opacity: 0.32;
}

.mx-lite .mx-meteors i {
  box-shadow: none;
  background: #9eeaf7;
}

/* Reveals: plain fade + rise, no blur or 3D */
.mx-lite .mx-reveal {
  filter: none !important;
  transform: translateY(28px) !important;
}

.mx-lite .mx-reveal.mx-in {
  transform: none !important;
}

.mx-lite .mx-words-pending .mx-word {
  filter: none !important;
  transform: translateY(0.4em) !important;
}

.mx-lite .mx-words-in .mx-word {
  transform: none !important;
}

/* Rays sway via transform only (cheap); drop the blur */
.mx-lite .mx-rays {
  filter: none !important;
}

.mx-lite .page-banner-section::after,
.mx-lite .mx-amb::before,
.mx-lite .mxc-dots,
.mx-lite .mx-hero-grid {
  animation: none !important;
}

.mx-lite .mxc-blob {
  filter: blur(40px) !important;
  animation: none !important;
}

.mx-lite .home-service-section .service-wrap .service-item::before,
.mx-lite .about-service-section .service-wrap .service-item::before {
  animation: none !important;
}

/* Masked conic rings around icons: keep the dashed ring, drop the masked arc */
.mx-lite .home-service-section .service-wrap .service-item .service-icon::after,
.mx-lite .about-service-section .service-wrap .service-item .service-icon::after,
.mx-lite .mx-orb-wrap::after {
  display: none !important;
}

/* =========================================================
   Phones: compact feature cards (icon left, text right)
   ========================================================= */
@media only screen and (max-width: 767px) {
  .features-section-3 .features-wrap-3 .features-content-wrap .single-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 20px !important;
    margin-top: 14px !important;
    border-radius: 18px !important;
  }

  .features-section-3 .features-wrap-3 .features-content-wrap .single-item.h-100 {
    height: auto !important;
  }

  .features-section-3 .features-wrap-3 .features-content-wrap .single-item .features-icon {
    flex: 0 0 auto;
  }

  .features-section-3 .features-wrap-3 .features-content-wrap .single-item .features-icon img {
    height: 46px;
    width: auto;
  }

  .features-section-4 .features-wrap-3 .features-content-wrap .single-item .features-icon::before {
    left: -6px;
    top: 4px;
    width: 46px;
    height: 46px;
  }

  .features-section-3 .features-wrap-3 .features-content-wrap .single-item .product-window-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin: 0;
  }

  .features-section-3 .features-wrap-3 .features-content-wrap .single-item .features-content {
    flex: 1;
    min-width: 0;
  }

  .features-section-3 .features-wrap-3 .features-content-wrap .single-item .features-content .title {
    margin-top: 2px !important;
    font-size: 19px !important;
    line-height: 26px !important;
  }

  .features-section-3 .features-wrap-3 .features-content-wrap .single-item .features-content p {
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 23px;
  }

  .features-section-3 .features-wrap-3 .features-content-wrap .row > div {
    margin-bottom: 0;
  }
}

/* Services "What we've built" section: keep the image glow inside the page */
.skill-section {
  overflow: hidden;
}

@media only screen and (max-width: 991px) {
  .skill-section-3 .skill-wrap .skill-content-wrap .skill-content-left .skill-img img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
  }
  .skill-section-3 .skill-wrap .skill-content-wrap .skill-content-right {
    margin-top: 30px;
  }
}

@media only screen and (max-width: 575px) {
  .mx-journey-step {
    padding: 20px 18px;
  }
  .mx-journey-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
    border-radius: 13px;
  }
  .mx-journey-step h4 {
    margin-top: 12px;
    font-size: 18px;
  }
  .mx-journey-num {
    font-size: 24px;
  }
}

/* Touch feedback: cards press in when tapped */
.mx-lite .mx-card {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.mx-lite .mx-card:active {
  transform: scale(0.98);
}

/* Dropdowns of the last top-menu items open leftward so they stay on screen */
.header-menu .main-menu > li:last-child > .sub-menu,
.header-menu .main-menu > li:nth-last-child(2) > .sub-menu {
  left: auto;
  right: 0;
}