/* Global responsive safety */
/*
  Mobile-only fixes for Transvolt (Bootstrap + custom theme)
  Scope: <= 991px / 767px / 575px only
*/

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

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

  /* Theme sets large gutters (3rem) globally. Reduce on mobile to prevent left/right drift and overflow. */
  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl,
  .row {
    --bs-gutter-x: 1.5rem;
  }

  /* Prevent long strings (emails/addresses) from forcing horizontal scroll */
  p,
  a,
  li,
  span {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  a[href^="mailto:"],
  a[href^="tel:"] {
    overflow-wrap: anywhere;
  }

  /* Home page / section titles: current inline styles force nowrap + ellipsis (breaks mobile). */
  .rs-section-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* Banner subtitle has desktop margin-left in inline CSS. Remove on mobile only. */
  .banner-subtitle {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  /* Home banner has multiple inline margin-left:40px rules (company name, border, typing lines, button wrapper).
     Normalize them on mobile to prevent shifted content / overflow. */
  .rs-banner-area.rs-banner-three .company-name,
  .rs-banner-area.rs-banner-three .rs-banner-border,
  .rs-banner-area.rs-banner-three .typing-text,
  .rs-banner-area.rs-banner-three .typing-text-2,
  .rs-banner-area.rs-banner-three .rs-banner-btn {
    margin-left: 0 !important;
  }

  /* Banner buttons: keep them inside viewport and prevent overflow */
  .rs-banner-area.rs-banner-three .rs-banner-btn {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-right: 20px;
    margin-top: 40px;
    align-items: center;
  }

  .rs-banner-area.rs-banner-three .rs-banner-btn .rs-btn,
  .rs-banner-area.rs-banner-three .rs-banner-btn a {
    max-width: 100%;
  }

  /* Offcanvas width safety (do not affect desktop) */
  .rs-offcanvas-menu {
    width: 100vw;
    max-width: 320px;
  }

  /* Contact page custom grid: convert to single column on tablets/phones */
  .tv-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer (<=991): neutralize inline offsets + RTL side effects that cause mobile/tablet misalignment */
  .rs-footer-area .rs-footer-widget {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .rs-footer-area .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .rs-footer-area .rs-footer-top .row {
    --bs-gutter-x: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .rs-footer-area .rs-footer-top .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .rs-footer-area .rs-footer-widget {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .rs-footer-area .rs-footer-top .rs-footer-widget,
  .rs-footer-area .rs-footer-top .rs-footer-widget p,
  .rs-footer-area .rs-footer-top .rs-footer-widget a {
    text-align: left !important;
  }

  body.rtl .rs-footer-area {
    direction: ltr !important;
  }

  .rs-footer-area .contact-item i {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
}

@media (max-width: 767px) {
  /* Slightly tighter gutters for phones */
  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl,
  .row {
    --bs-gutter-x: 1.25rem;
  }

  /* Prevent custom section padding rules from causing inconsistent left spacing */
  section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Footer: fix left drift + stacking across pages */
  .rs-footer-area .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .rs-footer-area .rs-footer-top .row {
    --bs-gutter-x: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 24px;
  }

  .rs-footer-area .rs-footer-top .row > [class*="col-"] {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .rs-footer-area .rs-footer-top {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .rs-footer-area .rs-footer-widget {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Footer text: avoid justify on mobile (causes uneven word spacing / “misaligned text”) */
  .rs-footer-area .rs-footer-top .rs-footer-widget,
  .rs-footer-area .rs-footer-top .rs-footer-widget p,
  .rs-footer-area .rs-footer-top .rs-footer-widget a {
    text-align: left !important;
  }

  /* Footer contact rows: fixed icon column + consistent text start */
  .rs-footer-area .rs-footer-top .contact-item {
    align-items: flex-start !important;
  }

  .rs-footer-area .rs-footer-top .contact-item i {
    width: 20px;
    min-width: 20px;
    flex: 0 0 20px;
  }

  /* About page uses body.rtl which flips Bootstrap spacing (e.g. me-3). Keep footer layout LTR on mobile. */
  body.rtl .rs-footer-area {
    direction: ltr;
  }

  /* Remove icon margin utilities in footer (RTL can apply them to the opposite side). */
  .rs-footer-area .rs-footer-top .contact-item i {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }

  /* About page footer: contact details alignment (icons + text) */
  .rs-footer-area.rs-footer-two .rs-footer-widget {
    text-align: left !important;
  }

  .rs-footer-area.rs-footer-two .rs-footer-widget .contact-item {
    justify-content: flex-start;
  }

  .rs-footer-area.rs-footer-two .rs-footer-widget .contact-item.d-flex {
    display: flex;
    align-items: flex-start !important;
    gap: 10px;
  }

  .rs-footer-area.rs-footer-two .rs-footer-widget .contact-item.d-flex i {
    margin-right: 0 !important;
  }

  .rs-footer-area.rs-footer-two .rs-footer-widget .contact-item.d-flex a {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    overflow-wrap: anywhere;
  }

  /* Footer icon + text alignment (when markup uses .contact-item pattern) */
  .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .contact-item i {
    flex: 0 0 auto;
    margin-top: 2px;
  }

  .rs-footercopyright-area {
    text-align: center;
  }

  /* Contact page form grid: 1 column on phones */
  .tv-form-grid {
    grid-template-columns: 1fr !important;
  }

  .tv-span-2 {
    grid-column: auto !important;
  }

  .tv-file {
    grid-template-columns: 1fr !important;
  }

  .tv-identifiers-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Home banner: reduce vertical padding on mobile without affecting desktop */
  .rs-banner-area.rs-banner-three {
    padding-top: 72px !important;
    padding-bottom: 10px !important;
  }

  /* Home banner: stack buttons cleanly + remove accidental large bottom margins */
  .rs-banner-area.rs-banner-three .rs-banner-btn {
    flex-direction: column;
    align-items: flex-start;
  }

  .rs-banner-area.rs-banner-three .rs-banner-btn .rs-btn {
    width: 100%;
    justify-content: center;
  }

  .rs-banner-area.rs-banner-three .rs-banner-btn .rs-btn.has-theme-blue {
    margin-bottom: 0 !important;
    margin-left: 0px;
  }

  /* Secondary button (if present near banner): remove desktop left offset */
  .video-play-btn {
    margin-left: 0 !important;
    margin-top: 12px;
  }

  /* Reduce generic section spacing on phones (safe, does not affect desktop) */
  .section-space,
  .section-space-top,
  .section-space-bottom {
  
  }

  /* Reduce excessive spacing utilities on mobile (theme uses spacing.css with large values) */
  .mt-40,
  .mt-50,
  .mt-60 {
    margin-top: 24px !important;
  }

  .mb-40,
  .mb-50,
  .mb-60 {
    margin-bottom: 24px !important;
  }

  .pt-100,
  .pb-100 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .pt-80,
  .pb-80 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Buttons: prevent overflow/misalignment on mobile across index sections */
  main .rs-btn,
  main .tv-cta-btn {
    width: 100%;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
    line-height: 1.25;
    white-space: normal;
  }

  main .rs-btn .btn-text {
    white-space: normal;
  }

  main .rs-btn .icon-box,
  main .rs-btn .btn-icon {
   
    align-items: center;
    justify-content: center;
  }

  main .rs-btn svg,
  main .rs-btn i {
    width: 18px;
    height: 18px;
  }

  main .rs-btn.has-icon {
    gap: 10px;
  }

  main .rs-btn .icon-box,
  main .rs-btn .btn-icon {
    flex: 0 0 auto;
  }

  /* Center CTA wrappers + add consistent spacing between CTAs and next sections */
  main .rs-about-btn,
  main .rs-blog-btn,
  main .rs-contact-btn {
    text-align: center;
  }

  main .rs-about-btn .rs-btn,
  main .rs-blog-btn .rs-btn,
  main .rs-contact-btn .rs-btn {
    margin-left: auto;
    margin-right: auto;
  }

  /* Index/About CTA: keep button nicely centered (not overly stretched) and align label+icon perfectly */
  main .rs-about-btn .rs-btn {
    margin-top: 40px;
    max-width: 360px;
  }

  main .rs-about-btn .rs-btn.has-icon {
    justify-content: center;
  }

  main .rs-about-btn,
  main .rs-blog-btn,
  main .rs-contact-btn,
  main .rs-banner-btn,
  main .rs-feature-area .col-12.text-center {
    margin-top: 16px;
    margin-bottom: -60px;
  }

  /* Index: remove the extra gap between About CTA and the Products heading */
  main .rs-about-area.section-space-bottom {
    padding-bottom: 8px !important;
  }

  main .rs-feature-area.section-space {
    padding-top: 0px !important;
  }

  main .rs-about-btn {
    margin-bottom: -40px !important;
  }

  /* Index: inline negative margin-top on CTA causes overlap on mobile */
  .rs-feature-area .col-12.text-center .rs-btn[style*="margin-top"] {
    margin-top: 0 !important;
    width: 360px;
    align-items: center;
  }
      .rs-btn.has-theme-blue {
        margin-bottom: 70px;
        padding: 12px 20px;
        font-size: 16px;
        width: auto;
        display: block;
        box-sizing: border-box;
        text-align: center;
    }

  iframe {
    max-width: 100% !important;
  }
}

@media (max-width: 575px) {
  /* Home typing text: reduce size to avoid truncation/overflow on very small screens */
  .typing-text,
  .typing-text-2 {
    font-size: 28px !important;
    letter-spacing: 0.06em !important;
  }

  /* Extra-tight spacing for very small phones */
  .mt-40,
  .mt-50,
  .mt-60 {
    margin-top: 18px !important;
  }

  .mb-40,
  .mb-50,
  .mb-60 {
    margin-bottom: 18px !important;
  }

  .back-to-top {
    right: 16px;
    bottom: 16px;
  }
}

/* ===============================
   ABOUT PAGE – MOBILE FIX
   =============================== */
@media (max-width: 767px) {

  /* Stack image + content cleanly */
  .rs-about-wrapper {
    position: static;
    display: block;
  }

  /* Remove overlay behavior */
  .rs-about-content {
    position: static !important;
    
    padding: 0 8px;
    text-align: left;
  }

  /* Ensure image behaves normally */
  .rs-about-thumb {
    position: static;
  }

  .rs-about-thumb img {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }

  /* Hide decorative shapes on mobile */
  .rs-about-shape {
    display: none;
  }

  /* Improve vertical rhythm */
  .rs-about-wrapper + .rs-about-wrapper {
    margin-top: 32px;
  }
}