/* ============================================
   iWesabe Mobile Responsiveness Fixes
   Covers: mobile layout, performance, and
   visual consistency across all breakpoints
   ============================================ */

/* ── Ensure wrapper never clips on any screen ── */
body { overflow-x: hidden; }
#wrapper { max-width: 100%; }

/* ── Top bar: stack on small screens ── */
@media (max-width: 767px) {
  #copyrights .col_half {
    width: 100%;
    float: none;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  #copyrights .col_half .button {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  /* Hide topbar on very small so header is clean */
  #header > #copyrights {
    display: none;
  }
}

/* ── Logo sizing on mobile ── */
@media (max-width: 767px) {
  #logo img { height: 50px !important; }
  #header, #header-wrap { height: auto !important; }
}

/* ── Revolution Slider text – fix hardcoded widths ── */
.revo-slider-emphasis-text {
  font-size: 64px; /* desktop default */
}
.revo-slider-desc-text {
  width: auto !important;
  max-width: 100% !important;
}

@media (max-width: 991px) {
  .revo-slider-emphasis-text { font-size: 36px !important; }
  .revo-slider-desc-text { font-size: 16px !important; width: auto !important; max-width: 90vw !important; }
  .revo-slider-caps-text { font-size: 13px !important; }
  /* Slider text layers handled by Revolution, hide on tiny screens */
}

@media (max-width: 600px) {
  .revo-slider-emphasis-text { font-size: 26px !important; }
}

/* ── Service feature boxes – override inline height:222px ── */
@media (max-width: 991px) {
  .col-md-3.dark.col-padding.ohidden[style*="height: 222px"],
  .col-md-3.dark.col-padding.ohidden[style*="height:222px"] {
    height: auto !important;
    min-height: 160px;
    padding: 30px 20px 40px !important;
  }
  .col-md-3.dark.col-padding.ohidden h3 {
    padding-top: 15px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 767px) {
  /* Stack service boxes full-width */
  .col-md-3.dark.col-padding.ohidden {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    height: auto !important;
    min-height: 120px;
    padding: 25px 20px 50px !important;
  }
}

/* ── Team/Why-us section image + desc layout ── */
@media (max-width: 480px) {
  .team.team-list .team-image {
    float: none !important;
    width: 100px !important;
    margin: 0 auto 15px !important;
  }
  .team.team-list .team-desc { margin-left: 0 !important; }
}

/* ── Counter stats row (col_one_fifth × 5) ── */
@media (max-width: 767px) {
  .col_one_fifth {
    width: 50% !important;
    float: left !important;
    margin-right: 0 !important;
    margin-bottom: 30px !important;
  }
  .col_one_fifth:nth-child(odd)  { padding-right: 8px; }
  .col_one_fifth:nth-child(even) { padding-left: 8px; }
}

@media (max-width: 400px) {
  .col_one_fifth {
    width: 100% !important;
    padding: 0 !important;
  }
}

/* ── Promo CTA section – fix button margin overflow ── */
.promo .moncontact.button {
  margin-right: 20px !important;
}
@media (max-width: 767px) {
  .promo .moncontact.button {
    display: block;
    margin: 15px auto !important;
    text-align: center;
    width: fit-content;
  }
  .promo center h2 { font-size: 18px !important; padding: 20px 15px 0 !important; }
}

/* ── "How we works" feature boxes ── */
@media (max-width: 767px) {
  .col_one_fourth {
    width: 50% !important;
    float: left !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 480px) {
  .col_one_fourth {
    width: 100% !important;
    float: none !important;
  }
}

/* ── Portfolio/product carousel ── */
@media (max-width: 767px) {
  #related-portfolio .oc-item .portfolio-image img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ── Footer column stacking ── */
@media (max-width: 767px) {
  footer .col-sm-12.col-md-4 {
    margin-bottom: 30px;
  }
  .footer-widgets-wrap .row { margin: 0; }
}

/* ── Footer copyrights bar ── */
@media (max-width: 767px) {
  footer #copyrights .col_half {
    width: 100%;
    float: none;
    text-align: center;
    margin-bottom: 8px;
  }
}

/* ── Contact / mega-menu form on mobile ── */
@media (max-width: 767px) {
  #primary-menu .mega-menu-content {
    position: relative !important;
    width: 100% !important;
    box-shadow: none !important;
  }
}

/* ── Modal forms ── */
@media (max-width: 576px) {
  .modal-dialog { margin: 10px; }
  .modal-content form { margin: 0 10px !important; }
  .col_one_third, .col_two_third, .col_one_fourth,
  .col_three_fourth, .col_two_fifth, .col_three_fifth {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
}

/* ── Banner image on homepage ── */
@media (max-width: 767px) {
  .entry-image.bottommargin img { width: 100% !important; height: auto !important; }
}

/* ── Parallax section – disable fixed bg on mobile ── */
@media (max-width: 767px) {
  .parallax { background-attachment: scroll !important; background-position: center center !important; }
}

/* ── Tables – make scrollable ── */
@media (max-width: 767px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── iFrame (e.g. maps) ── */
@media (max-width: 767px) {
  iframe { max-width: 100% !important; }
  .iframedata { height: 300px !important; }
}

/* ── Page title + breadcrumbs ── */
@media (max-width: 767px) {
  #page-title { padding: 30px 0 !important; }
  #page-title h1 { font-size: 20px !important; }
}

/* ── Industry detail pages – two-col sections ── */
@media (max-width: 767px) {
  .col_half, .col-sm-12 {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
  /* But do not break Bootstrap grid-sm which already handles col-sm-12 */
}

/* ── Demo-request / contact forms ── */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* ── Prevent any element from causing horizontal scroll ── */
@media (max-width: 767px) {
  img, video, object, embed { max-width: 100% !important; }
  .bgicon { display: none !important; }
  /* Service box: hide oversized bg icon so text is readable */
}

/* ── Products page – feature columns ── */
@media (max-width: 767px) {
  .col_one_third.bottommarginchoose {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    max-height: none !important;
  }
}

/* ── Anchor buttons in CTAs ── */
@media (max-width: 480px) {
  .button-xlarge { font-size: 13px !important; padding: 10px 18px !important; }
}

/* ── Social sidebar – already hidden on mobile via visible-md/lg ── */

/* ── Tablet: 768–991px tweaks ── */
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-3.dark.col-padding.ohidden {
    width: 50% !important;
    height: auto !important;
    min-height: 180px;
    padding: 30px 20px 50px !important;
  }
  .col-md-3.dark.col-padding.ohidden h3 { padding-top: 15px !important; }
  .revo-slider-desc-text { width: auto !important; max-width: 500px !important; }
}