.mob-master-frame {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: center;
  font-size: var(--fs-14);
  color: var(--color-darkslategray);
  font-family: var(--font-poppins);
}
.mob-hero-section {
  align-self: stretch;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: var(--padding-30) var(--padding-16);
  text-align: left;
  font-size: var(--fs-12);
  color: var(--color-gray-500);
}
.mob-hero-conatiner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-24);
  min-width: 338px;
  max-width: 588px;
}
.mob-text-container {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-16);
}
.mob-group-company {
  border-radius: var(--br-16);
  background-color: var(--color-seashell);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-4) var(--padding-10);
  mix-blend-mode: multiply;
}
.mob-group-company2 {
  display: flex;
  align-items: center;
  gap: 2px;
}
.mob-group-company3 {
  position: relative;
  letter-spacing: -0.02em;
  line-height: 150%;
  font-weight: 500;
}
.mob-group-company4 {
  position: relative;
  letter-spacing: -0.02em;
  line-height: 150%;
  font-weight: 500;
  color: var(--color-chocolate);
}
.mob-heading2 {
  align-self: stretch;
  position: relative;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 130%;
  font-weight: 600;
  text-align: center;
  color: var(--color-gray-200);
}
.mutual-funds {
  color: var(--color-chocolate);
}
.mob-subtitle {
  width: 343px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: var(--fs-18);
  color: var(--color-dimgray-200);
}
.mob-subtitle2 {
  align-self: stretch;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 150%;
}
.group {
  display: flex;
  align-items: center;
  gap: 5px;
}
.flash-icon {
  height: 22px;
  width: var(--width-16);
  position: relative;
  object-fit: cover;
}
.mob-subtitle3 {
  position: relative;
  letter-spacing: -0.02em;
  line-height: 150%;
}
.portfolio {
  border-radius: 4px;
  background-color: var(--color-royalblue);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-0) var(--padding-4);
  color: var(--color-white);
}
.mob-hero-image-container {
  width: 600px;
  height: 300px;
  position: relative;
  background-color: var(--color-white);
  z-index: 1; /* lower */
}
.mob-mockup-one-icon {
  position: absolute;
  top: -24.77px;
  left: -156.26px;
  /* box-shadow: -1.9055554866790771px 29.536109924316406px 65.74px
    rgba(0, 0, 0, 0.1); */
  width: 686px;
  height: 457.4px;
  object-fit: cover;
  flex-shrink: 0;
}
.mob-mockup-two-icon {
  position: absolute;
  top: 0px;
  left: -181.98px;
  /* box-shadow: -1.9055554866790771px 8.539999961853027px 65.74px
    rgba(0, 0, 0, 0.1); */
  width: 686px;
  height: 457.4px;
  object-fit: cover;
  flex-shrink: 0;
}

/* base image styles */
.mob-hero-image-container .mob-mockup-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  /* max-width: 350px; */
  height: auto;
  transform-origin: center center;
  border-radius: 16px;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  pointer-events: auto;
}

/* FRONT IMAGE */
.mob-hero-image-container .mob-mockup-icon:nth-child(1) {
  z-index: 3;
  transform: translate(-50%, -50%);
  animation: float1 3s infinite ease-in-out;
}

/* BACK IMAGE (slightly offset/rotated) */
.mob-hero-image-container .mob-mockup-icon:nth-child(2) {
  z-index: 2;
  transform: translate(-46%, -46%);
  animation: float2 3s infinite ease-in-out;
  opacity: 0.98;
}

/* floating animations */
@keyframes float1 {
  0% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-12px);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
}

@keyframes float2 {
  0% {
    transform: translate(-46%, -46%) translateY(0);
  }
  50% {
    transform: translate(-46%, -46%) translateY(10px);
  }
  100% {
    transform: translate(-46%, -46%) translateY(0);
  }
}

.mob-button {
  width: 343px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-12);
  font-size: var(--fs-16);
  color: var(--color-white);
  position: relative;
  z-index: 10; /* higher */
}
.mob-primary-button {
  align-self: stretch;
  box-shadow: var(--shadow-drop);
  border-radius: var(--br-8);
  background-color: var(--color-chocolate);
  border: 1px solid var(--color-chocolate);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-12) var(--padding-20);
  gap: var(--gap-8);
  cursor: pointer;
}

