*{
margin:0;
box-size::border-box;
font-family:serif;
font-weight:bold;
text-transform:capitalize;
user-select:;
scroll-behavior: smooth;
-webkit-user-select: ;
-moz-user-select: ;
-ms-user-select: ;
}
#big-container{

}
#big-container{
@media screen and (min-width:850px){
width:70%;
margin:0 auto;
 }

}


/* popups */
/*
.popup-container{
margin:;
width: 100%;
height: 100%;
background: #3c5077;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 50%;
transform: translate(-50%,-50%)scale(0);
position: fixed;
visibility:hidden;

}
.popup{
height:250px;
width: 280px;
background: yellow;
border-radius: 9px;
position: absolute;
text-align:center;
padding:0 20px 20p;

}
.open-container{
top:50%;
transform: translate(-50%,-50%)scale(1);
visibility:visible;
transition:.2s;
z-index:999;
}

.tick-png{
height:150px;
width:150px;
border-radius:50%;
border:none;
outline:none;
margin-top:-25%;
background:;
box-shadow:;
}
*/



p{
font-weight:bold;
color:blue;
font-size:13px;
margin-top:20px;
text-transform:capitalize;
}
.popup-close-btn{

padding: 5px 70px;
background: teal;
border: 0;
outline: none;
cursor: pointer;
font-size: 18px;
font-weight: 500;
border-radius: 30px;
margin-top:35px;
color:white;
font-weight:bold;
box-shadow:0 2px 5px rgba(0,0,0,1);
}
/*order table and contact form hide*/
.order-table-box{
height:100%;
width:100%;
position:fixed;
background:white;
top:0;
left:0;
display:none;
z-index:100;
animation-name: zoom;
animation-duration: .3s;
}
.order-table-box-inner{
width:50%;
background:red;
}
.order-table-close{
height:40px;
width:40px;
border-radius:50%;
border:none;
outline:none;
background-color:black;
font-weight:bold;
font-size:18px;
color:white;
top:30px;
right:30px;
position:fixed;
}
.order-table-title{
margin-top:100px;
text-align:center;
font-weight:bold;
font-family:serif;
text-transform:capitalize;
border-bottom:1px solid black;
background:red;
color:white;
}
/*head orders menu box*/
.orders-menu-box{
height:40px;
width:100%;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:18px;
text-align:center;
background:#4A27F5;
color:white;
text-transform:capitalize;
font-size:14px;
line-height:45px;
}
.head-no{
height:;
width:7%;
border:;
text-align:center;
}
.head-product{
width:54%;
}
.head-price{
width:12%;
text-align:center;
}
.head-qt{
width:11%;
text-align:center;
}
.head-total{
width:18%;
text-align:center;
}

/*orders in table*/

.order-elements{
height:25px;
width:95%;
border-top:.5px solid black;
border-bottom:none;
border-right:1px solid black;
border-left:1px solid black;
display:flex;
justify-content:center;
align-items:center;
background:#a1ffe0;
margin:0 auto;
}
.order-elements:nth-child(even){

}
.order-elements:first-child{

border-top:1px solid black;
}

.order-elements:last-child{

border-bottom:1px solid black;
}

.order-elements .no{
height:25px;
width:7%;
border-right:.5px solid black;
text-align:center;
font-size:12px;
line-height:25px;
color:red;
}
.order-elements .product{
height:25px;
width:55%;
border-right:.5px solid black;
text-align:left;
font-size:10px;
line-height:25px;
}
.order-elements .price{
height:25px;
width:12%;
border-right:.5px solid black;
text-align:center;
font-size:12px;
line-height:25px;
}
.order-elements .qt{
height:25px;
width:11%;
border-right:.5px solid;
text-align:center;
font-size:12px;
line-height:25px;
}
.order-elements .total{
height:25px;
width:18%;
border:;
text-align:right;
font-size:12px;
line-height:25px;
}
.order-grand-total{
width:96%;
display:flex;
justify-content:space-between;
align-items:center;
background:red;
color:white;
font-size:18px;
margin-top:20px;
margin-bottom:10px;
border-right:1px solid black;
border-left:1px solid black;
margin:0 auto;
margin-top:10px;
}
.words{
width:96%;
font-size:12px;
color:blue;
border:1px solid black;
margin:0 auto;
margin-top:10px;
}

