:root {
            --bg-dark: #040408;
            --purple-primary: #7c3aed;
            --pink-accent: #c81e45;
            --glass-border: rgba(255, 255, 255, 0.25);
            --bs-secondary-rgb: 200, 200, 200 !important;
        }

        body {
            background-color: var(--bg-dark);
            color: #e0e0e0;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, .serif { font-family: 'Montserrat', sans-serif; font-weight: 700; }

        /* =========================================
           NAVBAR
           ========================================= */
        .navbar {
            background: transparent;
            transition: all 0.4s ease;
            padding: 20px 0;
            z-index: 1050;
        }

        .navbar-logo{
            height: clamp(34px, 4vw, 52px);
            width: auto;
            transition: 0.3s ease;
        }

        .navbar-logo:hover{
            transform: scale(1.03);
        }

        .navbar ,  .navbar.scrolled {
            background: rgba(0, 0, 0, 0.25);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--glass-border);
        }

        .nav-link {
            color: #aaa !important;
            font-size: 0.75rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin: 0 12px;
        }

        .nav-link:hover { color: #fff !important; }

     .navbar-nav .nav-link {
            position: relative;
            color: #fff;
            padding: 10px 18px;
            transition: 0.3s ease;
        }

        /* ACTIVE LINK BASE */
        .navbar-nav .nav-link.active {
            color: #fff !important;
            font-weight: bold;
        }

        /* Main glowing underline */
        .navbar-nav .nav-link.active::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -6px;
            transform: translateX(-50%);
            
            width: 90%;
            height: 1px;
            border-radius: 50%;

            /* brand gradient */
            background: linear-gradient(
                90deg,
                var(--purple-primary),
                var(--pink-accent)
            );

            /* soft neon glow */
            box-shadow:
                0 0 8px rgba(124, 58, 237, 0.8),
                0 0 16px rgba(200, 30, 69, 0.6),
                0 0 28px rgba(124, 58, 237, 0.4);

            animation: glowPulse 1.8s ease-in-out infinite alternate;
        }

        /* blurred glow layer (gives “floating neon” feel like your image) */
        .navbar-nav .nav-link.active::before {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -6px;
            transform: translateX(-50%);
            
            width: 70%;
            height: 1px;
            border-radius: 50%;

            background: linear-gradient(
                90deg,
                var(--purple-primary),
                var(--pink-accent)
            );

            filter: blur(8px);
            opacity: 0.6;
            z-index: -1;
        }

    /* hover effect */
    .navbar-nav .nav-link:hover {
        color: var(--purple-primary);
    }

    /* subtle pulse animation */
    @keyframes glowPulse {
        0% {
            opacity: 0.75;
            filter: brightness(1);
        }
        100% {
            opacity: 1;
            filter: brightness(1.3);
        }
    }


        .btn-glass-primary {
            background: white; color: black; border-radius: 50px;
            padding: 8px 24px; font-size: 0.8rem; font-weight: 600;
            text-decoration: none; transition: all 0.3s ease;
        }
        .btn-glass-primary:hover { background: #eee; transform: scale(1.05); }

        /* =========================================
           HERO SECTION
           ========================================= */
      #hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding-top: 90px;
            background: #050505;
        }

        /* ===== LEFT SIDE DARK OVERLAY ===== */
        #hero::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            background:
                linear-gradient(
                    90deg,
                    rgba(0,0,0,0.95) 0%,
                    rgba(0,0,0,0.88) 35%,
                    rgba(0,0,0,0.65) 55%,
                    rgba(0,0,0,0.15) 75%,
                    rgba(0,0,0,0) 100%
                );
            pointer-events: none;
        }

        /* ===== TOP RIGHT GRADIENT ===== */
        #hero::after {
            content: "";
            position: absolute;
            width: 100vw;
            height: 100vh;
            top: -30vw;
            right: -60vh;
            border-radius: 50%;
            z-index: 0;
            filter: blur(120px);
            opacity: 0.9;

            background:
                radial-gradient(
                    circle,
                    rgba(124, 58, 237, 0.55) 0%,
                    rgba(200, 30, 69, 0.35) 40%,
                    rgba(124, 58, 237, 0.08) 70%,
                    transparent 100%
                );

            animation: heroGlowTop 10s ease-in-out infinite alternate;
        }

        /* ===== BOTTOM RIGHT GRADIENT ===== */
        .hero-gradient-bottom {
            position: absolute;
            width: 750px;
            height: 750px;
            bottom: -280px;
            right: -150px;
            border-radius: 50%;
            z-index: 0;
            filter: blur(130px);
            opacity: 0.7;

            background:
                radial-gradient(
                    circle,
                    rgba(200, 30, 69, 0.45) 0%,
                    rgba(124, 58, 237, 0.28) 45%,
                    rgba(200, 30, 69, 0.06) 70%,
                    transparent 100%
                );

            animation: heroGlowBottom 12s ease-in-out infinite alternate;
        }

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

        @keyframes heroGlowTop {
            0% {
                transform: translate(0px, 0px) scale(1);
                filter: blur(120px) hue-rotate(0deg);
            }

            50% {
                transform: translate(-40px, 30px) scale(1.08);
                filter: blur(140px) hue-rotate(20deg);
            }

            100% {
                transform: translate(20px, -20px) scale(0.95);
                filter: blur(110px) hue-rotate(-20deg);
            }
        }

        @keyframes heroGlowBottom {
            0% {
                transform: translate(0px, 0px) scale(1);
                filter: blur(130px) hue-rotate(0deg);
            }

            50% {
                transform: translate(-20px, -30px) scale(1.05);
                filter: blur(150px) hue-rotate(-15deg);
            }

            100% {
                transform: translate(30px, 10px) scale(0.92);
                filter: blur(120px) hue-rotate(15deg);
            }
        }

        /* ===== CONTENT ABOVE GLOW ===== */
        #hero .container,
        #hero .hero-content,
        #hero .hero-gallery {
            position: relative;
            z-index: 2;
        }

        #plexCanvas{
             position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        }

        /* The Typing Text */
        #typing-container {
            position: relative;
            height: 5rem;
        }
        @media (max-width: 768px) { #typing-container { height: 3.5rem; } }

        .hero-line-bg {
            position: absolute; top: -15px; left: -5px;
            font-size: 5.5rem; font-weight: 900; color: transparent;
            -webkit-text-stroke: 1px rgba(255,255,255,0.1);
            z-index: -1; white-space: nowrap;
        }
        @media (max-width: 768px) { .hero-line-bg { font-size: 3.5rem; top: -5px; } }

        .hero-line-solid {
            font-size: 2.5rem; font-weight: 900;
            background: linear-gradient(135deg, #7c3aed 0%, #c81e45 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            display: inline-block;
        }
        @media (max-width: 768px) { .hero-line-solid { font-size: 1.6rem; } }

        .cursor {
            display: inline-block; width: 3px; 
            background: #c81e45; vertical-align: middle; margin-left: 10px;
            animation: blink 1s step-end infinite;
        }
        @media (max-width: 768px) { .cursor { height: 1.8rem; } }
        @keyframes blink { 50% { opacity: 0; } }

        /* 3D Liquid Blob (SVG based) */
        .liquid-blob-container {
            position: absolute; right: -10%; top: -20%;
            width: 120%; height: 150%;
            z-index: -1; pointer-events: none;
        }
        
        .liquid-blob {
            width: 100%; height: 100%;
            filter: blur(40px);
            opacity: 0.7;
            animation: floatBlob 8s ease-in-out infinite alternate;
        }
        
        @keyframes floatBlob {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(-20px, 20px) scale(1.1); }
        }

        /* Floating Glass Card (Right) */
        .floating-card {
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(3px);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 24px;
            pointer-events: auto;
        }
        .floating-card h6 { font-size: 0.7rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }
        .floating-card p { font-size: 0.9rem; line-height: 1.4; margin: 10px 0; }
        .floating-card .btn-outline-light { border-radius: 50px; font-size: 0.8rem; border-color: #555; color: #ccc; }
        .floating-card .btn-outline-light:hover { background: white; color: black; border-color: white; }

        /* Gallery Stack */
        .gallery-stack {
            position: relative;
            width: 100%;
            max-width: 500px;
            height: 500px;
            margin: auto;
            perspective: 1200px;
        }

       

        .gallery-card {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            background-size: cover;
            background-position: center;
            filter: grayscale(100%);
            border: 5px solid #ffffff;
            transition:
                transform 1s ease,
                opacity 1s ease,
                filter 1s ease;

            box-shadow:
                0 25px 50px rgba(0,0,0,0.35);

            overflow: hidden;

        }
        @media (max-width: 991px) { .gallery-stack { height: 280px; transform: scale(0.85); max-width: 300px; margin-bottom:2rem; } }

        /* =========================================
           GENERIC SECTION STYLES
           ========================================= */

           #about::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background:
                linear-gradient(
                    90deg,
                    rgba(0,0,0,0.95) 0%,
                    rgba(0,0,0,0.88) 35%,
                    rgba(0,0,0,0.65) 55%,
                    rgba(0,0,0,0.15) 75%,
                    rgba(0,0,0,0) 100%
                );
        }


        #about::after {
            content: "";
            position: absolute;
            width: 50vw;
            height: 40vh;
            top: 130vh;
            left: -5%;
            border-radius: 50%;
            z-index: -2;
            filter: blur(120px);
            opacity: 0.9;

            background:
                radial-gradient(
                    circle,
                    rgba(124, 58, 237, 0.55) 0%,
                    rgba(200, 30, 69, 0.35) 40%,
                    rgba(124, 58, 237, 0.08) 70%,
                    transparent 100%
                );

            animation: heroGlowTop 10s ease-in-out infinite alternate;
        }

        .outline-title {
            font-size: 6vw; font-weight: 900; color: transparent;
            -webkit-text-stroke: 1px rgba(255,255,255,0.25);
            text-align: center; letter-spacing: -2px;
             border-bottom: 1px dotted var(--glass-border);
             border-top: 1px dotted var(--glass-border);
        }

        .glass_bg{

            background: rgba(0, 0, 0, 0.25);
            backdrop-filter: blur(7px);
           
        }
        .services-scroll-wrapper {
            width: 100%;
            overflow: hidden;

            
            position: relative;

            margin-top: 0rem;
            z-index: 1;
        }

        .services-scroll {

            display: flex;
            width: max-content;

            animation: scrollText 70s linear infinite;
        }

        .services-scroll span {

            font-size: 3rem;
            font-weight: 700;
            text-transform: uppercase;

            white-space: nowrap;

            padding-right: 4rem;

            color: transparent;

            -webkit-text-stroke: 1px rgba(255,255,255,0.25);
        }

        @keyframes scrollText {

            from {
                transform: translateX(0%);
            }

            to {
                transform: translateX(-50%);
            }
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 1rem 2rem;
            transition: transform 0.4s ease, border-color 0.4s ease;
            height: 100%;
        }
        .glass-card:hover { transform: translateY(-5px); border-color: rgba(124, 58, 237, 0.4); }
        .glass-card h5 { font-weight: 700; color: #fff; }
        .glass-card p { color: #888; font-size: 0.9rem; }

        .section-title { font-size: 2.8rem; }
        .section-sub { font-size: 1.8rem; font-style: italic; color: #666; font-weight: 400; }
        @media (max-width: 768px) { .section-title { font-size: 1.6rem; } .section-sub { font-size: 1.2rem; } }

        /* Tech Grid Specifics */
        .tech-card { min-height: 220px; position: relative; overflow: hidden; }
        .tech-card::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
            background: linear-gradient(to top, rgba(4,4,8,0.8), transparent);
            pointer-events: none;
        }
        .tech-card .bottom-tags {
            position: absolute; bottom: 20px; left: 25px; right: 25px;
            display: flex; justify-content: space-between; align-items: center;
            color: #555; font-size: 0.75rem; z-index: 2;
        }

        /* Contact Giant Card */
        .contact-giant {
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(200, 30, 69, 0.2));
            border: 1px solid var(--glass-border);
            border-radius: 24px; padding: 50px;
        }
        .gradient-bg{
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(200, 30, 69, 0.2));

        }
        @media (max-width: 768px) { .contact-giant { padding: 30px; } }

        .footer-outline-text {
            font-size: 4vw; font-weight: 900; color: transparent;
            -webkit-text-stroke: 1px rgba(255,255,255,0.25);
            text-align: center; letter-spacing: -2px;

          
        }

        /* =========================================
           CUSTOM BOOTSTRAP OVERRIDES
           ========================================= */
        .container { max-width: 1280px; }

       .gradient-label {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 5px;
            background: rgba(255,255,255,0.0);
          
            font-weight: 600;
            font-size: 1.2rem;
            line-height: 1.2;

            background-image: linear-gradient(135deg, #7c3aed, #c81e45);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;

        }

        .step-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 18px;
            padding: 18px 24px;
            min-width: 220px;
            backdrop-filter: blur(10px);
        }

        .step-number {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: linear-gradient(135deg, #7c3aed, #c81e45);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .about_hero{

            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--glass-border);
        }

        .tech-card-hover {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    height: 320px;
    cursor: pointer;
}

