/* =================================================
   FT Nexavvy — Badge Mobile Fix
   Sourced from Compubrain app.min8a54.css
   Only overrides needed to show the badge on mobile
   ================================================= */

/* ── Rotation animation (same as Compubrain) ── */
@keyframes rotationCustom {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ── Show the label container on mobile ── */
@media (max-width: 625px) {
  .hero__slide--label {
    display: block !important;
  }

  .hero__slider--wrap {
    margin-top: 24px !important;
  }

  .hero__slide.swiper-slide {
    padding: 23vh 0 25vh !important;
  }

  .hero__slider.swiper {
    padding: 0 16px !important;
  }

  .hero__slide.swiper-slide>img:nth-of-type(2) {
    display: block !important;
    width: min(88vw, 340px) !important;
    max-width: 88vw !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform-origin: center center !important;
  }

  .hero__slide--label--inner>a {
    display: block !important;
    background: transparent !important;
  }

  /* Expand badge when slide is active */
  .hero__slide.swiper-slide.swiper-slide-active .hero__slide--label--inner>a {
    width: 64px !important;
    height: 64px !important;
    position: relative !important;
    background: transparent !important;
    display: inline-block !important;
  }

  /* Ring image — fill the badge, animate */
  .hero__slide--label--inner>a>img:nth-of-type(1) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    animation: rotationCustom 5s linear infinite forwards !important;
  }

  /* Monogram — centered on top of ring */
  .hero__slide--label--inner>a>img:nth-of-type(2) {
    position: absolute !important;
    width: 20px !important;
    height: auto !important;
    max-width: none !important;
    left: 50% !important;
    top: 50% !important;
    object-fit: contain !important;
    transform: translate(-50%, -50%) !important;
  }

  .services__body--pics {
    min-height: 360px !important;
  }

  .services__body--pics--bg {
    background: transparent !important;
    opacity: 0 !important;
  }

  .services__body--pics--main {
    width: 270px !important;
    height: 270px !important;
    top: 58% !important;
    left: 46% !important;
    transform: translate(-50%, -50%) !important;
  }

  .services__body--pics--main img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }

  .services__body--pics--icon4 {
    top: 46% !important;
    right: -6px !important;
    left: auto !important;
    transform: translate(50%, -50%) !important;
    z-index: 3 !important;
  }

  .services__body--pics--icon4 img:nth-of-type(1) {
    width: 82px !important;
    height: 82px !important;
  }

  .services__body--pics--icon4 img:nth-of-type(2) {
    width: 26px !important;
  }
}