.mob-primary-button2 {
  position: relative;
  line-height: var(--lh-24);
  font-weight: 600;
}
.arrow-icon {
  height: 17px;
  width: 17px;
  position: relative;
}
.mob-secondary-button {
  align-self: stretch;
  box-shadow: var(--shadow-drop);
  border-radius: var(--br-8);
  background-color: var(--color-white);
  border: 1px solid var(--color-sandybrown);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-12) var(--padding-20);
  gap: var(--gap-8);
  color: var(--color-chocolate);
  cursor: pointer;
}

/* Secondary Button */
.mob-secondary-button:active,
.mob-secondary-button:focus {
  background-color: var(--color-seashell);
}

/* Primary Button */
.mob-primary-button:active,
.mob-primary-button:focus {
  background-color: var(--color-saddlebrown);
}

.download-icon {
  width: 24px;
  position: relative;
  max-height: 100%;
}
.mob-three-cards {
  align-self: stretch;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-10);
  font-size: var(--fs-26);
  color: var(--color-yellowgreen);
}
.mob-three-cards-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-10);
  max-width: 100%;
}
.mob-three-card {
  width: 200px;
  background-color: var(--color-white);
  border-bottom: var(--border-1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-10) 9px;
  gap: var(--gap-4);
}
.mob-three-card-number {
  align-self: stretch;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 115%;
  font-weight: 600;
}
.mob-three-card-text {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-14);
  letter-spacing: -0.02em;
  line-height: 150%;
  font-weight: 500;
  color: var(--color-gray-400);
}
.mob-three-card3 {
  width: 200px;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-10) 9px;
  box-sizing: border-box;
  gap: var(--gap-4);
}
.mob-product-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-30) 22px 70px;
  box-sizing: border-box;
  gap: var(--gap-16);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  color: var(--color-white);
  background-image: url("../uploads/Products-background/background-mobile.png");
}
.mob-card-heading {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-8) var(--padding-0);
  flex-shrink: 0;
}
.mob-label {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-4) var(--padding-10);
}
.mob-section-label {
  flex: 1;
  position: relative;
  letter-spacing: 0.16em;
  line-height: 150%;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-darkslategray);
}
.mob-heading3 {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-4) var(--padding-10);
  font-size: var(--fs-30);
}
.mob-section-heading {
  flex: 1;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 115%;
  font-weight: 600;
}
.mob-prod-card-group {
  width: 334px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-16);
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-darkslategray);
}
.mob-prod-cards {
  align-self: stretch;
  border-radius: var(--br-12);
  background-color: var(--color-white);
  border: var(--border-1);
  display: flex;
  align-items: flex-start;
  padding: var(--padding-10) var(--padding-10) var(--padding-20);
  gap: var(--gap-12);
}
.mob-image-icon {
  height: var(--height-40);
  width: var(--width-40);
  border-radius: var(--br-5);
  object-fit: cover;
}
.mob-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-4);
}
.mob-title-container {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-4);
}
.mob-prod-card-title {
  align-self: stretch;
  display: flex;
  align-items: center;
}
.mob-prod-card-title2 {
  flex: 1;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 135%;
  font-weight: 600;
}
.mob-prod-card-body {
  align-self: stretch;
  display: flex;
  align-items: center;
  font-size: var(--fs-12);
  color: var(--color-dimgray-100);
}
.mob-prod-card-body2 {
  flex: 1;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 150%;
  display: inline-block;
  min-height: var(--min-h-54);
}
.mob-prod-button {
  border-radius: var(--br-8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-4) var(--padding-0);
  gap: var(--gap-8);
  text-align: center;
  color: var(--color-chocolate);
  cursor: pointer;
}

.mob-prod-button:active,
.mob-prod-button:focus {
  background-color: var(--color-seashell);
}

.mob-prod-button2 {
  position: relative;
  letter-spacing: -0.02em;
  line-height: 120%;
  font-weight: 500;
}
.arrow-icnn-icon {
  height: var(--height-12);
  width: var(--width-12);
  position: relative;
}
.mob-about-section {
  width: 100%;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-20) var(--padding-0);
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  gap: var(--gap-10);
}
.orange {
  height: 164px;
  width: 164px;
  position: absolute;
  margin: 0 !important;
  top: 4px;
  left: -53px;
  border-radius: 50%;
  background-color: var(--color-goldenrod);
  z-index: 0;
  flex-shrink: 0;
}
.green {
  height: 106px;
  width: var(--width-106);
  position: absolute;
  margin: 0 !important;
  top: 473px;
  left: 296px;
  border-radius: 50%;
  background-color: var(--color-greenyellow);
  z-index: 1;
  flex-shrink: 0;
}
.mob-prod-card {
  width: 331px;
  border-radius: var(--br-16);

  /* Glass Effect */
  background: rgba(255, 255, 255, 0.2); /* subtle transparency */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px 9px rgba(255, 255, 255, 0.7);

  /* Your original layout */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-24) var(--padding-24) 40px;
  gap: var(--gap-24);
  z-index: 2;
  flex-shrink: 0;

  position: relative;
  overflow: hidden;
}

