/* Desktop */
@media screen and (min-width: 1024px) {
  .text h1 {
    font-size: calc(1rem + 4vw);
  }

  .text p {
    font-size: 1.6rem;
  }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .text h1 {
    font-size: 2rem;
  }

  .text p {
    font-size: 1.2rem;
  }

  .garage-door-wrapper {
    flex: 0 0 50%;
    text-align: center;
  }

  /* counter */

  




.counter:not(2)::before{
 display: none;

}
/* end of counter */
}

/* Mobile */
@media screen and (max-width: 767px) {
  .hero {
    flex-direction: column;
    text-align: center;
   min-height: 100vh;
  }

  .content {
    flex-direction: column;
  }

  .text {
    width: 100%;
    padding: 0rem;
  }

  .text h1 {
    margin-top: 5%;
    font-size: 1.2rem;
  }

  .text p {
    font-size: 1rem !important;
  }

  .garage-door-wrapper {
    flex: 0 0 100%;
    margin-top: 1rem;
    text-align: center;
  }

  .circle-small {
    bottom: 2rem;
    right: 2rem;
  }

  /* counter */

  
  .counters > div{
    
    row-gap: 5em;
  
  }
  
  
  
  .counter:not(:last-child)::before{
    width: 90%;
    height: 2px;
    top: initial;
    right: initial;
    bottom: -3em;
    left: 50%;
    transform: translateX(-50%);
  
  }
/* end of counter */


}