/* Symptoms Section Styles - VW Based */
.symptoms-section {
  padding: 5vw 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: auto;
}

.symptoms-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  width: 100%;
}

.symptoms-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0vw;
  text-align: center;
  padding: 0 2vw;
}

.symptoms-title {
  font-family: "PloniMLv2AAA-Regular", sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color13); /* Pink #D25189 */
  margin: 0;
}

.symptoms-description {
  font-family: "PloniMaccabiMLv2AAA-Regular", sans-serif;
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color3); /* Blue #1E3C95 */
  margin: 0;
  max-width: 60vw;
}

.symptoms-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5vw 5vw;
  justify-content: center;
  align-items: center;
  padding: 1vw 0;
  width: 100%;
  box-sizing: border-box;
}

.symptom-card {
  display: flex;
  align-items: end;
  gap: 1vw;
  max-width: 20vw;
  flex-direction: row-reverse;
}

.symptom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.2vw;
  height: 4.2vw;
  min-width: 60px;
  min-height: 60px;
  flex-shrink: 0;
}

.symptom-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.symptom-text {
  flex: 1;
}

.symptom-text p {
  font-family: "PloniMaccabiMLv2AAA-Bold", sans-serif;
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: bold;
  line-height: 1.2;
  color: var(--color3); /* Blue #1E3C95 */
  margin: 0;
  text-align: right;
  width: 100%;
}

.symptoms-easy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vw;
  text-align: center;
  padding: 3vw 2vw;
  width: 100%;
  border-top: 0.05vw solid var(--color3);
  border-bottom: 0.05vw solid var(--color3);
}

.toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42vw;
  margin: 2vw auto;
  width: fit-content;
}

.toggle-label {
  font-family: "PloniMaccabiMLv2AAA-Regular", sans-serif;
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 400;
  color: var(--color3);
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-label.active {
  font-weight: 600;
  color: var(--color3);
}

.toggle-switch {
  position: relative;
  width: clamp(60px, 4.69vw, 90px);
  height: clamp(26px, 2.08vw, 40px);
  background-color: white;
  border: 1px solid var(--color3);
  border-radius: 3.125vw;
  padding: 0.31vw;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.toggle-switch.active {
  justify-content: flex-end;
}

.toggle-thumb {
  width: clamp(18px, 1.46vw, 28px);
  height: clamp(18px, 1.46vw, 28px);
  background-color: var(--color3);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 0.1vw 0.5vw rgba(30, 60, 149, 0.3);
}

.toggle-switch:hover .toggle-thumb {
  transform: scale(1.1);
  box-shadow: 0 0.2vw 0.8vw rgba(30, 60, 149, 0.4);
}

.toggle-switch:focus {
  outline: none;
  box-shadow: 0 0 0 0.2vw rgba(30, 60, 149, 0.2);
}
.animation-container {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .toggle-switch {
    position: relative;
    width: clamp(70px, 4.69vw, 90px);
    height: clamp(32px, 2.08vw, 40px);

    border-radius: 4.125vw;
  }
  .toggle-thumb {
    width: clamp(22px, 1.46vw, 28px);
    height: clamp(22px, 1.46vw, 28px);
  }
  .toggle-label {
    font-size: clamp(18px, 0.94vw, 18px);
  }
  .toggle-container {
    gap: 2.42vw;
  }
}