body{
    background: #f5f7fb;
    font-family: 'Poppins', sans-serif;
}

.card{
    transition: .3s ease;
}

.card:hover{
    transform: translateY(-3px);
}

.form-control{
    border: 1px solid #dee2e6;
}

.form-control:focus{
    box-shadow: none;
    border-color: #0d6efd;
}

.btn-primary{
    background: #0d6efd;
    border: none;
}

.otp-wrapper {

    display: flex;

    justify-content: center;

    gap: 12px;
}

.otp-input {

    width: 60px;

    height: 70px;

    border: 2px solid #dee2e6;

    border-radius: 14px;

    text-align: center;

    font-size: 28px;

    font-weight: 700;

    transition: .2s;
}

.otp-input:focus {

    outline: none;

    border-color: #0d6efd;

    box-shadow: 0 0 0 4px rgba(13,110,253,.15);

    transform: translateY(-2px);
}

@media(max-width:576px){

    .otp-input {

        width: 48px;

        height: 58px;

        font-size: 22px;
    }

}