/* Top horizontal light streak */
.mob-prod-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

/* Left vertical glow */
.mob-prod-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

.mob-card-heading2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-8) var(--padding-0);
}
.mob-heading4 {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-4) var(--padding-0);
  font-size: var(--fs-30);
}
.mob-about-us {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-13);
  letter-spacing: -0.02em;
  line-height: 150%;
  color: var(--color-dimgray-100);
}
.see-more {
  text-decoration: underline;
  color: var(--color-dodgerblue);
}
.mob-about-check-points {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-16);
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-gray-300);
}
.check-point {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-12);
}
.check-icon {
  height: var(--height-28);
  width: var(--width-28);
  position: relative;
  border-radius: var(--br-14);
}
.mob-about-point-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mob-calculator-section {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: var(--padding-30) var(--padding-16);
  box-sizing: border-box;
  gap: 23px 48px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  color: var(--color-white);
}
.mob-heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-8) var(--padding-0);
}
.label-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.calculator-group {
  width: 342px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--gap-12);
  font-size: var(--fs-11);
}
.everyone-card {
  height: var(--height-88);
  width: var(--width-106);
  border-radius: var(--br-10);
  background-color: var(--color-gray-600);
  border: var(--border-1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-8);
  gap: var(--gap-6);
}
.icon-box {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon {
  width: var(--width-36);
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.calculator-name {
  align-self: stretch;
  height: var(--height-30);
  position: relative;
  letter-spacing: -0.02em;
  line-height: 135%;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: var(--min-h-28);
}
.calculator-name7 {
  align-self: stretch;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 135%;
  font-weight: 500;
  display: inline-block;
  min-height: var(--min-h-30);
}
.calculator-name9 {
  align-self: stretch;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 135%;
  font-weight: 500;
  display: inline-block;
  min-height: var(--min-h-28);
}
.mob-review-section {
  width: 100%;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-30) var(--padding-16);
  box-sizing: border-box;
  gap: 23px;
}
.what-our-clients {
  margin-block-start: 0;
  margin-block-end: 5px;
}
.say-about-us {
  margin: 0;
}
.mob-temp-review-group {
  align-self: stretch;
  overflow-x: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-10);
  text-align: left;
  font-size: var(--fs-12);
  color: var(--color-gray-100);
}
.mob-temp-review-card {
  width: var(--width-286);
  border-radius: var(--br-16);
  background-color: var(--color-white);
  border: var(--border-2);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mob-text-area {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-12) var(--padding-12) var(--padding-6);
  gap: var(--gap-4);
}
.mob-temp-paragraph {
  align-self: stretch;
  position: relative;
  line-height: 160%;
  display: -webkit-inline-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.review-star {
  display: flex;
  align-items: center;
}
.star-icon-active {
  height: var(--height-16);
  width: var(--width-16);
  position: relative;
}
.mob-avatarname {
  align-self: stretch;
  background-color: var(--color-linen);
  display: flex;
  align-items: center;
  padding: var(--padding-10) var(--padding-12);
  gap: var(--gap-16);
  font-size: var(--fs-13);
}
.mob-name {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.mob-client-name {
  align-self: stretch;
  position: relative;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mob-client-designation {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-12);
  font-weight: 300;
}
.mob-image-icon {
  width: var(--width-40);
  position: relative;
  border-radius: var(--br-100);
  max-height: 100%;
  object-fit: cover;
}
.pagination-outer {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-16);
  color: var(--color-dimgray-300);
}
.pagination {
  height: 34px;
  border-radius: var(--br-8);
  background-color: var(--color-white);
  border: 1px solid var(--color-lightgray);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-5) var(--padding-10);
}
.pagination2 {
  position: relative;
}
.mob-download-app-section {
  width: 100%;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-30) var(--padding-16) 30px;
  box-sizing: border-box;
  gap: var(--gap-20);
}
.live {
  color: var(--color-red);
}
.mob-download-app1 {
  /* display: flex; */
  align-items: center;
  /* gap: 20.9px; */
  font-size: 8.33px;
  color: var(--color-black);
  font-family: var(--font-sf-compact-text);
}

