@media only screen and (max-width: 700px) {

    main {
        position: relative;
       
        
    }
    .main{
      /* background-color: #1d828e;*/
    }

    .head_main {
        background: var(--back);
        width: 100%;
        height: 250px;
        border-radius: 0 0 30px 30px;
        background-size: cover;
        background-position: center;
    }
    .Lright img {
        width: 37px;
        height: 40px;
    }
    .Lleft .profileU {
        width: 50px;
        height: 50px;
    }
    header{
        align-items: flex-start;
    }
    .search_card {
        position: absolute;
        width: 80%;
        height: 55px;
        background: var(--search_box);
        margin: auto;
        top: 90%;
        right: 10%;
        border-radius: 12px;
        line-height: 1;
    }

    .search_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        direction: rtl;
    }

    .search_box input[type=search] {
        width: 75%;
        margin: 0;
        height: 35px;
        border: none;
        border-radius: 0 7px 7px 0;
        outline: none;
    }

    .search_box button {
        width: 12%;
        margin: 0;
        height: 35px;
        border: none;
        border-radius: 7px 0 0 7px;
        font-size: 1.5rem;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .search_card h2 {font-size: 1rem;}

    .sidbar {
        width: 98%;
        height: 99%;
        position: absolute;
        background: var(--sidbar);
        top: 3px;
        right: 3px;
        border-radius: 21px;
   
        backdrop-filter: blur(5px);
       
    }

    .main_catlist {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        margin-top: -50px;
        
    }

    .main_catlist .cat {
        width: 30%;
        height: 120px;
        background: var(--catlist);
        border-radius: 8px;
        padding: 5px;
        background: #f6f6f6;
        
        margin: 13px 15px;
    }
    .main_catlist .cat img{
        width: 70%;
    }

    .spase {
        height: 100px;
    }

    footer {
        display: flex;
        position: absolute;
        bottom: -50px;
        height: 20px;
        flex-wrap: nowrap;
        width: 98%;
        justify-content: center;
        font-size: 11px;
    }
    .image_info{
        position: absolute;
        max-width: 90%;
        top: 69%;
        left: 4%;
        
    }
    .image_info i{
        background: var(--search_box);
        box-shadow: 0 0 2px 0px #5e575747;
        backdrop-filter: blur(5px); 
        padding: 5px;
        border-radius: 50%;
        display: inline-block;
        color: cornsilk;
        font-size:11px;
    }
    .image_info .info{
        box-shadow: 0 0 2px 0px #5e575747;
        backdrop-filter: blur(5px); 
        padding: 5px;
        border-radius: 8px;
        display: none;
        font-size:11px;
    }
    .image_info:hover .info  {
        display: block;
        color: aliceblue;
    }
    .image_info:hover  {
        top: 30%;
    }
}