/* Chatbot Styles */
#chatbot-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #49b649;
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 99999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
#chatbot-toggle:hover {
  background: #398440;
}

#chatbot-widget {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 350px;
  height: 500px;
  display: none;
  z-index: 99999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;
}

#chatbot-widget.active {
  display: block;
}
#chatbot-widget iframe {
  width: 100%;
  height: 100%;
  border: none;
}
@media (max-width: 400px) {
  #chatbot-widget {
    right: 10px;
    width: calc(100vw - 20px); /* full width minus small margin */
    max-width: 350px;
    height: 90vh;
    bottom: 80px; /* adjusted to prevent overlap with toggle */
  }
}
@media (max-width: 400px) {
  #chatbot-toggle {
    right: 10px;
    bottom: 10px;
  }
}

/* Scrolling Logos */
@keyframes logo-scroll {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-logo-scroll {
  animation: logo-scroll 60s linear infinite;
  will-change: transform;
}

/* Video Background */
#hero-video-bg {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
#hero-video-bg.loaded {
  opacity: 0.45; /* or 1 if preferred */
}

#services {
  scroll-margin-top: 120px;
}

.glow-line {
  transition: filter 0.3s ease;
}

.glow-line:hover {
  filter: drop-shadow(0 0 6px #4ab749) drop-shadow(0 0 12px #4ab749);
}

.glow-line {
  transition: stroke 0.3s ease, filter 0.3s ease;
  pointer-events: none;
  stroke: #4ab749;
}

/* Trigger glow when hovering the icon */
#icon-email:hover ~ svg [data-from="icon-email"],
#icon-phone:hover ~ svg [data-from="icon-phone"],
#icon-inspection:hover ~ svg [data-from="icon-inspection"],
#icon-chat:hover ~ svg [data-from="icon-chat"],
#icon-qr:hover ~ svg [data-from="icon-qr"],
#icon-text:hover ~ svg [data-from="icon-text"],
#icon-notes:hover ~ svg [data-from="icon-notes"],
#icon-calendar:hover ~ svg [data-from="icon-calendar"] {
  stroke: #6ee7b7;
  filter: drop-shadow(0 0 6px #6ee7b7) drop-shadow(0 0 12px #6ee7b7);
}

.glow-line.hovered {
  filter: drop-shadow(0 0 6px #10b981) drop-shadow(0 0 12px #10b981);
  stroke-width: 3;
  transition: filter 0.3s ease, stroke 0.3s ease;
}

#icon-center:hover ~ svg .glow-line {
  stroke: #6ee7b7;
  filter: drop-shadow(0 0 6px #6ee7b7) drop-shadow(0 0 12px #6ee7b7);
  stroke-width: 3;
}

/* blinking cursor */

  .blinking-cursor {
    display: inline-block;
    margin-left: 2px;
    color: #525252; /* orange-500 */
    animation: blink 1s step-start infinite;
    font-weight: bold;
  }

  @keyframes blink {
    50% { opacity: 0; }
  }

.prompt-image-pop {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .prompt-image-pop.active {
    opacity: 1;
    transform: scale(1);
  }

  .blinking-cursor {
    display: inline-block;
    margin-left: 2px;
    color: #4ab749;
    animation: blink 1s step-start infinite;
    font-weight: bold;
  }

  @keyframes blink {
    50% { opacity: 0; }
  }

  /* Fading class */
.fade {
  transition: opacity 0.4s ease;
}

.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
}


/* Make the section relative so the SVG pins correctly */
#arrowSection {
  position: relative;
}

/* SVG now covers the section perfectly */
#arrow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}