.mob-appstore {
  box-shadow: var(--shadow-drop-1);
  border-radius: 20.99px;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9.3px;
}
.btn-appstore {
  width: 132.5px;
  height: 37.2px;
  position: relative;
  border-radius: 4.85px;
  background-color: var(--color-white);
  overflow: hidden;
  flex-shrink: 0;
}
.apple {
  position: absolute;
  top: 7.41px;
  left: calc(50% - 48.55px);
  width: 18.5px;
  height: 22.2px;
}
.path-icon {
  position: absolute;
  height: 76.13%;
  width: 100%;
  top: 24.15%;
  right: 0%;
  bottom: -0.28%;
  left: 0%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.path-icon2 {
  position: absolute;
  height: 22.97%;
  width: 24.86%;
  top: 0%;
  right: 25.3%;
  bottom: 77.03%;
  left: 49.84%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.mob-contents {
  position: absolute;
  top: calc(50% - 13.58px);
  left: calc(50% - 22.62px);
  width: 72.2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mob-download-on-the {
  align-self: stretch;
  position: relative;
  line-height: 8.33px;
  font-weight: 500;
}
.mob-app-store {
  align-self: stretch;
  position: relative;
  font-size: 16.67px;
  letter-spacing: -0.44px;
  line-height: 100%;
  font-weight: 500;
  font-family: var(--font-sf-compact-display);
}
.mob-playstore {
  box-shadow: var(--shadow-drop-1);
  border-radius: 20.99px;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9.3px;
  text-align: left;
  font-size: 9.26px;
  font-family: var(--font-product-sans);
}
.playstore2 {
  position: absolute;
  top: 7.41px;
  left: calc(50% - 48.55px);
  width: 19.4px;
  height: 22.2px;
}
.path94-icon {
  position: absolute;
  height: 52.25%;
  width: 70.62%;
  top: 100.12%;
  right: 28.94%;
  bottom: -52.37%;
  left: 0.44%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.path98-icon {
  position: absolute;
  height: 42.79%;
  width: 54.64%;
  top: 71.58%;
  right: -0.4%;
  bottom: -14.37%;
  left: 45.76%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.path102-icon {
  position: absolute;
  height: 83.33%;
  width: 48.45%;
  top: 91.8%;
  right: 51.55%;
  bottom: -75.13%;
  left: 0%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.path106-icon {
  position: absolute;
  height: 50%;
  width: 70.62%;
  top: 50.06%;
  right: 28.94%;
  bottom: -0.06%;
  left: 0.44%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.content2 {
  position: absolute;
  top: 4.63px;
  left: calc(50% - 22.93px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.8px;
}
.get-it-on {
  align-self: stretch;
  position: relative;
  text-transform: uppercase;
}
.path90-icon {
  width: 68.5px;
  height: 13.9px;
  position: relative;
}
.answers {
  color: var(--color-limegreen);
}
.mob-accordian-group {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-12);
  text-align: left;
}
.mob-accordian-card {
  align-self: stretch;
  border-radius: var(--br-10);
  background-color: var(--color-ghostwhite);
  border: var(--border-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-12);
}
.mob-content7 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-16);
}
.mob-accordian-top {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-0);
  flex-shrink: 0;
}

.mob-accordian-top.activate .plus-icon {
  display: none;
}

.mob-accordian-top.activate .cross-icon {
  display: block;
}

.mob-accordian-heading {
  flex: 1;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 115%;
  font-weight: 600;
  flex-shrink: 0;
}
.plus-icon {
  height: var(--height-15);
  width: var(--width-15);
  position: relative;
  flex-shrink: 0;
}
.cross-icon {
  height: var(--height-15);
  width: var(--width-15);
  position: relative;
  display: none;
  flex-shrink: 0;
}
.mob-accordian-para {
  width: var(--width-992);
  position: relative;
  font-size: var(--fs-12);
  letter-spacing: -0.02em;
  line-height: 150%;
  color: var(--color-dimgray-100);
  display: none;
  flex-shrink: 0;
}
.mob-content8 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-8);
}

/* OPEN STATE */
.mob-accordian-para.open {
  width: 100%;
  max-height: 500px; /* or auto using JS */
  display: flex;
}

.plus-icon2 {
  height: var(--height-20);
  width: var(--width-20);
  position: relative;
  display: none;
}
.cross-icon2 {
  height: var(--height-20);
  width: var(--width-20);
  position: relative;
}

.mob-accordian-top2 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
}
.mob-accordian-para2 {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-12);
  letter-spacing: -0.02em;
  line-height: 150%;
  color: var(--color-dimgray-100);
}
.mob-footer-image-icon {
  width: 100%;
  height: 109.9px;
  object-fit: cover;
}

