.app-screenshots-gallery {
  overflow: hidden;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}

.screenshots-heading {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  margin-bottom: 1rem;
}

.screenshots-heading h2 {
  margin: 0;
}

.screenshots-heading p {
  margin: 0;
  color: var(--muted, #6f7a7d);
  line-height: 1.9;
}

.screenshots-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 76%);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 0.35rem 0.1rem 1rem;
  direction: rtl;
}

.screenshots-carousel:focus {
  outline: 2px solid rgba(183, 119, 35, 0.35);
  outline-offset: 6px;
  border-radius: 1.25rem;
}

.screenshot-slide {
  scroll-snap-align: center;
  margin: 0;
  border: 1px solid rgba(17, 91, 85, 0.14);
  border-radius: 1.6rem;
  background: #fff;
  box-shadow: 0 18px 42px rgba(7, 55, 61, 0.12);
  padding: 0.7rem;
}

.screenshot-slide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  border-radius: 1.1rem;
  background: #fffaf3;
}

.screenshot-slide figcaption {
  margin-top: 0.7rem;
  text-align: center;
  color: var(--primary, #0b7464);
  font-weight: 800;
}

.screenshot-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 0.2rem;
}

.screenshot-dots a {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 999px;
  background: rgba(11, 116, 100, 0.22);
  border: 1px solid rgba(11, 116, 100, 0.32);
  transition: transform 0.2s ease, background 0.2s ease, width 0.2s ease;
}

.screenshot-dots a:hover,
.screenshot-dots a:focus {
  width: 1.35rem;
  background: #0b7464;
  outline: none;
  transform: translateY(-1px);
}

@media (min-width: 760px) {
  .screenshots-carousel {
    grid-auto-columns: minmax(250px, 42%);
  }
}

@media (min-width: 1100px) {
  .screenshots-carousel {
    grid-auto-columns: minmax(260px, 34%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screenshots-carousel {
    scroll-behavior: auto;
  }
}


.tashkeel-app-page .phone-mock,.tashkeel-app-page .tashkeel-screenshot,.tashkeel-app-page .tashkeel-step,.gallery-card{box-shadow:0 8px 20px rgba(31,81,96,.06)!important;border-color:var(--line)!important;background:#fff!important}
.tashkeel-app-page .phone-top,.tashkeel-app-page .phone-button{background:var(--blue)!important}
.tashkeel-app-page .phone-body,.tashkeel-app-page .download-meta span,.screenshots-heading,.gallery-card figcaption{background:#fbfaf7!important;color:var(--muted)!important}
.screenshots-heading h2{font-size:1.25rem!important;line-height:1.5!important;color:var(--blue)!important}