/* ================= HERO SECTION (AS IT IS) ================= */
    .hero-section {
        height: 90vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        text-align: center;
        background: radial-gradient(circle at bottom, #0f2027, #000);
    }

    /* ⭐ TWINKLING STARS */
    .hero-section::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-image:
            radial-gradient(2px 2px at 20% 30%, white, transparent),
            radial-gradient(1.5px 1.5px at 70% 20%, white, transparent),
            radial-gradient(2px 2px at 90% 80%, white, transparent),
            radial-gradient(1px 1px at 40% 60%, white, transparent),
            radial-gradient(1.5px 1.5px at 60% 90%, white, transparent);
        animation: twinkle 4s infinite alternate;
        opacity: 0.8;
    }

    @keyframes twinkle {
        from {
            opacity: 0.4;
        }

        to {
            opacity: 1;
        }
    }

    /* 🌠 SHOOTING STARS */
    .shooting-star {
        position: absolute;
        width: 2px;
        height: 80px;
        background: linear-gradient(-45deg, white, transparent);
        transform: rotate(45deg);
        opacity: 0.8;
        filter: drop-shadow(0 0 6px white);
        animation: shooting 2s linear infinite;
    }

    .shooting-star:nth-child(1) {
        top: 10%;
        left: 80%;
        animation-delay: 0s;
    }

    .shooting-star:nth-child(2) {
        top: 30%;
        left: 60%;
        animation-delay: 1.5s;
    }

    .shooting-star:nth-child(3) {
        top: 50%;
        left: 90%;
        animation-delay: 3s;
    }

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

        100% {
            transform: translate(-400px, 400px) rotate(45deg);
            opacity: 0;
        }
    }

    /* 💎 TEXT STYLING */
    .hero-title {
        font-size: 42px;
        font-weight: bold;
        position: relative;
        z-index: 2;
    }

    .hero-title span {
        color: #00e5ff;
    }

    .hero-subtitle {
        margin: 15px 0;
        position: relative;
        z-index: 2;
    }

    /* 🔘 BUTTON */
    .hero-section .btn {
        position: relative;
        z-index: 2;
        padding: 10px 25px;
        border-radius: 30px;
        margin-top: auto;
    }