.brand {
    display: inline-block;
    text-decoration: none;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2;
    font-family: Arial, sans-serif;
}

.brand-line {
    display: block; /* har line alag */
    text-align: center; /* center me rakhe */
    letter-spacing: -4px; /* thoda space letters me */
}

    .brand-line.accent {
        color: var(--accent); /* pehli line ka rang */
    }

    .brand-line.primary {
        color: var(--primary); /* doosri line ka rang */
    }

    .brand span {
        display: inline-block;
        opacity: 0;
        transform: rotateX(90deg);
        animation: rollIn 0.6s forwards, zoomBounce 4s infinite;
    }

/* Roll-in animation (letters appear one by one) */
@keyframes rollIn {
    to {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

/* Zoom bounce effect */
@keyframes zoomBounce {
    0%, 80%, 100% {
        transform: scale(1);
    }

    85% {
        transform: scale(1.5);
    }

    95% {
        transform: scale(0.9);
    }
}

/* Har letter ko delay dena */
.brand span:nth-child(1) {
    animation-delay: 0s, 2s;
}

.brand span:nth-child(2) {
    animation-delay: 0.2s, 2.2s;
}

.brand span:nth-child(3) {
    animation-delay: 0.4s, 2.4s;
}

.brand span:nth-child(4) {
    animation-delay: 0.6s, 2.6s;
}

.brand span:nth-child(5) {
    animation-delay: 0.8s, 2.8s;
}

.brand span:nth-child(6) {
    animation-delay: 1s, 3s;
}

.brand span:nth-child(7) {
    animation-delay: 1.2s, 3.2s;
}

.brand span:nth-child(8) {
    animation-delay: 1.4s, 3.4s;
}

.brand span:nth-child(9) {
    animation-delay: 1.6s, 3.6s;
}

.brand span:nth-child(10) {
    animation-delay: 1.8s, 3.8s;
}

.brand span:nth-child(11) {
    animation-delay: 2s, 4s;
}

.brand span:nth-child(12) {
    animation-delay: 2.2s, 4.2s;
}

.brand span:nth-child(13) {
    animation-delay: 2.4s, 4.4s;
}

.brand span:nth-child(14) {
    animation-delay: 2.6s, 4.6s;
}

.brand span:nth-child(15) {
    animation-delay: 2.8s, 4.8s;
}

.brand span:nth-child(16) {
    animation-delay: 3s, 5s;
}

.brand span:nth-child(17) {
    animation-delay: 3.2s, 5.2s;
}

.brand span:nth-child(18) {
    animation-delay: 3.4s, 5.4s;
}

.brand span:nth-child(19) {
    animation-delay: 3.6s, 5.6s;
}

.brand span:nth-child(20) {
    animation-delay: 3.8s, 5.8s;
}

.brand span:nth-child(21) {
    animation-delay: 4s, 6s;
}

/*.brand {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}

    .brand span {
        display: inline-block;
        animation: dance 1s infinite;
    }*/

        /* Har letter ko alag delay dene k liye */
        /*.brand span:nth-child(1) {
            animation-delay: 0s;
        }

        .brand span:nth-child(2) {
            animation-delay: 0.1s;
        }

        .brand span:nth-child(3) {
            animation-delay: 0.2s;
        }

        .brand span:nth-child(4) {
            animation-delay: 0.3s;
        }

        .brand span:nth-child(5) {
            animation-delay: 0.4s;
        }

        .brand span:nth-child(6) {
            animation-delay: 0.5s;
        }

        .brand span:nth-child(7) {
            animation-delay: 0.6s;
        }

        .brand span:nth-child(8) {
            animation-delay: 0.7s;
        }

        .brand span:nth-child(9) {
            animation-delay: 0.8s;
        }

        .brand span:nth-child(10) {
            animation-delay: 0.9s;
        }

@keyframes dance {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }*/
    /* upar niche hilega */
/*}*/
/*.brand {
    font-size: 2rem;
    font-weight: bold;
    display: inline-block;
    text-decoration: none;
}

    .brand span {
        display: inline-block;
        opacity: 0;
        transform: rotateX(90deg);
        animation: rollIn 0.6s forwards;
    }*/

/* Roll-in (first appear) */
/*@keyframes rollIn {
    to {
        opacity: 1;
        transform: rotateX(0);
    }
}*/

/* Zoom / bounce */
/*@keyframes zoomBounce {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
        color: var(--accent);
        text-shadow: 0 0 10px var(--accent);
    }
}*/