/* Critical Mobile & Browser Fixes */

/* Viewport meta tag enforcement */
@-ms-viewport {
  width: device-width;
  initial-scale: 1;
}

/* Prevent horizontal scroll on mobile */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Fix iOS Safari viewport issues */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Touch action for better mobile interaction */
.touchable {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

/* Fix mobile tap highlights */
* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

/* Critical mobile navigation fix */
.navbar-collapse {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile-first service icons */
.col-md-3.ser-icon {
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 !important;
  float: none !important;
  display: block !important;
}

/* Mobile service grid fix */
@media (max-width: 767px) {
  .flex.flex-2 .col-md-12 {
    width: 100% !important;
    padding: 0 !important;
  }
  
  .col-md-3.ser-icon {
    width: 100% !important;
    margin: 12px 0 !important;
    padding: 16px !important;
  }
  
  .icon-scc {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 12px auto !important;
  }
}

/* Tablet breakpoint */
@media (min-width: 768px) and (max-width: 1023px) {
  .col-md-3.ser-icon {
    width: 48% !important;
    margin: 1% !important;
    display: inline-block !important;
    vertical-align: top !important;
  }
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
  .col-md-3.ser-icon {
    width: 23% !important;
    margin: 1% !important;
    display: inline-block !important;
    vertical-align: top !important;
  }
}

/* Fix banner mobile */
#banners .inner {
  padding: 20px 16px !important;
}

#banners h1 {
  font-size: 28px !important;
  line-height: 1.2 !important;
}

#banners p {
  font-size: 16px !important;
  line-height: 1.4 !important;
}

@media (min-width: 768px) {
  #banners h1 {
    font-size: 36px !important;
  }
  
  #banners p {
    font-size: 18px !important;
  }
}

@media (min-width: 1024px) {
  #banners h1 {
    font-size: 48px !important;
  }
  
  #banners p {
    font-size: 20px !important;
  }
}

/* Fix customer logos slider mobile */
.customer-logos.slider {
  padding: 20px 0 !important;
}

.customer-logos .slide {
  padding: 10px !important;
  text-align: center !important;
}

.customer-logos .slide img {
  max-width: 60px !important;
  height: auto !important;
  margin: 0 auto 8px auto !important;
}

.p-icon {
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin-top: 8px !important;
}

/* Fix services section mobile */
.kophes {
  width: 100% !important;
  margin: 16px 0 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .kophes {
    width: calc(50% - 16px) !important;
    margin: 8px !important;
    display: inline-block !important;
    vertical-align: top !important;
  }
}

/* Fix why us section mobile */
.whyus {
  width: 100% !important;
  margin: 16px 0 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.whyus .col-md-3,
.whyus .col-md-9 {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

.whyus img {
  max-width: 60px !important;
  height: auto !important;
  margin: 0 auto 16px auto !important;
}

@media (min-width: 768px) {
  .whyus {
    width: calc(50% - 16px) !important;
    margin: 8px !important;
    display: inline-block !important;
    vertical-align: top !important;
  }
  
  .whyus .col-md-3 {
    width: 25% !important;
    float: left !important;
    text-align: center !important;
  }
  
  .whyus .col-md-9 {
    width: 75% !important;
    float: left !important;
    text-align: left !important;
    padding-left: 16px !important;
  }
}

/* Fix buttons mobile */
.button, .button2, .btn {
  width: 100% !important;
  max-width: 300px !important;
  margin: 16px auto !important;
  display: block !important;
  padding: 16px 24px !important;
  font-size: 16px !important;
  text-align: center !important;
}

@media (min-width: 768px) {
  .button, .button2, .btn {
    width: auto !important;
    display: inline-block !important;
    margin: 16px 8px !important;
  }
}

/* Fix containers mobile */
.containers, .container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

@media (min-width: 768px) {
  .containers, .container {
    padding: 0 32px !important;
  }
}

@media (min-width: 1024px) {
  .containers, .container {
    padding: 0 40px !important;
  }
}

/* Fix row spacing mobile */
.row {
  margin: 0 !important;
  padding: 20px 0 !important;
}

/* Critical font loading */
@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
}