/* =====================================================
     PREMIUM SANSKRIT MANTRA BANNER
===================================================== */

.astro-mantra-section{

    width:100%;

    padding:45px 0;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #050014 0%,
        #140024 45%,
        #21003f 100%
    );

    border-top:
    1px solid rgba(255,255,255,.06);

    border-bottom:
    1px solid rgba(255,255,255,.06);
}

/* =====================================================
     GLOW EFFECTS
===================================================== */

.mantra-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.25;
}

.mantra-glow-1{

    width:320px;
    height:320px;

    background:#ffcc00;

    top:-120px;
    left:-100px;
}

.mantra-glow-2{

    width:320px;
    height:320px;

    background:#ff0099;

    right:-100px;
    bottom:-120px;
}

/* =====================================================
     STRIP
===================================================== */

.mantra-strip{

    width:100%;

    overflow:hidden;

    position:relative;

    margin:18px 0;
}

/* =====================================================
     TRACK
===================================================== */

.mantra-track{

    display:flex;

    align-items:center;

    width:max-content;

    gap:70px;

    white-space:nowrap;
}

/* =====================================================
     TEXT
===================================================== */

.mantra-track span{

    font-size:34px;

    font-weight:800;

    letter-spacing:1px;

    color:#ffd700;

    text-shadow:
    0 0 10px rgba(255,215,0,.7),
    0 0 20px rgba(255,215,0,.5),
    0 0 40px rgba(255,215,0,.4);

    animation:pulseGlow 2.5s ease-in-out infinite;
}

/* =====================================================
     MOVEMENT
===================================================== */

.mantra-left .mantra-track{

    animation:scrollLeft 30s linear infinite;
}

.mantra-right .mantra-track{

    animation:scrollRight 30s linear infinite;
}

/* =====================================================
     SOUND BUTTON
===================================================== */

.sound-toggle-btn{

    position:fixed;

    right:25px;
    bottom:25px;

    z-index:9999;

    border:none;

    outline:none;

    cursor:pointer;

    padding:14px 24px;

    border-radius:60px;

    font-size:15px;
    font-weight:700;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #ff0099,
        #7b2cff
    );

    box-shadow:
    0 12px 35px rgba(255,0,153,.35);

    transition:.4s ease;
}

/* HOVER */

.sound-toggle-btn:hover{

    transform:
    translateY(-5px)
    scale(1.05);

    box-shadow:
    0 18px 45px rgba(255,0,153,.45);
}

/* =====================================================
     ANIMATIONS
===================================================== */

@keyframes scrollLeft{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}

@keyframes scrollRight{

    0%{
        transform:translateX(-50%);
    }

    100%{
        transform:translateX(0);
    }

}

@keyframes pulseGlow{

    0%{

        text-shadow:
        0 0 10px rgba(255,215,0,.7),
        0 0 20px rgba(255,215,0,.5),
        0 0 40px rgba(255,215,0,.4);
    }

    50%{

        text-shadow:
        0 0 18px rgba(255,215,0,1),
        0 0 35px rgba(255,215,0,.9),
        0 0 60px rgba(255,215,0,.7);
    }

    100%{

        text-shadow:
        0 0 10px rgba(255,215,0,.7),
        0 0 20px rgba(255,215,0,.5),
        0 0 40px rgba(255,215,0,.4);
    }

}

/* =====================================================
     RESPONSIVE
===================================================== */

@media(max-width:768px){

    .astro-mantra-section{

        padding:35px 0;
    }

    .mantra-track{

        gap:45px;
    }

    .mantra-track span{

        font-size:24px;
    }

    .sound-toggle-btn{

        right:15px;
        bottom:15px;

        padding:12px 18px;

        font-size:13px;
    }

}

@media(max-width:480px){

    .mantra-track span{

        font-size:18px;
    }

}