/* Neural Mesh Styles */

.neural-mesh-slide {
    background-color: #f8fafc;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* Vanta container styles */
.vanta-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Make sure canvas elements have proper z-index */
.neural-mesh-slide canvas,
.vanta-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Make sure container elements have proper z-index */
.neural-mesh-slide .container {
    position: relative;
    z-index: 3; 
}

/* Enhance button visibility over the neural mesh */
.neural-mesh-slide .btn {
    position: relative;
    z-index: 4;
}

/* Swiper controls should be above everything */
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
    z-index: 5 !important;
}

/* Updated style for text with our Why Choose colors */
.neural-mesh-slide .hero-subtitle {
    color: #0157ff; /* Primary blue */
}

.neural-mesh-slide .hero-title {
    background: linear-gradient(135deg, #0157ff, #ff113b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    z-index: 3;
}

.neural-mesh-slide .hero-description {
    color: var(--neutral-700);
}

/* Create stacking context for hero section */
.hero {
    position: relative;
    z-index: 1;
}

/* Set z-index for hero swiper */
.hero-swiper {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
            .vanta-container{
                display: none !important;
            }
        }
        
        @media (max-width: 480px) {
            .vanta-container{
                display: none !important;
            }
            
        }