body {
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
}

main {
    margin-top:124px;
   
}

.headerContainer {
    width:100%;
    background-color: white;
    position:fixed;
}

.header {
    display: flex;
    flex-direction: row;
    height:70px;
    width:100%;
    border-bottom: 1px solid #e9e9e9;
    align-items:stretch;
    justify-content: space-between;
}

.logo{
   display:flex;
   font-family: 'saira',sans-serif;
   font-weight:900;
   font-size:30px;
   margin-top:2%;
   margin-left:20px;
   color:  #2954ad;
   
}

.cart {
    display:flex;
    background-color: white;
    align-items: center;
    gap:15px;
}

.wrapper {
  display:flex;
  flex-direction: column;
  
}

.imageLogo {
    height: calc(100% - 16px);
    width:150px;
}

.cartImg {
    height:30px; 
    width:30px;
    cursor:pointer;
}
.totalCostCard {
    color: black;
    font-size:22px;
    font-weight:bold;
    letter-spacing:1.2px;
    font-family: 'saira',sans-serif;
}

.totalValue {
    margin-right:20px;
    cursor:pointer;
}

.categoryList {
    overflow-x:auto;
    display:flex;
    width:100%;
    height:53px;
    border-bottom: 1px solid #e9e9e9;
    background-color: white; 
    background:white;
    justify-content: start;
    cursor:pointer;
   
}

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

.categoryItem {
    padding:12px;
    font-size:16px;
    font-weight: bold;
    color:#2954ad;
    font-family: 'saira',sans-serif;
    white-space:nowrap;
}

.activeCategoryItem {
   background-color: #2954ad;
   color: #FFF;
}

.main {
   display:flex;
   height:100vh;
   flex-direction:column;
   justify-content: space-between;
}

.productList {
    display:flex;
    flex-direction: column;
}

.productItem {
   
    border-bottom: 1px solid #e9e9e9;
    padding:5px;
    display:flex;
    align-items: center;
}

.productImg {
    width:30%;
    height:80%;
}

.productText {
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    height:100%;
}

.productName {
    font-size:18px;
    color: #060506;
    font-family: 'saira',sans-serif;
    font-weight:500;

}

.productDescription {
    margin:0px;
    overflow-wrap:break-word;
    word-break:break-all;
    font-family: 'saira',sans-serif;
}

.productPrice {
    font-weight: bold;
    margin-right:10px;
    font-size: 22px;
    letter-spacing: 0.2px;
    color: black;
    align-self: end;
    font-family: 'saira',sans-serif;
}
 .cardFixedFooter {
    display:flex;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    cursor: pointer;
    height: 70px;
    background-color: #2954ad;
    justify-content: space-between;
    align-items: center;
 }

 .footerFixedText {
    font-weight:bold;
    font-family: 'saira',sans-serif;
    font-size:22px;
    color:white;
    margin-left:20px;
 }
 
 .footerFixedImg {
    height:30px;
    width:30x;
    margin-right:5px;
    margin-top:17px;
 }

 .footerFixedTotalCost {
        color: #d3b213;
        font-size:22px;
        font-weight:bold;
        letter-spacing:1.2px;
        font-family: 'saira',sans-serif;
 }

 .footerFixedValue {
    margin-right: 10px;
    font-size: 22px;
    height: 70px;
    line-height: 70px;
    font-family: 'saira',sans-serif;
    color:white;
    font-weight:bold;

 }

 .orderTotal {
    display:flex;
    flex-direction: column;
    padding:10px;
    align-items:center;
    background-color: #f8f8f8

 }

 .orderTotalHeader {
    font-size: 2rem;
    color: #d3b213;
    font-weight: 500;
    letter-spacing: 2px;
    font-family: 'saira',sans-serif;
    margin-top:0px;
    margin-bottom:0px;
 }

 .imgTotal {
    height:250px;
    width:100%;
 }

 .underTotalText {
    font-size:16px;
    margin-top:0px;
    font-family: 'saira',sans-serif;
 }

 .footer {
    height:100px;
    background-color: #060506;
 }

 .emptyCartWrapper {
    text-align:center;
 }

 .cartWrapper {
    width:100%;
 }

 .cartItemContainer {
    padding:5px;
    width:100%;
    display:flex;
    flex-direction: column;
    gap:10px;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom:15px;
    padding-top:10px;
    
 }

 .cartItemTop {
    display:flex;
    width:100%;
    justify-content: space-between;
    align-items: center;

 }

 .cartItemName {
    font-family: 'Saira', sans-serif;
    font-size:18px;
    font-weight: 500;
 }

 .removeCartItem {
    width:20px;
 }

 .cartItemBottom {
    display:flex;
    align-items: flex-end;
    gap:15px;

 }

 .cartProductImage {
    width:100px;
 }

 .cartQtyMinus {
    width:18px;
    height:18px;
    padding-bottom:4px;
 }
 .inputQty {
    width:40px;
    height:30px;
    text-align: center;
    border:0;
 }

 .cartQtyPlus {
    width:18px;
    height:18px;
    transform: rotate(180deg );
    padding-top:4px;
 }

 .cartItemTotalQty {
    font-family: 'Saira', sans-serif;
    font-weight: 800;
    color: #d3b213;
    letter-spacing: 0.2px;
    font-size:18px;
    margin-left:auto;
 }
.cartTotal {
   text-transform: uppercase;
   font-weight: 500;
   font-family: 'Saira', sans-serif;
   font-size:18px;
   letter-spacing: 1.2px;
   margin-top:25px;
}

