/* ARM Solutions - Responsive Design Fixes
 * This file contains additional CSS to improve the website's responsiveness on mobile devices
 */

/* Global responsive adjustments */
@media (max-width: 991px) {
  /* Improve container padding for better mobile spacing */
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Ensure images scale properly */
  img {
    max-width: 100%;
    height: auto !important;
  }

  /* Improve text readability on mobile */
  h1 {
    font-size: 2.2rem !important;
  }

  h2 {
    font-size: 1.8rem !important;
  }

  h3 {
    font-size: 1.5rem !important;
  }

  h4 {
    font-size: 1.3rem !important;
  }

  p, li {
    font-size: 1rem !important;
  }

  /* Fix banner heights for mobile */
  .company-banner, .banner, .hero-banner {
    height: auto !important;
    min-height: 300px !important;
  }

  .company-banner img, .banner img, .hero-banner img {
    height: auto !important;
    min-height: 300px !important;
    object-fit: cover;
  }

  /* Improve banner content positioning */
  .company-banner__content, .banner__content {
    width: 90% !important;
    padding: 15px !important;
  }
}

/* Mobile navigation improvements */
@media (max-width: 991px) {
  /* Fix navbar toggle button positioning */
  .toggle-menu-btn {
    position: absolute;
    right: 15px;
    top: 25px;
    z-index: 1001;
  }

  /* Improve mobile menu appearance */
  #navbarToggler1 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 1000 !important;
    padding-top: 100px !important;
    overflow-y: auto !important;
  }

  /* Fix dropdown positioning on mobile */
  .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 20px !important;
  }

  /* Improve submenu appearance */
  .dropdown-submenu > .dropdown-menu {
    margin-left: 0 !important;
    padding-left: 20px !important;
    left: 0 !important;
  }

  /* Visual indicator for open submenus */
  .submenu-open {
    background-color: rgba(255, 255, 255, 0.1) !important;
    position: relative;
  }

  .submenu-open:after {
    content: '-';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Fix close button positioning */
  #closeNavbar {
    position: absolute;
    right: 20px;
    top: 25px;
    z-index: 1002;
  }

  /* Ensure phone number is visible */
  .click-call {
    position: absolute;
    right: 70px;
    top: 25px;
    z-index: 999;
    font-size: 1rem !important;
  }
}

/* Small mobile devices */
@media (max-width: 576px) {
  /* Further reduce heading sizes */
  h1 {
    font-size: 1.8rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  /* Adjust section padding */
  section {
    padding: 30px 0 !important;
  }

  /* Ensure all columns stack properly */
  .col-sm-6, .col-md-4, .col-md-6, .col-lg-3, .col-lg-4, .col-lg-6 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Fix card layouts */
  .card {
    margin-bottom: 20px !important;
  }

  /* Adjust button sizes */
  .btn {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
  }

  /* Fix form elements */
  input, textarea, select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  /* Adjust footer spacing */
  .footer__top, .footer__bottom {
    padding: 30px 0 !important;
  }

  /* Fix social media icons spacing */
  .sf-social {
    justify-content: center !important;
  }
}

/* Fix for specific layout issues */
@media (max-width: 768px) {
  /* Fix for expertise cards */
  .expertise-card {
    height: auto !important;
    margin-bottom: 20px !important;
  }

  /* Fix for approach section */
  .our-approach .order-lg-1 {
    order: 1 !important;
  }

  .our-approach .order-lg-2 {
    order: 2 !important;
    margin-bottom: 20px !important;
  }

  /* Fix for achievements section */
  .achievement-counter {
    margin-bottom: 20px !important;
  }

  /* Fix for CTA section */
  .cta-section {
    padding: 30px 0 !important;
  }

  .cta-section h2 {
    font-size: 1.5rem !important;
  }

  /* Fix for founder section */
  .founder-bio {
    padding: 15px !important;
  }
}

/* Fix for overflow issues */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative !important;
}