/* Custom Icon System (replacing FontAwesome dependencies) */
.custom-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -0.125em;
}

.custom-icon-brain {
  background-image: url('../assets/icons/fa/brain.svg');
  filter: invert(39%) sepia(95%) saturate(1954%) hue-rotate(201deg) brightness(98%) contrast(98%); /* Blue color */
}

.custom-icon-check {
  background-image: url('../assets/icons/fa/check.svg');
  filter: invert(70%) sepia(76%) saturate(436%) hue-rotate(121deg) brightness(90%) contrast(89%); /* Turquoise color */
}

.custom-icon-code {
  background-image: url('../assets/icons/fa/code.svg');
  filter: invert(39%) sepia(95%) saturate(1954%) hue-rotate(201deg) brightness(98%) contrast(98%); /* Blue color */
}

.custom-icon-laptop-code {
  background-image: url('../assets/icons/fa/laptop-code.svg');
  filter: invert(39%) sepia(95%) saturate(1954%) hue-rotate(201deg) brightness(98%) contrast(98%); /* Blue color */
}

.custom-icon-magic {
  background-image: url('../assets/icons/fa/magic.svg');
  filter: invert(39%) sepia(95%) saturate(1954%) hue-rotate(201deg) brightness(98%) contrast(98%); /* Blue color */
}

.custom-icon-comments {
  background-image: url('../assets/icons/fa/comments.svg');
  filter: invert(39%) sepia(95%) saturate(1954%) hue-rotate(201deg) brightness(98%) contrast(98%); /* Blue color */
}

.custom-icon-play {
  background-image: url('../assets/icons/fa/play.svg');
}

.custom-icon-times {
  background-image: url('../assets/icons/fa/times.svg');
  filter: invert(45%) sepia(94%) saturate(7485%) hue-rotate(357deg) brightness(97%) contrast(106%); /* Red color */
}

.custom-icon-chevron-down {
  background-image: url('../assets/icons/fa/chevron-down.svg');
}

.custom-icon-plus {
  background-image: url('../assets/icons/fa/plus.svg');
}

/* Add custom styles to ensure the icons are properly colored */
.feature-list .custom-icon-check {
  filter: invert(70%) sepia(76%) saturate(436%) hue-rotate(121deg) brightness(90%) contrast(89%); /* Turquoise color */
}

.feature-included.custom-icon-check {
  filter: invert(55%) sepia(85%) saturate(453%) hue-rotate(109deg) brightness(96%) contrast(98%);
}

/* Revert play button color to white */
.play-overlay .custom-icon-play {
  filter: brightness(0) invert(1); /* White color */
}

/* Feature toggle styling */
.toggle .custom-icon-plus {
  transition: transform 0.3s ease;
}

.faq-item.active .toggle .custom-icon-plus {
  transform: rotate(45deg);
}

/* Play button styling */
.play-overlay .custom-icon-play {
  font-size: 3rem;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  transition: var(--transition);
  filter: brightness(0) invert(1);
}

.video-wrapper:hover .play-overlay .custom-icon-play {
  transform: scale(1.1);
  background-color: var(--primary-color);
}

/* Pricing list icon colors */
.key-features .custom-icon-check {
  filter: invert(70%) sepia(76%) saturate(436%) hue-rotate(121deg) brightness(90%) contrast(89%); /* Turquoise color */
}