.home-page__title {
    font-family: Hind Siliguri,sans-serif;
    font-weight: 700;
    font-size: 56px;
    line-height: 70px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 2rem
}

.home-page__title span {
    opacity: 0;
    transform: translate(var(--translate-x, 0), var(--translate-y, 0))
}

.home-page__title--why-phitron {
    --translate-y: -40px
}

@keyframes blur-fade {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translate(var(--translate-x, 0), var(--translate-y, 0))
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translate(0, 0)
    }
}

.home-page__title[data-state=visible] span.home-page__title__highlight {
    animation: blur-fade .5s ease-in-out forwards,shine 3s linear infinite
}

.home-page__title[data-state=visible] span {
    animation: blur-fade .5s ease-in-out forwards
}

.home-page__title[data-state=visible] span:nth-child(2) {
    animation-delay: .3s
}

.home-page__title[data-state=visible] span:nth-child(3) {
    animation-delay: .6s
}

.home-page__title[data-state=visible] span:nth-child(4) {
    animation-delay: .9s
}

.home-page__title[data-state=visible] span:nth-child(5) {
    animation-delay: 1.2s
}

.home-page__title[data-state=visible] span:nth-child(6) {
    animation-delay: 1.5s
}

.home-page__title[data-state=visible] span:nth-child(7) {
    animation-delay: 1.8s
}



@media(max-width: 991.9px) {
    .home-page__title {
        gap:8px;
        font-size: 40px;
        line-height: 50px
    }

    

    .home-page__title--why-phitron span.home-page__title__highlight svg {
        width: 65px
    }

    

    

    

    

    
}