/* 
.features .card {
  position: relative;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: visible !important;
  border-radius: 8px;
}

.features .card::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 3px solid;
  border-image: linear-gradient(45deg, #FFCC29, #AF2040, #E9258C, #009ACC, #00A659) 1;
  border-radius: 10px;
  animation: rotateBorder 4s linear infinite;
  z-index: 0;
  pointer-events: none;
}

#features-carousel {
  position: relative;
  overflow: visible !important;
}

#customCarousel {
  position: relative;
  overflow: visible !important;
}

#customCarousel::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 3px solid;
  border-image: linear-gradient(45deg, #00A659, #009ACC, #E9258C, #AF2040, #FFCC29) 1;
  border-radius: 12px;
  animation: rotateBorder 4s linear infinite reverse;
  z-index: 0;
  pointer-events: none;
}

@keyframes rotateBorder {
  0% {
    border-image-source: linear-gradient(45deg, #FFCC29, #AF2040, #E9258C, #009ACC, #00A659);
  }
  20% {
    border-image-source: linear-gradient(45deg, #AF2040, #E9258C, #009ACC, #00A659, #FFCC29);
  }
  40% {
    border-image-source: linear-gradient(45deg, #E9258C, #009ACC, #00A659, #FFCC29, #AF2040);
  }
  60% {
    border-image-source: linear-gradient(45deg, #009ACC, #00A659, #FFCC29, #AF2040, #E9258C);
  }
  80% {
    border-image-source: linear-gradient(45deg, #00A659, #FFCC29, #AF2040, #E9258C, #009ACC);
  }
  100% {
    border-image-source: linear-gradient(45deg, #FFCC29, #AF2040, #E9258C, #009ACC, #00A659);
  }
}

@media (max-width: 768px) {
  .features .card::before,
  #customCarousel::before {
    border-width: 2px;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
  }
}

@media (max-width: 576px) {
  .features .card::before,
  #customCarousel::before {
    border-width: 1.5px;
    animation-duration: 6s;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .features .card::before,
  #customCarousel::before {
    animation: none;
    border-image: none;
    border-color: #FFCC29;
  }
}

.btn-borde-animado {
  background-color: white !important; 
  color: black !important; 
  border: none !important; 
  position: relative;
  border-radius: 25px;
  padding: 0.5rem 1.5rem;
  z-index: 1;
  font-weight: 300;
  transition: all 0.3s ease;
}

.btn-borde-animado::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 3px solid transparent;
  border-radius: 10px;
  background: 
    linear-gradient(white, white) padding-box, 
    linear-gradient(45deg, #FFCC29, #AF2040, #E9258C, #009ACC, #00A659, #FFCC29) border-box;
  background-size: 400% 400%;
  z-index: -1;
  animation: rotateBorderColors 6s linear infinite;
  pointer-events: none;
}

@keyframes rotateBorderColors {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

@media (max-width: 576px) {
  .btn-borde-animado::after {
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-width: 2px;
  }
} */


.features .card {
  position: relative;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: visible !important;
  border-radius: 8px;
}

.features .card::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 3px solid;
  border-image: linear-gradient(45deg, #FFFF00, #FF0000, #FF00FF, #00FFFF, #00FF00) 1;
  border-radius: 10px;
  animation: rotateBorder 4s linear infinite;
  z-index: 0;
  pointer-events: none;
}

#features-carousel {
  position: relative;
  overflow: visible !important;
}

#customCarousel {
  position: relative;
  overflow: visible !important;
}

#customCarousel::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 3px solid;
  border-image: linear-gradient(45deg, #00FF00, #00FFFF, #FF00FF, #FF0000, #FFFF00) 1;
  border-radius: 12px;
  animation: rotateBorder 4s linear infinite reverse;
  z-index: 0;
  pointer-events: none;
}

@keyframes rotateBorder {
  0% {
    border-image-source: linear-gradient(45deg, #FFFF00, #FF0000, #FF00FF, #00FFFF, #00FF00);
  }
  20% {
    border-image-source: linear-gradient(45deg, #FF0000, #FF00FF, #00FFFF, #00FF00, #FFFF00);
  }
  40% {
    border-image-source: linear-gradient(45deg, #FF00FF, #00FFFF, #00FF00, #FFFF00, #FF0000);
  }
  60% {
    border-image-source: linear-gradient(45deg, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF);
  }
  80% {
    border-image-source: linear-gradient(45deg, #00FF00, #FFFF00, #FF0000, #FF00FF, #00FFFF);
  }
  100% {
    border-image-source: linear-gradient(45deg, #FFFF00, #FF0000, #FF00FF, #00FFFF, #00FF00);
  }
}

@media (max-width: 768px) {
  .features .card::before,
  #customCarousel::before {
    border-width: 2px;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
  }
}

@media (max-width: 576px) {
  .features .card::before,
  #customCarousel::before {
    border-width: 1.5px;
    animation-duration: 6s;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .features .card::before,
  #customCarousel::before {
    animation: none;
    border-image: none;
    border-color: #FFFF00;
  }
}

.btn-borde-animado {
  position: relative;
  color: black !important;
  border: none !important;
  border-radius: 25px;
  padding: 0.5rem 1.5rem;
  z-index: 1;
  font-weight: 600;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: backgroundColorCycle 10s linear infinite;
}

@keyframes backgroundColorCycle {
  0%   { background-color: #FFFF00; }
  20%  { background-color: #FF0000; }
  40%  { background-color: #FF00FF; }
  60%  { background-color: #00FFFF; }
  80%  { background-color: #00FF00; }
  100% { background-color: #FFFF00; }
}

@media (max-width: 576px) {
  .btn-borde-animado {
    padding: 0.4rem 1.2rem;
    animation-duration: 12s;
  }
}