.iphone-img-container {
  width: 100%; /* Full width of the column */
  overflow: hidden; /* Prevent overflow */
  position: relative;
}

.iphone-img {
  width: 130%; /* Increase the size significantly */
  height: auto; /* Maintain aspect ratio */
  margin-left: -25%; /* Center image horizontally */
  object-fit: cover; /* Ensure no distortion */
  transition: transform 0.3s ease-in-out; /* Add smooth hover effect */
}
.hero-img {
  width: 90%; /* Increase the size significantly */
  height: auto; /* Maintain aspect ratio */
  margin-left: 0%; /* Center image horizontally */
  object-fit: cover; /* Ensure no distortion */
  transition: transform 0.3s ease-in-out; /* Add smooth hover effect */
}
/* Container for images */
.image-container {
  position: relative; /* Enables stacking */
  width: 300px; /* Adjust as needed */
  height: auto; /* Keeps height proportional */
  margin: 0 auto; /* Centers the container */
}

/* Keyframes for animations */
@keyframes appearThenDisappear {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Base styles for both images */
.animated-image {
  position: absolute; /* Stack images on top of each other */
  top: 0;
  left: 0;
  width: 100%; /* Ensures images are the same size */
  height: auto;
  opacity: 0; /* Start hidden */
}

/* First image animation */
.first-image {
  animation: appearThenDisappear 4s ease-in-out infinite;
}

/* Second image animation */
.second-image {
  animation: appear 4s ease-in-out infinite;
  /* Inline styles from JSX will override additional styles here */
}
@media (max-width: 1024px) {
  .img1 {
    height: 80% !important;
  }
  .img2 {
    height: 60% !important;
  }
  .heroContent h1 {
    display: flex !important;
    text-align: center !important;
  }
  .heroContent p {
    display: flex !important;
    justify-content: center !important;
  }
  .heroContent div {
    display: flex !important;
    justify-content: center !important;
  }
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
  .iphone-img {
    width: 100%; /* Reset size for smaller screens */
    margin-left: 0; /* No negative margin */
  }
}

.consistent-width {
  width: 365px; /* Set consistent width */
  max-width: 100%; /* Ensure responsiveness */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.consistent-width:hover {
  transform: scale(1.05); /* Enlarge slightly */
}

/* Store image styles */
.store-img {
  height: auto; /* Maintain aspect ratio */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.store-img:hover {
  transform: translateY(-5px); /* Slight upward movement */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Ensure store images align in a row */
@media (max-width: 768px) {
  .my-4.d-flex {
    flex-wrap: wrap; /* Allow wrapping if needed */
    justify-content: center !important; /* Center elements */
    gap: 15px; /* Adjust spacing between images */
  }

  .store-img {
    max-width: 140px; /* Adjust store button sizes */
  }

  h1 {
    font-size: clamp(38px, 6vw, 40px);
  }

  .text-lg-start {
    text-align: center !important; /* Ensure consistent text alignment */
    margin-left: 10px;
  }

  .my-4,
  .my-3 {
    margin: 10px 0 !important; /* Reduce vertical spacing */
  }

  .gap-3 {
    gap: 10px !important; /* Reduce gaps between elements */
  }
  .heroBtn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* Additional alignment for smaller mobile screens */
@media (max-width: 576px) {
  .iphone-img {
    width: 100%; /* Make the image fit the container */
    margin-left: 0; /* Remove left offset */
  }
  .HomeSection {
    width: 100% !important;
    padding: 0;
  }

  .mt-5 {
    margin-top: 50px !important; /* Reduce top margin for small screens */
  }

  .mb-5 {
    margin-bottom: 20px !important; /* Reduce bottom margin */
  }

  .justify-content-lg-start {
    justify-content: center !important; /* Center buttons on smaller screens */
  }

  .store-img {
    max-width: 150px; /* Further adjust store image sizes for smaller screens */
  }

  .my-4.d-flex {
    flex-wrap: wrap; /* Ensure images wrap if needed */
    justify-content: center; /* Center-align the images */
  }
}
.hover-effect {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}