.custom-list {
  list-style: none;
  margin: 0;
  padding-bottom: 24px;
}

.custom-list ul:not(.custom-list-description ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.custom-list .custom-list-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
  gap: 16px;
}

.custom-list .custom-list-item:last-child {
  margin-bottom: 0;
}

.custom-list .custom-list-icon {
  flex-shrink: 0;
  margin-top: 4px;
}

.custom-list .custom-list-bullet {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4px;
}

.custom-list .custom-list-bullet img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.custom-list .custom-list-bullet picture {
  width: 100%;
  height: 100%;
  display: flex;
}

.custom-list .custom-list-bullet .icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-list .custom-list-bullet .icon svg,
.custom-list .custom-list-bullet .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Default bullet style when no image is provided */
.custom-list .custom-list-bullet:empty::before {
  content: "";
  width: 32px;
  height: 32px;
  display: block;
  background-image: url("../../icons/Group210.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.custom-list .custom-list-content {
  flex: 1;
}

.custom-list .custom-list-title {
  margin: 0 0 8px 0;
  font-size: var(--size-18);
  font-weight: 700;
  color: var(--text-color);
}

.custom-list .custom-list-description {
  margin: 0;
  color: var(--text-color);
  line-height:var(--paragraph-large-line-height);
}

.custom-list p {
    color: var(--text-color);
    line-height: var(--paragraph-large-line-height);
    padding-left: 46px;
    padding-top: 0px;
    margin-top: -10px;
    margin-bottom: var(--size-24);
}
.custom-list .custom-list-content p{
    padding-left: 0;
}
.custom-list .custom-list-description p {
  margin: 0;
}

/* Responsive adjustments */
@media (width < 600px) {
  .custom-list .custom-list-item {
    gap: 12px;
    margin-bottom: var(--size-24);
  }
  
  .custom-list .custom-list-bullet {
    width: 28px;
    height: 28px;
  }
  
  .custom-list .custom-list-bullet .icon {
    width: 28px;
    height: 28px;
  }
  
  .custom-list .custom-list-title {
    font-size: var(--heading-font-size-xs);
  }
}