/* Mobile Responsive Enhancements */

/* Base mobile styles */
@media (max-width: 767px) {
  /* Container adjustments */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Typography responsive */
  .vl-section-heading {
    font-size: 32px !important;
    line-height: 40px !important;
  }
  
  .vl-section-title {
    font-size: 24px !important;
    line-height: 32px !important;
  }
  
  /* Hero section mobile */
  .vl-hero-area-4 {
    padding-top: 120px !important;
    padding-bottom: 50px !important;
  }
  
  .vl-hero-content {
    text-align: center;
    margin-bottom: 30px;
  }
  
  /* Button responsive */
  .theme-btn {
    font-size: 14px !important;
    padding: 6px 6px 6px 16px !important;
  }
  
  .theme-btn span {
    height: 32px !important;
    width: 32px !important;
    line-height: 32px !important;
  }
  
  /* Service boxes mobile */
  .vl-service-icon-box-4 {
    margin-bottom: 20px;
    padding: 20px !important;
  }
  
  /* About section mobile */
  .vl-about-content-4 {
    padding-right: 0 !important;
    margin-top: 30px;
  }
  
  /* CTA section mobile */
  .vl-cta-bg-4 {
    padding: 30px 15px !important;
  }
  
  .vl-cta-wrapper-title {
    font-size: 24px !important;
    line-height: 32px !important;
  }
  
  .vl-cta-mail {
    margin-bottom: 15px;
  }
  
  .vl-cta-mail input {
    width: 100%;
    margin-bottom: 10px;
  }
  
  /* Footer mobile */
  .vl-footer-widget-3 {
    margin-left: 0 !important;
  }
  
  /* Navigation mobile */
  .vl-main-menu {
    display: none;
  }
  
  .vl-header-action-item {
    display: block !important;
  }
  
  /* Images responsive */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Grid adjustments */
  .row > * {
    margin-bottom: 20px;
  }
  
  /* Spacing adjustments */
  .pt-100 {
    padding-top: 60px !important;
  }
  
  .pb-100 {
    padding-bottom: 60px !important;
  }
  
  .pt-190 {
    padding-top: 120px !important;
  }
  
  /* Brand section mobile */
  .vl-brand-logo {
    text-align: center;
    margin-bottom: 20px;
  }
  
  /* Service grid mobile */
  .vl-service-area .row > div {
    margin-bottom: 30px;
  }
}

/* Extra small devices */
@media (max-width: 575px) {
  /* Hero adjustments */
  .vl-section-heading {
    font-size: 28px !important;
    line-height: 36px !important;
  }
  
  .vl-section-description {
    font-size: 16px !important;
    line-height: 24px !important;
  }
  
  /* Service boxes extra small */
  .vl-service-icon-box-4-content4 p {
    font-size: 16px !important;
    line-height: 22px !important;
  }
  
  /* CTA extra small */
  .vl-cta-wrapper-title {
    font-size: 20px !important;
    line-height: 28px !important;
  }
  
  /* Button extra small */
  .theme-btn {
    font-size: 13px !important;
    padding: 5px 5px 5px 14px !important;
  }
  
  .theme-btn span {
    height: 28px !important;
    width: 28px !important;
    line-height: 28px !important;
    font-size: 16px !important;
  }
}

/* Landscape mobile */
@media (max-width: 767px) and (orientation: landscape) {
  .vl-hero-area-4 {
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }
  
  .vl-section-heading {
    font-size: 30px !important;
    line-height: 38px !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .theme-btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  .vl-header-action-item button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Remove hover effects on touch devices */
  .vl-service-icon-box-4:hover:after {
    width: 0;
  }
  
  .vl-service-icon-box-4:hover .vl-service-icon-box-4-icon4 span {
    transform: none;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp images on retina displays */
  .vl-hero-img img,
  .vl-about-large4 img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  /* Disable animations for users who prefer reduced motion */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Fix Brand section overlapping hero image on mobile */
@media (max-width: 767px) {
  /* Hero section mobile fix */
  .vl-hero-area-4 {
    margin-bottom: 0 !important;
    padding-bottom: 220px !important;
  }
  
  /* Hero image full display */
  .vl-hero-img-4 img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  
  .vl-hero-img-4 {
    overflow: visible !important;
    height: auto !important;
  }
  
  .vl-hero-img {
    overflow: visible !important;
  }
  
  /* Brand section - no overlap */
  .vl-about-area.vl-black-bg {
    margin-top: 0 !important;
  }
  
  /* Fix brand logo sizes */
  .vl-brand-logo img {
    max-height: 65px !important;
    width: auto !important;
    object-fit: contain;
  }
  
  /* Brand title mobile */
  .vl-brand-title {
    font-size: 16px !important;
    line-height: 20px !important;
    text-align: center;
    margin-bottom: 20px;
  }
  
  /* Brand logos container */
  .vl-brand-logo-active {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }
  
  .vl-brand-logo {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
  }
}

/* Fix brand logo height consistency for desktop */
@media (min-width: 768px) {
  .vl-brand-logo img {
    height: 65px !important;
    width: auto !important;
    object-fit: contain;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  /* Add dark mode styles if needed */
  .vl-service-icon-box-4 {
    background: #1a1a1a;
    color: #ffffff;
  }
}