.app-brand-area .app-brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
}

.app-brand-area .ksatria-project-logo {
  display: block;
  width: 128px;
  height: 30px;
  max-width: 100%;
  object-fit: contain;
}

.ksatria-footer-service-summary p {
  margin-bottom: 12px;
}

.ksatria-footer-service-summary strong {
  font-weight: 700;
}

.ksatria-footer-seo-disclosure {
  margin-top: 12px;
}

.ksatria-footer-seo-disclosure summary {
  list-style: none;
}

.ksatria-footer-seo-disclosure summary::-webkit-details-marker {
  display: none;
}

.ksatria-footer-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 180ms ease, transform 180ms ease;
}

.ksatria-footer-read-more svg {
  transition: transform 180ms ease;
}

.ksatria-footer-seo-disclosure[open] .ksatria-footer-read-more svg {
  transform: rotate(180deg);
}

.ksatria-footer-read-more:hover {
  color: inherit;
  opacity: 0.72;
  transform: translateX(2px);
}

.ksatria-footer-read-more:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.ksatria-footer-seo-content {
  max-width: 340px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(33, 33, 45, 0.14);
  color: rgba(33, 33, 45, 0.76);
  font-size: 14px;
  line-height: 1.5;
}

.ksatria-footer-seo-content p {
  margin: 0 0 10px;
}

.ksatria-footer-seo-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ksatria-footer-seo-keywords li {
  padding: 4px 7px;
  border: 1px solid rgba(33, 33, 45, 0.16);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.25;
}

/* Match the supplied portfolio-metro template's full-width mega-menu geometry. */
.tp-header-10-menu .ksatria-pages-menu > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tp-header-10-menu .ksatria-pages-menu > a .fa-chevron-down {
  font-size: 11px;
  transition: transform 180ms ease;
}

.tp-header-10-menu .ksatria-pages-menu:hover > a .fa-chevron-down,
.tp-header-10-menu .ksatria-pages-menu:focus-within > a .fa-chevron-down {
  transform: rotate(180deg);
}

.tp-header-10-menu .ksatria-pages-menu > .ksatria-pages-megamenu {
  top: 110%;
}

.tp-header-10-menu .ksatria-pages-menu:focus-within > .ksatria-pages-megamenu {
  visibility: visible;
  opacity: 1;
  transition-duration: 0.2s;
  transform: perspective(300px) rotateX(0deg);
}

.tp-header-10-menu .ksatria-pages-megamenu .tp-megamenu-list ul li a:focus-visible {
  outline: 2px solid #111013;
  outline-offset: 2px;
}

@media only screen and (max-width: 575px) {
  .app-brand-area .ksatria-project-logo {
    width: 112px;
    height: 28px;
  }
}

/* Stack panels: the theme shrinks their 200px padding on tablet and phone
   (main.css), but the pt-200/pb-200 utilities in spacing.css load later and
   override it. Below 992px the panels do not pin under the floating header, so
   the full 200px is just empty space. */
