* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background-color: #030915;
    color: #ffffff;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    line-height: 1.6;
    font-size: 16px;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(5,124,248,0.09)1px,transparent 1px),linear-gradient(90deg,rgba(5,124,248,0.09)1px,transparent 1px),linear-gradient(rgba(5,124,248,0.14)2px,transparent 2px),linear-gradient(90deg,rgba(5,124,248,0.14)2px,transparent 2px),radial-gradient(circle at 0 0,rgba(5,124,248,0.17)1px,transparent 1px);
    background-size: 50px 50px,50px 50px,250px 250px,250px 250px,100px 100px;
    pointer-events: none;
    z-index: 0;
    opacity: 1
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 20% 30%,rgba(5,124,248,0.19)1.5px,transparent 1.5px),radial-gradient(circle at 80% 70%,rgba(0,194,255,0.19)1.5px,transparent 1.5px),radial-gradient(circle at 50% 50%,rgba(5,124,248,0.16)1.2px,transparent 1.2px),radial-gradient(circle at 10% 80%,rgba(0,194,255,0.18)1.5px,transparent 1.5px),radial-gradient(circle at 90% 20%,rgba(5,124,248,0.16)1.2px,transparent 1.2px),radial-gradient(circle at 30% 60%,rgba(0,194,255,0.15)1.2px,transparent 1.2px),radial-gradient(circle at 70% 40%,rgba(5,124,248,0.15)1.2px,transparent 1.2px),radial-gradient(circle at 15% 45%,rgba(0,194,255,0.14)1px,transparent 1px),radial-gradient(circle at 85% 55%,rgba(5,124,248,0.14)1px,transparent 1px),linear-gradient(90deg,transparent 0%,rgba(5,124,248,0.09)50%,transparent 100%),linear-gradient(0deg,transparent 0%,rgba(0,194,255,0.09)50%,transparent 100%),linear-gradient(45deg,transparent 0%,rgba(5,124,248,0.07)50%,transparent 100%),linear-gradient(-45deg,transparent 0%,rgba(0,194,255,0.07)50%,transparent 100%);
    background-size: 200px 200px,150px 150px,300px 300px,180px 180px,220px 220px,250px 250px,170px 170px,120px 120px,140px 140px,100% 2px,2px 100%,200% 2px,200% 2px;
    background-position: 0 0,50px 50px,100px 100px,150px 150px,200px 200px,75px 75px,125px 125px,30px 30px,60px 60px,0 20%,20% 0,0 0,0 0;
    pointer-events: none;
    z-index: 0;
    animation: particleMove 30s linear infinite,lineGlow 4s ease-in-out infinite alternate
}

@keyframes lineGlow {
    0% {
        opacity: 0.6
    }

    100% {
        opacity: 0.75
    }
}

@keyframes particleMove {
    0% {
        background-position: 0 0,50px 50px,100px 100px,150px 150px,200px 200px,75px 75px,125px 125px,30px 30px,60px 60px,0 20%,20% 0,0 0,0 0
    }

    100% {
        background-position: 200px 200px,250px 250px,300px 300px,350px 350px,400px 400px,275px 275px,325px 325px,230px 230px,260px 260px,0 20%,20% 0,100% 100%,100% 100%
    }
}

main,header {
    position: relative;
    z-index: 1
}

@media(max-width: 991px) {
    h1 {
        font-size:42px !important
    }

    h2 {
        font-size: 36px !important
    }

    #gallery {
        grid-template-columns: repeat(2,1fr)!important
    }

    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important
    }

    .hero-grid>div:first-child {
        text-align: center !important
    }
}

@media(max-width: 767px) {
    h1 {
        font-size:32px !important
    }

    h2 {
        font-size: 28px !important
    }

    #gallery {
        grid-template-columns: 1fr !important
    }

    .stats-grid {
        grid-template-columns: repeat(2,1fr)!important
    }

    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important
    }

    #cases-gallery {
        grid-template-columns: 1fr !important
    }
}

@media(max-width: 478px) {
    h1 {
        font-size:24px !important
    }

    h2 {
        font-size: 22px !important
    }
}