.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: indigo;
    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);
    color: darkblue;
    max-width: 90%;
    font-weight: 600;
    margin: 0 auto;
}

.banner .message strong {
    color: saddlebrown;
    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: larger;
    margin-top: 2rem;
    color: black;
    font-style: italic;
    font-weight: 600;
}

/* === 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(0.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 */
    }
}