:root {
    /* Main Colors */
    --bg-main: #050816; /* 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 */
    --extra-color-1: #00e5ff;
    --extra-color-2: #f7faff;
    --extra-color-3: #b026ff;
}

/* 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);
}

.extra-color-1 {
    color: var(--extra-color-1);
}

.extra-color-2 {
    color: var(--extra-color-2);
}

.extra-color-3 {
    color: var(--extra-color-3);
}

/* Linear Gradients (Text aur Background ke liye) */
.gradient-text {
    background: linear-gradient(
        90deg,
        #00e5ff 0%,
        #f7faff 25%,
        #b026ff 50%,
        #f7faff 75%,
        #00e5ff 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.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);
}