.customer-address-box{
height:450px;
width:350px;
display:flex;
align-items:center;
flex-direction:column;
background:#ff9f9f;
margin:0 auto;
border-radius:9px;
margin-top:25px;
margin-bottom:60px;
}
.inpt{
height:36px;
width:80%;
margin-top:20px;
border-radius:5px;
border:none;
outline:none;
font-size:16px;
font-weight:bold;
text-align:center;
letter-spacing:;
}
.address-box{
height:120px;
width:80%;
margin-top:20px;
resize:none;
border-radius:5px;
border:none;
outline:none;
font-size:16px;
font-weight:bold;
text-align:center;
text-transform:capitalize;
}
.btn{
height:36px;
width:75%;
margin-top:43px;
border-radius:9px;
border:none;
outline:none;
background:black;
font-size:16px;
color:white;
font-weight:bold;
font-family:serif;
text-transform:capitalize;
box-shadow:0 0 30px aqua;
}
.inpt::placeholder{
font-size:12px;
}
textarea::placeholder{
font-size:12px;

}
/*
.image-container{
aspect-ratio: 1/1;
object-fit: cover;
}
*/
/*image Hide container*/

.video-container-box, .image-container-box{

height:100%;
width:100%;
top:0;
left:0;
position:fixed;
background:black;
z-index:100;
display:none;
animation-name: zoom;
animation-duration: 0.6s;
}

@keyframes zoom {
from {transform:scale(0)} 
to {transform:scale(1)}
}

.video-close-btn, .image-close-btn{
height:35px;
width:35px;
right:5%;
top:5%;
position:absolute;
font-size:20px;
border-radius:50%;
border:none;
outline:none;
background:aqua;
line-height:;
}

.video-container, .image-container{
height:300px;
width:;
position:absolute;
top:40%;
left:50%;
transform:translate(-50%, -50%);
border:1px solid;
border-radius:5px;
overflow: hidden;
box-shadow:0 0 30px aqua, 0 0 30px aqua;
aspect-ratio: 1/1;
object-fit: cover;

}

.content-name-video, .content-name-image{
width:100%;
color:blue;
top:70%;
position:absolute;
display:flex;
justify-content:center;
align-items:center;
background:yellow;
}

::-webkit-scrollbar {
  width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background: none; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: none; 
}

@keyframes ravi {
from {transform:scale(0)} 
to {transform:scale(1)}
}

#top-grandtotal-box{
height:40px;
width:100%;
background:;
position:sticky;
top:0;
display:flex;
justify-content:center;
align-items:center;
z-index:99;
border:1px solid aqua;
background:black;
}

#grandtotal-label-box{
height:40px;
width:60%;
display:flex;
justify-content:space-around;
align-items:center;
}
#label{
height:40px;
width:60%;
color:aqua;
font-weight:bold;
font-size:15px;
display:flex;
justify-content:center;
align-items:center;
background:black;
}
#grandtotal{
height:38px;
width:40%;
border:none;
background:;
font-size:15px;
color:aqua;
font-weight:bold;
float:left;
display:flex;
justify-content:center;
align-items:cent;
border-right:1px solid aqua;
outline:none;
background:black;
}

#date-time{
height:40px;
width:40%;
color:aqua;
font-size:10px;
background:black;
display:flex;
justify-content:center;
align-items:center;

}

#panner-frame{
height:180px;
width:100%;
}
#panner{
height:180px;
width:100%;
}
#running-letters{
font-size:18px;
font-weight:bold;
border:1px solid yellow;
margin-top:5px;
color:aqua;
background:black;
}
.particular-box{
height:35px;
width:100%;
border:1px solid;
display:flex;
justify-content:space-around;
font-weight:bold;
font-size:10px;
font-family:serif;
position:stick;
top:40px;
z-index:;
text-transform:capitalize;
}
.search{
height:35px;
width:100%;
margin:0 auto;
display:block;
top:40px;
position:sticky;
background:yellow;
outline:none;
border:none;
border-radius:5px;
text-align:center;
color:red;
}
.top-menu-box{
height:35px;
width:14.285714285714%;
border:.5px solid;
text-align:center;
background:#4A27F5;
color:white;
text-transform:capitalize;
}
h3{
color:white;
background:red;
display:block;
text-align:center;
margin-top:15px;
margin-bottom:15px;
z-index:99;
text-transform:capitalize;
}
.content-box{

height:70px;
width:100%;
display:flex;
justify-content:space-around;
align-items:center;
margin-top:7px;
text-transform:capitalize;

}
.show{
display:block;
height:70px;
width:100%;
display:flex;
justify-content:space-around;
align-items:center;
margin-top:7px;
text-transform:capitalize;
}
.hide{
display:none;

}

.content{
height:100%;
width:14.2%;
border:0.01px solid gray ;
background:;
outline:none;
display:flex;
justify-content:center;
align-items:center;
font-size:10px;
text-align:center;
text-transform:capitalize;
z-index:;
}

.content:nth-child(1){
display:none;
}
.content:nth-child(3){
font-size:8px;
}
.content:nth-child(4){
font-size:10px;
}
.content:nth-child(5){
color:red;
text-decoration: line-through solid black 2px;
font-size:12px;
}

.content:nth-child(6){
font-size:12px;
}

.content:nth-child(7){
height:71px;
background:white;
font-size:12px;

}
.content:nth-child(8){
font-size:12px;
background:#a1ffe0;
pointer-events:none;
}
.content:nth-child(7):hover{
background:;
transition:1s;
color:red;
box-shadow:0 0 10px 5px pink;
z-index:1;
}
.content:nth-child(9){
display:none;
}

#tblBody{
background:#a1ffe0;

}
.form{
height:75px;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;

}
table{
display:;
height:auto;
width:100%;
font-size:13px;
border:1px solid #ccc;
border-collapse:collapse;
}
table thead tr{
background:teal;
color:white;
}
table thead th{
border-color:teal;
font-weight:500;
}
table th{
border:1px solid #ccc;
padding:5px 5px;
text-align:center;
}
table td{
border:1px solid #ccc;
padding:3px 5px;
text-align:center;

}
table td:nth-child(2){
text-align:left;

}
.footer-box{
height:auto;
width:100%;
margin-top:;
margin-bottom:10px;
background-color:black;
}
.footer-box .footer-header-top{
color:aqua;
font-size:12px;
background-color:;
}
.footer-box .footer-header{
color:white;
font-size:12px;
margin-top:25px;
}
.footer-box .footer-content{
color:yellow;
font-size:9px;
}
.copy-rights{
color:#A9A9A9;
font-size:10px;
}
.next-btn{
height:35px;
width:150px;
border-radius:9px;
border:none;
outline:none;
background:tomato;
bottom:0;
left:50%;
transform:translate(-50%, -50%);
position:fixed;
color:white;
font-size:20px;
text-transform:capitalize;
z-index:1;
}

@media screen and (min-width:850px){
*{
font-size:16px;
}
body{
background-color:black;
}

#grandtotal-label{
font-size:23px;

}
#grandtotal{
font-size:23px;
}
#date-time{
font-size:23px;
}
#big-container{
width:70%;
margin:0 auto;
}
h3{
font-size:25px;
}
.content:nth-child(3){
font-size:13px;
}
.content:nth-child(4){
font-size:15px;
}
.content:nth-child(5){
font-size:15px;
}
.content:nth-child(6){
font-size:15px;
}
.content:nth-child(7){
font-size:15px;
}
.content:nth-child(8){
font-size:15px;
}
.order-table-close{
right:18%;
}
.order-table-box{
width:70%;
top:0;
margin-left:15%;
}
.order-grand-total{
font-size:20px;
}
.order-table-total{
font-size:20px;
}

.customer-address-box{
width:50%;
}
.words{
font-size:20px;
}

}
.about-us-box{
background:lightgray;
margin-bottom:150px;
color:;
}
h1{
text-decoration:underline;
}