.main-banner {
        min-height: 100vh;
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, #071e3d, #1f4287, #278ea5);
        font-family: Arial, sans-serif;
    }

    .bubbles {
        position: absolute;
        inset: 0;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
    }

    .bubble,
    .letter {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        pointer-events: none;
    }

    .bubble {
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.7);
        box-shadow:
            inset 0 0 15px rgba(255, 255, 255, 0.35),
            0 0 18px currentColor;
        opacity: 0.85;
    }

    /* Different bubble colors */
    .blue {
        color: #54d9ff;
        background: rgba(84, 217, 255, 0.25);
    }

    .pink {
        color: #ff6bd6;
        background: rgba(255, 107, 214, 0.25);
    }

    .yellow {
        color: #ffe66d;
        background: rgba(255, 230, 109, 0.25);
    }

    .green {
        color: #65ffad;
        background: rgba(101, 255, 173, 0.25);
    }

    .purple {
        color: #bd8cff;
        background: rgba(189, 140, 255, 0.25);
    }

    /* Bubbles rising from the bottom */
    .from-bottom {
        bottom: -120px;
        animation: fromBottom 13s infinite ease-in;
    }

    .bottom-1 {
        left: 8%;
        width: 65px;
        height: 65px;
        animation-duration: 12s;
    }

    .bottom-2 {
        left: 30%;
        width: 35px;
        height: 35px;
        animation-duration: 9s;
        animation-delay: 2s;
    }

    .bottom-3 {
        left: 52%;
        width: 95px;
        height: 95px;
        animation-duration: 16s;
        animation-delay: 1s;
    }

    .bottom-4 {
        left: 78%;
        width: 50px;
        height: 50px;
        animation-duration: 11s;
        animation-delay: 3s;
    }

    @keyframes fromBottom {
        0% {
            transform: translate(0, 0) rotate(0deg);
            opacity: 0;
        }

        15% {
            opacity: 0.9;
        }

        50% {
            transform: translate(70px, -55vh) rotate(180deg);
        }

        100% {
            transform: translate(-60px, -125vh) rotate(360deg);
            opacity: 0;
        }
    }

    /* Bubbles falling from the top */
    .from-top {
        top: -120px;
        animation: fromTop 14s infinite ease-in;
    }

    .top-1 {
        left: 18%;
        width: 45px;
        height: 45px;
        animation-duration: 10s;
    }

    .top-2 {
        left: 68%;
        width: 85px;
        height: 85px;
        animation-duration: 15s;
        animation-delay: 2s;
    }

    .top-3 {
        left: 88%;
        width: 30px;
        height: 30px;
        animation-duration: 8s;
        animation-delay: 1s;
    }

    @keyframes fromTop {
        0% {
            transform: translate(0, 0) rotate(0deg);
            opacity: 0;
        }

        15% {
            opacity: 0.9;
        }

        50% {
            transform: translate(-60px, 55vh) rotate(180deg);
        }

        100% {
            transform: translate(60px, 125vh) rotate(360deg);
            opacity: 0;
        }
    }

    /* Bubbles entering from the left */
    .from-left {
        left: -120px;
        animation: fromLeft 12s infinite ease-in;
    }

    .left-1 {
        top: 25%;
        width: 55px;
        height: 55px;
        animation-duration: 10s;
    }

    .left-2 {
        top: 70%;
        width: 30px;
        height: 30px;
        animation-duration: 8s;
        animation-delay: 2s;
    }

    @keyframes fromLeft {
        0% {
            transform: translate(0, 0) rotate(0deg);
            opacity: 0;
        }

        15% {
            opacity: 0.9;
        }

        50% {
            transform: translate(55vw, -50px) rotate(180deg);
        }

        100% {
            transform: translate(120vw, 80px) rotate(360deg);
            opacity: 0;
        }
    }

    /* Bubbles entering from the right */
    .from-right {
        right: -120px;
        animation: fromRight 13s infinite ease-in;
    }

    .right-1 {
        top: 40%;
        width: 75px;
        height: 75px;
        animation-duration: 13s;
    }

    .right-2 {
        top: 82%;
        width: 38px;
        height: 38px;
        animation-duration: 9s;
        animation-delay: 3s;
    }

    @keyframes fromRight {
        0% {
            transform: translate(0, 0) rotate(0deg);
            opacity: 0;
        }

        15% {
            opacity: 0.9;
        }

        50% {
            transform: translate(-55vw, 60px) rotate(180deg);
        }

        100% {
            transform: translate(-120vw, -80px) rotate(360deg);
            opacity: 0;
        }
    }

    /* Animated institute name */
