/*--------------------------------------------------------------
# Mobile View Enhancements
# Author: DIOS ENERGY FZE
# Description: Enhanced mobile responsive styles for better UX
--------------------------------------------------------------*/

/* ===== Mobile-First Improvements ===== */

/* Small Mobile Devices (320px - 480px) */
@media (max-width: 480px) {
  
  /* Typography Adjustments */
  body {
    font-size: 14px;
    line-height: 1.6;
  }
  
  h1 {
    font-size: 32px !important;
    line-height: 1.2;
  }
  
  h2 {
    font-size: 28px !important;
    line-height: 1.3;
  }
  
  h3 {
    font-size: 22px;
    line-height: 1.3;
  }
  
  h4 {
    font-size: 18px;
    line-height: 1.4;
  }
  
  p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
  }
  
  /* Header & Navigation */
  .mobile-header {
    padding: 10px 0;
  }
  
  .logo-brand-mobile img {
    max-height: 35px !important;
  }
  
  #mmenu_toggle {
    margin-top: 20px;
  }
  
  /* Slider Enhancements */
  .slider-item {
    min-height: 400px;
    height: 60vh;
  }
  
  .slider .slider-content {
    padding: 0 10px;
    bottom: 80px;
    margin-left: 0;
  }
  
  .slider .slider-content h1 {
    font-size: 24px !important;
    margin-bottom: 15px;
  }
  
  .slider .slider-content h4 {
    font-size: 12px !important;
    display: block !important;
    margin-bottom: 15px;
  }
  
  .slider .btn {
    padding: 12px 18px;
    font-size: 14px;
    min-width: 120px;
  }
  
  .slider .slick-arrow {
    display: none !important;
  }
  
  /* Sections Spacing */
  section {
    padding: 60px 0;
  }
  
  .padding-top-medium {
    padding-top: 40px;
  }
  
  .padding-bottom-medium {
    padding-bottom: 40px;
  }
  
  /* Services Section */
  .services-box-3 {
    margin-bottom: 30px;
    padding: 20px;
  }
  
  .services-box-3 h4 a {
    font-size: 16px;
  }
  
  .services-box-3 .services-icon img {
    max-width: 60px;
  }
  
  /* About Section */
  .home-about h2 {
    margin-bottom: 20px;
  }
  
  .about-author {
    margin-top: 20px;
  }
  
  .about-author-info {
    float: none;
    border-right: none;
    border-bottom: 1px solid #252525;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  
  .about-img-right {
    margin-bottom: 30px;
  }
  
  /* Counter Boxes */
  .counter-box {
    margin-bottom: 20px;
    padding: 15px;
  }
  
  .counter-box h3 {
    font-size: 32px;
  }
  
  .counter-box h4 {
    font-size: 14px;
  }
  
  /* Projects Section */
  .project-item {
    margin-bottom: 20px;
  }
  
  .project-info .project-content {
    padding: 20px;
  }
  
  .project-info .project-content h3 {
    font-size: 18px;
  }
  
  .project-info .project-content p {
    font-size: 13px;
    margin-bottom: 20px;
  }
  
  /* Process Section */
  .process h4 {
    font-size: 14px;
    line-height: 1.4;
  }
  
  /* Blog/News Section */
  .post-box {
    margin-bottom: 20px;
  }
  
  .inner-post {
    padding: 20px;
  }
  
  .inner-post h3 {
    font-size: 20px;
  }
  
  .entry-meta {
    font-size: 13px;
  }
  
  /* Footer */
  .main-footer {
    padding: 60px 0;
  }
  
  .widget-footer {
    margin-bottom: 40px;
  }
  
  .footer-social {
    margin-top: 25px;
    text-align: center;
  }
  
  .footer-bottom {
    text-align: center;
    padding: 20px 0;
  }
  
  /* Buttons */
  .btn {
    padding: 14px 18px;
    font-size: 14px;
    min-width: 130px;
  }
  
  .btn i {
    margin-left: 5px;
  }
  
  /* Forms */
  input[type=text],
  input[type=email],
  input[type=tel],
  textarea,
  select {
    padding: 10px 15px;
    font-size: 14px;
  }
  
  textarea {
    height: 120px;
  }
  
  /* Contact Info */
  .header-info-2 ul li {
    display: block;
    padding: 12px 15px;
    font-size: 14px;
  }
  
  .header-info-2 ul li i {
    font-size: 18px;
  }
  
  /* CTA Section */
  .cta-box {
    padding: 30px 20px;
    text-align: center;
  }
  
  .cta-box h3 {
    font-size: 22px;
    margin-bottom: 15px;
  }
  
  .cta-box .btn {
    margin: 5px 0;
    width: 100%;
  }
  
  /* Spacing Utilities */
  .industris-space {
    height: 20px;
  }
  
  .industris-space-30 {
    height: 15px;
  }
  
  .industris-space-50 {
    height: 25px;
  }
  
  .industris-space-60 {
    height: 30px;
  }
  
  .industris-space-90 {
    height: 40px;
  }
  
  /* Mobile Specific Utilities */
  .mb-sm-20 {
    margin-bottom: 20px !important;
  }
  
  .mb-sm-30 {
    margin-bottom: 30px !important;
  }
  
  .mb-sm-40 {
    margin-bottom: 40px !important;
  }
  
  .text-center-mobile {
    text-align: center !important;
  }
  
  /* Images */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Tables */
  .table-responsive {
    font-size: 13px;
  }
  
  .shop_table thead th,
  .shop_table tbody td {
    padding: 10px 15px;
    font-size: 13px;
  }
  
  /* Video Section */
  .section-video-3 {
    max-width: 100%;
    min-height: 300px;
  }
  
  .video-play {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
  }
  
  .video-play i {
    font-size: 16px !important;
  }
}

