@media only screen and (min-width: 768px) {

    .only_mobile {
        display: none;
    }

    .menu_header {
        padding: 20px 40px;
    }
    .restaurant_logo {
        width: 180px;
        height: 140px;
        border-radius: 20px;
    }
    
    .restaurant_logo_borderd{
        border: 7px solid var(--dark_bg);
    }
    .menu_header h6{
        font-size: 2.5rem;
    }
    .menu_header .tiny{
        font-size: 2rem;
    }
    .sub_box {
        flex: 1;
        margin: 0px 10vw;
        margin-left: 7vw;
    }
    #head_search {
        display: flex;
    }
    #search {
        display: none;
    }

    .search {
        background: var(--dark_bg);
    }
    .categories.modal-trigger {
        background: var(--dark_bg);
    }


    .item_list {
        padding: 0px 30px;
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
    }
    .menu_item {
        height: 94%;
    }
    .menu_item .cover {
        width: 100%;
        height: 190px;
        border-radius: 10px;
        margin-bottom: 10px;
        overflow: hidden;
        position: relative;
    }

    
    .tiny_list {
        padding: 0px 30px;
        display: grid;
        grid-template-columns: 33% 33% 33%;
    }
    .tiny_item {
        padding: 20px;
        /* height: 50vh; */
    }
    .tiny_item .info .img_cover{
        width: 10vw;
        height: 10vw;
    }
    .tiny_item .price {
        margin-top: 10px;
    }
    .tiny_item .action {
        margin-top: 15px;
    }


    .modal-content{
        padding: 40px 70px !important;
    }
    .menu_wrap {
        display: flex;
        flex-direction: row;
        margin-top: 30px;
    }
    .menu_wrap .menu_item_all{
        flex: 5;
    }
    #menu_modal .cover {
        margin-top: 0px;
        height: 35vh;
        flex: 2;
        margin-left: 30px;
    }
    .grid_gallery {
        grid-template-columns: 25% 25% 25% 25%;
    }
    .gallery_item {
        border-radius: 10px;
        height: 150px;
        overflow: hidden;
    }
    .gallery_item img{
        height: 100%;
        width: 100%;
    }










    /* landing */
    .social_title,.restaurant_info,.menu_box {
        display: none;
    }
    .header {
        height: 35vh;
        padding: 0px 10%;
        display: grid;
        grid-template-columns: 25% 50% 25%;
    }
    .header .restaurant_logo{
        position: unset;
        top: 0px;
        width: 18vw;
        height: 14vw;
        border-radius: 20px;
    }
    .hide_on_mobile {
        display: unset;
    }
    .menu_btn {
        border: 2px solid #fff;
        font-size: 1.3rem;
        padding: 8px 30px;
        border-radius: 30px;
        text-align: center;
        width: fit-content;
        margin: auto;
        cursor: pointer;
        animation-name: menu_btn;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;  
    }
    @keyframes menu_btn {
        from {
            transform: scale(1);
        }
        to {
            box-shadow: 0px 0px 8px 1px var(--accent);
            text-shadow: 0px 0px 8px 1px var(--accent);
            transform: scale(1.03);
        }
    }

    .first_wrapper {
        margin: 50px auto;
        padding: 0px 10%;
        display: flex;
        flex-direction: row;
    }
    .infomations {
        padding: 0px;
        display: grid;
        grid-template-columns: auto;
        height: fit-content;
        gap: 30px;
    }
    .infor{
        transition: all 0.5s;
        cursor: pointer;
    }
    .infor:hover{
        transform: translateX(10px);
    }
    .infor i {
        font-size: 2.5rem;
    }
    .infor span {
        font-size: 2rem;
    }
    .description {
        flex: 1;
        line-height: 2rem;
        margin: 0px 40px;
    }
    .sociality {
        flex: 0;
    }
    .social {
        padding: 0px;
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 10px;
    }
    
    .map_wrapper {
        width: 80%;
    }
    .map {
        width: 100%;
        height: 40vh;
        margin: 0px;
        margin-bottom: 20px;
    }
    .contact {
        flex: 1;
        padding-left: 40px;
    }
    .restaurant_gallery_head{
        flex: 1;
    }
    .contact_item {
        width: 100%;
        padding-top: 9px;
        transition: all 0.5s;
        transform: scale(1);
    }
    .contact_item:hover {
        transform: scale(1.02);
        text-shadow: 0px 0px 2px var(--accent);
    }


    .restaurant_gallery {
        /* padding-top: 25px; */
        width: 50%;
    }


    
    .menu_identifier {
        position: fixed;
        margin-top: 10px;
        margin-left: 15px;
        padding: 10px 20px;
    }

    .language {
        display: none;
    }
    .language_icon {
        margin-right: 20px;
        margin-top: 10px;
        cursor: pointer;
    }


    
    .contact {
        margin-top: 0px;
    }
    .dropdown-content {
        right: 10px;
    }
    
    .first_wrapper {
        margin-top: 30px;
    }


    
    .social .social_item {
        width: 50px;
        height: 50px;
        border-radius: 25px;
    }

    .contact_head {
        display: flex;
        width: 100%;
        border-bottom: 1px solid rgba(238, 238, 238, 0.5);
        margin-bottom: 30px;
        padding: 10px 0px;
    }


    
    
    .restaurant_logo.dafeultMode {
        font-size: 2.2rem;
    }

    .stars {
        margin-bottom: 10px;
    }

    
    
    .login {
        font-size: 0.9rem;
        padding: 4px 15px;
    }
    .login_content {
        padding: 70px 20%;
    }

    
    .property_title {
        margin-top: 30px;
        margin-bottom: 15px;
        border-bottom: 2px solid #cccccc2b;
        padding-bottom: 10px;
        text-align: right;
        padding-right: 10px;
    }
    .property_wrapper {
        justify-content: flex-start;
    }
    .time_schedule {
        width: 100%;
    }



    /* profile */
    
    #profile .head {
        height: 150px;
    }
    #profile .head .person {
        top: 50%;
    }
    .edit_form {
        width: 40%;
        margin: auto;
        margin-top: 40px;
    }


    /* posts */    
    .simple_head {
        padding: 30px 35px;
    }
    .simple_head .main {
        padding: 0px 50px;
    }
    .posts_item .subtitle {
        height: 40px;
    }

    /* posts landing */
    .posts_horizontal {
        /* display: grid;
        grid-template-columns: 25% 25% 25% 25%; */
        display: flex;
        overflow: unset;
        padding-right: 0px;
        max-height: 30vh;
        justify-content: center;
    }
    .post_x {
        flex: 1;
        display: unset;
        width: 100% !important;
        height: unset;
        margin-left: unset;
        padding: 8px;
        flex: 0 1 calc(20% - 8px);
    }
    .post_x img {
        width: 100%;
    }
    .horzontal_end {
        display: none;
    }
    .myModal {
        padding: 20px 20% !important;
    }
    .myModal .img {
        width: 40% !important;
        margin: auto !important;
    }
    .dropShadow .actions {
        width: 59% !important;
    }
    .post_x_item .actions {
        align-items: flex-end;
    }
    .post_like i {
        font-size: 1.3rem;
        margin-bottom: 6px;
    }
    .grid_wrapper {
        margin: auto;
        display: grid;
        grid-template-columns: 33% 33% 33%;
        gap: 1%;
        width: 90%;
    }

    
    #installPromp {
        flex-direction: row;
    }

    
    .developer {
        width: 40%;
    }
}