:root {
  --bg-color: #fff;
  --main-color: #fafafa;
  --accent-color: #119911;
  --light-text: #fff;
  --dark-text: #000;
  --nav-bg-color: #555;
  --nav-hover-color: #f1f1f1;
  --filter-white: brightness(0) saturate(100%) invert(100%) sepia(0%)
    saturate(7492%) hue-rotate(337deg) brightness(109%) contrast(102%);
}

.acc-container {
  width: 100%;
}

.acc-container .show .acc-btn .acc-arrow {
 transform: rotate(90deg);
  transition: transform 0.3s ease-in;
}

.acc-container .show .acc-hide {
 max-height: 500px;
 padding-top: 0.5rem;
  opacity: 1;
  transition: max-height 0.3s ease-in, opacity 0.4s ease-in;
}

.acc-btn {
  width: 100%;
}

.acc-arrow {
 
  width: 10px;
  margin-left: auto;
  vertical-align: middle;
  transition: transform 0.3s ease-in;
}

.acc-arrow.rotate {
  transform: rotate(90deg);
  transition: transform 0.3s ease-in;
}

.rotate {
  transform: rotate(90deg);
  transition: transform 0.3s ease-in;
}

.acc-hide {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height  0.3s ease-in, opacity 0.3s ease-in;
}

.acc-show {
 max-height: 500px;
 padding-top: 0.5rem;
  opacity: 1;
  transition: max-height 0.3s ease-in, opacity 0.4s ease-in;
}