/* Stats */

.stats {

    padding-top: 100px;

    animation: slideInFromBottom 1s ease-in;

  }

  

  .stats-heading {

    max-width: 500px;

    margin: auto;

  }

  

  .stats .grid h3 {

    font-size: 35px;

  }

  

  .stats .grid p {

    font-size: 20px;

    font-weight: bold;

  }

.tsparticles-canvas-el

{

  position: absolute;

  top: 0;

  background-color: var(--primary-color);

  z-index: -1;

}



/* Showcase */

.showcase {

  height: 400px;

  background-color: var(--primary-color);

  color: var(--light-color);

  position: relative;

}



.showcase h1 {

  font-size: 40px;

}



.showcase p {

  margin: 20px 0;

}



.showcase .grid {

  overflow: visible;

  grid-template-columns: 55% auto;

  gap: 30px;

}



.showcase-text {

  animation: slideInFromLeft 1s ease-in;

}



.showcase-form {

  position: relative;

  top: 60px;

  height: 350px;

  width: 400px;

  padding: 40px;

  z-index: 100;

  justify-self: flex-end;

  animation: slideInFromRight 1s ease-in;

}



.showcase-form .form-control {

  margin: 30px 0;

}



.showcase-form input[type='text'],

.showcase-form input[type='email'] {

  border: 0;

  border-bottom: 1px solid var(--default-text-color);

  width: 100%;

  padding: 3px;

  font-size: 16px;

  color: var(--dark-color);

  background-color: var(--light-background);

}



.showcase-form input:focus {

  outline: none;

}



.showcase::before,

.showcase::after {

  content: '';

  position: absolute;

  height: 100px;

  bottom: -70px;

  right: 0;

  left: 0;

  background: var(--light-background);

  transform: skewY(-3deg);

  -webkit-transform: skewY(-3deg);

  -moz-transform: skewY(-3deg);

  -ms-transform: skewY(-3deg);

}



/* Tablets and under */

@media (max-width: 768px) {

  .grid,

  .showcase .grid,

  .stats .grid,

  .cli .grid,

  .cloud .grid,

  .features-main .grid,

  .docs-main .grid {

    grid-template-columns: 1fr;

    grid-template-rows: 1fr;

  }



  .showcase {

    height: auto;

  }



  .showcase-text {

    text-align: center;

    margin-top: 40px;

    animation: slideInFromTop 1s ease-in;

  }



  .showcase-form {

    justify-self: center;

    margin: auto;

    animation: slideInFromBottom 1s ease-in;

  }



  .cli .grid > *:first-child {

    grid-column: 1;

    grid-row: 1;

  }



  .features-head,

  .features-sub-head,

  .docs-head {

    text-align: center;

  }



  .features-head img,

  .features-sub-head img,

  .docs-head img {

    justify-self: center;

  }



  .features-main .grid > *:first-child,

  .features-main .grid > *:nth-child(2) {

    grid-column: 1;

  }

}



/* Mobile */

@media (max-width: 500px) {

  .navbar {

    height: 110px;

  }



  .navbar .flex {

    flex-direction: column;

  }



  .navbar ul {

    padding: 10px;

    background-color: rgba(0, 0, 0, 0.1);

  }

  

  .showcase-form {

    width: 300px;

  }

}


#tsparticles

{

  background-color: transparent;

}