.nav-active {
  font-weight: 600;
  color: #0077c0 !important;
  background: rgba(186, 197, 0, 0.4) !important;
}

.carousel-dot.active {
  background-color: #0077c0 !important; /* primary color */
  transform: scale(1.4);
  box-shadow: 0 0 0 3px rgba(0, 119, 192, 0.2);
}

.carousel-dot {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* spring-like feel */
}

/* Optional: subtle pulse on active dot */
.carousel-dot.active {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1.4);
  }
  50% {
    transform: scale(1.45);
  }
}

/* Force scroll on the container that holds the HubSpot iframe */
#hubspot-form-container {
  overflow-y: scroll !important; /* use scroll instead of auto sometimes helps */
  -webkit-overflow-scrolling: touch !important;
  max-height: 65vh !important; /* or 70vh / 500px — adjust so it needs to scroll */
  min-height: 300px;
  touch-action: manipulation; /* helps iOS touch sometimes */
}

/* Make sure modal itself scrolls if needed */
#contact-modal {
  max-height: 90vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Target the iframe directly if possible (after load) */
iframe[src*="hsforms.net"] {
  width: 100% !important;
  height: 100% !important;
  border: none;
  overflow: auto !important; /* rare but sometimes needed */
}