/* Comprehensive Mobile Enhancements for All Sections */

/* ===== GLOBAL MOBILE IMPROVEMENTS ===== */
@media (max-width: 991px) {
  /* Better section spacing */
  .sp1, .sp2 {
    padding: 60px 0 !important;
  }
  
  /* Container padding */
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  /* Section titles */
  .vl-section-title {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
  
  .vl-section-subtitle {
    font-size: 14px !important;
  }
}

/* ===== REMOVE COLUMN GAPS ON MOBILE - ALL SERVICE PAGES ===== */
@media (max-width: 767px) {
  /* Make all list columns full-width on mobile - removes gaps */
  .m-list-area .col-lg-4,
  .m-list-area .col-lg-6,
  .m-list-area .col-md-6,
  .img-list-area .col-lg-6,
  .img-list-area .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 0 !important;
  }
  
  /* Remove extra spacing in list containers */
  .m-list-area .row,
  .img-list-area .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Consistent list styling across all service pages */
  .m-list,
  .img-list {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
  }
  
  /* Uniform spacing between list items */
  .m-list li,
  .img-list li {
    margin-bottom: 10px !important;
    line-height: 1.6 !important;
  }
  
  /* Remove last item bottom margin */
  .m-list li:last-child,
  .img-list li:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Ensure consistent padding in nested columns */
  .m-list-area .row .row > [class*="col-"],
  .img-list-area .row .row > [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ===== TABLET VIEW ADJUSTMENTS ===== */
@media (max-width: 991px) and (min-width: 768px) {
  /* Optimize 2-column layout for tablets */
  .m-list-area .col-lg-4,
  .m-list-area .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  
  /* Reduce gaps between columns on tablets */
  .m-list-area .row > [class*="col-"],
  .img-list-area .row > [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 767px) {
  .sp1, .sp2 {
    padding: 50px 0 !important;
  }
  
  .vl-section-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  
  .space-margin60 {
    margin-bottom: 40px !important;
  }
}

/* ===== HERO SECTION MOBILE ===== */
@media (max-width: 991px) {
  .hero4-section-area {
    padding: 80px 0 60px !important;
    min-height: auto !important;
  }
  
  .hero4-section-area .row {
    flex-direction: column-reverse;
  }
  
  .hero4-images-area {
    margin-bottom: 40px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero-header h2 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
  
  .hero-header p {
    font-size: 16px;
    line-height: 1.6;
  }
  
  .btn-area1 {
    margin-bottom: 20px;
  }
  
  .vl-btn4 {
    padding: 14px 28px;
    font-size: 15px;
  }
}

@media (max-width: 576px) {
  .hero4-section-area {
    padding: 60px 0 40px !important;
  }
  
  .hero-header h2 {
    font-size: 26px !important;
  }
  
  .hero4-images-area {
    max-width: 100%;
  }
}

/* ===== ABOUT SECTION MOBILE ===== */
@media (max-width: 991px) {
  .about4-section-area .row {
    flex-direction: column-reverse;
  }
  
  .about-images-area {
    margin-bottom: 40px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .about4-heading h3 {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }
  
  .about4-heading p {
    font-size: 15px;
    line-height: 1.7;
    text-align: justify;
  }
}

@media (max-width: 576px) {
  .about-images-area {
    max-width: 100%;
  }
  
  .about4-heading h3 {
    font-size: 22px !important;
  }
}

/* ===== MARQUEE SLIDER MOBILE ===== */
@media (max-width: 767px) {
  .marquee-wrap {
    padding: 20px 0;
  }
  
  .marquee-text span {
    font-size: 18px !important;
  }
}

/* ===== SERVICE SECTION MOBILE ===== */
@media (max-width: 991px) {
  .service4-section-area {
    padding: 60px 0 !important;
  }
  
  .service4-boxarea {
    margin-bottom: 30px;
    height: auto !important;
  }
  
  .service4-boxarea .content-area {
    padding: 24px !important;
  }
  
  .service4-boxarea .content-area .title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  
  .service4-boxarea .content-area p {
    font-size: 15px;
    line-height: 1.6;
  }
  
  .service4-boxarea .img1 {
    height: 220px;
  }
  
  .service4-boxarea .img1 img {
    object-fit: cover;
  }
}

@media (max-width: 576px) {
  .service4-boxarea .content-area {
    padding: 20px !important;
  }
  
  .service4-boxarea .content-area .title {
    font-size: 18px !important;
  }
  
  .service4-boxarea .img1 {
    height: 200px;
  }
}

/* ===== SERVICE BENEFITS MOBILE ===== */
@media (max-width: 991px) {
  .service-benefites-section-area {
    padding: 60px 0 !important;
  }
  
  .benefits-boxarea {
    padding: 24px !important;
    border-radius: 12px;
    transition: all 0.3s ease;
  }
  
  .benefits-boxarea:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  }
  
  .benefits-boxarea .icon img {
    width: 50px;
    height: 50px;
  }
  
  .benefits-boxarea h4 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  
  .benefits-boxarea p {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* ===== CTA SECTION MOBILE ===== */
@media (max-width: 991px) {
  .cta4-section-area {
    padding: 50px 0 !important;
  }
  
  .cta4-section-area .heading4 h2 {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }
  
  .cta4-section-area .btn-area1 {
    text-align: center !important;
    margin-top: 30px;
  }
}

@media (max-width: 576px) {
  .cta4-section-area .heading4 h2 {
    font-size: 22px !important;
  }
}

/* ===== CARDS & BOXES GENERAL ===== */
@media (max-width: 991px) {
  /* Last items don't need margin */
  .row > [class*="col-"]:last-child [class*="-boxarea"],
  .row > [class*="col-"]:last-child [class*="-item"],
  .row > [class*="col-"]:last-child [class*="-card"] {
    margin-bottom: 0;
  }
}

/* ===== BREADCRUMB MOBILE OPTIMIZATION ===== */
@media (max-width: 991px) {
  .inner-header-section-area .hero-header a.bradecrumb {
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
  }
  
  .inner-header-section-area .hero-header a.bradecrumb i {
    margin: 0 4px !important;
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .inner-header-section-area .hero-header a.bradecrumb {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  
  .inner-header-section-area .hero-header a.bradecrumb i {
    margin: 0 3px !important;
    font-size: 11px;
  }
}

@media (max-width: 576px) {
  .inner-header-section-area .hero-header a.bradecrumb {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  
  .inner-header-section-area .hero-header a.bradecrumb i {
    margin: 0 2px !important;
    font-size: 10px;
  }
}

/* ===== IMAGES RESPONSIVE ===== */
@media (max-width: 991px) {
  .image-anime img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  
  /* Floating elements less movement on mobile */
  .keyframe5 {
    animation-duration: 8s !important;
  }
}

/* ===== BUTTONS MOBILE FRIENDLY ===== */
@media (max-width: 767px) {
  .vl-btn4,
  .vl-btn3,
  .vl-btn2,
  .vl-btn1 {
    padding: 12px 24px !important;
    font-size: 14px !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  .readmore,
  .learnmore {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
  }
}

/* ===== TEXT READABILITY ===== */
@media (max-width: 767px) {
  p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
  
  h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  
  h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  
  h4 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
  
  h5 {
    font-size: 16px !important;
  }
}

/* ===== SPACING UTILITIES MOBILE ===== */
@media (max-width: 767px) {
  .space60 { height: 40px !important; }
  .space50 { height: 35px !important; }
  .space40 { height: 30px !important; }
  .space32 { height: 24px !important; }
  .space28 { height: 20px !important; }
  .space24 { height: 18px !important; }
  .space20 { height: 16px !important; }
  .space16 { height: 12px !important; }
}

/* ===== OWL CAROUSEL MOBILE ===== */
@media (max-width: 991px) {
  .owl-carousel .owl-nav button {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  
  .owl-carousel .owl-dots {
    margin-top: 30px !important;
  }
  
  .owl-carousel .owl-dot {
    width: 10px !important;
    height: 10px !important;
  }
}

/* ===== SMOOTH SCROLLING ===== */
html {
  scroll-behavior: smooth;
}

/* ===== PREVENT HORIZONTAL SCROLL ===== */
@media (max-width: 991px) {
  body {
    overflow-x: hidden;
  }
  
  .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ===== ANIMATIONS MOBILE OPTIMIZED ===== */
@media (max-width: 767px) {
  [data-aos] {
    pointer-events: auto;
  }
  
  [data-aos].aos-animate {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===== TOUCH IMPROVEMENTS ===== */
@media (max-width: 991px) {
  /* Larger touch targets */
  a, button, input, select, textarea {
    min-height: 44px;
  }
  
  /* Remove hover effects on touch devices */
  @media (hover: none) {
    *:hover {
      transition: none !important;
    }
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (max-width: 767px) {
  /* Reduce animation complexity */
  * {
    animation-duration: 0.5s !important;
  }
  
  /* Optimize transforms */
  .image-anime,
  [class*="image-"] {
    will-change: auto;
  }
}

/* ===== ACCESSIBILITY ===== */
@media (max-width: 767px) {
  /* Better focus indicators on mobile */
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
  }
  
  /* Skip to content link */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #007bff;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
  }
  
  .skip-link:focus {
    top: 0;
  }
}

/* ===== LANDSCAPE MODE MOBILE ===== */
@media (max-width: 991px) and (orientation: landscape) {
  .hero4-section-area {
    padding: 40px 0 !important;
  }
  
  .hero4-images-area {
    max-width: 300px;
  }
  
  .about-images-area {
    max-width: 350px;
  }
}

/* ===== VERY SMALL DEVICES ===== */
@media (max-width: 360px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .vl-section-title {
    font-size: 20px !important;
  }
  
  .hero-header h2 {
    font-size: 22px !important;
  }
  
  .vl-btn4 {
    padding: 10px 20px !important;
    font-size: 13px !important;
  }
}