
.cart-notification {
     background-color: darkred;
     color: white;
     border-radius: 50%;
     width: 15px;
     height: 15px;
     font-size: 12px;
     font-weight: bold;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-left: -20px;
     position: relative;
     top: -5px;
 }
 
 body{
   height:auto;
   width:auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   height:auto;
   
 }
 body header{
   width:100%;
   height: auto;
   padding:0rem 0rem;
   position: relative;
   overflow: hidden;
   
 }
 
 *{
   padding:0px;
   margin:0px;
   list-style-type: none;
   outline:none;
   text-decoration: none; /* Remove underline */
   z-index: 0;
 
 }
 strong{
   font-size: 1.2rem;
   overflow: hidden;
 }
 
 
 
 
 
 
 
 
 .quotation_sent_container {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 4rem 1rem;
   background-color: #f9f9f9;
   min-height: 60vh;
 }
 
 .quotation_card {
   max-width: 600px;
   width: 100%;
   background: white;
   padding: 2rem;
   border-radius: 1rem;
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap:2rem;
 }
 
 .quotation_card h1 {
   margin-bottom: 1rem;
   font-size: 2rem;
   color: var(--primary-text-color);
 }
 
 .quotation_card p {
   font-size: 1rem;
   color: #555;
   margin-bottom: 1rem;
 }
 
 
 
 
 
 
 
 
 
 
 .bottom_bar_mobile {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   display: none;
   justify-content: space-around;
   align-items: center;
   background: #fff;
   border-radius: 1.5rem 1.5rem 0 0;
   box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
   padding: 0.6rem 0.5rem;
   z-index: 1500;
 }
 
 .bottom_bar_mobile a {
   flex: 1;
   text-align: center;
   font-size: 0.75rem;
   text-decoration: none;
   color: #333;
   padding: 0.3rem;
   transition: all 0.3s;
 }
 
 .bottom_bar_mobile .center-btn {
   position: relative;
   color: #fff;
   border-radius: 50%;
   width: 64px;
   height: 64px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: -30px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.3);
   z-index: 1600;
 }
 
 .bottom_bar_mobile .icon {
   font-size: 1.4rem;
 }
 
 .dropdown-menu {
   position: fixed;
   bottom: 5.5rem;
   left: 50%;
   transform: translateX(-50%);
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 2px 15px rgba(0,0,0,0.2);
   display: none;
   flex-direction: column;
   min-width: 160px;
   padding: 0.5rem 0;
   z-index: 1601;
 }
 
 .dropdown-menu a {
   text-align: center;
   padding: 0.6rem 1rem;
   text-decoration: none;
   color: #000;
   font-size: 0.85rem;
 }
 
 .dropdown-menu a:hover {
   background: #f2f2f2;
 }
 
 @media (max-width: 768px) {
   .bottom_bar_mobile {
     display: flex;
   }
 }
 
 
 .bottom-sub_nav_item{
   display: flex;
   gap:1rem;
 }
 
 
 
 
 
 /* Social Media Bar Styling */
 .social-bar {
   background-color: #f1f1f1;
   padding: 0.5rem 1rem;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   font-family: 'Inter', sans-serif;
   border-bottom: 1px solid #e0e0e0;
   border-radius: 1rem;
 }
 
 .social-wrapper {
   display: flex;
   gap: 0.1rem;
 }
 
 .social-icon {
   width: 28px;
   height: 28px;
   display: inline-block;
   background-size: 100%;
   background-repeat: no-repeat;
   transition: transform 0.2s ease, filter 0.2s ease;
   opacity: 0.8;
 }
 
 .social-icon:hover {
   transform: scale(1.1);
   opacity: 1;
 }
 
 
 
 /* Mobile responsiveness */
 @media (max-width: 600px) {
   .social-bar {
     justify-content: center;
     padding: 0.5rem;
   }
 
   .social-icon {
     width: 24px;
     height: 24px;
   }
 }
 
 
 
 
 
 
 
 .scrollable,.scrollable_cat {
   cursor: grab;
   overflow-x: auto;
   scroll-behavior: smooth;
   scrollbar-width: none; /* hide scrollbar in Firefox */
   user-select: none;
   user-drag: none;
   
 }
 .scrollable::-webkit-scrollbar,.grid.scrollable_cat::-webkit-scrollbar { display: none; } /* hide in Chrome */
 .scrollable.grabbing,.grid.scrollable_cat{
   cursor: grabbing;
 }
 
 .scroll-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   overflow: hidden;
   width: 100%;

 }
 
 .grid.scrollable, .grid.scrollable_cat{
   display: flex;
   gap: 1rem;
   overflow-x: auto;
   scroll-behavior: smooth;
   padding-bottom: 1rem;
   justify-content: space-evenly;
 }
 
 
 .grid.scrollable_cat {
  scrollbar-width: none;
  width: 100%;

}

 .grid.scrollable{
   scrollbar-width: none;
   width: 100%;
   min-height: fit-content;

 }
 
 .scroll-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;
   background: rgba(255, 255, 255, 0.8);
   border: none;
   font-size: 2rem;
   padding: 0 0.5rem;
   cursor: pointer;
   transition: background 0.2s;
 }
 
 .scroll-btn.left {
   left: 0;
 }
 
 .scroll-btn.right {
   right: 0;
 }
 
 .scroll-btn:hover {
   background: rgba(0, 0, 0, 0.1);
 }
 .scroll-btn.hidden {
   display: none;
 }
 
 