.word-animation {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

.word-animation h1 {
    margin: 0;
    padding: 14px 24px;
    color: #ffffff;
    font-size: clamp(28px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: 2px;
    text-align: center;

    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;

    text-shadow:
        2px 2px 0 #071e3d,
        0 0 8px #000000,
        0 0 18px #54d9ff;
}

.word-animation .char {
    display: inline-block;
    opacity: 0;
    color: #ffffff;

    text-shadow:
        2px 2px 0 #071e3d,
        0 0 8px #000000,
        0 0 15px currentColor;

    animation: gatherWords 14s infinite
               cubic-bezier(0.22, 1, 0.36, 1);
}

.word-animation .word {
    display: inline-block;
    white-space: nowrap;
    margin: 0 8px;
}



/*
   Each letter starts from a different direction.
   The animation keeps the complete phrase visible
   from 42% to 70%, then fades it away.
*/

/* SHAPERS */
.word:nth-child(1) .char:nth-child(1)  { --x: -70vw; --y: -45vh; --r: -180deg; animation-delay: 0.00s; }
.word:nth-child(1) .char:nth-child(2)  { --x: -55vw; --y:  38vh; --r:  120deg; animation-delay: 0.05s; }
.word:nth-child(1) .char:nth-child(3)  { --x: -35vw; --y: -60vh; --r: -90deg;  animation-delay: 0.10s; }
.word:nth-child(1) .char:nth-child(4)  { --x: -20vw; --y:  55vh; --r: 180deg;  animation-delay: 0.15s; }
.word:nth-child(1) .char:nth-child(5)  { --x:  20vw; --y: -55vh; --r: -120deg; animation-delay: 0.20s; }
.word:nth-child(1) .char:nth-child(6)  { --x:  35vw; --y:  60vh; --r: 90deg;   animation-delay: 0.25s; }
.word:nth-child(1) .char:nth-child(7)  { --x:  55vw; --y: -40vh; --r: 160deg;  animation-delay: 0.30s; }
.word:nth-child(1) .char:nth-child(8)  { --x:  75vw; --y:  35vh; --r: -160deg; animation-delay: 0.35s; }

/* TRAINING */
.word:nth-child(2) .char:nth-child(1)  { --x: -80vw; --y:  10vh; --r: -160deg; animation-delay: 0.40s; }
.word:nth-child(2) .char:nth-child(2)  { --x: -65vw; --y: -30vh; --r: 120deg;  animation-delay: 0.45s; }
.word:nth-child(2) .char:nth-child(3)  { --x: -45vw; --y:  50vh; --r: -90deg;  animation-delay: 0.50s; }
.word:nth-child(2) .char:nth-child(4)  { --x: -25vw; --y: -60vh; --r: 180deg;  animation-delay: 0.55s; }
.word:nth-child(2) .char:nth-child(5)  { --x:  25vw; --y:  60vh; --r: -180deg; animation-delay: 0.60s; }
.word:nth-child(2) .char:nth-child(6)  { --x:  45vw; --y: -50vh; --r: 90deg;   animation-delay: 0.65s; }
.word:nth-child(2) .char:nth-child(7)  { --x:  65vw; --y:  30vh; --r: -120deg; animation-delay: 0.70s; }
.word:nth-child(2) .char:nth-child(8)  { --x:  80vw; --y: -10vh; --r: 160deg;  animation-delay: 0.75s; }

/* INSTITUTE */
.word:nth-child(3) .char:nth-child(1)  { --x: -75vw; --y: -20vh; --r: 180deg;  animation-delay: 0.80s; }
.word:nth-child(3) .char:nth-child(2)  { --x: -60vw; --y:  45vh; --r: -120deg; animation-delay: 0.85s; }
.word:nth-child(3) .char:nth-child(3)  { --x: -40vw; --y: -55vh; --r: 90deg;   animation-delay: 0.90s; }
.word:nth-child(3) .char:nth-child(4)  { --x: -20vw; --y:  60vh; --r: -180deg; animation-delay: 0.95s; }
.word:nth-child(3) .char:nth-child(5)  { --x:  20vw; --y: -60vh; --r: 120deg;  animation-delay: 1.00s; }
.word:nth-child(3) .char:nth-child(6)  { --x:  40vw; --y:  55vh; --r: -90deg;  animation-delay: 1.05s; }
.word:nth-child(3) .char:nth-child(7)  { --x:  60vw; --y: -45vh; --r: 180deg;  animation-delay: 1.10s; }
.word:nth-child(3) .char:nth-child(8)  { --x:  75vw; --y:  20vh; --r: -160deg; animation-delay: 1.15s; }
.word:nth-child(3) .char:nth-child(9)  { --x:  90vw; --y: -35vh; --r: 90deg;   animation-delay: 1.20s; }

/* Remaining letters and spaces */
.word .char:nth-last-child(1) {
    animation-delay: 1.25s;
}

@keyframes gatherWords {
    0% {
        opacity: 0;
        transform:
            translate(var(--x), var(--y))
            rotate(var(--r))
            scale(0.3);
    }

    15% {
        opacity: 1;
    }

    38% {
        opacity: 1;
        transform:
            translate(0, 0)
            rotate(0deg)
            scale(1);
    }

    42%,
    80% {
        opacity: 1;
        transform:
            translate(0, 0)
            rotate(0deg)
            scale(1);
    }

    82% {
        opacity: 0;
        transform:
            translate(0, -20px)
            scale(1.3);
    }

    100% {
        opacity: 0;
        transform:
            translate(0, -20px)
            scale(1.3);
    }
}
    @keyframes letterFloat {
        0% {
            transform: translate(0, 0) rotate(0deg) scale(0.7);
            opacity: 0;
        }

        20% {
            opacity: 1;
        }

        50% {
            transform: translate(-40px, -100px) rotate(180deg) scale(1.2);
        }

        100% {
            transform: translate(50px, -220px) rotate(360deg) scale(0.6);
            opacity: 0;
        }
    }

    .banner-content {
        position: relative;
        z-index: 1;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
        padding: 120px 20px;
    }

    .welcome-hero-txt h2 {
        color: white;
        font-size: 48px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .welcome-hero-txt p {
        color: white;
        font-size: 18px;
    }

    @media (max-width: 768px) {
        .welcome-hero-txt h2 {
            font-size: 32px;
        }

        .welcome-hero-txt p {
            font-size: 16px;
        }

        .letter {
            font-size: 20px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .bubble,
        .letter {
            animation: none;
            display: none;
        }
    }