/* IMAGE */
.tech-card-hover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* GLASS STRIP */
.tech-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);

    padding: 16px;
    transform: translateY(calc(100% - 70px)); /* only title visible */
    transition: transform 0.4s ease;
}

/* TITLE */
.tech-title {
    text-align: center;
    margin-bottom: 10px;
}

/* DESCRIPTION (hidden initially) */
.tech-desc {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* HOVER EFFECT */
.tech-card-hover:hover .tech-info {
    transform: translateY(0);
}

.tech-card-hover:hover .tech-desc {
    opacity: 1;
}

.tech-card-hover:hover img {
    transform: scale(1.05);
}

#tech_stack {
    position: relative;
    overflow: visible;
    z-index: 10;
}

/* CENTER GLOW */
#tech_stack::after {
    content: "";
    position: absolute;

    width: 100vw;
    height: 100vh;

    left: 85%;
    top: 70%;

    transform: translate(-50%, -85%);

    border-radius: 50%;
    z-index: -1;

    filter: blur(140px);
    opacity: 0.9;

    background: radial-gradient(
        circle,
        rgba(124, 58, 237, 0.55) 0%,
        rgba(200, 30, 69, 0.35) 40%,
        rgba(11, 84, 254, 0.15) 70%,
        transparent 100%
    );
}
#work {
    position: relative;
    overflow: visible;
    z-index: 1;
}
#work::after {
    content: "";
    position: absolute;

    pointer-events: none;

    width: 50vw;
    height: 50vw;

    left: 10%;
    top: 25%;

    transform: translate(-50%, -50%);

    border-radius: 50%;
    z-index: -200;

    filter: blur(140px);
    opacity: 0.9;

    background: radial-gradient(
        circle,
        rgba(124, 58, 237, 0.55) 0%,
        rgba(200, 30, 69, 0.35) 40%,
        rgba(11, 84, 254, 0.15) 70%,
        transparent 100%
    );
}
#contact{
     position: relative;
    overflow: visible;
    z-index: 0;
}

