.landing-page-5-child,
.mtn-logo-icon {
  width: 92.6px;
  height: 46.4px;
  position: relative;
  display: none;
  z-index: 0;
}
.landing-page-5-child {
  width: 100%;
  max-width: 100%;
  height: auto;
  background-color: var(--color-gray);
  z-index: 1;
}

.free-to-use {
  flex: 1;
  position: relative;
  line-height: 120%;
  font-weight: 500;
  z-index: 1;
}
.free-to-use-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 54px 0 53px;
}

.free-to-use-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 54px 0 53px;
}

.icon-construct {
  width: var(--button-primary-scale-m-l-icon);
  position: relative;
  height: var(--button-primary-scale-m-l-icon);
  display: none;
}
.label {
  position: relative;
  font-size: var(--typescale-label-m-l-small-bold-title-case-size);
  line-height: var(--typescale-label-m-l-small-bold-title-case-line-height);
  text-transform: capitalize;
  font-family: var(--font-roboto);
  color: var(--button-primary-label-text-colour);
  text-align: left;
}
.standard-button {
  cursor: pointer;
  border: 0;
  padding: 0 var(--button-primary-container-padding-left-right);
  background-color: var(--button-primary-container-colour);
  align-self: stretch;
  height: 48px;
  border-radius: var(--button-primary-container-corner-radius-all-round);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--button-primary-scale-m-l-icon-margin-right);
  z-index: 2;
  text-decoration: none !important;
}
.label1 {
  position: relative;
  font-size: var(--typescale-label-m-l-small-bold-title-case-size);
  line-height: var(--typescale-label-m-l-small-bold-title-case-line-height);
  text-transform: capitalize;
  font-family: var(--font-roboto);
  color: var(--color-white);
  text-align: left;
  text-decoration: none !important;
}
.standard-button1 {
  cursor: pointer;
  border: 2px solid var(--color-white);
  padding: 0 var(--button-primary-container-padding-left-right);
  background-color: var(--color-gold);
  align-self: stretch;
  height: 48px;
  border-radius: var(--button-primary-container-corner-radius-all-round);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--button-primary-scale-m-l-icon-margin-right);
  z-index: 1;
  text-decoration: none !important;
}
.frame-parent{
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
}
.frame-parent {
  gap: 67px;
  text-align: center;
  font-size: 20px;
  color: var(--button-primary-label-text-colour);
  font-family: var(--font-roboto);
}
/* .standard-button-parent{

  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;

} */

.standard-button-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Mobile: buttons align left */
  justify-content: flex-start;
  gap: 20px;
  width: 100%; /* Full width on mobile */
  max-width: 100%; /* Ensure it doesn't overflow */
}

@media (min-width: 768px) {
  .standard-button-parent {
    align-items: center; /* Desktop: center buttons */
    width: auto; /* Let content determine width */
    width: 400px; /* Or your preferred max width */
    margin: 0 auto; /* Center the container */
  }
}


.label2 {
  position: relative;
  line-height: var(--typescale-label-m-l-small-bold-title-case-line-height);
  text-transform: capitalize;
}
.standard-button2 {
  width: 233px;
  height: var(--button-primary-scale-m-l-container-height);
  border-radius: var(--button-primary-container-corner-radius-all-round);
  background-color: var(--button-primary-label-text-colour);
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--button-primary-container-padding-left-right);
  box-sizing: border-box;
  gap: var(--button-primary-scale-m-l-icon-margin-right);
  z-index: 3;
}
/* Mobile styles (unchanged) */
.free-to-use-container {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center; /* Changed from flex-start to center vertically */
  justify-content: center; /* Changed from flex-start to center horizontally */
  padding: 0 20px; /* Reduced side padding */
  font-size: var(--typescale-body-xs-s-small-regular-size);
  color: var(--button-primary-label-text-colour);
  text-align: center; /* Ensures text alignment */
}

.free-to-use1 {
  position: relative;
  line-height: var(--typescale-body-xs-s-small-regular-line-height);
  font-weight: 500;
  z-index: 1;
  flex: 0 1 auto; /* Changed from 1 to prevent stretching */
}

