@media screen and (min-width:373px) and (max-width:799px) {
    #search-input-box {
        width: 17rem;
        padding: 0.3rem;
    }
 
    #search-input-box>img {
        width: 2.3rem;
    }

    #search-input-box input {
        width: 10rem;
        margin: 0.5rem;
        font-size: 1.1rem;
        padding-left: 0.3rem;
        font-weight: 450;
    }

    .search-btn img {
        width: 1rem;
    }

    #profile-views {
        margin: 3rem 0;
    }

    .user-profile {
        width: 80%;
        padding: 1rem;
    }

    .user-profile h3 {
        font-size: 1.4rem;
        font-weight: 650;
    }

    .user-profile h2 {
        font-size: 1.4rem;
        font-weight: 650;
    }

    .user-details {
        width: 100%;
        margin: 0.1rem 0rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
   
    .user-social {
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 1.3rem;
        padding: 0rem 1rem;
    }
    .view-profile-btn{
        width: 70%;
        padding: 0.8rem;
        
    }
    .view-profile-btn:hover {
        border: 1px solid red;
        cursor: pointer;
        color: red;
        font-weight: 400;
    }
    
    .item img {
        width: 2rem;
        outline: none;
        border: none;
        border-radius: 50%;
        margin: 0.8rem 2rem;
    }

    .item {
        box-shadow: 0px 0px 7px 0px whitesmoke;
    }

    .item h4 {
        font-size: 0.8rem;
        font-weight: 650;
    }

    .user-personal {
        width: 90%;
        border: 2px solid red;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0.6rem 0 0.6rem 0.6rem;
        box-shadow: 0px 0px 10px 0px whitesmoke;
    }

    span {
        color: red;
        font-size: 1.4rem;
    }

    .user-personal h2 {
        font-size: 1rem;
    }

    .user-personal h2:nth-of-type(2) {
        font-size: 1.2rem;
        text-align: justify;
        padding: 0rem 0.5rem;
        font-weight: 400;
        font-family: Georgia, 'Times New Roman', Times, serif;
        word-spacing: 1px;
    }

    .template {
        padding: 40px;
        gap: 3rem;
    }

    .card {
        width: 18rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .card img {
        width: 10rem;
        height: 10rem;
    }
    .card a {
        font-size: 1rem; 
    }
}