#footer{
     position: relative;
    overflow: visible;
    z-index: 0;
}

#contact::after {
    content: "";
    position: absolute;

    width: 100vw;
    height: 100vh;

    left: 10%;
    top: 25%;

  
    border-radius: 50%;
    z-index: -400;

    filter: blur(140px);
    opacity: 0.9;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(200, 30, 69, 0.2));
   
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tech-tags .badge {
    padding: 8px 14px;
    font-size: 0.75rem;
    font-weight: 500;

    background: #fffffffff !important;
    border: 1px solid rgba(255,255,255,0.12);

    backdrop-filter: blur(10px);
    color: #fffffffff !important;

    transition: 0.3s ease;
}

.tech-tags .badge:hover {
    background: rgba(124, 58, 237, 0.25) !important;
    border-color: rgba(124, 58, 237, 0.4);
}

.region-btn{
    width:68px;
    height:68px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid rgba(255,255,255,0.08);
    background:none;
    padding:0;
    transition:0.35s ease;
    cursor:pointer;
}

.region-btn img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.region-btn:hover{
    transform:translateY(-4px) scale(1.05);
}

.region-btn.active{
    border-color:#ffffff;

    box-shadow:
        0 0 20px rgba(255,255,255,0.45),
        0 0 40px rgba(255,255,255,0.35);

    transform:scale(1.08);
}

