/* INTOTEQ Services Slider — unified mobile + desktop */

.itq-svc-wrapper { overflow-x: hidden; font-family: Poppins;padding-right:50px; }

/* Card sizing variables */
.itq-svc-wrapper{
  --itq-svc-card-w: 320px;  /* desktop/tablet card width */
  --itq-svc-card-h: 720px;  /* height cap via aspect/max-height combo */
}

/* Optional: tweak per breakpoint */
@media (max-width: 1024px){
  .itq-svc-wrapper{ --itq-svc-card-w: 380px; --itq-svc-card-h: 680px; }
}
@media (max-width: 768px){
  .itq-svc-wrapper{ --itq-svc-card-h: 680px; } /* mobile height feel */
}

.itq-svc-section{
  position: relative;
  width: 98%;
  padding: 70px 16px;
  margin-inline: auto;
}
@media (min-width:768px){ .itq-svc-section{ padding: 64px 32px; } }

.itq-svc-swiper{ overflow: visible !important; }

/* Let Swiper own widths. We only add GAP on >=768px (desktop/tablet) */
@media (min-width:768px){
  .itq-svc-wrapper .swiper-wrapper{ gap: 10px; }
  .itq-svc-wrapper .swiper-slide{ width: var(--itq-svc-card-w); } /* multiple cards view */
}
/* On mobile we don't force widths; Swiper (slidesPerView:1) makes slides full width */
.itq-svc-wrapper .swiper-slide{ margin: 0; box-sizing: border-box; }

/* Card fills its slide width */
.slide-card{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 28px;
  transform: scale(.985);
  opacity: .9;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .5s ease;
  aspect-ratio: 420/780;         /* controls height from width */
  max-height: var(--itq-svc-card-h);
}
.slide-card.active{ transform: scale(1); opacity: 1; }

.slide-img{
  position: absolute; inset: 0;
  width: 100%; height: 100% !important;
  object-fit: cover; transition: transform .5s ease;
}
.slide-card:hover .slide-img{ transform: scale(1.03); }

.slide-tint{ position: absolute; inset: 0; }

.slide-text{ position: absolute; left: 32px; right: 32px; top: 30px; color:#fff; }
.slide-title{ font-size: 28px; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; margin: 0; }
@media (min-width:768px){ .slide-title{ font-size: 40px; } }

.slide-body{ margin-top: 16px; font-size: 14.5px; font-weight: 400; line-height: 1.6; opacity: .95; max-width: 480px; }
@media (min-width:768px){ .slide-body{ font-size: 16.5px; } }

.slide-ring{ pointer-events:none; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }

/* Nav */
.slider-nav{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 92%; margin-top: 16px;
  display: flex; justify-content: flex-end; gap: 20px;
}
.nav-btn{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:#111; color:#fff; cursor:pointer;
  transition: opacity .2s ease, background-color .2s ease;
}
.nav-btn.nav-disabled{ opacity:.5; cursor:not-allowed !important; }

/* Mobile small tweaks */
@media (max-width:480px){
  .itq-svc-section{ width:100%; padding-left:20px; padding-right:20px; }
  .slide-text{ left:15px; right:15px; }
div#swiper-wrapper-eafbb09ff2e38cdb {
    gap: 4px;
}
.itq-svc-wrapper {padding-right:0px; }
}