.banner-section {
  width: 100%;
  padding: 0;
  margin: 173px 0px 0px 0px; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

/* Wrapper keeps overlay above image */
.banner-wrapper {
  position: relative;
  width: 100%;
  max-width: 1440px; /* Same width logic as header */
  margin: 0 auto;
}

/* Front image responsive */
.banner-front-img {
  width: 100%;
  height: auto; /* let aspect ratio control height */
  display: block;
  object-fit: cover;
  aspect-ratio: 16/7; /* keeps a wide banner on all devices */
  max-height: 900px; /* cap on large screens */
}

/* ✅ Green overlay on top at 10% opacity */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #39A452;
  opacity: 0.15; /* 10% */
}
/* ✅ Base credit card style */
.card {
  width: min(500px, 80%);
  position: absolute;
  left: 50%;
  top: 25%;                 /* slightly adjusted to center stack better */
  transform: translate(-50%, -700px);
  opacity: 0;
  z-index: 20;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 12px 25px rgba(0,0,0,0.25));
  border-radius: 24px;
  transform-origin: center center;
}

/* Apply drop then rotate */
#c1, #c2, #c3 {
  animation:
    var(--drop) 0.9s ease forwards,
    rotate3d 4s ease-in-out infinite alternate;
}

/* ✅ New landing Y positions with more space */
#c1 { --drop: drop1; --y: -160px; animation-delay: 0s, 1.1s; z-index: 3; }
#c2 { --drop: drop2; --y:   10px; animation-delay: 0.5s, 1.3s;  z-index: 2; }
#c3 { --drop: drop3; --y:  180px; animation-delay: 0.8s, 1.5s;  z-index: 1; }

/* Drop animations with new gap */
@keyframes drop1 {
  0% { transform: translate(-50%, -700px) scale(1.1); opacity: 0; }
  100% { transform: translate(-50%, -160px) scale(1) rotate(-6deg); opacity: 1; }
}

@keyframes drop2 {
  0% { transform: translate(-50%, -700px) scale(1.1); opacity: 0; }
  100% { transform: translate(-50%, 10px) scale(0.97) rotate(3deg); opacity: 1; }
}

@keyframes drop3 {
  0% { transform: translate(-50%, -700px) scale(1.1); opacity: 0; }
  100% { transform: translate(-50%, 180px) scale(0.93) rotate(9deg); opacity: 1; }
}

/* Rotation holds same Y position */
@keyframes rotate3d {
  0%   { transform: translate(-50%, var(--y)) rotateY(-6deg); }
  100% { transform: translate(-50%, var(--y)) rotateY(6deg); }
}

/* 📱 Mobile stack gap */
@media (max-width: 768px) {
  .card {
    width: 120px;
    top: 40%;
  }

  /* spaced landing for mobile */
  #c1 { --y:-90px; }
  #c2 { --y:-20px; }
  #c3 { --y: 50px; }

  @keyframes drop1 { 100% { transform: translate(-50%, -90px) rotate(-6deg); opacity:1; } }
  @keyframes drop2 { 100% { transform: translate(-50%, -20px) scale(0.97) rotate(3deg); opacity:1; } }
  @keyframes drop3 { 100% { transform: translate(-50%, 50px)  scale(0.93) rotate(9deg); opacity:1; } }
}

/* ✅ RESPONSIVE CSS FOR BANNER & CARD ANIMATION */

/* 💻 Laptop screens (1025px – 1440px) */
@media (max-width: 1440px) {
  .banner-section {
  margin: 173px 0px ;
  }
  .banner-front-img { height: 750px; }
  .card { width: 550px; top: 28%; }
  #c1 { --y: -140px; }
  #c2 { --y:   5px; }
  #c3 { --y:  150px; }
  @keyframes drop1 { 100% { transform: translate(-50%, -140px) scale(1) rotate(-6deg); opacity: 1; } }
  @keyframes drop2 { 100% { transform: translate(-50%,   5px) scale(0.97) rotate(3deg); opacity: 1; } }
  @keyframes drop3 { 100% { transform: translate(-50%, 150px) scale(0.93) rotate(9deg); opacity: 1; } }
}

/* 🧾 Medium laptops */
@media (max-width: 1200px) {
   .banner-section {
  margin: 120px 0px ;}
  .banner-front-img { height: 620px; }
  .card { width: 520px; top: 32%; }
  #c1 { --y: -110px; }
  #c2 { --y:  -5px; }
  #c3 { --y:   95px; }
  @keyframes drop1 { 100% { transform: translate(-50%, -110px) rotate(-6deg); opacity: 1; } }
  @keyframes drop2 { 100% { transform: translate(-50%,  -5px)  scale(0.97) rotate(3deg); opacity: 1; } }
  @keyframes drop3 { 100% { transform: translate(-50%,  95px)  scale(0.93) rotate(9deg); opacity: 1; } }
}

/* 📱 Tablets (769px – 1024px) */
@media (max-width: 1024px) {
  .banner-section {
  margin: 100px 0px ;}
  .banner-front-img { height: 580px; }
  .card { width: 420px; top: 36%; }
  #c1 { --y: -100px; }
  #c2 { --y:  -12px; }
  #c3 { --y:   70px; }
  @keyframes drop1 { 100% { transform: translate(-50%, -100px) rotate(-6deg); opacity: 1; } }
  @keyframes drop2 { 100% { transform: translate(-50%,  -12px) scale(0.97) rotate(3deg); opacity: 1; } }
  @keyframes drop3 { 100% { transform: translate(-50%,   70px) scale(0.93) rotate(9deg); opacity: 1; } }
}

/* 📲 Mobile (≤768px) */
@media (max-width: 768px) {
  .banner-front-img { height: 520px; }
  .card { width: 300px; top: 42%; }
  #c1 { --y: -90px; }
  #c2 { --y: -20px; }
  #c3 { --y:  50px; }
  @keyframes drop1 { 100% { transform: translate(-50%, -90px) rotate(-6deg); opacity: 1; } }
  @keyframes drop2 { 100% { transform: translate(-50%, -20px) scale(0.97) rotate(3deg); opacity: 1; } }
  @keyframes drop3 { 100% { transform: translate(-50%,  50px) scale(0.93) rotate(9deg); opacity: 1; } }
}

/* 📳 Small Mobile (≤480px) */
@media (max-width: 480px) {
   .banner-section {
  margin:25px 0px ;}
  .banner-front-img { height: 600px; }
  .card { width: 500px; top: 46%; }
  #c1 { --y: -75px; }
  #c2 { --y: -22px; }
  #c3 { --y:  30px; }
  @keyframes drop1 { 100% { transform: translate(-50%, -75px) rotate(-6deg); opacity: 1; } }
  @keyframes drop2 { 100% { transform: translate(-50%, -22px) scale(0.96) rotate(3deg); opacity: 1; } }
  @keyframes drop3 { 100% { transform: translate(-50%,  30px) scale(0.92) rotate(9deg); opacity: 1; } }
}

/* Rotation stays responsive using same Y variable */
@keyframes rotate3d {
  0%   { transform: translate(-50%, var(--y)) rotateY(-6deg); }
  100% { transform: translate(-50%, var(--y)) rotateY(6deg); }
}