:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
:root { font-family: 'Inter var', sans-serif; }
}
body{
    font-family: 'Inter', sans-serif;
}
.pt-16 {
    padding-top: 6rem !important;
}
.gradient-bg {
    width: 100%;
    height: 500px;
    background-image: url('/assets/images/hero_background.svg');
    background-size: cover;
    background-position: bottom;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.gradient-bg-short {
    width: 100%;
    height: 250px;
    background-image: url('/assets/images/hero_background.svg');
    background-size: cover;
    background-position: bottom;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .feature-card:hover .feature-icon {
        transform: scale(1.1);
    }

    .feature-icon {
        transition: transform 0.3s ease;
    }

    .checkout-container {
        min-height: 600px; /* Adjust as needed for your iframe */
    }

.timeline-container {
    padding-left: 20px;
    border-left: 2px solid #3B82F6;
    margin-left: 20px;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-dot {
    position: absolute;
    left: -28px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #3B82F6;
}

.network-diagram {
    background-image: url('/api/placeholder/1200/600');
    background-size: cover;
    background-position: center;
    min-height: 400px;
    border-radius: 0.5rem;
}

.network-point {
    position: relative;
    background-color: rgba(37, 99, 235, 0.8);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-block;
    border: 3px solid white;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}
.table-row-alt:nth-child(odd) {
    background-color: rgba(243, 244, 246, 1);
}

.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 25px;
    height: 25px;

    &:before {
      content: '';
      position: relative;
      display: block;
      width: 300%;
      height: 300%;
      box-sizing: border-box;
      margin-left: -100%;
      margin-top: -100%;
      border-radius: 45px;
      background-color: #01a4e9;
      animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    }

    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 100%;
      height: 100%;
      background-color: white;
      border-radius: 15px;
      box-shadow: 0 0 8px rgba(0,0,0,.3);
      animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
    }
  }

  @keyframes pulse-ring {
    0% {
      transform: scale(.33);
    }
    80%, 100% {
      opacity: 0;
    }
  }

  @keyframes pulse-dot {
    0% {
      transform: scale(.8);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(.8);
    }
  }

  .pulsating-hexagon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    width: 25px;
    height: 25px;
    background-color: #3B82F6; /* Tailwind blue-500 */
    animation: pulse-hexagon 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  }

  @keyframes pulse-hexagon {
    0% {
      transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1);
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    70% {
      transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1.2);
      box-shadow: 0 0 0 20px rgba(59, 130, 246, 0);
    }
    100% {
      transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1);
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
  }
  /* Add this to your style section */
  .pulse-container {
    position: absolute;
    bottom: 22%;
    right: 14%;
  }

  @media (max-width: 768px) {
    .pulse-container {
      bottom: 39.2%;
      right: 2.7%;
      display: none;
    }
  }

  @media (min-width: 1024px) {
    .pulse-container {
      /* bottom: 39.2%;
      right: 2.7%; */
      bottom: 22%;
      right: 14%;
    }

    @media (min-width: 1600px) {
    .pulse-container {
      bottom: 39.2%;
      right: 2.7%;
    }
  }