/* Banner container - The "Card" Look */
.mobile_card_banner {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 400px;
  position: relative;
  overflow: hidden; /* Crucial: Clips the images at the bottom/corners */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px; /* Spacing from next section */
}

/* Wrapper to handle layout */
.mobile_card_content_wrapper {
  height: 100%;
  width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding-left: 60px; /* Increased padding for better breathing room */
  padding-right: 0;   /* Images will touch the right edge */
}

/* --- LEFT SIDE: TEXT --- */
.mobile_card_text_content {
  flex: 1;
  max-width: 550px;
  z-index: 10;
  padding-right: 20px;
  /*margin-left: 80px;*/
}

.mobile_card_banner_title {
  font-size: 1.5rem; /* Large, bold text */
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.mobile_card_banner_description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  line-height: 1.6;
  max-width: 450px;
}

.mobile_card_download_buttons {
  display: flex;
  gap: 15px;
  align-items: center;
}

.mobile_card_store_button {
  height: 48px; /* Refined size */
  width: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.mobile_card_store_button:hover {
  transform: translateY(-3px);
}

.mobile_card_qr_code {
  width: 55px;
  height: 55px;
  background: #fff;
  padding: 6px;
  border-radius: 8px;
}

/* --- RIGHT SIDE: IMAGES --- */
.mobile_card_mobile_showcase {
  position: relative;
  width: 400px; /* Fixed width for the image area */
  height: 90%;
  flex-shrink: 0;
  margin-right: 64px;
  margin-top: 0px;
}

/* The decorative image behind (Wallpaper) */
.mobile_card_mobile_wallpaper {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 90%; /* Scale relative to container */
  width: auto;
  z-index: 1;
  opacity: 1;
  object-fit: cover;
  width: 300px;
  top: 100px;
  /* If this is the partial phone on the right edge */
  transform: translateX(20%); /* Push it slightly off screen if needed */
}

/* The main Phone UI (Screen) */
.mobile_card_mobile_screen {
  position: absolute;
  right: 185px; /* Position it to the left of the wallpaper */
  bottom: -40px; /* Push down slightly to hide bottom bezel */
  height: 360px; /* Slightly larger than container so it gets clipped at bottom */
  width: auto;
  z-index: 2;
  border-radius: 20px;
  box-shadow: -15px 10px 40px rgba(0,0,0,0.2); /* Shadow makes it pop */
  transform: rotate(-5deg); /* Optional: Slight tilt for dynamic look */
  object-fit: contain;
}

/* --- RESPONSIVE --- */

/* Tablet */
@media (max-width: 992px) {
  .mobile_card_banner { height: auto; min-height: 400px; }
  .mobile_card_content_wrapper { padding: 40px; width: 100%; }
  .mobile_card_mobile_showcase {
     position: absolute;
     right: -50px;
     bottom: 0;
     width: 350px;
     opacity: 0.8; /* Fade images slightly on tablet so text is readable */
  }
}

/* Mobile */
@media (max-width: 768px) {
  .mobile_card_banner { padding: 40px 20px; text-align: center; }
  .mobile_card_content_wrapper { flex-direction: column; padding: 0; }
  .mobile_card_text_content { margin-bottom: 40px; padding-right: 0; }
  .mobile_card_banner_description { margin: 0 auto 2rem auto; }
  .mobile_card_download_buttons { justify-content: center; }

  .mobile_card_mobile_showcase {
    position: relative;
    width: 100%;
    height: 300px;
    right: auto;
    opacity: 1;
    overflow: visible;
  }

  .mobile_card_mobile_screen {
    right: 50%;
    transform: translateX(50%); /* Center it */
    bottom: -30px;
    height: 300px;
  }

  .mobile_card_mobile_wallpaper {
    display: none; /* Hide secondary image on small screens to reduce clutter */
  }
}