@media (max-width: 991px) {
  .app-stack-area .app-stack-item {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  /* main.css adds 120px under the stats card on tablet only; the stack area's
     own margin already separates them, as it does on desktop and phone. */
  .app-review-area.app-review-ptb {
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .app-stack-area .app-stack-item {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

/* Hero composition below 992px: keep the desktop picture instead of the
   theme's stacked fallback. On desktop the hand-held phone stands on the
   gradient card, its bottom 21% overlapping it, with five floating badges
   pinned to the photo. main.css drops the badges and lets the photo and an
   empty card stack separately. Here the photo stays right-aligned and stands
   on the card, and each badge keeps its desktop anchor as a share of the photo
   box. Badges shrink less than the photo (--hero-badge-scale) so their text
   stays legible. */
@media (max-width: 991px) {
  .app-hero-area {
    overflow-x: clip;
  }

  .app-hero-ptb {
    padding-top: 150px;
  }

  .app-hero-wrap {
    padding-left: 0;
    padding-bottom: 36px;
  }

  .app-hero-area .container-1430 {
    --hero-badge-scale: 0.72;
  }

  .app-hero-bottom-thumb-main {
    position: relative;
    right: auto;
    bottom: auto;
    transform: none;
    width: 74%;
    margin: 0 4% 0 auto;
    z-index: 2;
  }

  .app-hero-bottom-thumb-main > img:first-child {
    display: block;
    width: 100%;
    height: auto;
  }

  .app-hero-bottom-thumb-main .shape-1,
  .app-hero-bottom-thumb-main .shape-2,
  .app-hero-bottom-thumb-main .shape-3,
  .app-hero-bottom-thumb-main .shape-4,
  .app-hero-bottom-thumb-main .shape-5 {
    display: block;
    position: absolute;
    height: auto;
    max-width: none;
    translate: none;
    /* ScrollSmoother's data-speed parallax writes an inline transform. At this
       size the drift pushes badges into each other, so they stay pinned. */
    transform: none !important;
  }

  /* Arrow doodle pointing at "One App for All". */
  .app-hero-bottom-thumb-main .shape-1 {
    width: calc(147px * var(--hero-badge-scale));
    left: -14%;
    top: 50%;
    bottom: auto;
  }

  /* One App for All */
  .app-hero-bottom-thumb-main .shape-3 {
    width: calc(243px * var(--hero-badge-scale));
    left: -2%;
    top: 63%;
    bottom: auto;
  }

  /* 36K+ */
  .app-hero-bottom-thumb-main .shape-2 {
    width: calc(232px * var(--hero-badge-scale));
    left: 4%;
    bottom: 0;
  }

  /* we build app too! */
  .app-hero-bottom-thumb-main .shape-4 {
    width: calc(142px * var(--hero-badge-scale));
    right: -2%;
    bottom: 9%;
  }

  /* Secure Payment */
  .app-hero-bottom-thumb-main .shape-5 {
    width: calc(243px * var(--hero-badge-scale));
    right: -6%;
    top: 15%;
  }

  /* The card sits behind the photo's lower third, as on desktop. Its height is
     a share of its own width; a negative top margin in % (also of the width)
     pulls it up by exactly that height. */
  .app-hero-bottom-wrapper {
    position: relative;
    z-index: 1;
    aspect-ratio: 4.2 / 1;
    margin-top: -23.8%;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
  }

  .app-hero-bottom-wrapper .app-hero-bottom-wrap {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .app-hero-ptb {
    padding-top: 128px;
  }

  .app-hero-area .container-1430 {
    --hero-badge-scale: 0.55;
  }

  .app-hero-bottom-thumb-main {
    width: 84%;
    margin-right: 2%;
  }

  .app-hero-bottom-wrapper {
    aspect-ratio: 3.4 / 1;
    margin-top: -29.4%;
    border-radius: 20px;
  }

  .app-hero-bottom-thumb-main .shape-1 {
    left: -17%;
    top: 37%;
  }

  .app-hero-bottom-thumb-main .shape-3 {
    top: 53%;
  }

  /* Testimonial marquee: a 460px card never fits a phone, so no review could
     be read whole. Size each card to the screen, leaving a peek of the next. */
  .app-testimonial-item {
    min-width: calc(100vw - 72px);
    margin: 12px;
    padding: 24px;
  }

  /* pt-120 is the desktop rhythm; on a phone it reads as a dead gap. */
  .app-brand-area.pt-120 {
    padding-top: 72px;
  }
}

/* Laptop widths (992-1399px): main.css keeps the hand photo at its full 870px
   and pins it to the right edge, so it slides under the headline copy and the
   "One App for All" badge lands on the paragraph. Keep the desktop side-by-side
   picture, but size the photo to the right half and anchor the badges to it. */
@media (min-width: 992px) and (max-width: 1399px) {
  .app-hero-area {
    overflow-x: clip;
  }

  .app-hero-bottom-thumb-main {
    right: 3%;
    bottom: 0;
    width: 50%;
    max-width: 870px;
    transform: none;
    --hero-badge-scale: 0.8;
  }

  .app-hero-bottom-thumb-main > img:first-child {
    display: block;
    width: 100%;
    height: auto;
  }

  .app-hero-bottom-thumb-main .shape-1,
  .app-hero-bottom-thumb-main .shape-2,
  .app-hero-bottom-thumb-main .shape-3,
  .app-hero-bottom-thumb-main .shape-4,
  .app-hero-bottom-thumb-main .shape-5 {
    height: auto;
    max-width: none;
    transform: none !important;
  }

  .app-hero-bottom-thumb-main .shape-1 {
    width: calc(147px * var(--hero-badge-scale));
    left: -14%;
    top: 50%;
    bottom: auto;
  }

  .app-hero-bottom-thumb-main .shape-3 {
    width: calc(243px * var(--hero-badge-scale));
    left: 2%;
    top: 61%;
    bottom: auto;
  }

  .app-hero-bottom-thumb-main .shape-2 {
    width: calc(232px * var(--hero-badge-scale));
    left: 0;
    top: auto;
    bottom: 0;
  }

  .app-hero-bottom-thumb-main .shape-4 {
    width: calc(142px * var(--hero-badge-scale));
    left: auto;
    right: -2%;
    bottom: 10%;
  }

  .app-hero-bottom-thumb-main .shape-5 {
    width: calc(243px * var(--hero-badge-scale));
    left: auto;
    right: -8%;
    top: 15%;
  }
}


/* Testimonial avatars that are real photos fill the circular frame. */
.app-testimonial-item-icon .app-testimonial-photo {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}