/* Add Fade-in animation */
    /* body {
      animation: fadeIn 1s ease-in-out;
    } */
   a{
    text-decoration: none;
    color: #fff;
   }
    /* Animation for the "Payment Done!" section */
    .success-icon, .payment-h3, .payment-para {
      animation: fadeIn 2s ease-in-out;
    }

    .success-icon {
      width: 64px;
      height: 64px;
      color: #16a34a; /* Bootstrap's success color */
    }

    .payment-para {
      color: #7F7B7A;
      text-align: center;
    }

    /* Go back button animation */
    .go-back-btn, .go-home-btn{
      background-color: #FF0909;
      border: none;
      border-radius: 25px;
      font-weight: 500;
      animation: bounce 1s ease infinite; /* Bounce animation */
    }

    .go-back-btn:hover {
      background-color: #FF0909;
      border: none;
      border-radius: 25px;
      font-weight: 500;
    }
    .view-booking-btn{
     
      border-radius: 25px;
      
    }
    .payment-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
    .success-animation { margin:40px auto;}

.checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #7e1515;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #7e1515;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position:relative;
    top: 5px;
    right: 5px;
   margin: 0 auto;
}
.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7e1515;
    fill: #fff;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
 
}
.view-booking-btn{
    background:#198754!important;
    color:#fff!important;
}
.view-booking-btn:hover{
    background:#198754!important;
    color:#fff!important;
}
.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7e1515;
    }
}
    /* Keyframes for fadeIn animation */
    @keyframes fadeIn {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @media (max-width: 576px) {
  .payment-btns {
    flex-direction: column;
    gap: 3px;
  }
}

    /* Keyframes for bounce animation */