/* for particles js */

/* =========================
   HERO PARTICLES
========================= */

.hero-particles {
  position: relative;
  overflow: hidden;
  background: url('frontend/assets/sb.jpg') center center / cover no-repeat;
}

/* Background layer containing particles */
/* .particles-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
} */

/* tsParticles container */
#tsparticles {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Force the generated canvas to stay inside the section */
#tsparticles canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

/* Dark overlay */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 2;
  pointer-events: none;
}

/* Main content */
.hero-content {
  position: relative;
  z-index: 5;
}

/* Decorative circles */
.particle-shape {
  z-index: 6 !important;
}

/* =========================
 IMPORTANT
 Remove any old canvas rules
========================= */

/*
DELETE THESE IF THEY EXIST ANYWHERE:

canvas {
  width: 100vw;
  height: 100vh;
}

canvas {
  position: fixed;
}

.tsparticles-canvas-el {
  width: 100vw;
  height: 100vh;
}
*/

  /* for particles js */