/* Universal Button Styles */

    .btn {
        display: inline-block;
        padding: .5em .9em;
        margin-top: 1em; /* adjust as needed */
        vertical-align: middle; /* helps inline-blocks align to text */
        font-size: 1rem;
        font-family: inherit;
        font-weight: bold;
        line-height: 1;
        color: #ffffff;
        background-color: #0077cc;
        border: none;
        border-radius: 10px;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 0 6px rgba(0, 119, 204, 0.5);
        transition: all 0.2s ease;
      }

    .btn:hover {
    background-color: #005fa3;
    box-shadow: 0 0 12px rgba(0, 119, 204, 0.9);
  }
  
  .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 119, 204, 0.4);
  }
  
  .btn:disabled {
    background-color: #cccccc;
    box-shadow: none;
    cursor: not-allowed;
  }
  
  /* Font size variants */
  .btn-sm {
    font-size: 0.8rem;
    padding: 0.4em 1em;
  }
  
  .btn-lg {
    font-size: 1.25rem;
    padding: 0.8em 2em;
  }
  
  /* Border / Outline variants */
  .btn-outline {
    background-color: transparent;
    color: #0077cc;
    border: 2px solid #0077cc;
  }
  
  .btn-outline:hover {
    background-color: #0077cc;
    color: #ffffff;
  }
  
  /* Rounded types */
  .btn-pill {
    border-radius: 50px;
  }
  
  .btn-square {
    border-radius: 0;
  }
  
  /* Custom colors */
  .btn-green {
    background-color: #28a745;
  }
  
  .btn-green:hover {
    background-color: #1e7e34;
  }
  
  .btn-red {
    background-color: #dc3545;
  }
  
  .btn-red:hover {
    background-color: #a71d2a;
  }
  
  /* Glow animation (optional) */
  .btn-glow {
    animation: glow-pulse 3s infinite;
  }
  
  @keyframes glow-pulse {
    0% { box-shadow: 0 0 8px rgba(0, 119, 204, 0.6); }
    50% { box-shadow: 0 0 16px rgba(0, 119, 204, 1); }
    100% { box-shadow: 0 0 8px rgba(0, 119, 204, 0.6); }
  }