* {
    margin: 0px;
    padding: 0px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    box-sizing:border-box;
    }
body {
    width:100%;
    height:100%;
    background:#fff;
    background-size:cover;
    background-position: center;
    -webkit-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    background-image: url(back.png);

    
}


/*
animation: animat 30s infinite;
@keyframes animat{
    25%{
    background:url(back2.jpg);
    background-size:cover;
    background-repeat: none;
    background-position: center;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    }
    50%{
    background:url(back.jpg);
    background-size:cover;
    background-repeat: none;
    background-position: center;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    }
    75%{
    background:url(back2.jpg);
    background-size:cover;
    background-repeat: none;
    background-position: center;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    }
    100%{
    background:url(back.jpg);
    background-size:cover;
    background-repeat: none;
    background-position: center;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    }

}

*/

.food{
    display: flex;
    right:10px;
    top: 10px;
    position: absolute;
   
}
.food button {
    width:25px;
    height:25px;
    top:0;
    position:relative;
    border:none;
    border-radius:50px;
    cursor:pointer;
    font-size:14px;
    font-weight:bold;
    color:#003333;
    background-color:#003333;
    transition:0.1s;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
    
}
.food i{
    color:#fff;
}
.food button::after{
    content: '';
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(53,172,67,1)17.8%, rgba(246,211,96,1)100.2%);
    filter: blur(15px);
    z-index: -1;
    position: absolute;
    right: 0;
    top:0;
    
}

.food button:active{
    transform: scale(0.9) rotate(3deg);
    background: radial-gradient(circle farthest-corner at 10% 20%, rgba(53,172,67,1)17.8%, rgba(246,211,96,1)100.2%);
    transition:0.5s;
}


.logo{
    width:100%;
    justify-content: center;
    position:absolute;
    text-align: center;
    display:flex;
    
}

.lin-log{
    width:55px;
    height:55px;
    border-radius:15px;
    color: #fff;
    top:2px;
    position:relative;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
    overflow: hidden;
    border: solid 1px #003333;
}

.lin-log img{
    width:55px;
    height:55px;    
    cursor: pointer;
    border-radius:15px;
    
}



