/*meu código css proprio*/

.slider-wrapper {
  margin: 0 auto;
}

.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow: hidden;
}

.slider img {
  /*no tailwind vou definir a imagem para telas de computador, vou precisar criar novos designs*/
  scroll-snap-align: start;
}

.nav-slider {
  display: flex;
  column-gap: 1rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.nav-slider a {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.75;
  transition: opacity ease 250ms;
}

.nav-slider a:hover {
  opacity: 1;
}

.whats-app,
.whats-app * {
  box-sizing: border-box;
}
.whats-app {
  background: linear-gradient(
    0deg,
    rgba(32, 176, 56, 1) 0%,
    rgba(96, 214, 106, 1) 100%
  );
  border-radius: 400px;
  width: 34px;
  height: 34px;
  position: relative;
  overflow: hidden;
}
.group {
  width: 60.66%;
  height: 60.66%;
  position: absolute;
  right: 19.67%;
  left: 19.67%;
  bottom: 20.91%;
  top: 18.43%;
  overflow: visible;
}