*, ::after, ::before {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
button, input, select, textarea {
  font-family: inherit; /* Fixes font inconsistency */
  font-size: 100%;      /* Ensures consistent text sizing */
  box-sizing: border-box; /* Includes padding/border in width */
  margin: 0;            /* Removes default browser margins */
}
 
 body{
  
      font-family: opensans;
      margin:0;
      padding:0;
  
         background-color: white;
       
   /*   background-repeat: no-repeat;*/
      
  }

.headerbackground{
        width:100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        position: fixed;
            z-index:110;
             background-color: rgb(28, 141, 169);
}
  
  header{
        width:100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        position: fixed;
            z-index:120;
      
         }

        .header1{
        background-color: rgb(16, 82, 92);
        font-size: 28px;
        width:100%;
        height: 50px;
        display:flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0px 10px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
        justify-content: right;
        
      }




      .menubar{
        
        position: fixed;
        z-index:110;
        width: 220px;
        height: 900px;
        background-color: rgb(35, 111, 122);
        background-color: rgba(255, 255, 255, 0.357);
        
        
        font-size: 20px;
        color: rgb(255, 255, 255);
        text-shadow: 1px 1px 2px black, 0 0 25px rgb(35, 111, 122), 0 0 10px rgb(16, 82, 92);
        backdrop-filter: blur(5px);
        border-right: 1px solid rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
        padding:75px 0 0 0;
        display: none;
      
    }
    
      
 .headermenu
  {
  cursor: pointer;
  margin: 10px 10px 0 5px ;
  display: none;
  }
 .menu-line{
  height:3px;
  width:20px;
  background-color:rgb(255, 255, 255);
  margin-bottom: 4px;
  
}
.dashboard:hover{
    background-color: #ffffff;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.357);
    background-color: rgb(16, 82, 92);
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(35, 111, 122), 0 0 10px rgb(16, 82, 92);
    border-radius: 5px;
    backdrop-filter: blur(5px);
    border: 1px solid rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    
  }

  .menulist{
  width: 200px;
  height:30px;

  margin:10px;
} 
  .dashboard
  {
    font-size:20px;
    text-decoration:none;
    color: rgb(0, 0, 0);
    font-weight:bold;
    text-shadow: none;
    bottom: 5px;
    position: relative;
   padding: 3px 0 3px 0;
  }


  .dashboard1{
    text-decoration:none;
    color: rgb(255, 255, 255);
    bottom: 5px;
    position: relative;
    padding: 3px 0 3px 0;
    background-color: rgb(35, 111, 122);
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(35, 111, 122), 0 0 10px rgb(16, 82, 92);
    border-radius: 5px;
    backdrop-filter: blur(5px);
    border: 1px solid rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

  }

  .menuicon{
       padding:2px;
        
   }


  .logo{

    display:flex;
    
        color: rgb(255, 255, 255);
        font-size: 25px;
        font-weight: bold;
        padding:10px 0 0 5px;
        text-align:center;
        gap:5px;
     Margin-right:auto;
  }

 
 
 .footer {
        width: 100%;
  margin-bottom:0px;
            text-align: center;
            padding: 10px ;
        bottom:0px;
            background-color: rgb(16, 82, 92);
            color: white;
            justify-content: center;
            align-items: center;
        }

  .whatsappicon {
   overflow: hidden;
   position: fixed;
   bottom: 7%;
   left:88%;
   width: 100%;
   z-index: 100;
}

@media all and (max-width:740px)
{

              .header2 ul{display:none;}  

              .whatsappicon {
               bottom: 20%;
               left:78%;
              }
}

/* header2 */
              .headermenu{display: block;}
              .menubar{display:none;}
              .containermenu{
               position: fixed;
               display:block;
               padding:50px 0 0 0;
               z-index: 110;
              }

.cart-wrapper {
    position: relative; /* Parent must be relative for absolute positioning of child */
    display: inline-block;
    padding-right:10px;
}

.cart-count ,.wishlist-count  {
    position: absolute;
    top: -5px; /* Adjust as needed for positioning above the icon */
    right:2px; /* Adjust as needed for positioning to the right of the icon */
    padding: 2px 4px;
    border-radius: 50%; /* Makes it circular */
    background-color: red; /* Badge background color */
    color: white; /* Text color */
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
}

.wishlist-count  {
    right:40px; /* Adjust as needed for positioning to the right of the icon */
}


.myaccount {
    width:80px;
    margin:5px 10px 5px 5px;
    color:#ddd;
    display: flex;
    flex-direction:column;
    text-decoration:none;
    text-align:center;
    background-color: rgb(16, 82, 92); 
    align-items: center; 
    justify-content:center;
    font-size:10px;
    cursor:pointer;
}

  .header2{
        width:100%;
        z-index:110;
        height: 40px;
        display: flex;
        align-items:center;
        justify-content: center;
        justify-items:center;
        background-color: rgba(30, 34, 34, 0.357);
        text-shadow: 1px 1px 2px black, 0 0 25px rgb(35, 111, 122), 0 0 10px rgb(16, 82, 92);
        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
      
     
              }             .flzhalfsplit
                             {
                              display: flex;
                               gap: 7px; 
                               flex-wrap: wrap; 
                                margin-top:10px;
                               align-items:center;
                              justify-content: center;
                              justify-items:center;
                               }
                          
                             .flzsplit1 select{
                              width: 20vw;
                                  height:28px;
                                   border-radius: 5px;
                                   padding:5px;
                              background-color: rgba(255, 255, 255, 0.357);
                               outline: none;
                               border:none;
                              
                               }
                             .flzsplit2 input
                             {
                                width:25vw;
                                height:28px;
                                padding:5px;
                                border-radius: 5px; 
                              background-color: rgba(255, 255, 255, 0.357);
                              outline:none;
                              border:none;
                                                      
                               }

                              .flzhalfsplit .flzsplit2 input:focus,
                             .flzhalfsplit .flzsplit1 select:focus{
                             background-color: #ddd;
                             outline: none;
                             color:black;
                             }
                             .searchicon{
                              width:30px;
                              height:30px;
                              
                             }
/* MENUBAR  -- NAVIGATIONBAR */

  .studentlogin{
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 9; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
  }
                            .loginviewport{
                            margin-top:150px;
                            display:flex;
                            align-items: center;
                            justify-content:center;
                            justify-items:center;
                            }

                               

  .loginchildviewport{
   
    padding:10px;
    margin:10px;
   
    background-color:rgb(255, 255, 255);

    width:250px;
    font-size:15px;
    
    color:black;
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(35, 111, 122), 0 0 10px rgb(16, 82, 92);
    border-radius: 10px;
    backdrop-filter: blur(5px);
    border: 1px solid rgb(255, 255, 255);
    display:flex;
    align-items: center;
    justify-content:center;
    justify-items:center;
    flex-direction:column;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  }

   
/* DEALSCROLL */

 
.dealscroll{
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;


}
.leftbtn,.tutorleftbtn{

  width: 2%;
  height:200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rightbtn,.tutorrightbtn{
 

  height:200px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.tutorleftbtn img{
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.4s;
  transform: rotate(-90deg);
}
.tutorrightbtn img{
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.4s;
  transform: rotate(90deg);
}

.tutorleftbtn img:hover,.tutorrightbtn img:hover{
  opacity: 1;
}


.tutorcard {
  margin: 5px;
  display: flex;
    width:100vwh;
  height: 100vwh;

  overflow-x:auto;
  scroll-behavior: smooth;
 transition: all 0.5s ease;
  
scroll-snap-type: x mandatory;
}

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

.tutorcard-box
 {
  width:100%;
  height:100%;
  margin:5px;
  border-radius: 8px;
  transition: all 0.5s ease;
  scroll-snap-align: start;
 }
.tutorcard-box:hover,.findtutorbutton:hover{
  transform: scale(1.05);
  background-color:  rgb(16, 82, 92);
  color: white;
}

       /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
 
  width: 300px;
  height: 180px;
  
}


@media all and (max-width:740px)
{
 .flip-card {
 
  width: 94vw;
  
  height: 50vw;
  
}  

.tutorrightbtn,.tutorleftbtn{ display:none;}
}



/*     Category and Sub category Routine                */

  :root {
    --primary: #2563eb;
    --text-dark: #1f2937;
    --bg-light: #f9fafb;
}

.QuantitySelectorWrapper{

 display: flex;
    width:100%;
  justify-content: center; 
  margin:20px;
}

.ShareQuantitySelector{
 width:35%;  
 display: flex;
 justify-content: center;
 align-items: center;
 border:1px solid rgb(16, 82, 92);
 border-radius:5px;margin:0 10px;
}

.ShareAddtocartWrapper{
 display: flex;
 width:100%;
 padding:20px 0;
 justify-content: center;
 border-bottom:1px solid #cdcdcdff;
}


.ShareAddtoCartButton,.ShareBuyNowButton{
width:40%;
padding:10px 0;
 margin:0 10px;
  cursor: pointer;
  background-color:red;
  font-size: 17px;
  color:white;
  border-radius: 5px;
  backdrop-filter: blur(5px);
  border: 1px solid rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  text-align:center;
  align-items: center;
  justify-content: center;
  text-decoration:none;
}

.ShareBuyNowButton{
  background-color:orange;
}

.ShareAddtoCartButton:hover,.ShareBuyNowButton:hover{
background-color:green;
font-size: 15px;

}
.ProductDescription{
   width:100%;
     font-family: 'Avenir', sans-serif;
   color: #1a1a1a;
    font-weight: 400;

    text-align:left;
    font-size: 16px;
    padding:10px;

}

  .MRPprice,.strikePrice{
    width:100%;
    color:gray;
    text-align:left;
    font-size: 14px;
   
    padding:10px;
    font-Style:italic;
   border-bottom:1px solid #cdcdcdff;
      
    font-weight: 400;
  }
.strikePrice{
  
      padding:0; 
   text-decoration: line-through; /* This creates the "strike" line */
      
}



.elite-price-container {
    display: flex;
    align-items: flex-start; /* Aligns symbol and decimals to the top */
    font-family: 'Avenir', sans-serif;
    color: #1a1a1a;
   padding:10px;
}

/* The Rupee Symbol */
.price-symbol {
    font-size: 14px;        /* Smaller than main number */
    font-weight: 600;
    margin-right: 2px;      /* Gap before number */
    margin-top: 4px;        /* Adjust vertical alignment */
}

/* The Main Number (59) */
.price-main {
    font-size: 32px;        /* Large and bold */
    font-weight: 600;
    line-height: 1;         /* Prevents extra spacing */
    padding-left:10px;
}

/* The Small Decimals (.00) */
.price-decimals {
    font-size: 16px;        /* Half the size of main number */
    font-weight: 500;
    margin-top: 4px;        /* Aligns to top of main number */
}




  .ShopName{
    width:100%;
     color: var( --primary);
    text-align:left;
    font-size: 12px;
    padding:10px;
    font-Style:italic;
    border-bottom:1px solid #cdcdcdff;
  }
  .ProductTitle{
    width:100%;
     font-family: 'Avenir', sans-serif;
   color: #1a1a1a;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align:left;
    font-size: 25px;
    padding:10px;
  
  }
  .ProductCategory{
    width:100%;
    color:gray;
    text-align:left;
    font-size: 17px;
    padding:10px;
    
  }

.ProductDetails{
max-width:700px;

border:1px solid #cdcdcdff;
display:flex;
flex-direction:column;
flex-grow:1;
}

.ProductGallery{
width:370px;
height:450px;
border:1px solid #cdcdcdff;
display:flex;
flex-direction:column;
padding-left:20px;
}

.MainImage{
width:340px;
height:340px;
margin:5px;
border:1px solid #cdcdcdff;
}


.ChildImageWrapper{
width:370px;
height:70px;
margin:5px;
display:flex;
gap:3px;
flex-wrap: wrap;
}



/* The base style for all thumbnails */
.ChildImage {
  width:60px;
height:60px;
    border: 2px solid transparent; /* Keeps layout stable when border appears */
    cursor: pointer;
    transition: border-color 0.3s ease;
    padding: 2px;
     overflow: hidden;
}

/* The highlight style */
.ChildImage.active {
    /*border-color: #007bff;  Change this to your preferred color (e.g., Blue) */
       box-shadow: 0 0 10px rgba(0, 123, 255, 0.8);
    transform: scale(1.05); /* Slightly enlarges the thumbnail */
    z-index: 1;
}

.ChildImage img {
    object-fit: cover; /* Prevents image stretching */
    width: 100%;
    height: 100%;
}


.subcategorycontainer{

 width:100vw;
 display: flex;
 flex-wrap:wrap;
 align-items: center;
  justify-content: left;
  justify-items: center;
border:1px solid #cdcdcdff;
}

.item-container{
 display:flex;
 flex-direction:column;
 border:1px solid #eee9e9ff;
 }

.item-split1{
width:210px;
height:210px;
padding:5px;
border:1px solid #eee9e9ff;
transition: all 0.5s ease;
position:relative;
 }

 .item-split1:hover{
  transform: scale(1.05);
 }

 .Wishlist-icon{
position: absolute;
bottom:75%;
margin-left:85%; 
cursor:pointer;
 }

  .share-icon{
position: absolute;
bottom:55%;
margin-left:85%; 
cursor:pointer;
 }
.sold{
position: absolute;
bottom:85%;
margin-left:1%; cursor:pointer;

}


.item-split2
 {
 width:210px;
 padding:5px ;
 font-size:25px;
 }

.ratecard{
 font-size:23px;
 color:red;
 }
.itemname{
  height:60px;
font-size:18px;
color:black;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis; 
}

.quantity-selector {
 
  display: flex;
  justify-content: center;
  align-items: center;
   border:1px solid rgb(16, 82, 92);
  border-radius:3px;
}

.quantity-selector button, .ShareQuantitySelector button{

  font-size: 20px;
  cursor: pointer;
  border:none;
  background-color:white;
  color:red;
}
.quantity-selector input,.ShareQuantitySelector input{
 outline:none;
text-align:center;width:50px;display:flex;flex-grow:1;
  border:none;

-webkit-appearance: textfield; /* For WebKit/Blink browsers (Chrome, Safari, Edge, Opera) */
  -moz-appearance: textfield;    /* For Firefox */
  appearance: textfield;

}

/* For Chrome, Safari, Edge, Opera */
.quantity-selector input::-webkit-inner-spin-button,
.quantity-selector input::-webkit-outer-spin-button,
.ShareQuantitySelector input::-webkit-inner-spin-button,
.ShareQuantitySelector input::-webkit-outer-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

 .quantity-selector .minus-btn,.ShareQuantitySelector .minus-btn {
   margin:0 0 0 10px;
 
  }
  .quantity-selector .plus-btn,.ShareQuantitySelector .plus-btn{
   margin:0 10px 0 0;
 
  }

.add-to-cart-btn,.call-to-buy-btn{
  width:100%;
  height:28px;
  cursor: pointer;
  background-color:red;
  font-size: 14px;
  color:white;
  border-radius: 5px;
  backdrop-filter: blur(5px);
  border: 1px solid rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  text-align:center;
  align-items: center;
  justify-content: center;
  text-decoration:none;

}
.call-to-buy-btn{
 background-color:#25D366;


}

.categorycontainer{
   width:100%;
  display: flex;
  flex-direction:column;
  position: sticky;
  top: 100px;
  z-index:1;
}

.categoryitems,.subcategoryitems{
  
  margin:0 5px;
  display:flex;
  flex-grow:1;
  flex-direction:row;
  align-items: center;
  justify-content: space-evenly;
  justify-items:center;
  padding:5px;
  text-align:center;
   color:red;
 background-color:white;
  overflow-x:auto;
  scroll-behavior: smooth;
 transition: all 0.5s ease;
}

.categoryitems::-webkit-scrollbar {
  display: none;
}
.category-box{
width:80px;
height:120px;
  
margin:5px;
border-radius: 8px;
transition: all 0.5s ease;
}

.category-box:hover{
  transform: scale(1.05);
}

       /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
 .category-card,.subcategory-card {
  width: 80px;
  height: 80px;
  border: 1px solid #e6d9d9ff;
  border-radius: 8px;
  padding: 4px;
  margin: 4px;
  cursor: pointer;
  /*transition: all 0.5s ease;  Smooths the glowing transition */
 
}
.category-card.selected,.subcategory-card.selected {
  border-color: #007bff; /* Changes border to a blue tone */
  box-shadow: 0 0 12px rgba(0, 123, 255, 0.6); /* Adds the glow effect */
  /*transform: scale(1.05);  Optional: slightly enlarges the box */
}

.quantity-selector-wrapper
{
  position: relative;
}

.item-split2 {
  /* ...other styles... */
  position: relative;
}

/* Initially hide both the add-to-cart button and quantity selector */
.item-container .add-to-cart-btn
{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.item-container .ComplianceInfo{
color:#555;
font-size:14px;
margin:1px;
line-height: 1.4;
}

.item-container .quantity-selector ,
.item-container .call-to-buy-btn
 {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
/* On hover of the item-container, show the add-to-cart button */
.item-container:hover .add-to-cart-btn,
.item-container:hover .call-to-buy-btn,
.item-container .ComplianceInfo:hover .add-to-cart-btn
  {
  opacity: 1;
  visibility: visible;
}

/* Initially hide the quantity selector */
.quantity-selector {
  /* It needs to be positioned absolutely to occupy the same space as the button */
  position: absolute;
  bottom: 0;
  left: 0;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.quantity-selector-wrapper{
  width:100%;
  display: flex;
  justify-content: center;
  align-items: left;
  flex-direction: column;

}
/*.quantity-selector-wrapper:hover  .quantity-selector */
.quantity-selector-wrapper:hover  .quantity-selector {
  opacity: 1;
  visibility: visible;
}

.quantity-selector-wrapper:hover  .add-to-cart-btn{
  opacity: 0;
  visibility: hidden;
}

.shopname{
  margin:15px 0;
  color:Green;
  font-size: 14px;
  cursor:pointer;
  max-width: 10ch;

   overflow: hidden; 
   text-overflow: ellipsis;
   
}

.shopname:hover{
  color:Blue;
}


@media all and (max-width:740px)
{

.item-split1{
width:46vw;
height:46vw;
padding:5px;

}
.item-split2{
  width:46vw;

padding:5px;
font-size:25px;
}
.ratecard{
font-size:23px;
color:red;
}
.itemname{
font-size:18px;
color:black;
}
/*
.item-container .add-to-cart-btn
{
  display:flex;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}
*/

.subcategorycontainer{

  justify-content: space-around;

}


                                              }

/*checkout*/


                       .checkoutindex{
                        text-align:center;margin:2px;padding:5px 0;
                        border:1px solid #e6d9d9ff;
                        
                       }

                      .checkoutstyle,.checkoutgeneratestyle{
                        position: fixed; /* Sit on top of the page content */
                        display: none; /* Hidden by default */
                        width: 100%; /* Full width (cover the whole page) */
                        height: 100%; /* Full height (cover the whole page) */
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: rgba(0,0,0,0.5); /* Black background with opacity */
                        z-index: 9; /* Specify a stack order in case you're using a different order for other elements */
                      
                         }
                            .checkoutviewport,.checkoutgenerateviewport{
                            margin-top:100px;
                            display:flex;
                            align-items: center;
                            justify-content:center;
                            justify-items:center;
                            }
                       .checkoutchildviewport,.checkoutgeneratechildviewport{
                          min-width:350px;
                          max-width:450px;
    height:450px;
    padding:10px;
    margin:10px;
    background-color: rgba(255, 255, 255, 0.357);
    background-color: white;
    font-size:15px;
    color: rgb(255, 255, 255);
    color: black;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    border: 1px solid rgb(255, 255, 255);
    display:flex;
    flex-grow:1;
    align-items: center;
    justify-content:start;
    justify-items:center;
    flex-direction:column;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
     overflow-y: hidden;
  }
          .checkoutitemcontainer
           {
              width:100%;
              height:400px;
             /* overflow:auto;*/
                overflow-x: hidden; 
                    overflow-y: auto;
                  /* For Firefox *scrollbar-width: none; scrollbar-width: none; */
 
    /* For Internet Explorer and Edge (older versions)  -ms-overflow-style: none; */
   
            }
          
.checkoutitemcontainer::-webkit-scrollbar-thumb {
  background: #c5b9b9ff; /* Color of the draggable slider */
  border-radius: 10px;
}
.checkoutitemcontainer::-webkit-scrollbar-thumb:hover {
  background: #f40a0aff; /* Color when hovering over the slider */
}
.checkoutitemcontainer::-webkit-scrollbar {
  width: 5px; /* Adjust this value to make it thinner (e.g., 8px, 4px) */
 /* height: 5px; /* Also necessary if you have a horizontal scrollbar */

}

            .checkoutcontainerwrapper
           {
              width:100%;
              display:flex;
              padding:5px;
              background-color:white;
              border:1px solid #e6d9d9ff;
              transition: all 0.5s ease;
              position:relative;
              margin:5px;
            }

           .checkoutcontainerwrapper:hover{
             transform: scale(1.02);
            }
                   .checkoutimageitemname{
                    display:flex;
                    padding:5px;
                    width:75%;
                  
                     display:flex;align-items:center;justify-content:center;justify-items:center;
                   }            
                            .checkoutimage
                            {
                            width:35%;
                            height:100px;
                            
                           }
                           .checkoutnamequantity{
                            width:65%;
                            display:flex;
                            flex-direction:column; 
                            }



                                   .checkoutitemname{
                                     width:100%;
                                     height:70%;
                                     padding:5px;
                                     font-size:16px;
                                     display:flex;
                                     flex-wrap:wrap;
                                     }

                                   .checkoutqueryselector{
                                     width:100%;
                                     height:30%;
                                     background-color:white;
                                     display:flex;align-items:center;justify-content:center;justify-items:center;
                                     padding:20px;
                                     }
.quantity-selector-co {
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border:1px solid rgb(16, 82, 92);
  border-radius:3px;
}
.quantity-selector-co button {

  font-size: 20px;
  cursor: pointer;
  border:none;
  background-color:white;
  color:red;
}
.quantity-selector-co input{
text-align:center;width:50px;display:flex;flex-grow:1;
border:none;
outline:none;
-webkit-appearance: textfield; /* For WebKit/Blink browsers (Chrome, Safari, Edge, Opera) */
  -moz-appearance: textfield;    /* For Firefox */
  appearance: textfield;
}
/* For Chrome, Safari, Edge, Opera */
.quantity-selector-co input::-webkit-inner-spin-button,
.quantity-selector-co input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

 .quantity-selector-co .checkoutminus-btn {
  margin:0 0 0 5px;
 
  } 
  .quantity-selector-co .checkoutplus-btn{
 margin:0 5px 0 0;
 
  }
.Qty-style{
font-size:12px;margin: 0 10px 0 10px; color:black;text-shadow:none;
}
                 .checkoutcorrection{
                  width:25%;
   
                   display:flex;
                  /* background-color:orange;*/
                   padding:5px;
                   flex-direction:column;
                 }          
                           .checkoutamount{
                            width:100%;
                            height:40%;
                            color:red;
                            font-size:18px;
                             /* background-color:blue;*/
                            display:flex;align-items:center;justify-content:center;justify-items:center;
                            } 
                            .checkoutmrp
                            {
                            width:100%;
                            height:30%;
                           /* background-color:red;*/
                            font-style:italic;
                              text-decoration: line-through;
                            display:flex;align-items:center;justify-content:center;justify-items:center;
                           }                                      
                            .checkoutremove
                            {
                            width:100%;
                            height:30%;
                           /* background-color:green;*/
                           }      
                                                  
  .checkoutbtn{
    padding: 5px 20px;
    cursor: pointer;
    background-color: red;
    color: white;
     border-radius: 8px;
    backdrop-filter: blur(5px);
    border: 2px solid rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    text-align:center;
    align-items: center;
    justify-content:center;
    
     }
     .checkoutbtn:hover{
      background-color: green;
      color: rgb(255, 255, 255);
     }