/** Start benefits list CSS Property **/
.benefits-details-list:not(.is_dark) {
  padding: var(--padding-tb-small) 0;
}


.benefits-details-list .row .row {
  row-gap: 1.5rem;
  margin-top: var(--space-48);
  margin-bottom: var(--space-48);
}

.benefits-details-list:not(.is_dark) .benefit-item {
  padding: 24px;
  background: var(--gradient-05);
  border-radius: 16px;
  height: 100%;
}

.benefits-details-list:not(.is_dark) .benefit-item img {
  margin-bottom: 30px;
}

.benefits-details-list:not(.is_dark) .benefit-item .benefit-title {
  margin-bottom: 30px;
}

/** End benefits list CSS Property **/

/* Dark Mode */
.benefits-details-list.is_dark {
  padding: var(--padding-tb-medium) 0;
  background-color: var(--dark-color);
  background-image: url('./../../assets/images/nh-why-ng-bg.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.benefits-details-list.is_dark .row .p-md-0 {
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5) !important;
  padding-left: calc(var(--bs-gutter-x) * .5) !important;
}

.benefits-details-list.is_dark :where(h1, h2, h3, h4, h5, h6, p, li) {
  color: var(--white-color);
}

.benefits-details-list.is_dark .benefit-item {
  position: relative;
  display: block;
  min-height: 100%;
  text-decoration: none;
  border-radius: 16px;
  padding: 1rem;
  padding-bottom: .5rem;
  border: 1px solid rgba(255, 255, 255, 0.239);
  transition: var(--td-3s);
  overflow: hidden;
}

.benefits-details-list.is_dark .benefit-item::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gradient-04);
  border-radius: 50%;
  filter: blur(50px);
  /* opacity: 0; */
  pointer-events: none;
  transition: var(--td);
  z-index: -1;
}

.benefits-details-list.is_dark .benefit-item:hover::after {
  width: 100%;
  height: 100%;
  opacity: 0.2;
  border-radius: 0;
}

.benefits-details-list.is_dark .benefit-item:hover {
  border-color: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(1px);
}

.benefits-details-list.is_dark .benefit-item h5 {
  transition: var(--td);
}

.benefits-details-list.is_dark .benefit-item:hover h5 {
  color: var(--hot-pink-color);
}

.benefits-details-list.is_dark .benefit-item img {
  width: 77px;
  max-height: 76px;
  margin-bottom: 1.5rem;
}