﻿/* Home Section Start  */

/* Hide elements on mobile */
@media (max-width: 639px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* Effects layer styling */
.effects-layer {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 1500 !important;
}

/* Particles — made a bit larger and more visible by default */
.particle {
    position: absolute !important;
    border-radius: 50% !important;
    background: rgba(34, 211, 238, 0.18) !important; /* stronger alpha */
    will-change: transform, opacity !important;
    width: 8px !important;
    height: 8px !important;
    opacity: 0; /* initially hidden */
    transform: translate3d(0, 0, 0) !important; /* GPU-friendly */
}

/* Geometric shapes */
.geometric-shape {
    position: absolute !important;
    border: 1.6px solid rgba(34, 211, 238, 0.65) !important;
    border-radius: 8px !important;
    will-change: transform, opacity !important;
    opacity: 0.95 !important;
    box-shadow: 0 6px 24px rgba(34, 211, 238, 0.06) !important;
    background: transparent !important;
}

/* Glow lines (left-right) */
.glow-line {
    position: absolute !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55), transparent) !important;
    will-change: transform, opacity !important;
    opacity: 0.85 !important;
}

/* Content layer above effects */
.hero-content-z {
    z-index: 2000 !important;
    position: relative;
}

/* Hide heavy effects on small screens */
@media (max-width: 640px) {
    .effects-layer {
        display: none !important;
    }
}

/* --- Fade-in animation --- */
.fade-in-up {
    animation: fadeInUp 1.3s ease-out both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


#contact {
    scroll-margin-top: 30px;
}
/* set to header height */
html {
    scroll-behavior: smooth;
}


