.accordion {
  @apply bg-white text-primary-600 p-4 lg:p-6 rounded-xl lg:rounded-lg font-sans-Anek h-fit;

  &__heading {
    @apply flex items-center cursor-pointer gap-4 transition-all duration-300 font-medium;
    i {
      @apply w-9 h-9 text-2xl lg:w-10 lg:h-10 flex items-center justify-center  bg-primary-200 rounded-full text-white;
    }
  }

  &__title {
    @apply text-lg lg:text-2xl;
  }

  &__content {
    @apply transition-all duration-300 overflow-hidden max-h-0 lg:text-lg;

    a {
      @apply hover:text-primary-300 font-medium transition-colors duration-300;
    }
  }

  &__list {
    li {
      @apply before:content-['-'] before:mr-1;
    }
  }

  &.active {
    .accordion__content {
      @apply max-h-[700px] pt-2;
    }
    .accordion__heading {
      @apply transition-all duration-300;
      i {
        @apply rotate-180;
      }
    }
  }
}