.outer-box {
  width: 100%;
  overflow: hidden; /* Ensures nothing spills out */
  position: relative;
  background-color: #e0f2f7; /* Base background for the banner outer container */
  padding: 2rem 0; /* Use rem for scalable padding */
  box-sizing: border-box; /* Ensure padding doesn't cause overflow */
}

.banner {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
  text-align: center;
  background: linear-gradient(180deg, #e0f2f7 0%, #c1e4f4 100%); /* Soft gradient background */
  color: #003366; /* Deep blue for text */
  position: relative;
  overflow: hidden;
  max-width: 1400px; /* Constrain banner width for large screens */
  width: 90%; /* Fluid width for smaller screens */
  margin: 0 auto; /* Center the banner itself */
  border-radius: 15px; /* Slightly rounded corners for the banner section */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for the banner */
  padding: 2rem 1rem; /* Scalable padding */
  box-sizing: border-box;
}



.banner location {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1rem, 3.5vw, 1.4rem); /* Fluid font sizing */
  margin: 0.2rem 0 1rem; /* Minimal top margin, adjusted bottom margin */
  color: #336699;
  font-weight: 600;
  line-height: 1.2; /* Tighten line-height */
}

.banner .message {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(0.95rem, 3vw, 1.2rem); /* Fluid font sizing */
  color: #2c3e50;
  max-width: 90%; /* Fluid max-width */
  font-weight: 400;
  margin: 0 auto;
}

.banner .message strong {
  color: #e67e22;
  font-weight: 700;
  text-decoration: underline; /* Add underline to strong text (Congratulations) */
  text-decoration-thickness: 2px; /* Make the underline thicker */
  text-underline-offset: 4px; /* Adjust space between text and underline */
}

/* --- Stacked 3D Carousel (Refined) --- */
.carousel {
  position: relative;
  width: min(100%, 1000px); /* Fluid width up to max */
  height: clamp(213px, 50vw, 450px); /* Fluid height */
  perspective: 1200px; /* Deeper perspective for more dramatic 3D */
  margin: 2rem auto 3rem; /* Scalable margins */
  transform-style: preserve-3d;
  display: flex; /* Use flexbox to help center items */
  justify-content: center;
  align-items: center;
}

.carousel-item {
  position: absolute;
  width: 100%; /* Items initially fill the carousel container */
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background-color: #7b1fa2; /* Deep purple, like Ae logo */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.6s ease-in-out, z-index 0s 0.3s; /* Bouncier transition for transform */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: 'Arial', sans-serif; /* For placeholder text */
  font-size: clamp(1.5rem, 4vw, 3rem); /* Fluid font sizing */
  font-weight: bold;
  text-align: center;
  opacity: 0; /* Hidden by default */
  pointer-events: none; /* Disable clicks on non-active items */
}

/* Styling for the image within the carousel item */
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block; /* Ensure image takes full space */
}

/* Active item: Front and center */
.carousel-item.active {
  transform: translateZ(0) translateX(0) scale(1);
  opacity: 1;
  z-index: 5; /* Highest z-index */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); /* More prominent shadow for active item */
  pointer-events: auto; /* Enable clicks on active item */
}

/* Items going to the right (next) */
.carousel-item.next {
  transform: translateZ(-100px) translateX(150px) scale(0.85);
  opacity: 0.6;
  z-index: 4;
  background-color: #61b3d8; /* Medium blue */
}

.carousel-item.next2 {
  transform: translateZ(-200px) translateX(250px) scale(0.7);
  opacity: 0.3;
  z-index: 3;
  background-color: #9cd1e8; /* Lighter blue */
}

/* Items going to the left (previous) */
.carousel-item.prev {
  transform: translateZ(-100px) translateX(-150px) scale(0.85);
  opacity: 0.6;
  z-index: 4;
  background-color: #61b3d8; /* Medium blue */
}

.carousel-item.prev2 {
  transform: translateZ(-200px) translateX(-250px) scale(0.7);
  opacity: 0.3;
  z-index: 3;
  background-color: #9cd1e8; /* Lighter blue */
}

.banner .footer-msg {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(0.85rem, 2.5vw, 1.1rem); /* Fluid font sizing */
  margin-top: 2rem; /* Scalable margin */
  color: #444;
  font-style: italic;
  font-weight: 400;
}

/* === Responsive Adjustments for Banner & Carousel === */
@media (max-width: 992px) {
  .banner {
    padding: 1.5rem 0.75rem 2.5rem;
  }
  .banner header {
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    margin: 0;
    line-height: 1;
  }
 
  .banner subheader {
    font-size: clamp(1.4rem, 4.5vw, 1.8rem);
    margin: 0.1em 0;
    line-height: 1.1;
  }
  .banner location {
    font-size: clamp(0.9rem, 3vw, 1.2rem);
    margin: 0.2rem 0 1rem;
    line-height: 1.2;
  }
  .banner .message {
    font-size: clamp(0.9rem, 2.8vw, 1.1rem);
    margin-bottom: 2rem;
  }
  .carousel {
    width: min(100%, 833px);
    height: clamp(200px, 45vw, 375px);
    perspective: 1000px;
    margin: 1.5rem auto 2.5rem;
  }
  .carousel-item.next {
    transform: translateZ(-80px) translateX(100px) scale(0.88);
  }
  .carousel-item.next2 {
    transform: translateZ(-160px) translateX(150px) scale(0.75);
  }
  .carousel-item.prev {
    transform: translateZ(-80px) translateX(-100px) scale(0.88);
  }
  .carousel-item.prev2 {
    transform: translateZ(-160px) translateX(-150px) scale(0.75);
  }
  .carousel-item {
    font-size: clamp(1.2rem, 3.5vw, 2.5rem);
  }
}

