.app-store-mockup {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.app-store-mockup .div {
  background-color: #ffffff;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  height: 956px;
  position: relative;
}

.app-store-mockup .status-bar {
  position: absolute;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  height: 44px;
  top: 0;
  left: 0;
  background-color: #f7f7f7;
}

.app-store-mockup .right-side {
  position: absolute;
  width: 67px;
  height: 11px;
  top: 17px;
  right: 21px;
}

.app-store-mockup .left-side {
  position: absolute;
  width: 54px;
  height: 21px;
  top: 12px;
  left: 21px;
}

.app-store-mockup .list-view {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  align-items: center;
  position: absolute;
  left: 0;
  display: flex;
  flex-direction: column;
}

.app-store-mockup .header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.app-store-mockup .div-2 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app-store-mockup .frame {
  position: relative;
  width: 100%;
  max-width: 118px;
  height: 118px;
  border-radius: 25px;
  overflow: hidden;
  background: url(https://c.animaapp.com/mdwqd7vb0cBdV2/img/frame-44.png) 50%
    50% / cover;
}

.app-store-mockup .app-icon {
  height: 118px;
  background: url(https://c.animaapp.com/mdwqd7vb0cBdV2/img/appicon.png) 50%
    50% / cover;
}

.app-store-mockup .frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
}

.app-store-mockup .app-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.app-store-mockup .div-wrapper {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.app-store-mockup .text-wrapper {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "SF Pro-Semibold", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 22px;
  letter-spacing: -0.22px;
  line-height: 23px;
}

.app-store-mockup .div-wrapper-2 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app-store-mockup .text-wrapper-2 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #727272;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.app-store-mockup .action-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app-store-mockup .frame-3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .button-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: #256ef6;
  border-radius: 28px;
}

.app-store-mockup .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Semibold", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.3px;
  line-height: 16px;
  white-space: nowrap;
}

.app-store-mockup .trust-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 24px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 28px;
  border: 1.5px solid;
  border-color: #5e5b5b;
}

.app-store-mockup .trust {
  position: relative;
  width: fit-content;
  margin-top: -1.5px;
  font-family: "SF Pro-Semibold", Helvetica;
  font-weight: 400;
  color: #5e5b5b;
  font-size: 15px;
  letter-spacing: 0.3px;
  line-height: 16px;
  white-space: nowrap;
}

.app-store-mockup .icon-share {
  position: relative;
  width: 18px;
  height: 23px;
  background-image: url(https://c.animaapp.com/mdwqd7vb0cBdV2/img/union-1.svg);
  background-size: 100% 100%;
}

.app-store-mockup .divider {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
}

.app-store-mockup .info-carousel {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 61px;
  overflow-x: scroll;
}

.app-store-mockup .info-carousel::-webkit-scrollbar {
  width: 0;
  display: none;
}

.app-store-mockup .info-carousel-2 {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.app-store-mockup .info {
  display: flex;
  flex-direction: column;
  width: 110px;
  align-items: flex-start;
  gap: 4px;
  position: relative;
}

.app-store-mockup .div-wrapper-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app-store-mockup .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #727272;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.app-store-mockup .rate-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app-store-mockup .text-wrapper-5 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "SF Pro-Semibold", Helvetica;
  font-weight: 400;
  color: #727272;
  font-size: 22px;
  text-align: center;
  letter-spacing: 0.44px;
  line-height: normal;
}

.app-store-mockup .rate-star {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 14px;
}

.app-store-mockup .img {
  position: relative;
  width: 1px;
  height: 38px;
}

.app-store-mockup .info-2 {
  display: flex;
  flex-direction: column;
  width: 110px;
  height: 62px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
}

.app-store-mockup .text-wrapper-6 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #727272;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.app-store-mockup .age {
  position: relative;
  flex: 1;
  width: 40px;
  flex-grow: 1;
}

.app-store-mockup .text-wrapper-7 {
  position: absolute;
  top: -1px;
  left: 0;
  font-family: "SF Pro-Semibold", Helvetica;
  font-weight: 400;
  color: #727272;
  font-size: 22px;
  letter-spacing: 0.44px;
  line-height: normal;
  white-space: nowrap;
}

.app-store-mockup .info-3 {
  display: flex;
  flex-direction: column;
  width: 110px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
}

.app-store-mockup .preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 20px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.app-store-mockup .preview-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 390px;
}

.app-store-mockup .device {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 16px;
}

