@charset "UTF-8";
/* CSS Document */

/* SLIDE SHOW FROM FINE DIET */

.wrapper-tips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 900px;
  width: 90%;
  margin: auto;
  padding: 140px 15px 0 15px;
}
	

.number-circle {
  display: flex;
  justify-content: center;   /* centers horizontally */
  align-items: center;       /* centers vertically */
  width: 30px;
  height: 30px;
  border: 2px solid black;
  border-radius: 50%;
  margin: auto;
  font-family: 'mixerato';
  font-size: 22px;
}


.tips-slider {
  position: relative;
  max-width: 900px;
  margin: auto;
  overflow: hidden;
  padding: 2rem 1rem;
  text-align: center;
}

.tips-slide-track {
  display: flex;
 /* gap: 20px;*/
  transition: transform 0.4s ease;
}

.tips-slide {
  flex: 1 2 25%;
  box-sizing: border-box;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* ensure all slides match height of tallest slide */
  min-height: 190px;
}


.tips-slide-inputs {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 1rem;
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}


.number-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 2px solid #000;
  border-radius: 50%;
  font-family: 'mixerato';
  font-size: 20px;
  margin-bottom: 0.5rem;
}

.tips-nav {
  display: flex;
  justify-content: center;
  gap: 50%;
  margin-top: 1.5rem;
}

.tips-nav button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

@media (max-width: 600px) {
  .tips-slide { flex: 0 0 calc((100% - 20px) / 1.5); }
  .tips-nav { gap: 50%; }
  .tips-slide-track {
    gap: 20px;
  }
}



/* 3. Two slides on mid‑size screens */
@media (min-width: 600px) {
  .tips-slide {
    flex: 0 0 calc((110% - 20px) / 2);
  }
  .tips-slide-inputs {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

/* 4. Three slides at ≥1000px */
@media (min-width: 1000px) {
  .tips-slide-inputs {
    flex: 0 0 calc((100% - 2 * 20px) / 3);
  }
}

/* 5. Constrain the paragraph width inside each slide */
.tips-slide-inputs p {
  max-width: 250px;    /* tweak this value as needed */
  margin: 0.5rem 0 0;  /* gives a little top spacing */
  text-align: center;
}