/* Device Showcase Dev by M.Salman */

/* Full width ke liye horizontal scroll na aaye */
html:has(.dsdms--full) { overflow-x: clip; }

.dsdms {
  /* Fluid defaults: har screen par khud adjust (Elementor controls inhe override karte hain) */
  --dsdms-h: clamp(210px, 26vw, 430px);
  --dsdms-gap: clamp(18px, 2.6vw, 40px);
  --dsdms-font: clamp(16px, 1.9vw, 28px);
  --dsdms-dot-gap: clamp(18px, 2.6vw, 38px);
  --dsdms-space: clamp(36px, 5vw, 76px);
  --dsdms-text-speed: 45s;
  --dsdms-slide-speed: 90s;
  --dsdms-ink: #0a0e2e;

  position: relative;
  width: 100%;
  padding: calc(var(--dsdms-space) * 1.1) 0;
  background: #E3F0FF;
  overflow: hidden;
  box-sizing: border-box;
  contain: layout paint;
}
.dsdms *, .dsdms *::before, .dsdms *::after { box-sizing: border-box; }

/* Full width (edge to edge) */
.dsdms--full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

@media (min-width: 1700px) {
  .dsdms { --dsdms-text-speed: 55s; --dsdms-slide-speed: 110s; }
}
@media (max-width: 640px) {
  .dsdms { --dsdms-text-speed: 32s; --dsdms-slide-speed: 70s; }
}

/* ===== Track (seamless loop) ===== */
.dsdms .dsdms-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.dsdms .dsdms-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.dsdms--off .dsdms-track { animation-play-state: paused; }

.dsdms-dir-left  .dsdms-track { animation-name: dsdms-left; }
.dsdms-dir-right .dsdms-track { animation-name: dsdms-right; }
.dsdms-hover-pause:hover .dsdms-track { animation-play-state: paused; }

/* ===== Text bars ===== */
.dsdms .dsdms-bar { overflow: hidden; }
.dsdms .dsdms-bar--top .dsdms-track    { animation-duration: var(--dsdms-top-speed, var(--dsdms-text-speed)); }
.dsdms .dsdms-bar--bottom .dsdms-track { animation-duration: var(--dsdms-bottom-speed, var(--dsdms-text-speed)); }

.dsdms .dsdms-item {
  display: inline-flex;
  align-items: center;
  font-size: var(--dsdms-font);
  line-height: 1.5;
  font-weight: 500;
  color: var(--dsdms-ink);
  white-space: nowrap;
}
.dsdms .dsdms-item::after {
  content: "";
  width: .28em;
  height: .28em;
  border-radius: 50%;
  background-color: var(--dsdms-ink);
  margin: 0 var(--dsdms-dot-gap);
  flex-shrink: 0;
}
.dsdms .dsdms-bullet-square  .dsdms-item::after { border-radius: 0; }
.dsdms .dsdms-bullet-diamond .dsdms-item::after { border-radius: 0; transform: rotate(45deg); }
.dsdms .dsdms-bullet-none    .dsdms-item::after { background-color: transparent !important; }

/* ===== Devices slider ===== */
.dsdms .dsdms-devices {
  overflow: hidden;
  margin: var(--dsdms-space) 0;
  padding: 6px 0;
}
.dsdms .dsdms-devices .dsdms-track { animation-duration: var(--dsdms-devices-speed, var(--dsdms-slide-speed)); }
.dsdms .dsdms-devices .dsdms-group { gap: var(--dsdms-gap); padding-right: var(--dsdms-gap); }

/* Image jaisi hai waisi shape: height fix, width image ke hisaab se */
.dsdms .dsdms-slide {
  flex-shrink: 0;
  height: var(--dsdms-h);
  line-height: 0;
}
.dsdms .dsdms-slide a { display: block; height: 100%; }
.dsdms .dsdms-slide img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Simple screenshot (device frame nahi) -> "Add device frame" on */
.dsdms .dsdms-framed.dsdms-desk { aspect-ratio: 1.3 / 1; }
.dsdms .dsdms-framed.dsdms-mob  { aspect-ratio: 0.48 / 1; }
.dsdms .dsdms-framed img {
  width: 100%;
  object-fit: cover;
  background: var(--dsdms-frame, #0b0d12);
  border: 7px solid var(--dsdms-frame, #0b0d12);
  box-shadow: 0 0 0 2px #3a3d46, 0 18px 40px rgba(10, 14, 46, .25);
}
.dsdms .dsdms-framed.dsdms-desk img { border-radius: 26px; }
.dsdms .dsdms-framed.dsdms-mob img  { border-radius: 36px; border-width: 8px; }

/* ===== Keyframes (-50% = ek poora group => seamless) ===== */
@keyframes dsdms-left  { from { transform: translate3d(0, 0, 0); }    to { transform: translate3d(-50%, 0, 0); } }
@keyframes dsdms-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .dsdms .dsdms-track { animation: none !important; }
}