.text1{
    position: relative;
    top: 65px;
    height:100%;
    place-items:center;
    background:linear-gradient(315deg,#ffffff 0%, #d7elec 74%);
     display: flex;
    justify-content: center;
    align-items: center;
    }
.text1 .text2 {
    width:30px;
    height:30px;
    float:left;
    margin:0 5px;
    overflow:hidden;
    background:#fff;
    border-radius: 50px;
    cursor: pointer;
    -webkit-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    transition:all 0.3s ease-out;
}

.text1 .text2:hover{
    width:120px;
}

.text1 .text2 .text3{
    display:inline-block;
    width:30px;
    height:30px;
    border-radius: 50px;
    box-sizing: border-box;
    line-height:30px;
    text-align: center;
    transition:all 0.3s ease-out;
}


.text1 .text2:nth-child(1):hover .text3{
    background:black;
}
.text1 .text2:nth-child(2):hover .text3{
    background:black;
}
.text1 .text2:nth-child(3):hover .text3{
    background:#f62900;
}
.text1 .text2:nth-child(4):hover .text3{
    background:#f6d600;
}
.text1 .text2:nth-child(5):hover .text3{
    background:#058f2e;
}


.text1 .text2 .text3 a {
    color:#000;
    font-size:15px;
    line-height:30px;
    transition:all 0.3s ease-out;
    justify-content: center;
}

.text1 .text2:hover .text3 a {
    color:#fff;
}


.text1 .text2 span{
    font-size:15px;
    font-weight:500px;
    line-height: 30px;
    margin-left:10px;
}






.text1 .text2:nth-child(1) span{
    color:black;
}
.text1 .text2:nth-child(2) span{
    color:black;
}
.text1 .text2:nth-child(3) span{
    color:#f62900;
}
.text1 .text2:nth-child(4) span{
    color:#f6d600;
}
.text1 .text2:nth-child(5) span{
    color:#058f2e;
}










.search-pop{
    position: absolute;
    width: 80%;
    text-align: center;
    top:17%;
    left:18%;
    }

 .search-box{
    display:flex;
    justify-content:center;
    align-content:center;
     width:80%;
     height:50px;
     transition: 0.5s;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    }

.search-box input{
    display:flex;
    justify-content:center;
    align-content:center;
    width:100%;
    height:100%;
    color:orange;
    font-size: 15px;
    border: none;
    outline: none;
    background:transparent;
    direction: rtl;
    text-align: center;



    }

.search-box i{
    color: white;
    font-size: 30px;
    cursor:pointer;
    padding: 10px;
    background-color:#003333;
    border-radius: 5px;
    border-top-left-radius:0px;
    border-bottom-left-radius: 0px;
    
}
::placeholder{
    color:#003333;
    align-items: center;
    font-size:10px;
 }

nav{
    position:absolute;
    top:27%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    justify-content: center;
    align-items: center;
    display: flex;
    
}
nav ul{
    list-style: none;
    margin: 2px;
    display: flex;
    justify-content: center;
    direction: rtl;
    
}
nav ul li{
    display: inline-block;
    background-color: #fff;
    border-radius:5px;
    padding: 0px 3px;
    margin: 2px;
    border:solid 1px #003333;
    
    
}
nav ul li:hover{
    background-color: #003333;
    -webkit-box-shadow: 0px 2px 12px 0px rgba(255,255,255,0.75);
    -moz-box-shadow: 0px 2px 12px 0px rgba(255,255,255,0.75);
    box-shadow: 0px 2px 12px 0px rgba(255,255,255,0.75);
}
nav ul li:active{
    background-color: #003333;
    -webkit-box-shadow: 0px 2px 12px 0px rgba(255,255,255,0.75);
    -moz-box-shadow: 0px 2px 12px 0px rgba(255,255,255,0.75);
    box-shadow: 0px 2px 12px 0px rgba(255,255,255,0.75);
}

nav ul a{
    text-decoration: none;
    color:#003333;
    font-size: 10px;
}
nav ul a:hover{
color:#fff;
}



.container{
   background-color:rgba(0,0,0,0.5);
    width:350px;
    height:360px;
    border-radius:15px;
    -webkit-box-shadow: 0px 2px 12px 0px rgba(255,255,255,0.75);
    -moz-box-shadow: 0px 2px 12px 0px rgba(255,255,255,0.75);
    box-shadow: 0px 2px 12px 0px rgba(255,255,255,0.75);
    padding:5px 10px;
    position:absolute;
    top:63%;
    left:50%;
    transform:translate(-50%,-50%);
    overflow:auto;
    direction: rtl;
    margin: 5px 0;
    

}
.container::-webkit-scrollbar{
display:none;
    }


.product-list {
    padding:3px 0px;
    display: flex;
    text-align: center;
    justify-content: center;
    }  

.product {
     position: relative;
    display: inline-block;
     justify-content: center;
    align-items: center;
    margin: 5px;
    background-color:rgba(0,0,0,0.3);
    border-radius:5px;
    width:320px;
    height:120px;
    }
.img-product{
    width:115px;
    height:115px;
    border-radius:5px;
    overflow: hidden;
    align-items: center;
    position: absolute;
    right: 5px;
    padding: 2px 0;
    
}

.product img{
    width:115px;
    height: 115px;
    object-fit: contain;
    border-radius:5px;
    
}
.product-details{
    text-align: right;
    position: absolute;
    left: 0;
    width:190px;
    height: 115px;
    overflow: hidden;
}
.product .product-details h2{
    font-size: 12px;
    color:#fff;
    margin-right: 7px;
}
.product .product-details h3{
    font-size: 10px;
    color:#ddd;
    direction: rtl;
    margin-right: 7px;
    padding: 0px;
    
}
.product .product-details p{
    color:#0f0;
    font-size: 8px;
    margin-right: 7px;
}


.footer{
    position: absolute;
    width:100%;
    height:32px;
    bottom:0;
    text-align: center;
    background-color:#003333;
}

.dat{
    height:30px;
    display:inline-block;
    direction: rtl;
    background-color:#003333;
}

.dat h1{
    color:#fff;
    font-size: 13px;
    display:inline-block;
}
.dat span{
    color:#000;
}

.dat a{
    color:yellow;
    text-decoration: none;
     font-size: 13px;
    font-family:'Noto Kufi Arabic';
}
.dat a i{
    color: white;
}
.dat a span{
    color:coral;
    text-decoration: underline;
    margin:10px;
}
.dat a span:hover{
    color:#fff;
    text-decoration: underline;
}







.up i{
    color:white;
    background-color:#ff4321;;
    border: none;
    border-radius:5px;
    }
.up i:hover{
    color:white;
    background-color:#ff4321;
    }
.up{
    position:fixed;
    cursor:pointer;
    bottom:34px;
    right:-35px;
    color:white;
    font-weight: bold;
    font-size:15px;
    background-color:#ff4321;;
    border-radius:4px;
    padding:5px;
    padding-top:0px;
    padding-bottom:0px;
    transition: .2s;

    }
.up.show{
    right: 10px;
    }







/*

#alert-back3 {
    position: fixed;
    background-color: rgba(0,0,0,0.75);
    width: 100%;
    height: 100%;
    top:0;
    bottom:0;
    right: 0;
    left: 0;
    z-index: 1000;
    padding-top: 200px;
    }
.alert3 {
    position: relative;
    padding: 20px;
    background-color: #8fc940   ;
    color: white;
    transition: all 0.3s ease;
    text-align: right;
    direction: rtl;
    width: 50%;
    margin: 0 auto;
    animation-name: animatetop;
    animation-duration: 0.4s;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    font-size: 0.5rem;
    font-weight: bold;
    text-align: center;
    
    border-radius: 2px;
    }

.closebtn3 {
    margin-right: 10px;
    color: white;
    font-weight: bold;
    float: left;
    font-size: 19px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;

    }

.closebtn3:hover {
    color: black;
    }
    @media screen and (max-width: 700px) {
.alert3 {
    width: 80%;
    }
    }
.pho{
    width:90%;
    height:auto;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.75);
}



*/