[data-carousel-slide-to] {
    @apply w-3 h-3 bg-gray-300 rounded-full transition-all;
  }

  [data-carousel-slide-to][aria-current="true"] {
    @apply bg-red-600! scale-125;
  }

.product-shadow{
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);

}



  @font-face {
    font-family: 'avenir';
    src: url('../assets/fonts/AvenirRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

  .padding-root{
    padding-top: 3rem;
  }

nav{
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);

}

body{
  font-family: 'avenir', sans-serif;
}

  .active{
    border: 3px solid #002EC7;
  }

  main{
    margin-top:6rem;

}

  .text-percorso{
    font-size: 0.6rem;
  }


  .nav{
    position: fixed;
  }


  .product-section img:hover{
    filter: brightness(90%);

  }

  .banner-product{
    height: 20px;
  }

/* Mobile first */


/* md breakpoint */
@media (min-width: 768px) {
  .gap-footer{
    gap: 2rem;
  }

    .padding-root{
    padding-top: 0;
    }

  .contatti-email{
    font-size: 16px;
  }


.padding-main{
  padding-left:3rem ;
  padding-right: 3rem;


}

  .banner-product{
    height: 35px;
  }

    main{
    margin-top:8rem;

  }

  .image-card{
    height: 160px;
  }

  .map-breakpoints{
    width: 300px;
  }

  .product-text{
    font-size: 16px;
  }
  /* .nav{

    padding-bottom: 1rem;

  }; */
  .icon-product{
    width:150px
  }


  .banner-product{
    width: 125px;
  }

  .text-percorso{
    font-size: 1rem;
  }

  .logo-nav{

   width: 15rem;

  }

  .product-container{
    width: 50%;
  }

  .info-container{
    width: 50%;
  }

  .card-contatti{
    height: 490px;
    gap:1rem
  }

}

/* lg breakpoint */
@media (min-width: 1024px) {

  .banner-product{
    height: 35px;
  }



   .map-breakpoints{
    width: 360px;
  }

  .form-contatti{
    width: 30rem;
  }
  .card-contatti{
    width: 30rem;
  }

  .text-percorso{
    font-size: 1rem;
  }

    .gap-footer{
    gap: 4rem;
  }

   .image-card{
    width: 180px;
    height: 190px;
  }


}
@media (min-width: 1440px) {



   .map-breakpoints{
    width: 500px;
  }

  .icon-product{
    width:160px
  }


   .image-card{
    width: 226px;
    height: 260px;
  }


}