:root {
  /* Common Style Variables */
  /* Color */
  --color-black: #000;
  --color-chocolate: #f36723;
  --color-darkslategray: #303044;
  --color-dimgray-100: #5c5c6f;
  --color-dimgray-200: #535862;
  --color-dimgray-300: #52525c;
  --color-dodgerblue: #0088ff;
  --color-gainsboro-100: #e4e4e7;
  --color-gainsboro-200: #e3e3e3;
  --color-ghostwhite: #f8f9fc;
  --color-goldenrod: #ffb34c;
  --color-gray-100: #2c2c2c;
  --color-gray-200: #181d27;
  --color-gray-300: #191919;
  --color-gray-400: #060f33;
  --color-gray-500: #0b0b0b;
  --color-gray-600: rgba(255, 255, 255, 0.1);
  --color-greenyellow: #9ae600;
  --color-lavender: #dfd9fe;
  --color-lightgray: #d4d4d8;
  --color-limegreen: #2fbc46;
  --color-linen: rgba(237, 234, 227, 0.6);
  --color-red: #ff0000;
  --color-royalblue: #7c86ff;
  --color-sandybrown: #f9af78;
  --color-seashell: #fef6ee;
  --color-white: #fff;
  --color-yellowgreen: #7dbe3b;
  /* Gap */
  --gap-0: 0px;
  --gap-4: 4px;
  --gap-6: 6px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-20: 20px;
  --gap-24: 24px;
  /* Padding */
  --padding-0: 0px;
  --padding-4: 4px;
  --padding-5: 5px;
  --padding-6: 6px;
  --padding-8: 8px;
  --padding-10: 10px;
  --padding-12: 12px;
  --padding-16: 16px;
  --padding-20: 20px;
  --padding-24: 24px;
  --padding-30: 30px;
  /* BorderRadius */
  --br-5: 5px;
  --br-8: 8px;
  --br-10: 10px;
  --br-12: 12px;
  --br-14: 14px;
  --br-16: 16px;
  --br-100: 100px;
  /* Font */
  --font-poppins: Poppins;
  --font-product-sans: Product Sans;
  --font-sf-compact-display: SF Compact Display;
  --font-sf-compact-text: SF Compact Text;
  /* FontSize */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-26: 26px;
  --fs-30: 30px;
  /* Borders */
  --border-1: 1px solid var(--color-gainsboro-200);
  --border-2: 1px solid var(--color-gainsboro-100);
  --border-3: 1px solid var(--color-lavender);
  /* Shadows */
  --shadow-drop: 0px 1px 2px rgba(10, 13, 18, 0.05);
  --shadow-drop-1: 0px 121.67151641845703px 34.37px rgba(0, 0, 0, 0),
    0px 78.01837158203125px 31.58px rgba(0, 0, 0, 0.01),
    0px 43.653141021728516px 26.01px rgba(0, 0, 0, 0.05),
    0px 19.504592895507812px 19.5px rgba(0, 0, 0, 0.09),
    0px 4.643950939178467px 11.15px rgba(0, 0, 0, 0.1);
  /* WidthHeights */
  --height-12: 12px;
  --height-15: 15px;
  --height-16: 16px;
  --height-20: 20px;
  --height-28: 28px;
  --height-30: 30px;
  --height-40: 40px;
  --height-88: 88px;
  --min-h-28: 28px;
  --min-h-30: 30px;
  --min-h-54: 54px;
  --width-12: 12px;
  --width-15: 15px;
  --width-16: 16px;
  --width-20: 20px;
  --width-28: 28px;
  --width-36: 36px;
  --width-40: 40px;
  --width-106: 106px;
  --width-286: 286px;
  --width-375: 375px;
  --width-992: 992px;
  /* LineHeights */
  --lh-24: 24px;
  /* LetterSpacings */
  --ls--0_02: -0.02;
  --ls-0_16: 0.16;
}