/* ============================================================
   TECHNOKOTES — Spacing, Layout & Element Consistency Fixes
   Applied on top of the existing Induscity theme.
   Targets: section spacing, card equal-heights, mobile rhythm.
   ============================================================ */

/* ----------------------------------------------------------
   0. MARKET SECTORS — zoom-only hover, no overlay or icons
   The <a> wrappers and .service-icon spans have been removed
   from the HTML on style-2 cards (index.html). These rules
   handle any residual overlay/icon display and restore the
   clean zoom effect that the theme disables at ≤1199px.
   ---------------------------------------------------------- */

/* Clip the zoom so it doesn't bleed outside the thumbnail */
.mf-services-2.style-2 .service-thumbnail {
  overflow: hidden;
}

/* Suppress any dark overlay (defensive — no <a> means no :before,
   but guards against future HTML edits) */
.mf-services-2.style-2 .service-thumbnail a:before {
  display: none !important;
}

/* Hide the link-icon and flaticon badge on style-2 cards */
.mf-services-2.style-2 .service-icon,
.mf-services-2.style-2 .mf-icon {
  display: none !important;
}

/* Smooth zoom transition */
.mf-services-2.style-2 .service-thumbnail img {
  -webkit-transition: -webkit-transform 0.4s ease;
          transition: transform 0.4s ease;
  will-change: transform;
}

/* Keep zoom active at all screen sizes (theme strips it at ≤1199px) */
.mf-services-2.style-2:hover .service-thumbnail img {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}

/* Remove pointer cursor since images are no longer links */
.mf-services-2.style-2 .service-thumbnail img {
  cursor: default;
}

/* ----------------------------------------------------------
   1. INNER-ROW FLEXBOX — equal-height columns
   Visual Composer "inner" rows use Bootstrap floats, which
   prevents equal-height columns. Converting them to flexbox
   gives each column the height of its tallest sibling.
   ---------------------------------------------------------- */
