@media (max-width: 768px) {
    /* मोबाइल पर बहुत बड़े टेक्स्ट को थोड़ा छोटा करना */
    .text-6xl { font-size: 2.5rem !important; line-height: 1.2; }
    .text-8xl { font-size: 3.5rem !important; line-height: 1.1; }
    
    /* मोबाइल पैडिंग फिक्स */
    .container { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-32 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

    /* कार्ड्स की पैडिंग कम करना */
    .group.p-10 { padding: 1.5rem !important; }
}



/* --- GALAXY COMPONENT STYLES --- */

/* FORCE ANIMATION FOR STARS */
@keyframes rotateStars {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.stars-rain-large {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important; /* Glow के ऊपर रखने के लिए */
}

.stars-rain-large::before {
    content: '' !important;
    position: absolute !important;
    width: 250% !important; /* थोड़ा और बड़ा किया ताकि कोने न दिखें */
    height: 250% !important;
    top: -75% !important;
    left: -75% !important;
    background-image: 
        radial-gradient(2px 2px at 15% 15%, #ffffff, transparent),
        radial-gradient(3px 3px at 30% 45%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2.5px 2.5px at 60% 25%, #ffffff, transparent),
        radial-gradient(4px 4px at 85% 55%, rgba(168,85,247,0.8), transparent) !important;
    background-size: 400px 400px !important;
    animation: rotateStars 60s linear infinite !important;
    opacity: 0.6 !important; /* विज़िबिलिटी बढ़ा दी */
}


/* 2. Common Dome Base Styles */
.dome-base {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 100%;
    background: #0A0D14;
}

/* 3. Normal Dome (Pricing/Features) - Bottom to Top */
.dome-up {
    bottom: 0;
    border-radius: 100% 100% 0 0;
    border-top: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 -20px 60px -10px rgba(168, 85, 247, 0.3);
}

/* 4. Inverted Dome (Hero Section) - Top to Bottom */
.dome-down {
    top: 0;
    border-radius: 0 0 100% 100%;
    border-bottom: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 20px 60px -10px rgba(168, 85, 247, 0.3);
}


/*///for mobile section css code */
@media (max-width: 768px) {
    h1 { font-size: 2.3rem !important; line-height: 1.1 !important; }
    #hero { padding-top: 6rem !important; } /* Navbar se gap badhaya */

    .mobile-link {
        letter-spacing: -0.01em;
    }
    
    /* Moon shape ko piche bhejne ke liye */
    #hero .absolute {
        z-index: 1 !important;
    }
    
    /* Hero text container ko upar lane ke liye */
    #hero .container {
        position: relative;
        z-index: 10 !important;
    }
}



/*unversal cosmic */

/* Universal Cosmic Separator Style */
.cosmic-divider {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0; /* यहाँ गैप कम कर दिया गया है */
    overflow: hidden;
    width: 100%;
}

.cosmic-line {
    width: 100%;
    max-width: 1200px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.4) 50%, transparent 100%);
    position: relative;
}

/* Bada aur Glowing Core Dot */
.cosmic-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; /* साइज 4px से बढ़ाकर 8px किया */
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
    /* Glow ko thoda failaya hai */
    box-shadow: 0 0 20px 4px rgba(59, 130, 246, 0.8), 0 0 40px 8px rgba(59, 130, 246, 0.3);
}

/* Ping animation ko bhi thoda bada kiya */
.cosmic-ping {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px; /* 20px se 30px kiya */
    height: 30px;
    background: rgba(59, 130, 246, 0.4);
    border-radius: 50%;
    animation: cosmic-ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}


@keyframes cosmic-ping {
    75%, 100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}