.Mobimage-container {
  display: none;
  width: 100%;
  overflow: hidden;
  padding-top: 55px; /* agar zaroorat ho */
}

/* Structure for the mobile hero */
.Mobfirst-image {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 9.3;  /* ya 4/3, jo design suit kare */
  overflow: hidden;
}

.contained-image-mob {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* gradient overlay on bottom */
.gradient-overlay-mob {
  position: absolute;
  bottom: 2%;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  pointer-events: none;
  z-index: 1;
}

/* text above gradient */
.image-text-mob {
  position: absolute;
  bottom: 20px;
  /* left: 30px; */
  padding-left: 25px;
  color: #fff;
  z-index: 2;
  font-size: clamp(35px, 10vw, 100px);
  text-transform: uppercase;
    /* font-family: "DIN 1451 LT Pro Mittelschrift Mittelschrift"; */
}



/* contentheading-bottom-text */

.heading-bottom-text-mob{
    display: flex;
    justify-content: end;
    padding: 20px 20px;
}

.text-heading-mob{
    color: #000000;
    font-family: "Poppins Bold";
font-size: clamp(1rem, 6vw, 3.125rem);

}
.text-para-mob{
  color:  #53a6da;
  text-align: end;
font-size: clamp(0.875rem, 3.7vw, 2.5rem);
    font-family: "Poppins SemiBold";
}


/* SHOW only on small screens (<768px).
   Put this at end of file so it's not overridden by later rules. */
@media (max-width: 767px) {
  .Mobimage-container {
    display: block !important; /* !important only if other rules override it */
  }
  .heading-bottom-text-mob{
   
    padding: 0px 0px;
}
}

  /* optionally increase hero height on slightly bigger mobile */
  @media (max-width: 420px) {
    .image-text {
 
  padding-left: 15px;}
  .heading-bottom-text-mob{
    
    padding: 20px 10px;
}
  }