.cards5 {
    /*card section of Branches for creating 2 column*/
    padding-top: 4%;
    padding-bottom: 4%;
    justify-content: space-around;
    display: flex;
}

.cardin {
    /* card section for creating card base */
    padding: 15px;
    border-radius: 10px;
    background-color: #497192;
    height: 350px;
    width: auto;
}

.body1 {
    /* card section for creating card inside section  */
    height: 90%;
    position: relative;
    /* Enable relative positioning for layering */
    padding: 15px;
    border-radius: 10px 100px / 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #104463;
    /* Your desired default color */
    transition: transform 0.2s ease-in-out;
    /* Transition for hover effect */
}

.background-text {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    font-size: large;
}

.btnbtm {
    margin-bottom: 0.5rem;
}

body {
    background: hsla(282, 36%, 25%, 1);

    background: radial-gradient(circle, hsla(282, 36%, 25%, 1) 0%, hsla(310, 22%, 37%, 1) 100%);

    background: -moz-radial-gradient(circle, hsla(282, 36%, 25%, 1) 0%, hsla(310, 22%, 37%, 1) 100%);

    background: -webkit-radial-gradient(circle, hsla(282, 36%, 25%, 1) 0%, hsla(310, 22%, 37%, 1) 100%);

    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#492957", endColorstr="#744A6D", GradientType=1);
}

.body1:hover {
    position: relative;
    /* Enables relative positioning for transform */
    transform: translateY(-10%);
    /* Move the card-body up 5px on hover */
    background-color: #303f53;
    /* Red background on hover (optional) */
}

.btn-secondary:hover {
    background-color: rgb(46, 127, 165);
}

@media (max-width: 650px) {
    .cards5 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}