/* Landing-page industries section, scoped to Growinfinity page */
.growtele-io-page .gt-industries.gt-section {
  margin-bottom: 0;
  padding: clamp(24px, 3vw, 40px) var(--content-padding) clamp(28px, 3.5vw, 44px);
  overflow: visible;
}

.growtele-io-page .gt-industries .gt-container {
  width: min(100%, var(--content-max, 1200px));
  max-width: var(--content-max, 1200px);
  margin-inline: auto;
  padding-inline: 0;
}

/* Match capabilities__header layout */
.growtele-io-page .gt-industries .gt-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: min(100%, var(--content-max, 1200px));
  margin-inline: auto;
  margin-bottom: 10px;
  gap: clamp(16px, 2vw, 28px);
  padding-inline: 0;
  flex-shrink: 0;
}

.growtele-io-page .gt-industries .gt-section-heading__title {
  max-width: none;
  font-size: var(--section-title);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0;
  color: var(--color-navy);
  text-align: left;
  margin: 0;
}

.growtele-io-page .gt-industries .gt-section-heading__desc {
  max-width: 571px;
  font-size: var(--section-subtitle);
  font-weight: 400;
  line-height: normal;
  color: var(--color-navy);
  margin: 0;
  text-align: left;
}

.growtele-io-page .gt-industries__tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  margin-top: 10px;
  margin-bottom: 12px;
  padding: 0 24px 4px;
  overflow: visible;
}

.growtele-io-page .gt-industries--scroll-stack .gt-section-heading {
  margin-bottom: 8px;
}

.growtele-io-page .gt-industries--scroll-stack .gt-industries__tabs {
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 4px;
}

.growtele-io-page .gt-industries--scroll-stack .gt-industries__stack {
  margin-top: 6px;
  padding-top: 0;
}

.growtele-io-page .gt-industries__tab {
  flex: 0 0 128px;
  width: 128px;
  min-width: 128px;
  gap: 8px;
  padding: 4px 0;
}

.growtele-io-page .gt-industries__tab-label {
  font-size: 13px;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}

.growtele-io-page .gt-industries__panel[data-tab-panel="banking"] .gt-industries__panel-icon img {
  width: 28px;
  height: 28px;
  mix-blend-mode: screen !important;
}

@media (min-width: 1025px) {
  /* Fixed visual slot — all cards share the same right-image frame as card 1 */
  .growtele-io-page .gt-industries .gt-industries__panel-visual {
    position: absolute !important;
    inset: auto !important;
    right: 48px !important;
    bottom: 0 !important;
    top: auto !important;
    left: auto !important;
    width: min(66%, 700px) !important;
    height: 430px !important;
    max-width: min(66%, 700px) !important;
    max-height: 430px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }

  /* Shared reset — per-card rules below override services.css */
  .growtele-io-page .gt-industries .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries .gt-industries__visual-img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__visual-img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel.is-active .gt-industries__visual-img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel.is-active .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel.is-entering .gt-industries__visual-img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel.is-entering .gt-industries__panel-visual img {
    --visual-x: 0 !important;
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    mix-blend-mode: normal !important;
    animation: none !important;
  }

  /* Card 1 — Dashboard (reference look) */
  .growtele-io-page .gt-industries__visual-img--banking,
  .growtele-io-page .gt-industries__panel[data-tab-panel="banking"] .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel[data-tab-panel="banking"] .gt-industries__visual-img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel[data-tab-panel="banking"] .gt-industries__panel-visual img {
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: 430px !important;
    max-width: none !important;
    max-height: 430px !important;
    object-fit: contain !important;
    object-position: bottom right !important;
    transform: none !important;
    transform-origin: bottom right !important;
  }

  /*
   * Cards 2–6 — taller render + bottom clip (container overflow:hidden)
   * g3 PNGs have extra canvas whitespace; height > 430px scales the mockup
   * to match card 1 without transform zoom cropping the UI.
   */
  /* Card 2 — Push SMS */
  .growtele-io-page .gt-industries__visual-img--shopping,
  .growtele-io-page .gt-industries__panel[data-tab-panel="shopping"] .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel[data-tab-panel="shopping"] .gt-industries__visual-img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel[data-tab-panel="shopping"] .gt-industries__panel-visual img {
    right: -94px !important;
    bottom: 30px !important;
    width: auto !important;
    height: 390px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: 100% 100% !important;
    transform: none !important;
    transform-origin: bottom right !important;
  }

  /* Card 3 — Multi Layer Report */
  .growtele-io-page .gt-industries__visual-img--healthcare,
  .growtele-io-page .gt-industries__panel[data-tab-panel="healthcare"] .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel[data-tab-panel="healthcare"] .gt-industries__visual-img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel[data-tab-panel="healthcare"] .gt-industries__panel-visual img {
    right: -94px !important;
    bottom: 30px !important;
    width: auto !important;
    height: 390px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: 100% 100% !important;
    transform: none !important;
    transform-origin: bottom right !important;
  }

  /* Card 4 — DLT Management (dltt.png has extra canvas; scale + clip in shared visual slot) */
  .growtele-io-page .gt-industries__visual-img--education,
  .growtele-io-page .gt-industries__panel[data-tab-panel="education"] .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel[data-tab-panel="education"] .gt-industries__visual-img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel[data-tab-panel="education"] .gt-industries__panel-visual img {
    right: -4px !important;
    bottom: 29px !important;
    width: auto !important;
    height: 348px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: 100% 100% !important;
    transform: none !important;
    transform-origin: bottom right !important;
  }

  /* Card 5 — Schedule SMS */
  .growtele-io-page .gt-industries__visual-img--travelling,
  .growtele-io-page .gt-industries__panel[data-tab-panel="travelling"] .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel[data-tab-panel="travelling"] .gt-industries__visual-img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel[data-tab-panel="travelling"] .gt-industries__panel-visual img {
    right: -69px !important;
    bottom: 30px !important;
    width: auto !important;
    height: 364px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: 100% 100% !important;
    transform: none !important;
    transform-origin: bottom right !important;
  }

  /* Card 6 — Multi Language SMS */
  .growtele-io-page .gt-industries__visual-img--logistic,
  .growtele-io-page .gt-industries__panel[data-tab-panel="logistic"] .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel[data-tab-panel="logistic"] .gt-industries__visual-img,
  .growtele-io-page .gt-industries--scroll-stack .gt-industries__panel[data-tab-panel="logistic"] .gt-industries__panel-visual img {
    right: -94px !important;
    bottom: 30px !important;
    width: auto !important;
    height: 390px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: 100% 100% !important;
    transform: none !important;
    transform-origin: bottom right !important;
  }

}