.vc_row.vc_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.vc_row.vc_inner > .wpb_column {
  float: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.vc_row.vc_inner > .wpb_column > .vc_column-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.vc_row.vc_inner > .wpb_column > .vc_column-inner > .wpb_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* ----------------------------------------------------------
   2. MARKET SECTORS — equal-height service cards
   Each .mf-services-2.style-2 card stretches to fill its
   flex column, so all three cards per row share the same
   height regardless of description text length.
   ---------------------------------------------------------- */
.mf-services-2.style-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.mf-services-2.style-2 .service-summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.mf-services-2.style-2 .service-desc {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  line-height: 1.75;
}
/* Give the service title consistent bottom spacing */
.mf-services-2.style-2 .service-title {
  margin-bottom: 16px;
}

/* ----------------------------------------------------------
   3. PORTFOLIO GRID — equal-height project cards
   .portfolio-list uses floated Bootstrap columns. Flexbox
   ensures card summary areas align consistently.
   ---------------------------------------------------------- */
.portfolio-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.portfolio-list > .project-wrapper {
  float: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.portfolio-list > .project-wrapper > .project-inner {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.portfolio-list > .project-wrapper > .project-inner > .project-thumbnail {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.portfolio-list > .project-wrapper > .project-inner > .project-summary {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* ----------------------------------------------------------
   4. CLIENT LOGOS — add section breathing room
   The .mf-partner section has no mf-empty-space wrappers,
   making it appear as a raw, unpadded band. Add uniform
   vertical padding to match the rest of the page rhythm.
   ---------------------------------------------------------- */
.mf-partner.carousel-type {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* ----------------------------------------------------------
   5. TESTIMONIALS — tighten internal card spacing
   .mf-testimonial.style-4 cards have a 40px left padding
   that collapses oddly on mid-size screens. Normalize it.
   ---------------------------------------------------------- */
.mf-testimonial.style-4 .testi-wrapper {
  padding: 28px 32px;
}
.mf-testimonial.style-4 .desc {
  line-height: 1.75;
}

/* ----------------------------------------------------------
   6. FOOTER — logo size constraint & column gaps
   ---------------------------------------------------------- */
#custom_html-6 img {
  max-width: 130px;
  height: auto;
  display: block;
  margin-bottom: 20px;
}
#custom_html-7 .textwidget {
  line-height: 1.75;
  font-size: 14px;
}

/* ----------------------------------------------------------
   7. SECTION TITLES — consistent bottom rhythm
   Reduce the bottom underline accent gap for visual tightness
   ---------------------------------------------------------- */
.mf-section-title h2 {
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------
   8. CARD DESCRIPTION — consistent border-box readability
   The service-desc box has a 1px border with 25px padding.
   Ensure line-height carries into the content for all cards.
   ---------------------------------------------------------- */
.mf-services-2.style-2 .service-desc p,
.mf-services-2.style-2 .service-desc > div {
  margin: 0;
  line-height: 1.75;
}

/* ============================================================
   9. SECTION SPACERS — global height caps
   The theme uses mf-empty-space divs with three breakpoint
   children (lg/md/xs), each with an inline style="height:Npx".
   max-height !important caps all of them without touching HTML.
   Hierarchy is preserved: values already below the cap are
   unaffected; only the large ones are brought down.
   ============================================================ */
/* Desktop */
.mf_empty_space_lg { max-height: 36px !important; }
/* Tablet */
.mf_empty_space_md { max-height: 24px !important; }
/* Mobile (also overrides the 32px rule below) */
.mf_empty_space_xs { max-height: 16px !important; }

/* ============================================================
   RESPONSIVE — TABLET  (769px – 1199px)
   ============================================================ */
@media (max-width: 1199px) {
  /* Stack footer columns cleanly */
  .footer-sidebar {
    padding-bottom: 32px;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE  (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {

  /* --- Section titles --- */
  .mf-section-title h2 {
    font-size: 26px;
    line-height: 1.3;
  }
  .mf-section-title h3 {
    font-size: 15px;
  }

  /* --- Normalize all inline mf_empty_space_xs heights --- */
  .mf-empty-space .mf_empty_space_xs {
    height: 16px !important;
    max-height: 16px !important;
  }

  /* --- Service card titles --- */
  .mf-services-2 h4 {
    font-size: 17px;
    line-height: 1.35;
  }

  /* --- Testimonial text --- */
  .mf-testimonial.style-4 .testi-wrapper {
    padding: 24px 20px;
  }
  .mf-testimonial.style-4 .desc {
    font-size: 14px;
    line-height: 1.7;
  }
  .mf-testimonial.style-4 h4 {
    font-size: 16px;
  }

  /* --- Footer column gaps --- */
  .footer-sidebar {
    margin-bottom: 40px;
  }
  .footer-sidebar:last-child {
    margin-bottom: 0;
  }

  /* --- Footer text size --- */
  #custom_html-7 .textwidget {
    font-size: 13px;
  }

  /* --- Partner logos: standardize image height on mobile --- */
  .mf-partner .partner-item img {
    max-height: 68px;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
    margin: 0 auto;
  }

  /* --- Inner flex rows: on mobile let columns stack,
     override Bootstrap xs-12 which already handles this --- */
  .vc_row.vc_inner {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .vc_row.vc_inner > .wpb_column {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {

  /* --- Section titles get smaller --- */
  .mf-section-title h2 {
    font-size: 22px;
  }

  /* --- Testimonial card: minimal padding --- */
  .mf-testimonial.style-4 .testi-wrapper {
    padding: 20px 16px;
  }

  /* --- Partner logos: tighter on small screens --- */
  .mf-partner.carousel-type {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .mf-partner .partner-item img {
    max-height: 56px;
  }

  /* --- Body text scaling --- */
  .mf-services-2.style-2 .service-desc {
    font-size: 14px;
  }
}

/* ============================================================
   RESPONSIVE — VERY SMALL  (≤ 375px)
   ============================================================ */
@media (max-width: 375px) {
  .mf-section-title h2 {
    font-size: 20px;
  }
  .mf-services-2 h4 {
    font-size: 16px;
  }
}