.contact-region-card{
    position:relative;
    overflow:hidden;
}

/* BACKGROUND */
.region-bg{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    opacity:0;
    transition:0.5s ease;

    z-index:0;
}

/* ACTIVE BACKGROUND */
.region-bg.active-bg{
    opacity:1;
}

/* LEFT BLACK GRADIENT */
.region-bg::after{
    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.72) 35%,
        rgba(0,0,0,0.28) 70%,
        rgba(0,0,0,0.05) 100%
    );
}

/* FLAG BUTTON */
.region-btn{
    width:48px;
    height:48px;

    border-radius:50%;
    overflow:hidden;

    border:2px solid rgba(255,255,255,0.1);

    background:none;
    padding:0;

    cursor:pointer;

    transition:0.35s ease;
}

.region-btn img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.region-btn:hover{
    transform:translateY(-4px) scale(1.05);
}

.region-btn.active{

    border-color:#ffffff;

    box-shadow:
        0 0 5px rgba(255,255,255,0.45),
        0 0 10px rgba(255,255,255,0.35);

    transform:scale(1.08);
}

.contact-link{
    color:#fff;
    text-decoration:none;
    transition:0.3s ease;
}

.contact-link:hover{
    color:#fff;
    opacity:0.8;
}

.form-control{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
}