.app-store-mockup .device-2 {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.app-store-mockup .device-3 {
  display: inline-flex;
  gap: 12px;
  flex: 0 0 auto;
  align-items: center;
  position: relative;
}

.app-store-mockup .union {
  position: relative;
  width: 10px;
  height: 16px;
}

.app-store-mockup .text-wrapper-8 {
  position: relative;
  width: fit-content;
  font-family: "SF Pro-Semibold", Helvetica;
  font-weight: 400;
  color: #727272;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.app-store-mockup .vector {
  position: relative;
  width: 12.5px;
  height: 6.5px;
}

.app-store-mockup .divider-2 {
  margin-bottom: -1px;
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
}

.app-store-mockup .app-discription {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  align-items: center;
  gap: 20px;
  padding: 20px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.app-store-mockup .app-discription-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app-store-mockup .welcome-to-your {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 19.6px;
}

.app-store-mockup .span {
  color: #000000;
}

.app-store-mockup .text-wrapper-9 {
  top: 41px;
  left: 366px;
  font-size: 14px;
  letter-spacing: 0;
  position: absolute;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #256ef6;
  line-height: normal;
}

.app-store-mockup .rectangle {
  position: absolute;
  width: 46px;
  height: 17px;
  top: 43px;
  left: 320px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 27%,
    rgba(255, 255, 255, 0.95) 69%,
    rgba(255, 255, 255, 1) 100%
  );
}

.app-store-mockup .developer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app-store-mockup .developer-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.app-store-mockup .div-wrapper-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .team {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #256ef6;
  font-size: 14px;
  letter-spacing: 0.14px;
  line-height: normal;
}

.app-store-mockup .text-wrapper-10 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Semibold", Helvetica;
  font-weight: 400;
  color: #727272;
  font-size: 12px;
  letter-spacing: -0.84px;
  line-height: normal;
  white-space: nowrap;
}

.app-store-mockup .vector-2 {
  position: relative;
  width: 6.5px;
  height: 12.5px;
}

