:root {
    /* Main Colors */
    --bg-main: #000;           /* Page Background */
    --bg-card: #0b1527;           /* Section/Box Background */
    --neon-cyan: #00f2ff;         /* Glow/Accent Color */
    --deep-blue: #0066ff;         /* Secondary Accent */
    --border-line: #1a3a6a;       /* Border Color */
    --text-main: #D1F4FF;         /* Primary Text */
    --text-sub: #8EA1B0;          /* Sub-text color */
}

/* Background Utility Classes */
.bg-main { background-color: var(--bg-main); }
.bg-card { background-color: var(--bg-card); }

/* Color Utility Classes */
.text-white { color: var(--text-main); }
.text-sub { color: var(--text-sub); }
.text-neon { color: var(--neon-cyan); }
.text-blue { color: var(--deep-blue); }

/* Linear Gradients (Text aur Background ke liye) */
.gradient-text {
    background: linear-gradient(180deg, #00f2ff, #015899,#0055BA );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	text-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
}

.gradient-box {
    background: linear-gradient(180deg, var(--bg-card), #040d1a);
    border: 1px solid var(--border-line);
}

/* Glow Border Effect */
.glow-border {
    border: 1px solid var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
}

.text-glow-cyan {
    color: #00AFFF;
    text-shadow:
        0 0 5px rgba(0, 175, 255, 0.8),
        0 0 10px rgba(0, 175, 255, 0.7),
        0 0 20px rgba(0, 175, 255, 0.5),
        0 0 35px rgba(0, 175, 255, 0.3);
}