/* =========================================================
   PARTICLES.CSS
   HAZLO FACIL TRAVEL
========================================================= */

/* =========================================================
   PARTICLES CONTAINER
========================================================= */

#particles-js {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -1;

    pointer-events: none;

    overflow: hidden;

}

/* =========================================================
   PARTICLE OVERLAY
========================================================= */

#particles-js::before {

    content: '';

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.02),
            transparent 70%
        );

    pointer-events: none;

}

/* =========================================================
   PARTICLE LIGHT FX
========================================================= */

.particle-light {

    position: absolute;

    border-radius: 50%;

    filter:
        blur(60px);

    opacity: .18;

    animation:
        particleFloat 8s ease-in-out infinite;

}

.particle-light.blue {

    width: 280px;
    height: 280px;

    background:
        rgba(90,168,255,.35);

    top: 10%;
    left: 5%;

}

.particle-light.red {

    width: 320px;
    height: 320px;

    background:
        rgba(255,47,91,.25);

    bottom: 10%;
    right: 8%;

}

.particle-light.purple {

    width: 260px;
    height: 260px;

    background:
        rgba(92,23,255,.28);

    top: 45%;
    left: 50%;

    transform:
        translate(-50%, -50%);

}

/* =========================================================
   FLOATING DOTS
========================================================= */

.floating-dots {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}

.floating-dots span {

    position: absolute;

    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.18);

    animation:
        particleFloat 12s linear infinite;

}

/* =========================================================
   DOT POSITIONS
========================================================= */

.floating-dots span:nth-child(1){

    top: 10%;
    left: 20%;

    animation-duration: 10s;

}

.floating-dots span:nth-child(2){

    top: 30%;
    left: 80%;

    animation-duration: 14s;

}

.floating-dots span:nth-child(3){

    top: 60%;
    left: 15%;

    animation-duration: 11s;

}

.floating-dots span:nth-child(4){

    top: 80%;
    left: 70%;

    animation-duration: 16s;

}

.floating-dots span:nth-child(5){

    top: 45%;
    left: 45%;

    animation-duration: 13s;

}

.floating-dots span:nth-child(6){

    top: 15%;
    left: 60%;

    animation-duration: 15s;

}

.floating-dots span:nth-child(7){

    top: 75%;
    left: 35%;

    animation-duration: 12s;

}

.floating-dots span:nth-child(8){

    top: 55%;
    left: 90%;

    animation-duration: 18s;

}

/* =========================================================
   PARTICLE GRID
========================================================= */

.particle-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.015) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.015) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    opacity: .35;

}

/* =========================================================
   ANIMATED GLOW
========================================================= */

.particle-glow {

    position: absolute;

    border-radius: 50%;

    filter:
        blur(100px);

    opacity: .18;

    animation:
        glowPulse 6s ease-in-out infinite;

}

.particle-glow.one {

    width: 500px;
    height: 500px;

    top: -120px;
    left: -120px;

    background:
        rgba(90,168,255,.22);

}

.particle-glow.two {

    width: 450px;
    height: 450px;

    bottom: -100px;
    right: -100px;

    background:
        rgba(255,47,91,.18);

}

/* =========================================================
   MOVING LINES
========================================================= */

.moving-line {

    position: absolute;

    width: 200px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    opacity: .4;

}

.moving-line.one {

    top: 20%;
    left: -200px;

    animation:
        airplaneTrail 8s linear infinite;

}

.moving-line.two {

    bottom: 25%;
    right: -200px;

    animation:
        airplaneTrail 10s linear infinite reverse;

}

/* =========================================================
   NOISE EFFECT
========================================================= */

.noise-overlay {

    position: absolute;

    inset: 0;

    opacity: .02;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='2' cy='2' r='2'/%3E%3C/g%3E%3C/svg%3E");

    pointer-events: none;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:768px){

    .particle-light.blue {

        width: 180px;
        height: 180px;

    }

    .particle-light.red {

        width: 220px;
        height: 220px;

    }

    .particle-light.purple {

        width: 160px;
        height: 160px;

    }

    .particle-grid {

        background-size:
            35px 35px;

    }

}

@media(max-width:576px){

    .particle-grid {

        opacity: .18;

    }

    .moving-line {

        display: none;

    }

    .floating-dots span {

        width: 4px;
        height: 4px;

    }

}