.app-store-mockup .rate {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .div-3 {
  display: flex;
  gap: 16px;
  align-self: stretch;
  width: 100%;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.app-store-mockup .text-wrapper-11 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 22px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.app-store-mockup .rate-left {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .div-wrapper-5 {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .text-wrapper-12 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 60px;
  letter-spacing: -1.8px;
  line-height: 48px;
  white-space: nowrap;
}

.app-store-mockup .rate-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.app-store-mockup .img-2 {
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .text-wrapper-13 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Medium", Helvetica;
  font-weight: 500;
  color: #727272;
  font-size: 15px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.app-store-mockup .label {
  display: flex;
  align-items: flex-start;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.app-store-mockup .text-wrapper-14 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Semibold", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.app-store-mockup .review-collection {
  position: relative;
  width: 100%;
  max-width: 100%;
  /* margin: 0 auto; */
  /* height: 130px; */
  margin-right: -21px;
  overflow-x: scroll;
}

.app-store-mockup .review-collection::-webkit-scrollbar {
  width: 0;
  display: none;
}

.app-store-mockup .review-collection-2 {
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}

.app-store-mockup .review {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 388px;
  margin: 0 auto;
  align-items: flex-start;
  gap: 16px;
  /* padding: 16px 20px; */
  position: relative;
  background-color: #ffffff;
  border-radius: 21px;
  box-shadow: 2px 6px 13px #00000029;
}

.app-store-mockup .review-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  padding: 10px;
}

.app-store-mockup .review-header {
  display: flex;
  align-items: flex-start;
  gap: 23px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app-store-mockup .review-header-left {
  flex-direction: column;
  gap: 12px;
  flex: 1;
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.app-store-mockup .text-wrapper-15 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "SF Pro-Semibold", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.app-store-mockup .review-rate-name {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .review-date-wrapper {
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .text-wrapper-16 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #727272;
  font-size: 12px;
  text-align: right;
  letter-spacing: -0.24px;
  line-height: normal;
  white-space: nowrap;
}

.app-store-mockup .overlap-group-wrapper {
  position: relative;
  align-self: stretch;
  width: 100%;
  /* height: 49px; */
}

.app-store-mockup .overlap-group {
  position: relative;
  width: 100%;
  max-width: 348px;
  margin: 0 auto;
  /* height: 51px; */
  min-height: 65px;
}

.app-store-mockup .i-ve-been-using-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 348px;
  margin: 0 auto;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

.app-store-mockup .i-ve-been-using {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 16.6px;
}

.app-store-mockup .text-wrapper-17 {
  top: 34px;
  left: 318px;
  font-size: 12px;
  letter-spacing: 0.36px;
  white-space: nowrap;
  position: absolute;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #256ef6;
  line-height: normal;
}

.app-store-mockup .rectangle-2 {
  position: absolute;
  width: 35px;
  height: 17px;
  top: 99px;
  left: 297px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 27%,
    rgba(255, 255, 255, 0.95) 69%,
    rgba(255, 255, 255, 1) 100%
  );
}

.app-store-mockup .review-3 {
  display: flex;
  flex-direction: column;
  height: 98px;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.app-store-mockup .review-wrapper {
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.app-store-mockup .review-4 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 348px;
  margin: 0 auto;
  align-items: center;
  position: relative;
}

.app-store-mockup .p {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 16.6px;
}

.app-store-mockup .update {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .div-wrapper-6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.app-store-mockup .text-wrapper-18 {
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #727272;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  align-self: stretch;
}

.app-store-mockup .text-wrapper-19 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #727272;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}

.app-store-mockup .enhanced-live-casino-wrapper {
  padding: 0px 0px 10px;
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .enhanced-live-casino {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 19.6px;
}

.app-store-mockup .update-2 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  gap: 16px;
  padding: 20px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .label-2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  align-items: flex-start;
  position: relative;
}

.app-store-mockup .div-4 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 14px;
}

.app-store-mockup .text-wrapper-20 {
  color: #727272;
  line-height: 19.6px;
}

.app-store-mockup .text-wrapper-21 {
  color: #256ef6;
  line-height: 19.6px;
}

.app-store-mockup .value {
  position: relative;
  width: 38px;
  height: 13px;
  margin-right: -54px;
}

.app-store-mockup .data-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app-store-mockup .review-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 37px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 21px;
  box-shadow: 2px 6px 13px #00000033;
}

.app-store-mockup .overlap-group-wrapper-2 {
  position: relative;
  width: 30px;
  height: 30px;
}

.app-store-mockup .overlap-group-2 {
  position: relative;
  width: 31px;
  height: 31px;
  top: -1px;
  left: -1px;
}

.app-store-mockup .vector-3 {
  position: absolute;
  width: 17px;
  height: 18px;
  top: 7px;
  left: 7px;
}

.app-store-mockup .subtract {
  position: absolute;
  width: 31px;
  height: 31px;
  top: 0;
  left: 0;
}

.app-store-mockup .review-6 {
  display: flex;
  flex-direction: column;
  height: 83px;
  align-items: center;
  gap: 2px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.app-store-mockup .review-header-left-wrapper {
  justify-content: center;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.app-store-mockup .review-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.app-store-mockup .text-wrapper-22 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "SF Pro-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.app-store-mockup .content {
  display: flex;
  width: 100%;
  max-width: 326px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .frame-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.app-store-mockup .text-wrapper-23 {
  position: relative;
  width: 326.76px;
  margin-top: -1px;
  margin-left: -0.38px;
  margin-right: -0.38px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #727272;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19.6px;
}

.app-store-mockup .frame-5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .review-rate-name-2 {
  padding: 2px 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .identifiers {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .icon-identifiers {
  position: relative;
  width: 19px;
  height: 16px;
}

.app-store-mockup .group {
  position: absolute;
  width: 18px;
  height: 12px;
  top: 2px;
  left: 0;
}

.app-store-mockup .text-wrapper-24 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12px;
  text-align: right;
  letter-spacing: -0.24px;
  line-height: normal;
  white-space: nowrap;
}

.app-store-mockup .review-7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app-store-mockup .overlap-group-3 {
  position: relative;
  height: 30px;
}

.app-store-mockup .subtract-2 {
  position: absolute;
  width: 12px;
  height: 17px;
  top: 5px;
  left: 7px;
}

.app-store-mockup .subtract-3 {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
}

.app-store-mockup .line-stroke {
  position: absolute;
  width: 28px;
  height: 28px;
  top: 1px;
  left: 1px;
}

.app-store-mockup .review-rate-name-3 {
  padding: 6px 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.app-store-mockup .information {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  height: 450px;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 0px;
  position: relative;
  background-color: #ffffff;
}

.app-store-mockup .list {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 0px 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app-store-mockup .row {
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.app-store-mockup .row-2 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app-store-mockup .text-wrapper-25 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #727272;
  font-size: 11px;
  letter-spacing: 0.22px;
  line-height: 16px;
  white-space: nowrap;
}

.app-store-mockup .text-wrapper-26 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12px;
  text-align: right;
  letter-spacing: 0;
  line-height: 16px;
}

.app-store-mockup .text-wrapper-27 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 12px;
  text-align: right;
  letter-spacing: -0.24px;
  line-height: 16px;
}

.app-store-mockup .img-3 {
  position: relative;
  width: 16px;
  height: 16px;
}

/* App Store style horizontal scrollable screenshots gallery */
.screenshots-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /* height: 200px; */
  /* height: 325px; */
  border-radius: 12px;
  overflow: hidden;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
}

.screenshots-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  padding: 8px;
}

.screenshots-wrapper::-webkit-scrollbar {
  display: none;
}

.screenshot {
  flex: 0 0 auto;
  height: 100%;
  scroll-snap-align: start;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* iPhone SE optimizations for screenshots */
@media screen and (max-width: 375px) {
  .screenshots-container {
    /* height: 180px; */
  }

  .screenshot {
    min-width: 250px;
  }

  .screenshots-wrapper {
    gap: 6px;
    padding: 6px;
  }
}

@media screen and (max-width: 320px) {
  .screenshots-container {
    height: 160px;
  }

  .screenshot {
    min-width: 220px;
  }

  .screenshots-wrapper {
    gap: 4px;
    padding: 4px;
  }
}

/* iPhone SE and smaller devices optimization */
@media screen and (max-width: 375px) {
  .app-store-mockup {
    max-width: 375px;
    padding: 0;
  }

  .app-store-mockup .div {
    width: 375px;
    max-width: 375px;
    height: auto;
    min-height: 100vh;
  }

  .app-store-mockup .list-view {
    width: 375px;
    max-width: 375px;
  }

  /* Header adjustments */
  .app-store-mockup .header {
    padding: 16px 16px 20px;
    gap: 16px;
  }

  .app-store-mockup .div-2 {
    gap: 12px;
  }

  /* App icon smaller for iPhone SE */
  .app-store-mockup .frame {
    width: 100px;
    max-width: 100px;
    height: 100px;
    border-radius: 22px;
  }

  .app-store-mockup .app-icon {
    height: 100px;
  }

  /* App name text adjustments */
  .app-store-mockup .text-wrapper {
    font-size: 20px;
    line-height: 21px;
    letter-spacing: -0.2px;
  }

  .app-store-mockup .text-wrapper-2 {
    font-size: 13px;
  }

  /* Button adjustments */
  .app-store-mockup .button-download {
    padding: 8px 20px;
    border-radius: 24px;
  }

  .app-store-mockup .text-wrapper-3 {
    font-size: 13px;
  }

  .app-store-mockup .trust {
    font-size: 13px;
  }

  /* Info carousel adjustments */
  .app-store-mockup .info-carousel {
    padding: 0 8px;
  }

  .app-store-mockup .info-carousel-2 {
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .app-store-mockup .info {
    min-width: 70px;
    scroll-snap-align: start;
  }

  .app-store-mockup .info-2 {
    min-width: 60px;
    scroll-snap-align: start;
  }

  .app-store-mockup .info-3 {
    min-width: 70px;
    scroll-snap-align: start;
  }

  /* Text size adjustments for info */
  .app-store-mockup .text-wrapper-4,
  .app-store-mockup .text-wrapper-6 {
    font-size: 9px;
  }

  .app-store-mockup .text-wrapper-5 {
    font-size: 14px;
  }

  .app-store-mockup .text-wrapper-7 {
    font-size: 14px;
  }

  /* Preview section */
  .app-store-mockup .preview {
    padding: 16px;
  }

  /* App description */
  .app-store-mockup .app-discription {
    padding: 0 16px 20px;
  }

  .app-store-mockup .welcome-to-your {
    font-size: 13px;
    line-height: 18px;
  }

  /* Ratings section */
  .app-store-mockup .rate {
    padding: 0 16px 20px;
  }

  .app-store-mockup .text-wrapper-11 {
    font-size: 18px;
  }

  .app-store-mockup .text-wrapper-12 {
    font-size: 36px;
  }

  .app-store-mockup .text-wrapper-13 {
    font-size: 11px;
  }

  /* Review adjustments */
  .app-store-mockup .review-collection {
    /* padding: 0 8px; */
  }

  .app-store-mockup .review {
    margin: 0 8px 16px;
    min-width: 280px;
  }

  .app-store-mockup .text-wrapper-15 {
    font-size: 14px;
  }

  .app-store-mockup .text-wrapper-16 {
    font-size: 11px;
  }

  .app-store-mockup .i-ve-been-using,
  .app-store-mockup .p {
    font-size: 13px;
    line-height: 17px;
  }

  /* Update section */
  .app-store-mockup .update {
    padding: 0 16px 20px;
  }

  .app-store-mockup .text-wrapper-18 {
    font-size: 13px;
  }

  .app-store-mockup .text-wrapper-19 {
    font-size: 11px;
  }

  .app-store-mockup .enhanced-live-casino {
    font-size: 13px;
    line-height: 17px;
  }

  /* Privacy section */
  .app-store-mockup .update-2 {
    padding: 0 16px 20px;
  }

  .app-store-mockup .text-wrapper-20,
  .app-store-mockup .text-wrapper-21 {
    font-size: 12px;
    line-height: 16px;
  }

  /* Data box */
  .app-store-mockup .data-box {
    padding: 0 16px 20px;
  }

  .app-store-mockup .text-wrapper-22 {
    font-size: 14px;
  }

  .app-store-mockup .text-wrapper-23 {
    font-size: 12px;
    line-height: 16px;
  }

  .app-store-mockup .text-wrapper-24 {
    font-size: 11px;
  }

  /* Information section */
  .app-store-mockup .information {
    padding: 16px;
    height: auto;
    min-height: 400px;
  }

  .app-store-mockup .row-2 {
    gap: 12px;
    padding: 8px 0;
  }

  .app-store-mockup .text-wrapper-25 {
    font-size: 10px;
    min-width: 80px;
  }

  .app-store-mockup .text-wrapper-26,
  .app-store-mockup .text-wrapper-27 {
    font-size: 11px;
    line-height: 15px;
  }

  .app-store-mockup .text-wrapper-28 {
    font-size: 10px;
  }

  /* Ensure horizontal scrolling doesn't break layout */
  .app-store-mockup .info-carousel-2 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .app-store-mockup .info-carousel-2::-webkit-scrollbar {
    display: none;
  }

  /* Review collection horizontal scroll */
  .app-store-mockup .review-collection-2 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 8px;
  }

  .app-store-mockup .review-collection-2::-webkit-scrollbar {
    display: none;
  }
}

/* Extra small devices optimization (iPhone SE 1st gen and similar) */
@media screen and (max-width: 320px) {
  .app-store-mockup {
    max-width: 320px;
  }

  .app-store-mockup .div {
    width: 320px;
    max-width: 320px;
  }

  .app-store-mockup .list-view {
    width: 320px;
    max-width: 320px;
  }

  .app-store-mockup .header {
    padding: 12px;
  }

  .app-store-mockup .frame {
    width: 90px;
    max-width: 90px;
    height: 90px;
    border-radius: 20px;
  }

  .app-store-mockup .app-icon {
    height: 90px;
  }

  .app-store-mockup .text-wrapper {
    font-size: 18px;
    line-height: 19px;
  }

  .app-store-mockup .button-download {
    padding: 6px 16px;
  }

  .app-store-mockup .review {
    min-width: 250px;
  }

  .app-store-mockup .text-wrapper-25 {
    min-width: 70px;
  }
}

/* Additional iPhone SE optimizations */
@media screen and (max-width: 375px) and (max-height: 667px) {
  /* iPhone SE specific height optimizations */
  .app-store-mockup .div {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Reduce gaps and padding for better space utilization */
  .app-store-mockup .header {
    gap: 12px;
    padding: 12px 16px 16px;
  }

  .app-store-mockup .preview {
    padding: 12px 16px;
  }

  .app-store-mockup .app-discription,
  .app-store-mockup .rate,
  .app-store-mockup .update,
  .app-store-mockup .update-2,
  .app-store-mockup .data-box {
    padding: 0 16px 16px;
  }

  /* Compact info carousel for iPhone SE */
  .app-store-mockup .info-carousel {
    padding: 0 4px;
  }

  .app-store-mockup .info-carousel-2 {
    gap: 8px;
  }

  /* More compact review cards */
  .app-store-mockup .review {
    margin: 0 4px 12px;
    min-width: 270px;
  }

  /* Ensure text doesn't overflow */
  .app-store-mockup .text-wrapper-26,
  .app-store-mockup .text-wrapper-27 {
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* Adjust divider margins */
  .app-store-mockup .divider,
  .app-store-mockup .divider-2 {
    margin: 8px 0;
  }
}

/* Landscape mode adjustments for iPhone SE */
@media screen and (max-width: 667px) and (max-height: 375px) and (orientation: landscape) {
  .app-store-mockup {
    max-width: 667px;
  }

  .app-store-mockup .div {
    width: 667px;
    max-width: 667px;
  }

  .app-store-mockup .list-view {
    width: 667px;
    max-width: 667px;
  }

  .app-store-mockup .header {
    padding: 8px 20px 12px;
  }

  .app-store-mockup .frame {
    width: 80px;
    max-width: 80px;
    height: 80px;
  }

  .app-store-mockup .app-icon {
    height: 80px;
  }
}