/* Service Details Card*/
.equal-height {
    min-height: 350px; /* Adjust as needed */
    max-height: 350px;
    display: flex;
    flex-direction: column;
}


/* Scrollable body */
.equal-height .card-body {
    overflow-y: auto;
    flex-grow: 1;
}


/* Scrollable body */
@media (max-width: 992px) {
    .equal-height {
        min-height: 300px;
        max-height: 320px;
    }
}



/* Accessibility */
a:focus {
    outline: none;
}


/* Compact header */
.card-header {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
     border-bottom: none !important;
}

.card:hover {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}




/* Mobile view: Set button width to 100% or a fixed value */
@media (max-width: 767px) {
    .custom-mobile-btn {
        width: 200px; /* Full width */
        /* OR */
        /* width: 200px; Fixed width */
    }
}






/* --- Status Badge Styling --- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  background-color: #0f172a;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 255, 100, 0.3);
}

/* --- Status Dot --- */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
}

/* --- Active (Uptime style pulse effect) --- */
.status-badge.active .status-dot {
  background-color: #22c55e;

  animation: pulseGreen 1.5s infinite;
}

/* --- Inactive (Red glow) --- */
.status-badge.inactive .status-dot {
  background-color: #dc2626;
  box-shadow: 0 0 8px #dc2626;
  animation: pulseRed 2s infinite;
}

/* --- Pulse Animations --- */
@keyframes pulseGreen {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px 2px rgba(34, 197, 94, 0.6);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 20px 6px rgba(34, 197, 94, 0.4);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px 2px rgba(34, 197, 94, 0.6);
  }
}

@keyframes pulseRed {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px 2px rgba(220, 38, 38, 0.6);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 20px 6px rgba(220, 38, 38, 0.4);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px 2px rgba(220, 38, 38, 0.6);
  }
}