.height-100{
    height:100vh
}

.inputs input{
    width:40px;
    height:40px
}input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button{-webkit-appearance: none;-moz-appearance: none;appearance: none;margin: 0}
.card-2{
    background-color:#fff;
    padding:10px;
    width:350px;
    height:100px;
    bottom:-50px;
    left:20px;
    position:absolute;
    border-radius:5px}
    .card-2 .content{margin-top:50px}
    .card-2 .content a{color:red}
    .form-control:focus{
        box-shadow:none;
        border:2px solid rgb(11, 180, 5)
    }
    .validate{
        border-radius:20px;
        height:40px;
        background-color:red;
        border:1px solid red;
        width:140px
    }

    .hover-effect:hover {
        /* Add your desired styles for the hover effect here */
        /* For example, changing the background color and adding a transition */
        background-color: #007bff; /* Change to your desired background color */
        color: #fff; /* Change to your desired text color */
        transition: background-color 0.3s ease, color 0.3s ease; /* Add a smooth transition */
    }
    
    /* Style the image within the div */
    .hover-effect img {
        /* Add any specific styles for the image here */
        /* For example, setting a max-width or max-height */
        max-width: 100px; /* Adjust as needed */
        max-height: 100px; /* Adjust as needed */
    }