@media screen and (max-width: 331px) {
    .nav-logo{
        height:60px;
        /* width:100%; */
    }
}
@media screen and (max-width: 314px) {
    .nav-logo{
        height:40px;
        width:100%;
    }

    .navbar-toggler img{
        max-height:40px;
        max-width:40px!important;
    }

    .user-avatar{
        max-height:40px;
        max-width:40px !important;
    }
}

@media screen and (max-width: 767px) {
    #profile-card-about{
        text-align: start;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .contact-info {
        flex-direction: column !important;
        align-items: center !important; /* Center align on small screens */
    }

    .contact-data {
        margin-right: 0px !important; /* Optional: Add some spacing between contact items */
    }
}