/* Circular Progress Bar Styles */
.progress-bar svg {
    position: relative;
    width: 200px;
    height: 200px;
    z-index: 1000;
  }
  .progress-bar svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transform: translate(5px, 5px);
  }
  .percent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: transparent;
    z-index: 1000;
    margin: 0 auto;
  }
  .percent .number {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #000;
  }
  .percent .number h2 {
    font-weight: 700;
    font-size: 40px;
    transition: 0.5s;
    margin: 0;
  }
   
  
  /*  Sliders for  weights */
  .custom-slider {
      appearance: none;           /* Standard syntax */
      -webkit-appearance: none;   /* For older iOS/Safari versions */
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      transition: opacity .2s;
  }
  
  .custom-slider:focus {
      outline: none;
      box-shadow: 0 0 5px #3264fe;  /* Adds a glow effect around the slider when focused */
  }
  
  .custom-slider:hover,
  .custom-slider:active {
      opacity: 1;  /* Ensure full opacity when interacting */
  }
  
  .custom-slider::-webkit-slider-thumb {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #3264fe;
      cursor: pointer;
      transition: background-color .2s;  /* Smooth background color transition */
  }
  
  .custom-slider:hover::-webkit-slider-thumb,
  .custom-slider:active::-webkit-slider-thumb {
      background: #204ebf;  /* Darker blue when interacting */
  }
  
  .custom-slider::-moz-range-thumb {
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #3264fe;
      cursor: pointer;
      transition: background-color .2s;  /* Smooth background color transition */
  }
  
  .custom-slider:hover::-moz-range-thumb,
  .custom-slider:active::-moz-range-thumb {
      background: #204ebf;  /* Darker blue when interacting */
  }
  
  .custom-slider .rc-slider-mark {
      display: none !important; /* Force hiding the slider labels */
  }


/* Accordion Container for textpulse */
.custom-accordion-container {
    width: 66.67%; /* 2/3 of the width */
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px; /* Optional: To add some margin at the top */
    margin-bottom: 20px; /* Optional: To add some margin at the bottom */
}

@media (max-width: 768px) {
    .custom-accordion-container {
        width: 100%; /* Full width on mobile displays */
        padding-left: 10px;
        padding-right: 10px;
    }
}