/* Medium Mobile Devices (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  
  /* Typography */
  h1 {
    font-size: 38px !important;
  }
  
  h2 {
    font-size: 32px !important;
  }
  
  h3 {
    font-size: 24px;
  }
  
  /* Slider */
  .slider-item {
    min-height: 450px;
    height: 65vh;
  }
  
  .slider .slider-content h1 {
    font-size: 28px !important;
  }
  
  .slider .slider-content h4 {
    font-size: 13px !important;
    display: block !important;
  }
  
  /* Sections */
  section {
    padding: 80px 0;
  }
  
  /* Services */
  .services-box-3 {
    margin-bottom: 40px;
  }
  
  /* Footer */
  .main-footer {
    padding: 80px 0;
  }
}

/* Tablet Devices (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  
  /* Typography */
  h1 {
    font-size: 48px !important;
  }
  
  h2 {
    font-size: 36px !important;
  }
  
  /* Slider */
  .slider-item {
    min-height: 500px;
  }
  
  .slider .slider-content h1 {
    font-size: 32px !important;
  }
  
  /* Grid Adjustments */
  .col-sm-6 {
    margin-bottom: 30px;
  }
  
  /* Services */
  .services-box-3 {
    margin-bottom: 50px;
  }
  
  /* Projects */
  .project-item.col-sm-6 {
    width: 50%;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  
  /* Larger touch targets */
  a, button, .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Remove hover effects on touch devices */
  .services-box:hover,
  .project-item .inner:hover .project-info {
    transform: none;
  }
  
  /* Simplify animations */
  * {
    transition-duration: 0.2s !important;
  }
}

/* Landscape Mobile Orientation */
@media (max-width: 767px) and (orientation: landscape) {
  
  .slider-item {
    min-height: 350px;
    height: 90vh;
  }
  
  .slider .slider-content {
    bottom: 40px;
  }
  
  section {
    padding: 40px 0;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  
  /* Ensure images look sharp */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
  
  /* Add dark mode styles if needed */
  /* body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  } */
}