/* Background styling */
        .gradient-bg {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        }
        
        /* Main wrapper with expanded space */
        .crystal-wrapper {
            position: relative;
            width: 100%;
            padding: 0px 20px; /* Expanded padding for more space */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Expanded container for the text and crystal effect */
        .crystal-container {
            position: relative;
            width: 90vw; /* Use viewport width for better responsiveness */
            max-width: 1200px; /* Maximum width constraint */
            height: 200px; /* Fixed height for consistency */
            overflow: visible; /* Changed from hidden to visible */
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }
        
        /* Text styling */
        .crystal-text {
            position: relative;
            z-index: 2;
            transition: all 0.3s ease;
            white-space: nowrap; /* Prevent text wrapping */
        }
        
        /* Crystal glow effect */
        .crystal-glow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            z-index: 1;
        }
        
        .crystal-container:hover .crystal-glow {
            opacity: 1;
        }
        
        .crystal-container:hover .crystal-text {
            color: rgba(255, 255, 255, 0.7);
            text-shadow: 0 0 10px rgba(36, 97, 209, 0.46);
        }
        
        /* Crystal effect elements */
        .crystal-element {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            mix-blend-mode: screen;
        }
        
        .crystal-core {
            width: 120px;
            height: 120px;
            background: radial-gradient(circle, 
                rgba(34, 151, 197, 0.8) 0%, 
                rgba(34, 105, 197, 0.4) 40%, 
                transparent 70%);
            filter: blur(19px);
            transform: translate(-50%, -50%);
        }
        
        .crystal-refraction {
            width: 100px;
            height: 100px;
            background: conic-gradient(
                from 0deg,
                transparent 0deg,
                rgba(34, 197, 189, 0.2) 45deg,
                transparent 90deg,
                rgba(34, 197, 94, 0.2) 135deg,
                transparent 180deg,
                rgba(34, 91, 197, 0.2) 225deg,
                transparent 270deg,
                rgba(34, 110, 197, 0.2) 315deg,
                transparent 360deg
            );
            filter: blur(8px);
            transform: translate(-50%, -50%) rotate(0deg);
            animation: rotate 10s linear infinite;
        }
        
        .crystal-sparkle {
            width: 60px;
            height: 60px;
            background: radial-gradient(circle, 
                rgba(255, 255, 255, 0.8) 0%, 
                rgba(34, 197, 189, 0.6) 20%, 
                transparent 50%);
            filter: blur(1px);
            transform: translate(-50%, -50%);
        }
        
        .crystal-facet {
            width: 100px;
            height: 100px;
            background: radial-gradient(
                ellipse at center,
                transparent 0%,
                transparent 20%,
                rgba(34, 192, 197, 0.1) 40%,
                transparent 60%,
                rgba(34, 105, 197, 0.1) 80%,
                transparent 100%
            );
            filter: blur(8px);
            transform: translate(-50%, -50%) rotate(45deg);
        }
        
        .crystal-aura {
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, 
                rgba(34, 78, 197, 0.1) 0%, 
                rgba(34, 105, 197, 0.05) 30%, 
                transparent 60%);
            filter: blur(15px);
            transform: translate(-50%, -50%);
        }
        
        @keyframes rotate {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        /* Small sparkles that appear around the cursor */
        .sparkle {
            position: absolute;
            width: 4px;
            height: 4px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            z-index: 3;
        }
        
        @keyframes sparkleAnimation {
            0% {
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
            }
            50% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
            }
        }
        
        /* Border indicator for expanded area */
        .border-indicator {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .crystal-wrapper:hover .border-indicator {
            opacity: 1;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .crystal-wrapper {
                padding: 30px 10px;
            }
            
            .crystal-container {
                width: 95vw;
                height: 5px;
            }
            
            .crystal-text {
                font-size: 10vw !important;
            }
        }