@media (max-width: 768px) {
  .banner {
    padding: 1.5rem 0.5rem 2rem;
  }
  .banner header {
    font-size: clamp(1.8rem, 5vw, 3rem);
    margin: 0;
    line-height: 1;
  }
  .banner subheader {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    margin: 0.1em 0;
    line-height: 1.1;
  }
  .banner location {
    font-size: clamp(0.85rem, 2.8vw, 1.1rem);
    margin: 0.2rem 0 0.8rem;
    line-height: 1.2;
  }
  .banner .message {
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    margin-bottom: 1.5rem;
  }
  .carousel {
    width: min(100%, 666px);
    height: clamp(180px, 40vw, 296px);
    perspective: 800px;
    margin: 1.25rem auto 2rem;
  }
  .carousel-item.next {
    transform: translateZ(-60px) translateX(70px) scale(0.88);
  }
  .carousel-item.next2 {
    transform: translateZ(-120px) translateX(100px) scale(0.75);
  }
  .carousel-item.prev {
    transform: translateZ(-60px) translateX(-70px) scale(0.88);
  }
  .carousel-item.prev2 {
    transform: translateZ(-120px) translateX(-100px) scale(0.75);
  }
  .carousel-item {
    font-size: clamp(1rem, 3vw, 2rem);
  }
}

@media (max-width: 480px) {
  .banner {
    padding: 1.25rem 0.5rem 1.5rem;
    max-width: 100%;
  }
  .banner header {
    font-size: clamp(1.5rem, 4.5vw, 2.5rem);
    margin: 0;
    line-height: 1;
    letter-spacing: 0.8px;
  }
  .banner subheader {
    font-size: clamp(1rem, 4vw, 1.4rem);
    margin: 0.1em 0;
    line-height: 1.1;
    letter-spacing: 0.8px;
  }
  .banner location {
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    margin: 0.2rem 0 0.8rem;
    line-height: 1.2;
  }
  .banner .message {
    font-size: clamp(0.8rem, 2.3vw, 0.95rem);
    margin-bottom: 1.25rem;
  }
  .carousel {
    width: 100%;
    max-width: 466px;
    height: clamp(150px, 35vw, 213px);
    perspective: 600px;
    margin: 1rem auto 1.5rem;
  }
  .carousel-item.next {
    transform: translateZ(-40px) translateX(50px) scale(0.85);
  }
  .carousel-item.next2 {
    transform: translateZ(-80px) translateX(80px) scale(0.7);
  }
  .carousel-item.prev {
    transform: translateZ(-40px) translateX(-50px) scale(0.85);
  }
  .carousel-item.prev2 {
    transform: translateZ(-80px) translateX(-80px) scale(ਮ

System: .7);
  }
  .carousel-item {
    font-size: clamp(0.9rem, 2.5vw, 1.5rem);
  }
  .banner .footer-msg {
    font-size: clamp(0.7rem, 2vw, 0.85rem);
    margin-top: 1.25rem;
  }
}

@media (max-width: 360px) {
  .banner {
    padding: 1rem 0.5rem;
  }
  .banner header {
    font-size: clamp(1.2rem, 4vw, 2rem);
    margin: 0;
    line-height: 1;
    letter-spacing: 0.5px;
  }
  .banner subheader {
    font-size: clamp(0.9rem, 3.5vw, 1.2rem);
    margin: 0.1em 0;
    line-height: 1.1;
    letter-spacing: 0.5px;
  }
  .banner location {
    font-size: clamp(0.7rem, 2.2vw, 0.9rem);
    margin: 0.2rem 0 0.8rem;
    line-height: 1.2;
  }
  .banner .message {
    font-size: clamp(0.7rem, 2vw, 0.85rem);
    margin-bottom: 1rem;
  }
  .carousel {
    width: 100%;
    max-width: 300px;
    height: clamp(120px, 30vw, 180px);
    perspective: 500px;
    margin: 0.8rem auto 1.2rem;
  }
  .carousel-item {
    font-size: clamp(0.8rem, 2vw, 1.2rem);
  }
  .carousel-item.next, .carousel-item.prev {
    transform: translateZ(-30px) translateX(30px) scale(0.8);
    opacity: 0.5;
  }
  .carousel-item.next2, .carousel-item.prev2 {
    transform: translateZ(-60px) translateX(50px) scale(0.65);
    opacity: 0.2;
  }
  .banner .footer-msg {
    font-size: clamp(0.65rem, 1.8vw, 0.8rem);
    margin-top: 1rem;
  }
}

/* Ensure viewport scaling */
@media (max-width: 600px) {
  html {
    font-size: 14px; /* Adjust base font size for smaller screens */
  }
}