/* =======================
   CHEVRON ARROW FIX
   ======================= */

/* Fix for the missing chevron-css-arrow */
.chevron-css-arrow {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

/* Create the actual chevron arrow using CSS */
.chevron-css-arrow::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -75%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-bottom: 3px solid rgba(255, 255, 255, 0.8);
  border-right: 3px solid rgba(255, 255, 255, 0.8);
  animation: bounceChevron 2s infinite;
  transition: all 0.3s ease;
}

/* Hover effect */
.scroll-chevron:hover .chevron-css-arrow::after {
  border-color: #3b82f6;
  transform: translate(-50%, -75%) rotate(45deg) scale(1.2);
  filter: drop-shadow(0 4px 20px rgba(59, 130, 246, 0.4));
}

/* Bounce animation for the chevron */
@keyframes bounceChevron {
  0%, 20%, 50%, 80%, 100% {
    transform: translate(-50%, -75%) rotate(45deg) translateY(0);
  }
  40% {
    transform: translate(-50%, -75%) rotate(45deg) translateY(-6px);
  }
  60% {
    transform: translate(-50%, -75%) rotate(45deg) translateY(-3px);
  }
}

/* Alternative: Use a FontAwesome icon if the above doesn't work */
.chevron-css-arrow.use-icon {
  font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.8);
  animation: bounce 2s infinite;
  transition: all 0.3s ease;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.chevron-css-arrow.use-icon::after {
  content: '\f078'; /* FontAwesome chevron-down */
  display: inline-block;
  position: relative;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .chevron-css-arrow {
    width: 20px;
    height: 20px;
  }
  
  .chevron-css-arrow::after {
    width: 10px;
    height: 10px;
    border-width: 2px;
  }
  
  .chevron-css-arrow.use-icon {
    font-size: 2rem;
  }
}

@media (max-width: 576px) {
  .chevron-css-arrow {
    width: 18px;
    height: 18px;
  }
  
  .chevron-css-arrow::after {
    width: 8px;
    height: 8px;
    border-width: 2px;
  }
  
  .chevron-css-arrow.use-icon {
    font-size: 1.8rem;
  }
}

/* Fallback for scroll-top arrow */
.scroll-top-arrow {
  font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-size: 18px;
  color: #ffffff;
}

.scroll-top-arrow::after {
  content: '\f077'; /* FontAwesome chevron-up */
  display: inline-block;
}