/* Desktop centering */
@media (min-width: 768px) {
  .free-to-use-container {
    justify-content: center; /* Center horizontally */
    padding: 0; /* Remove side padding or adjust as needed */
  }
  
  .free-to-use1 {
    flex: 0 0 auto; /* Prevent text from stretching */
    top: 15px;
  }
}
.young-man-woman-holding-cups-c-icon {
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(1.36);
}
.wrapper-young-man-woman-holdin {
  height: 100%;
  top: 0;
  bottom: 0;
  left: -376px;
  max-height: 100%;
  width: 1279px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .wrapper-young-man-woman-holdin {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
    left: -376px;
    max-height: 100%;
    width: 1279px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


.mtn-logo-icon1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 67px;
  height: 33.5px;
  z-index: 1;
}
.frame-child {
  position: absolute;
  top: 148.8px;
  left: 44px;
  filter: blur(10px);
  border-radius: 50%;
  background-color: var(--button-primary-label-text-colour);
  width: 228px;
  height: 28.2px;
}

/* Mobile styles (unchanged) */
.ellipse-parent,
.image-53-icon {
  position: absolute;
  width: 316px;
  z-index: 1;
}
.image-53-icon {
  top: 0;
  left: calc(50% - 158px);
  height: 163.7px;
  object-fit: cover;
}
.ellipse-parent {
  top: 605px;
  left: 38px;
  height: 176.9px;
}

/* Desktop overrides */
@media (min-width: 768px) {
  .ellipse-parent {
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    top: 605px; /* Keep same vertical position */
    height: 176.9px;
  }
  
  .image-53-icon {
    /* Keep existing image styles */
  }
}

.flappy-birds-icon,
.jj-icon {
  position: absolute;
  top: 120px;
  left: 90px;
  width: 212px;
  height: 124px;
  object-fit: cover;
  z-index: 1;
}

.screenshot-2025-07-16-at-106 {
  position: absolute;
  top: 120px;
  left: 90px;
  width: 212px;
  height: 124px;
  object-fit: cover;
  z-index: 1;
  transform: none; /* Explicitly reset transform */
}

/* Desktop overrides */
@media (min-width: 768px) {
  .screenshot-2025-07-16-at-106 {
    top: 180px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.flappy-birds-icon{
  top: 521px;
  left: 220px;
  width: 105px;
  height: 72px;
}

@media (min-width: 768px) {
  .flappy-birds-icon {
    top: 521px;
    left: 53%;
    width: 105px;
    height: 72px;
  }
}

.jj-icon {
  top: 521px;
  left: 220px;
  width: 105px;
  height: 72px;
}
.jj-icon {
  top: 283px;
  left: 38px;
  width: 82px;
  height: 89px;
  object-fit: contain;
  z-index: 2;
}

@media (min-width: 768px) {
  .jj-icon {
    top: 266px;
    left: 32%;
    width: 82px;
    height: 89px;
    object-fit: contain;
    z-index: 2;
  }
}

.ninja-run-icon{
  position: absolute;
  top: 40px;
  left: 272px;
  width: 101px;
  height: 114px;
  object-fit: cover;
  z-index: 2;
}

@media (min-width: 768px) {
  .ninja-run-icon {
    left: auto; 
    right: 37%; 
  }
}

.xtrench-icon {
  position: absolute;
  top: 40px;
  left: 272px;
  width: 101px;
  height: 114px;
  object-fit: cover;
  z-index: 2;
}
.xtrench-icon {
  top: 769px;
  left: 40px;
  width: 75px;
  height: 70px;
}

@media (min-width: 768px) {
  .xtrench-icon {
    top: 92%;
    left: 38%;
    width: 75px;
    height: 70px;
  }
}

.wrapper-young-man-woman-holdin-parent {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.landing-page-5 {
  width: 100%;
  position: relative;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 264px 50px 30px;
  box-sizing: border-box;
  gap: 307px;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  font-size: var(--typescale-label-m-l-small-bold-title-case-size);
  color: var(--color-white);
  font-family: var(--font-roboto);
}