.cartButtonOrderNow {
   width:100%;
   height:40px;
   font-size:18px;
   border-radius: 5px;
   border: 0;
   font-family: 'Saira', sans-serif;
   background-color: #d3b213;
   color: #FFF;
   letter-spacing: 1.2px;
   font-weight: 500;
   text-transform: uppercase;
   box-shadow: rgb(0 0 0 / 40%) 0 3px 3px;
   margin-top:10px;
   margin-bottom: 10px;


}

 .productModal {
    position:fixed;
    display:none;
    flex-direction: column;
    height:100%;
    z-index: 2 !important;
    width:100%;
    top:1%;
    padding:10px;
    background-color: white;
    box-sizing: border-box;
 }  

 .closeImgModal {
   width:28px;
   align-self: flex-end;
 }

 .productImgModal {
   height:30%;
   width:50%;
   align-self:center;
 }

 .productNameModal {
   font-weight:bold;
   font-size:28px;
   text-transform: uppercase;
   font-family: 'Saira', sans-serif;
 }

 .underTitleSublineModal {
   width:50px;
   height:2px;
   background-color: #ddd;
   margin-top:5px;

 }

 .productPriceModal {
   font-family: 'Saira', sans-serif;
   font-weight:bold;
   color: #d3b213;
   font-size:30px;
 }

 .extraRequirementsModal {
   font-size:20px;
   font-family: 'Saira', sans-serif;
   font-weight:500;
   margin-bottom:10px;
 }

 .extraTextAreaModal {
   height:90px;
   border: 1px solid #e9e9e9;
   background-color: #fafafa;
   resize: none;
   line-height: 1.4;
   font-size:18px;
   padding:10px;
 }

 .totalOrderPriceModal {
   font-family: 'Saira', sans-serif;
   font-weight:800;
   font-size:32px;
   color: #d3b213;
   padding-top:5px;
 }

 .orderUtilitiesModal {
   display:flex;
   justify-content: flex-start;
   gap:10px;
 }

 .minusQtyButtonModal {
   width:40px;
   background-color: #f4f4f4;
 }

 .inputQtyModal {
   width:30px;
   text-align: center;
   border: none;
   font-size:16px;
   font-weight: normal;
   font-family: 'Saira', sans-serif;

 }

 .addQtyButtonModal {
   width:40px;
   height:40px;
   background-color: #d3b213;
 }

 .addToCartButtonModal {
   background-color: #d3b213;
   font-size: 18px;
   font-weight: 500;
   border-radius: 2px;
   color: #FFF;
   border:white;
   font-family: 'Saira', sans-serif;
 }

 .processOrderModal {
   position:fixed;
   display:none;
   flex-direction: column;
   height:100%;
   z-index: 2;
   width:100%;
   top:0%;
   padding:20px;
   background-color: white;
   box-sizing: border-box;
   gap:20px;
   overflow-y:auto;
   overflow-x:hidden;
 }
 
 .processOrderModalCloseButton {
   width:28px;
   height:28px;
   background-color: #FFF;
   align-self:end;
 }

 .processOrderTitle {
   font-size:28px;
   font-weight:bold;
   line-height:1.4;
   color: #060506;
   align-self:center;
   font-family: 'Saira', sans-serif;

 }
 .processOrderDetails {
   background-color: #fafafa;
 }

 .processOrderDetailsTitle {
   text-align:center;
   font-weight:400;
   width:100%;
   font-size:18px;
   font-family: 'Saira', sans-serif;
   padding:20px;
 }

 .processOrderDetailsProductOrderContainer {
   display:flex;
   justify-content: space-between;
   padding:20px;
   border-bottom: 1px solid #e7e7e7;
   
 }

 .processOrderProductName {
   font-size:18px;
   font-weight:500;
   color: #060506;
   font-family: 'Saira', sans-serif;
   line-height: 1.4;

 }

 .processOrderProductTotalPrice {
    letter-spacing: 0.2px;
    color: #d3b213;
    line-height: 1.4;
    font-weight: 800;
    font-family: 'Saira', sans-serif;

 }

 .processOrderDetailsTotalContainer {
   display:flex;
   padding:20px;
   justify-content: space-between;
 }

 .processOrderDetailsTotalText {
    font-size: 18px;
    font-weight: 500;
    color: #060506;
    line-height: 1.4;
    font-family: 'Saira', sans-serif;
 }

 .processOrderDetailsTotalPrice {
    letter-spacing: 0.2px;
    color: #d3b213;
    font-size: 18px;
    font-weight: 800;
    font-family: 'Saira', sans-serif;
 }

 .processOrderButton {
   letter-spacing: 1.2px;
   background-color: #d3b213;
   border-radius: 5px;
   line-height: 40px;
   font-size: 18px;
   text-align: center;
   font-weight: 500;
   box-shadow: rgb(0 0 0 / 40%) 0 3px 3px;
   border:0;
   color: #FFF;
   font-family: 'Saira', sans-serif;
 }

 .ConfirmOrderToBackendModal {
   position:fixed;
   display:none;
   flex-direction: column;
   height:100%;
   z-index: 2;
   width:100%;
   top:0%;
   padding:20px;
   background-color: white;
   box-sizing: border-box;
   gap:20px;
   overflow-y:auto;
   overflow-x:hidden;
   justify-content: center;
 }

 .ConfirmOrderText {
   letter-spacing: 0.2px;
   color: black;
   font-size: 18px;
   font-weight: 800;
   font-family: 'Saira', sans-serif;
   text-align: center;
 }
 
 .CloseConfirmOrderButtonModal {
   letter-spacing: 1.2px;
   background-color: rgba(0, 0, 255, 0.756);
   border-radius: 5px;
   line-height: 40px;
   font-size: 18px;
   text-align: center;
   font-weight: 900;
   box-shadow: rgb(0 0 0 / 40%) 0 3px 3px;
   border:0;
   color: #FFF;
   font-family: 'Saira', sans-serif;
 }

 .confirmOrderImg {
   height:30%;
 }