/*! ------------------------------------------------
 * Mobile Fixes for Stacking Cards and Responsive Issues
 * ------------------------------------------------ */

/* Fix for mobile stacking cards visibility */
@media only screen and (max-width: 991px) {
  
  /* Disable stacking behavior on mobile - show as normal cards */
  .stack-wrapper {
    position: relative !important;
    height: auto !important;
  }
  
  .services-stack {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  .stack-item {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
    padding-bottom: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .stack-offset {
    display: none !important;
  }
  
  /* Ensure cards are visible and properly sized */
  .mxd-services-stack__inner {
    position: relative !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 3rem 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  /* Fix title and info widths on mobile */
  .mxd-services-stack__title.width-60,
  .mxd-services-stack__info.width-60 {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }
  
  /* Ensure proper spacing */
  .mxd-services-stack__title {
    margin-bottom: 2rem !important;
  }
  
  .mxd-services-stack__info {
    margin-bottom: 0 !important;
    width: 100% !important;
  }
  
  /* Fix controls positioning */
  .mxd-services-stack__controls {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-bottom: 1rem !important;
  }
  
  /* Ensure tags wrap properly */
  .mxd-services-cards__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.8rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Fix text visibility */
  .mxd-services-stack__inner p {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Ensure proper border radius on mobile */
  .mxd-services-stack__inner {
    border-radius: 2rem !important;
  }
  
  .mxd-services-stack__inner.radius-dark {
    border-radius: 2rem !important;
  }
}

/* Additional mobile fixes for very small screens */
@media only screen and (max-width: 480px) {
  .mxd-services-stack__inner {
    padding: 2.5rem 1.5rem !important;
  }
  
  .mxd-services-stack__title h3 {
    font-size: 3rem !important;
    line-height: 1.2 !important;
  }
  
  .service-number {
    font-size: 2.5rem !important;
  }
}

/* Fix for stats cards on mobile */
@media only screen and (max-width: 767px) {
  .mxd-stats-cards__item {
    margin-bottom: 2rem !important;
  }
  
  .mxd-stats-cards__inner {
    min-height: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
}

/* Fix for pricing cards on mobile */
@media only screen and (max-width: 767px) {
  .mxd-pricing-card {
    margin-bottom: 2rem !important;
  }
  
  .pricing-features {
    min-height: auto !important;
  }
}

/* Ensure smooth scrolling on mobile */
@media only screen and (max-width: 991px) {
  body {
    overflow-x: hidden !important;
  }
  
  .mxd-section {
    overflow-x: hidden !important;
  }
  
  .mxd-container {
    overflow-x: hidden !important;
  }
}

/* Fix for process navigation on mobile */
@media only screen and (max-width: 767px) {
  .process-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .process-nav__item {
    width: 100% !important;
  }
  
  .process-nav__link {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}

/* Fix for footer on mobile */
@media only screen and (max-width: 767px) {
  .footer-blocks__column {
    margin-bottom: 3rem !important;
  }
  
  .footer-nav {
    margin-bottom: 2rem !important;
  }
}

/* Ensure all animations work on mobile */
@media only screen and (max-width: 991px) {
  .anim-uni-in-up,
  .anim-uni-scale-in-right,
  .anim-uni-scale-in-left {
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Re-enable animations after page load */
  .page-loaded .anim-uni-in-up,
  .page-loaded .anim-uni-scale-in-right,
  .page-loaded .anim-uni-scale-in-left {
    animation: fadeInUp 0.6s ease-out !important;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fix for hero section on mobile */
@media only screen and (max-width: 767px) {
  .mxd-hero-01__data-wrap {
    padding: 0 !important;
  }
  
  .hero-01-title {
    font-size: 4rem !important;
  }
  
  .mxd-hero-01__data-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* Ensure proper z-index stacking */
@media only screen and (max-width: 991px) {
  .stack-item {
    z-index: auto !important;
  }
  
  .mxd-services-stack__inner {
    z-index: auto !important;
  }
}

/* ------------------------------------------------
 * Services List Page Mobile Fixes
 * ------------------------------------------------ */

/* Disable all hover animations and effects on mobile */
@media only screen and (max-width: 1199px) {
  
  /* Remove hover reveal images on mobile */
  .mxd-services-list .hover-reveal__content {
    display: none !important;
  }
  
  /* Disable hover opacity effects */
  .mxd-services-list:hover > .mxd-services-list__item:not(:hover) {
    opacity: 1 !important;
  }
  
  .mxd-services-list > .mxd-services-list__item {
    opacity: 1 !important;
    transition: none !important;
  }
  
  /* Simplify services list layout for mobile */
  .mxd-services-list {
    display: block !important;
    padding-top: 4rem !important;
  }
  
  .mxd-services-list__item {
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
  
  /* Simple card-based layout */
  .mxd-services-list__inner {
    padding: 3rem 1.5rem !important;
    display: block !important;
  }
  
  /* Stack all columns vertically */
  .mxd-services-list__inner .container-fluid,
  .mxd-services-list__inner .row {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .mxd-services-list__inner .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Title styling for mobile */
  .mxd-services-list__title {
    margin-bottom: 2rem !important;
  }
  
  .mxd-services-list__title p {
    font-size: 3.6rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02rem !important;
  }
  
  /* Description styling for mobile */
  .mxd-services-list__descr {
    margin-bottom: 2rem !important;
  }
  
  .mxd-services-list__descr p {
    font-size: 1.6rem !important;
    line-height: 1.5 !important;
    color: var(--t-medium) !important;
  }
  
  /* Tags list styling for mobile */
  .mxd-services-list__tagslist {
    padding: 0 !important;
    margin-bottom: 1rem !important;
  }
  
  .mxd-services-list__tagslist ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.8rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .mxd-services-list__tagslist ul li {
    display: inline-block !important;
    margin: 0 !important;
  }
  
  .mxd-services-list__tagslist ul li p {
    font-size: 1.4rem !important;
    padding: 0.6rem 1.2rem !important;
    background: var(--base-tint) !important;
    border-radius: 2rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  
  /* Border styling for mobile */
  .mxd-services-list__border {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: var(--border-color) !important;
    margin: 0 !important;
  }
  
  /* Remove animations on mobile for better performance */
  .mxd-services-list__item .anim-uni-in-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Ensure proper spacing between items */
  .mxd-services-list__item:not(:last-child) {
    margin-bottom: 0 !important;
  }
  
  /* Remove grid gaps that cause issues */
  .mxd-services-list .mxd-grid-item {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Extra small screens - further simplification */
@media only screen and (max-width: 767px) {
  
  .mxd-services-list {
    padding-top: 2rem !important;
  }
  
  .mxd-services-list__inner {
    padding: 2.5rem 1.5rem !important;
  }
  
  .mxd-services-list__title p {
    font-size: 3rem !important;
  }
  
  .mxd-services-list__descr p {
    font-size: 1.5rem !important;
  }
  
  .mxd-services-list__tagslist ul li p {
    font-size: 1.3rem !important;
    padding: 0.5rem 1rem !important;
  }
}

/* Very small screens */
@media only screen and (max-width: 480px) {
  
  .mxd-services-list__inner {
    padding: 2rem 1rem !important;
  }
  
  .mxd-services-list__title {
    margin-bottom: 1.5rem !important;
  }
  
  .mxd-services-list__title p {
    font-size: 2.6rem !important;
  }
  
  .mxd-services-list__descr {
    margin-bottom: 1.5rem !important;
  }
  
  .mxd-services-list__descr p {
    font-size: 1.4rem !important;
  }
  
  .mxd-services-list__tagslist ul {
    gap: 0.6rem !important;
  }
  
  .mxd-services-list__tagslist ul li p {
    font-size: 1.2rem !important;
    padding: 0.4rem 0.8rem !important;
  }
}

/* Ensure no horizontal overflow on services page */
@media only screen and (max-width: 1199px) {
  .mxd-section-inner-stats,
  .mxd-section.overflow-hidden {
    overflow-x: hidden !important;
  }
  
  .mxd-services-list,
  .mxd-services-list__item,
  .mxd-services-list__inner {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* ------------------------------------------------
 * Touch and Interaction Improvements for Mobile
 * ------------------------------------------------ */

/* Better touch targets for mobile */
@media only screen and (max-width: 1199px) {
  
  /* Ensure all interactive elements have proper touch targets */
  .mxd-services-list a,
  .mxd-services-list button {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Disable pointer events on non-interactive elements */
  .mxd-services-list__item {
    pointer-events: auto !important;
    cursor: default !important;
  }
  
  /* Remove any transform effects that cause shifting */
  .mxd-services-list__item,
  .mxd-services-list__inner,
  .mxd-services-list__title,
  .mxd-services-list__descr,
  .mxd-services-list__tagslist {
    transform: none !important;
    will-change: auto !important;
  }
  
  /* Prevent any sliding or shifting animations */
  .mxd-services-list * {
    transition: none !important;
  }
  
  /* Ensure smooth scrolling without janky animations */
  .mxd-services-list {
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Remove any parallax or scroll-based animations */
  .mxd-services-list [data-parallax],
  .mxd-services-list .parallax-img,
  .mxd-services-list .parallax-img-small {
    transform: none !important;
    transition: none !important;
  }
}

/* Prevent layout shift during page load */
@media only screen and (max-width: 1199px) {
  .mxd-services-list__item {
    min-height: auto !important;
    height: auto !important;
  }
  
  .mxd-services-list__inner {
    min-height: auto !important;
    height: auto !important;
  }
}

/* Fix for stats cards on services page */
@media only screen and (max-width: 1199px) {
  .mxd-section-inner-stats .mxd-stats-cards {
    display: block !important;
  }
  
  .mxd-section-inner-stats .mxd-stats-cards__item {
    width: 100% !important;
    margin-bottom: 2rem !important;
  }
  
  .mxd-section-inner-stats .mxd-stats-cards__inner {
    padding: 3rem 2rem !important;
  }
}

@media only screen and (max-width: 767px) {
  .mxd-section-inner-stats .mxd-stats-cards__inner {
    padding: 2.5rem 1.5rem !important;
  }
  
  .mxd-counter__number {
    font-size: 4rem !important;
  }
  
  .mxd-counter__descr {
    font-size: 1.5rem !important;
  }
}