<!DOCTYPE html>
<html>

<head>
    <title>Payment Checkout</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./assets/css/style.css" crossorigin="anonymous">
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <script src="./assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="./assets/js/bootstrap.min.js"></script>
</head>
<style>
    body {
    background-color: #f8f9fa!important;
  }

  .card {
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .payment-option {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-bottom: 15px;
    position: relative;
  }
  .payment-option2 {
    display: flex;
    flex-direction:column;
    padding: 10px 15px;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-bottom: 15px;
    position: relative;
  }
.payment-emi{
  display:flex;
}

  .payment-option.payment-option2:hover {
    border-color: #007bff;
    background-color: #f1f9ff;
  }

  .payment-option img {
    height: 25px;
    position: absolute;
    right: 7px;
    max-width: 90px;
  }
    .payment-option2 img {
    height: 25px;
    position: absolute;
    right: 7px;
    max-width: 90px;
  }

  .btn-primary {
    padding: 10px 20px;
  }

  .payment-row {
    gap: 0px;
    padding: 2rem;
  }

  input[type="radio"] {
    margin-right: 10px;
  }

  @media only screen and (max-width: 600px) {
    .payment-row {
      gap: 0px;
      padding: 0;
    }

    .main-card-apyment{
        padding: 2rem!Important;
    }

    .min-vh-100 {
      min-height: 70vh !important;
    }
  }
</style>
<body style='background:#eeeeee'>
    <div id="loader"></div>