/* “Innovation” / services intro blocks: rainbow corner art must stay BEHIND copy */

.sndcontsecond {
  position: relative;
  padding: 10rem 2rem;
  text-align: center;
  background: rgba(153, 153, 153, 10%);
  overflow: hidden;
}

/* Copy + media above decorative PNGs */
.sndcontsecond .container {
  position: relative;
  z-index: 2;
}

/* Scoped so generic .one / .two never leak site-wide */
.sndcontsecond img.one {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  height: auto;
}

.sndcontsecond img.two {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  height: auto;
}

.desktopone {
  display: block;
}

.mobilepone {
  display: none;
}

@media screen and (max-width: 1024px) {
  .sndcontsecond img.one,
  .sndcontsecond img.two {
    max-width: 144px;
  }
}

@media screen and (max-width: 480px) {
  .sndcontsecond {
    padding: 0 0 4rem 0;
    padding-top: 60px;
  }

  .sndcontsecond img.one,
  .sndcontsecond img.two {
    max-width: 70px;
  }

  .sndcontsecond img.two {
    bottom: 0;
  }
}

@media (max-width: 767px) {
  .sndcontsecond {
    position: relative;
    text-align: center;
    background: rgba(153, 153, 153, 10%);
  }

  .sndcontsecond img.one,
  .sndcontsecond img.two {
    max-width: 70px;
  }

  .desktopone {
    display: none;
  }

  .mobilepone {
    display: block;
  }
}

.slide2text {
  padding: 0 0rem;
  font-size: 16px;
  line-height: 26px;
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  height: auto;
  /* Cancel legacy .slide2text top/left from style.css once position is relative */
  top: auto;
  left: auto;
  right: auto;
  color: rgba(37, 34, 63, 1);
  -webkit-text-fill-color: rgba(37, 34, 63, 1);
}

@media (min-width: 480px) {
  .slide2text {
    padding: 0 1rem;
    font-size: 16px;
    line-height: 30px;
  }
}

