.btn-primary2, .btn-secondary2, .btn-brand, .btn-grad-brand, .btn-grad-primary {
    padding: .25rem 1.25rem .35rem 1.25rem;
    color: #fff;
    border: none;
    background-size: 300% 300%; /* Larger background size for gradient animation */
    transition: background 0.5s ease-in-out; /* Smooth background transition */
}

/* Setting up keyframes for the gradient animation */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


@keyframes scaleUp {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.btn-primary2 {
    background: linear-gradient(45deg, #001453, #001453);
}

.btn-primary2:hover {
    background: linear-gradient(45deg, #0028A8,  #001B77);
    animation: gradientAnimation 8s ease infinite;
    color: #fff;
}

.btn-grad-primary {
    background-image: linear-gradient(to right, #0028A8 0%, #001453  51%, #0028A8  100%);
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
  }

  .btn-grad-primary:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }


.btn-secondary2 {
    background: linear-gradient(45deg, #498DAF, #498DAF);
}

.btn-secondary2:hover {
    background: linear-gradient(45deg, #70AFC3, #317891);
    animation: gradientAnimation 8s ease infinite;
    color: #fff;
    animation: scaleUp 1s infinite;
}

.btn-brand {
    background: linear-gradient(45deg, #A7D046, #A7D046) !important;
}

.btn-brand:hover {
    background: linear-gradient(89deg, #BCE25B, #8FAD3D, #97B530);
    animation: gradientAnimation 8s ease infinite;
    color: #fff;
    /* animation: scaleUp .6s infinite; */
}

.btn-grad-brand {
    background-image: linear-gradient(to right, #7da129 0%, #A7D046  51%, #7da129  100%);
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
  }

  .btn-grad-brand:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }


.btn-grad {
    background-image: linear-gradient(to right, #314755 0%, #26a0da  51%, #314755  100%);
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
  }

  .btn-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }