@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap');
:root {
    --header: #ffffff;
    --black: #000000;
 }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 

body {
    font-family: Arial, sans-serif;
}

.header {
    background-color: var(--header);
    padding: 20px;
}


.header .header-1 .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .header-1 .flex img {
    width: 300px;
    height: 100px;
    display: block;
}

.navbar {
  

    display: flex;
    /* Add space between navbar links */
}

.navbar a {
    text-decoration: none;
    color: var(--black);
    font-size: 15px;
    margin-right: 100px;
}

.header .header-1 .flex .icons div{
   font-size: 2.5rem;
  cursor: pointer;
  color:var(--black);
}


.auth-links {
    display: flex;
    align-items: center;
    gap: 10px; /* Add space between login and register links */
}

.auth-links a {
    color: black;
    padding: 10px 15px;
    border-radius: 4px;
}

  
/*-------------------------------------------------------*/

* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  html {
    background: #ece9e6;
    background: linear-gradient(to top, #ece9e6, #fff);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  html body {
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
  }
  html body h1 {
    text-align: center;
    padding: 2rem 0 1rem;
    margin: 0;
    color: #373f51;
  }
  html body h6 {
    font-size: 1.2rem;
    margin: 0;
    font-weight: 300;
  }
  html body p {
    margin-bottom: 2rem;
  }
 
  
 
 
  
/*-----------------------Receipts-------------------------------------*/
.header-2 p {
  font-size: 50px;
  text-align: left;
  padding-left: 35px;
  margin-top: 15px;
  margin-bottom: 4px;
}

.header-2 hr {
  height: 2px;
  background-color: #E6E6E6;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 30px; /* Ensure no margin at the top */
}

.display-order {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  gap: 20px; /* Adjust the gap between items */
}

.display-order .item {
  height: 224px;
  width: 952px;
  border-radius: 24px;
  background-color: #FAFAF5;
  border: 2px solid #E6E6E6;
  padding: 20px;
  margin-left: 35px;
  display: flex; /* Use flexbox */
  align-items: center; /* Align items vertically */
}

.display-order .item .image img {
  width: 214px;
  height: 180px;
  border-radius: 24px;
  margin-right: 20px;
}

.display-order .item .paragraph {
  text-align: left;
  margin: 5px;
  
}

.Total {
  margin-bottom: 10px; 
  width: 340px;
  height: 172px;
  background-color: #FAFAF5;
  border: 2px solid #E6E6E6;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
}

.Total p.title {
  font-size: 16px;
  text-align: left;
  margin-top: 24px;
  margin-left: 24px;
  margin-bottom: 16px;
  color: #000000;
}

.Total p.number {
  font-size: 40px;
  text-align: left;
  margin-top: 16px;
  margin-left: 24px;
  margin-bottom: 16px;
  color: #000000;
}

.Total p.profit {
  font-size: 16px;
  text-align: left;
  margin-top: 16px;
  margin-left: 24px;
  margin-bottom: 24px;
  color: #828282;
}