@media (min-width: 768px) {
  .slide2text {
    padding: 0 2rem;
    font-size: 16px;
    line-height: 30px;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .sndcontsecond {
    padding: 3rem 0rem;
  }

  .sndcontsecond img.one,
  .sndcontsecond img.two {
    max-width: 90px;
  }

  .sndcontsecond img.two {
    position: absolute;
    bottom: 2px;
    left: 0;
  }
}

@media (min-width: 1024px) {
  .slide2text {
    padding: 0 2rem;
    font-size: 20px;
    line-height: 30px;
  }
}

@media (min-width: 1280px) {
  .slide2text {
    padding: 0 10rem;
    font-size: 20px;
    line-height: 30px;
  }
}

/* Intro paragraphs under gradient h2: win over any late-loaded or inline rules */
.sndcontsec.sndcontsecond .slide2text,
.sndcontsec.sndcontsecond p.slide2text {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  color: rgba(37, 34, 63, 1) !important;
  -webkit-text-fill-color: rgba(37, 34, 63, 1) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

/* Mobile “Process overview” carousel: .sipmaincont must not use desktop overlap (height:0 / negative margin) */
@media (max-width: 768px) {
  section.sndcontsec-mobile.only-mobile,
  .sndcontsec-mobile.only-mobile {
    padding-left: clamp(14px, 4.5vw, 22px) !important;
    padding-right: clamp(14px, 4.5vw, 22px) !important;
    padding-top: clamp(3.25rem, 11vw, 4.75rem) !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)) !important;
    scroll-margin-top: 72px;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  .sndcontsec-mobile sl-carousel-item.sipmaincont,
  .sndcontsec-mobile .sipmaincont {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.35rem !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 1.75rem !important;
    padding-bottom: 2.5rem !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    overflow: visible !important;
  }

  .sndcontsec-mobile .sndcontsec-mobile-slider,
  .sndcontsec-mobile sl-carousel.sndcontsec-mobile-slider {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 1.5rem !important;
    box-sizing: border-box !important;
  }

  .sndcontsec-mobile .divnumimg {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 0.35rem !important;
    padding-top: 0.25rem !important;
  }

  /* Step “01 / 02 …” PNG — keep modest on phones so sections read as separate blocks */
  .sndcontsec-mobile .divnumimg img {
    width: auto !important;
    max-width: clamp(48px, 16vw, 76px) !important;
    max-height: clamp(26px, 11vw, 48px) !important;
    height: auto !important;
    object-fit: contain !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  .sndcontsec-mobile .divtextcont {
    width: 100% !important;
    max-width: 100%;
    text-align: left;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 1.15rem !important;
    margin-top: 0.35rem !important;
    box-sizing: border-box !important;
  }

  .sndcontsec-mobile .divtextcont h3 {
    font-size: clamp(1rem, 4.2vw, 1.125rem) !important;
    line-height: 1.35 !important;
    margin: 0 0 0.85rem 0 !important;
  }

  .sndcontsec-mobile .divtextcont p {
    font-size: clamp(0.875rem, 3.6vw, 0.9375rem) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    padding-bottom: 0.35rem !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  .sndcontsec-mobile h2 {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Mobile service-spectrum tabs: full-width tap targets, keep row above panel (no overlap steals taps) */
@media (max-width: 768px) {
  .services-section .only-mobile-button-groupes,
  .services-section .only-mobile-button-groups {
    position: relative;
    z-index: 3;
  }

  .services-section .mobilebox {
    position: relative;
    z-index: 1;
  }

  .services-section .only-mobile-button-groups .only-mobile-button.tablinks-mobile,
  .services-section .only-mobile-button-groupes .only-mobile-button.tablinks-mobile {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 12px 16px !important;
    box-sizing: border-box;
  }
}

/* Global mobile: undo desktop-fixed blocks that overlap text / hide images on service pages */
@media (max-width: 768px) {
  p.myp {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .myclass h2 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .box1align p {
    height: auto !important;
  }

  .only-mobiles {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .design-rule-section-mobile {
    min-height: 0 !important;
    display: block !important;
  }

  .design-rule-section-mobiles,
  sl-carousel.design-rule-section-mobiles {
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    --slide-size: 100%;
  }

  .only-mobiles .container.design-rule-section-mobile {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(10px, 3.5vw, 18px) !important;
    padding-right: clamp(10px, 3.5vw, 18px) !important;
    box-sizing: border-box !important;
  }

  .only-mobiles .design-rule-section-mobile .card-wrappers {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .only-mobiles .design-rule-section-mobile .cardsec {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .only-mobiles .design-rule-section-mobile .cardsec img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  .sndcontsec-mobile .divtextcont {
    margin-left: 0 !important;
  }

  .servicestabcontent-containersM {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .servicestabcontent-containersM > div:first-child img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  .thrdcontsec .containers,
  .only-mobile.thrdcontsec .containers {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(10px, 3.5vw, 18px) !important;
    padding-right: clamp(10px, 3.5vw, 18px) !important;
    box-sizing: border-box !important;
  }

  .thrdcontsec .servicestabcontent-containersM > div:first-child,
  .services-section .servicestabcontent-containersM > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mobilealign {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Mobile: keep nav + hamburger above full-viewport Owl hero (transform/stacking steals taps).
   Do NOT target .menu-header.only-mobile.sticky — that must stay position:absolute inside the bar. */
@media (max-width: 768px) {
  .only-mobile.sticky:not(.menu-header) {
    position: fixed !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 20000;
    isolation: isolate;
  }

  .menu-header {
    z-index: 20001 !important;
  }

  .menu-header .hamburger,
  .menu-header button.hamburger {
    position: relative;
    z-index: 20002 !important;
    pointer-events: auto !important;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    font: inherit;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    min-height: 44px;
    min-width: 44px;
  }

  .side-menu {
    z-index: 19990;
  }

  .side-menu.open {
    z-index: 25000 !important;
    right: 0 !important;
    visibility: visible !important;
  }

  .bannersec-mobile .slidecontpart .container {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .bannersec-mobile .slidecontpart h2,
  .bannersec-mobile .slidecontpart h1 {
    max-width: 100% !important;
    letter-spacing: 0.06em !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere;
  }

  .bannersec-mobile .slidecontpart p {
    max-width: 100% !important;
    letter-spacing: 0.03em !important;
    padding-right: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere;
  }

  /* Applications page: Swiper must not reserve a tall “ghost” track on mobile */
  .myappback .app-swiper.swiper {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .myappback .app-swiper .swiper-wrapper {
    height: auto !important;
    align-items: stretch;
  }

  .myappback .app-swiper .swiper-slide {
    height: auto !important;
  }
}