@media (max-width: 1024px) {
  .growtele-io-page {
    --gt-container-padding: var(--gt-space-inline-x, 20px);
  }

  .growtele-io-page .gt-industries .gt-section-heading {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    margin-bottom: 16px;
    gap: 10px;
    text-align: center;
  }

  .growtele-io-page .gt-industries .gt-section-heading__title {
    width: 100%;
    max-width: 100%;
    font-size: var(--gt-text-2xl, clamp(22px, 5.5vw, 26px));
    line-height: 1.2;
    margin: 0;
    text-align: center;
  }

  .growtele-io-page .gt-industries .gt-section-heading__desc {
    width: 100%;
    max-width: 100%;
    font-size: var(--gt-text-lead, clamp(14px, 3.5vw, 16px));
    line-height: 1.45;
    margin: 0;
    text-align: center;
  }

  /* ─── Industries (mobile scroll stack — matches landing page) ─── */
  .growtele-io-page .gt-industries__stage {
    overflow: visible;
  }

  .growtele-io-page .gt-industries.gt-section {
    padding-inline: var(--gt-space-inline-x, 16px);
  }

  .growtele-io-page .gt-industries__tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    max-width: none;
    margin-inline: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 0 12px 0;
    margin-bottom: 16px;
    scrollbar-width: none;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__stack,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__stack {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
  }

  .growtele-io-page .gt-industries__tabs::-webkit-scrollbar {
    display: none;
  }

  .growtele-io-page .gt-industries__tab {
    flex: 0 0 104px;
    width: 104px;
    min-width: 104px;
    scroll-snap-align: center;
    padding: 8px 2px;
    gap: 12px;
  }

  .growtele-io-page .gt-industries__tab-label {
    font-size: 13px;
    white-space: nowrap;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__stage {
    display: flex;
    flex-direction: column;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-section-heading {
    margin-bottom: 12px;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__tabs {
    position: relative;
    z-index: 60;
    flex-shrink: 0;
    margin-bottom: 12px;
    background: var(--gt-white, #fff);
  }

  /* Mobile deck scroll animation — responsive-mobile.css + industries-scroll.js */

  .growtele-io-page .gt-industries--mobile-stack.is-scrubbing .gt-industries__panel,
  .growtele-io-page .gt-industries--mobile-stack.is-scrubbing .gt-industries__panel-inner {
    transition: none !important;
    animation: none !important;
  }

  .growtele-io-page .gt-industries--mobile-stack.is-measuring .gt-industries__panel.is-measure {
    position: relative !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: auto !important;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__stack {
    border-radius: 20px;
  }

  .growtele-io-page .gt-industries--mobile-stack:not(.is-scrubbing) {
    position: relative;
    z-index: 1;
  }

  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__stack {
    min-height: auto !important;
    height: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    perspective: none !important;
    overflow: visible !important;
  }

  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    transform: none !important;
    filter: none !important;
    pointer-events: none;
    transition: none !important;
    animation: none !important;
  }

  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel.is-active {
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: visible;
    pointer-events: auto;
    z-index: 1;
  }

  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel.is-stacked {
    display: none !important;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel-inner,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel-inner1,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel-inner2,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel-inner,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel-inner1,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel-inner2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 24px 20px 0 !important;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(18, 19, 72, 0.12);
    isolation: auto;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel-inner,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel-inner {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel-inner.gt-industries__panel-inner1,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel-inner.gt-industries__panel-inner1 {
    background: linear-gradient(165deg, #121348 0%, #231a63 52%, #121348 100%) !important;
    border: none !important;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel-inner.gt-industries__panel-inner2,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel-inner.gt-industries__panel-inner2 {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid rgba(18, 19, 72, 0.1) !important;
    box-shadow: 0 10px 28px rgba(18, 19, 72, 0.08);
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel-left,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel-left {
    position: relative !important;
    z-index: 2;
    flex: 0 0 auto;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 12px !important;
    animation: none !important;
    transform: none !important;
  }

  .growtele-io-page .gt-industries__panel-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
  }

  .growtele-io-page .gt-industries__panel-icon img {
    width: 24px;
    height: 24px;
    mix-blend-mode: normal !important;
  }

  .growtele-io-page .gt-industries__panel[data-tab-panel="banking"] .gt-industries__panel-icon img {
    mix-blend-mode: screen !important;
  }

  .growtele-io-page .gt-industries__panel-title {
    font-size: var(--gt-text-2xl, clamp(22px, 5.5vw, 26px));
    line-height: 1.15;
    margin-bottom: 10px;
  }

  .growtele-io-page .gt-industries__panel-desc {
    font-size: var(--gt-text-lead, clamp(14px, 3.5vw, 16px));
    line-height: 1.5;
    max-width: 100%;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel-visual,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel-visual {
    position: relative !important;
    inset: auto !important;
    z-index: 1;
    flex: 0 0 auto;
    width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    margin: 0;
    padding: 0 0 4px;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    perspective: none !important;
    box-sizing: border-box !important;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel:not([data-tab-panel="banking"]) .gt-industries__panel-visual,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel:not([data-tab-panel="banking"]) .gt-industries__panel-visual {
    padding: 14px 16px 10px !important;
    align-items: center !important;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__visual-img,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel[data-tab-panel] .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__visual-img,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel[data-tab-panel] .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__visual-img--banking,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__visual-img--shopping,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__visual-img--retail,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__visual-img--healthcare,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__visual-img--education,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__visual-img--travelling,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__visual-img--logistic,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__visual-img--banking,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__visual-img--shopping,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__visual-img--retail,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__visual-img--healthcare,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__visual-img--education,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__visual-img--travelling,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__visual-img--logistic {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 auto;
    display: block;
    object-fit: contain !important;
    object-position: bottom center !important;
    mix-blend-mode: normal !important;
    animation: none !important;
    will-change: auto;
    transform: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel.is-active .gt-industries__visual-img,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel.is-active .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel.is-entering .gt-industries__visual-img,
  .growtele-io-page .gt-industries--mobile-stack .gt-industries__panel.is-entering .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel.is-active .gt-industries__visual-img,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel.is-active .gt-industries__panel-visual img,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel.is-entering .gt-industries__visual-img,
  .growtele-io-page .gt-industries--mobile-tabs .gt-industries__panel.is-entering .gt-industries__panel-visual img {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .growtele-io-page .gt-industries.gt-section {
    padding: 20px var(--gt-space-inline-x, 16px) 24px;
  }

  .growtele-io-page .gt-industries .gt-section-heading {
    margin-bottom: 14px;
  }

  .growtele-io-page .gt-industries .gt-section-heading__title {
    font-size: 20px;
    line-height: 1.25;
  }

  .growtele-io-page .gt-industries .gt-section-heading__desc {
    font-size: 13px;
    line-height: 1.45;
  }

  .growtele-io-page .gt-industries__panel-title {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .growtele-io-page .gt-industries__panel-desc {
    font-size: 13px;
    line-height: 1.45;
  }
}

@media (max-width: 480px) {
  .growtele-io-page {
    --gt-container-padding: var(--gt-space-inline-x-sm, 16px);
  }

  .growtele-io-page .gt-industries .gt-section-heading__desc,
  .growtele-io-page .gt-industries__panel-desc {
    font-size: 12px;
  }

  .growtele-io-page .gt-industries__panel-title {
    font-size: 16px;
  }
}

/* Tab icons — same colors as tab labels (navy / brand gradient) */
.growtele-io-page .gt-industries__tab:not(.is-active) .gt-industries__tab-icon.has-mask {
  background: #121348;
}

.growtele-io-page .gt-industries__tab.is-active .gt-industries__tab-icon.has-mask {
  background: linear-gradient(90deg, #ff9300 0%, #f9363d 100%);
}

.growtele-io-page .gt-industries__tab:not(.is-active) .gt-industries__tab-icon:not(.has-mask) img {
  filter: brightness(0) saturate(100%) invert(11%) sepia(45%) saturate(2000%) hue-rotate(218deg) brightness(0.92);
}

.growtele-io-page .gt-industries__tab.is-active .gt-industries__tab-icon:not(.has-mask) img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(93%) saturate(4200%) hue-rotate(359deg) brightness(103%) contrast(101%);
}
