/* ==========================================================================
   mobile.css  -  mobile / tablet optimisation layer
   Loaded LAST (after css/basic.css) so it can refine the existing rules.
   Breakpoints: 991px (tablet), 767px (large phone), 575px (phone), 380px (small phone)
   ========================================================================== */

/* ---------- Global safety net (all sizes) ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, .08);
}
body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
img, video, svg { max-width: 100%; }
img { height: auto; }
iframe, embed, object { max-width: 100%; }
table { max-width: 100%; }

/* Respect users who ask for less motion (also saves battery on phones) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .show, [data-delighter] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Tablet and below ---------- */
@media (max-width: 991px) {
  .main-slider { padding: 50px 5%; }
  .main-slider .carousel-caption h5 { font-size: 44px; line-height: 1.15; }
  .main-slider .sld-right { margin-top: 30px; text-align: center; }
  .main-slider .sld-right .inner img,
  .main-slider .sld-right img { max-width: 100%; height: auto; }

  /* Fixed 450px shape was wider than most phones */
  .txt-fld .pr-shape .inner-img .img-shape {
    width: 100%; max-width: 450px; height: auto; margin: 0 auto 24px;
  }

  .al-products .procon { padding: 3rem 5%; }
  .al-products .all-pro { padding: 30px 0 20px; }

  .al-footer .ft-top .lft,
  .al-footer .ft-top .rht { justify-content: center !important; text-align: center; }
}

/* ---------- Large phone / small tablet ---------- */
@media (max-width: 767px) {
  /* Header: keep the social icons from colliding with the menu button */
  .full-width-header .social { right: 70px; top: 14px; }
  .full-width-header .social .inner { gap: 12px; }
  .full-width-header .social .inner a i { font-size: 14px; }

  /* Comfortable tap targets for menu links and buttons */
  .rs-menu ul li a,
  .mobile-navbar-menu a,
  .right_menu_togle a { min-height: 44px; display: flex; align-items: center; }
  .nav-expander, .nav-close { min-width: 44px; min-height: 44px; }

  .sld-read a, .pr-btn a, .ab-btn a, .bl-btn a, .req-call a, .req-btn a {
    display: inline-block; min-height: 44px; line-height: 24px;
  }

  .main-slider { padding: 40px 5% 50px; }
  .main-slider .carousel-caption { padding-left: 0; padding-right: 0; }
  .main-slider .carousel-caption h5 { font-size: 34px; }
  .main-slider .carousel-caption p { font-size: 16px !important; line-height: 1.5; }

  .txt-fld { padding: 30px 5%; }
  .txt-fld .inner-txt h1 { font-size: 26px; line-height: 1.25; }

  .req-call { gap: 1rem; padding: 0 5px; }
  .req-call p { font-size: 17px; line-height: 1.35; }

  /* Blog cards were squeezed by 15% side padding */
  .al-blogs-indx { padding: 30px 5%; }
  .al-blogs-indx .each-blog { margin-bottom: 1.25rem; }

  /* Footer */
  .al-footer .mx-container { padding-left: 5%; padding-right: 5%; }
  .al-footer .ft-top h3 { font-size: 15px; line-height: 1.4; text-align: center; }
  .al-footer .ft-dtls .addr,
  .al-footer .ft-dtls .social { text-align: center; }
  .al-footer .ft-dtls .social { margin-top: 14px; }
  .al-footer .ft-dtls .social a { display: inline-flex; min-width: 44px; min-height: 44px;
                                  align-items: center; justify-content: center; }
  .al-footer .ft-con-sec .con-item { text-align: center; }
  .ft-bot .ft-con-link { justify-content: center !important; }
  .ft-bot .copy-rht { text-align: center !important; padding-left: 5%; padding-right: 5%; }

  /* Contact page */
  .con-iframe { margin-top: 1.5rem; }
  .con-iframe iframe { height: 300px; }

  /* Forms: 16px stops iOS Safari zooming in on focus */
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="search"], input[type="url"], input[type="password"],
  select, textarea {
    font-size: 16px !important; max-width: 100%; box-sizing: border-box;
  }
  textarea { min-height: 120px; }
  input[type="submit"], button[type="submit"] { min-height: 46px; }

  /* Wide content scrolls inside itself instead of widening the page */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* ---------- Phones ---------- */
@media (max-width: 575px) {
  .main-slider .carousel-caption h5 { font-size: 28px; }
  .al-about .ab-content { padding: 40px 6%; }
  .al-about .ab-content h4 { font-size: 26px; }
  .al-products .pro-wel h3 { font-size: 22px; }

  /* Floating call / WhatsApp buttons: smaller, closer to the edge, notch-safe */
  .floating, .floating-call {
    left: 14px;
    width: 44px; height: 44px;
    margin-left: env(safe-area-inset-left, 0);
  }
  .floating { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 24px; }
  .floating-call { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); font-size: 20px; }
  .float-button { margin-top: 9px; }

  #scrollUp { right: 14px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Small phones ---------- */
@media (max-width: 380px) {
  .full-width-header .social { display: none; }   /* no room next to the logo + menu button */
  .main-slider .carousel-caption h5 { font-size: 24px; }
  .txt-fld .inner-txt h1 { font-size: 22px; }
}

/* ---------- Landscape phones: avoid tall hero sections ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .main-slider { padding-top: 24px; padding-bottom: 24px; }
}