.form-control:focus{
    background:rgba(255,255,255,0.08);
    border-color:#7c3aed;
    color:#fff;
    box-shadow:none;
}

.form-control::placeholder{
    color:rgba(255,255,255,0.5);
}

textarea{
    resize:none;
}


.step-indicator{
    opacity:0.9;
}

.step-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,0.18);
    transition:0.35s ease;
}

.step-dot.active{
    width:34px;
    border-radius:30px;

    background:linear-gradient(
        90deg,
        #c81e45,
        #7c3aed
    );

    box-shadow:
        0 0 12px rgba(200,30,69,0.45),
        0 0 20px rgba(124,58,237,0.35);
}

.footer-link{

    color:#b0b0b0;
    text-decoration:none;

    transition:0.3s ease;

}

.footer-link:hover{

    color:#fff;
    transform:translateY(-2px);

}

.social-icon{

    width:44px;
    height:44px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    background:transparent;

    border:1px solid rgba(255,255,255,0.9);

    color:#fff;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;

}

/* ICON */
.social-icon i{

    transition:0.35s ease;

}

/* HOVER */
.social-icon:hover{

    transform:translateY(-4px);

    background:#fff;

    border-color:#fff;

    box-shadow:
        0 0 20px rgba(200,30,69,0.35),
        0 0 30px rgba(124,58,237,0.25);

}

/* GRADIENT ICON */
.social-icon:hover i{

    background:linear-gradient(
        135deg,
        #7c3aed,
        #c81e45
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    background-clip:text;
    color:transparent;

}

section{
    scroll-margin-top:70px;
}
html{
    scroll-behavior:smooth;
}

@media(max-width:768px){

    #hero::after,
    #about::after,
    #tech_stack::after,
    #work::after,
    #contact::after{

        width:120%;
        max-width:120%;

        left:50% !important;
        transform:translateX(-65%) !important;

    }

    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .services-scroll span{
        font-size: 2rem !important;
    }

    .general-text{
        font-size: .8rem; line-height: 1.2 !important;
    }
    .footer-outline-text{
        font-size: 8vw !important;
    }
}

html, body{
    overflow-x:hidden;
    width:100%;
}

.services-scroll-wrapper{
    overflow-x:hidden;
}

.general-text{
    font-size: 1.2rem; line-height: 1.6;
}

.video-wrapper{

    width:100%;
    aspect-ratio:16 / 9;

    border-radius:18px;
    overflow:hidden;

}

.video-wrapper video{

    width:100%;
    height:100%;

    object-fit:cover;
    display:block;

}

.success-modal{
    background: rgba(10,10,16,0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
        0 0 40px rgba(124,58,237,0.18),
        0 0 80px rgba(200,30,69,0.12);
}

.success-icon-wrap{
    position: relative;
    width: 140px;
    height: 140px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon-circle{
    width: 120px;
    height: 120px;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #7c3aed,
        #c81e45
    );

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 0 25px rgba(124,58,237,0.45),
        0 0 45px rgba(200,30,69,0.35);

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

.success-icon-circle i{
    font-size: 52px;
    color: #fff;
}

.spark{
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #7c3aed,
        #c81e45
    );

    box-shadow: 0 0 12px rgba(255,255,255,0.5);
}

.spark-1{
    top: 15px;
    left: 20px;
}

.spark-2{
    top: 25px;
    right: 15px;
}

.spark-3{
    bottom: 20px;
    left: 25px;
}

.spark-4{
    bottom: 10px;
    right: 20px;
}

@keyframes pulseGlow{

    0%{
        transform: scale(1);
        box-shadow:
            0 0 20px rgba(124,58,237,0.35),
            0 0 40px rgba(200,30,69,0.25);
    }

    50%{
        transform: scale(1.05);
        box-shadow:
            0 0 35px rgba(124,58,237,0.6),
            0 0 60px rgba(200,30,69,0.45);
    }

    100%{
        transform: scale(1);
        box-shadow:
            0 0 20px rgba(124,58,237,0.35),
            0 0 40px rgba(200,30,69,0.25);
    }
}