body {

   margin: 0;
   background-color: #F6EADB !important;
   overflow-x: hidden;
   scrollbar-width: none;
 }

 body::-webkit-scrollbar {
   display: none;
   /* Chrome, Safari */
 }

 .bg-light1 {
   background-color: #6D7D63 !important;
   color: #EADAC0 !important;
 }

 .bg-light2 {
   background-color: #6D7D63 !important;

 }

 /* 5 column support */
 .category-row {
   padding-bottom: 10px;
   scrollbar-width: thin;
   scrollbar-color: #aaa #f1f1f1;
 }

 /* Webkit (Chrome, Safari) scrollbar styling */
 .category-row::-webkit-scrollbar {
   height: 8px;
 }

 .category-row::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 10px;
 }

 .category-row::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 10px;
 }

 .category-row::-webkit-scrollbar-thumb:hover {
   background: #555;
 }

 .category-card {
   width: 180px;
   transition: transform 0.3s ease;
 }

 .category-card:hover {
   transform: translateY(-5px);
 }

 .category-card img {
   object-fit: cover;
   aspect-ratio: 1 / 1;
   width: 100%;
 }

 .category-title {
   font-weight: 500;
   font-size: 0.9rem;
   letter-spacing: 0.5px;
   margin-bottom: 0;
 }

 @media (max-width: 768px) {
   #carouselExampleCaptions .carousel-item img {
     height: 200px !important;
     width: 100% !important;
     object-fit: cover;
   }
 }

 body {
   font-family: 'DM Sans', sans-serif !important;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .heading,
 .element-title,
 .category-title {
   font-family: 'Raleway', sans-serif !important;
 }


 @media (max-width: 767.98px) {
   html {
     /* Base font-size: adjust up or down until “medium” feels right */
     font-size: 16px;
   }

   h1,
   h2,
   .heading {
     font-family: 'Raleway', sans-serif;
   }

   /* If you want to further tweak headings, links, etc.: */
   body {
     font-family: 'DM Sans', sans-serif;

     font-size: 1rem;
     /* equals 16px */
     line-height: 1.5;
   }

   h1 {
     font-size: 1.75rem;
   }

   /* ≈28px */
   h2 {
     font-size: 1.5rem;
   }

   /* ≈24px */
   h3 {
     font-size: 1.25rem;
   }

   /* ≈20px */
   h4,
   h5,
   h6 {
     font-size: 1rem;
   }

   /* ≈16px */
   p,
   a,
   span,
   li,
   input,
   button {
     font-size: 1rem !important;
   }
 }

 .img-fluid1 {
   max-width: 100%;
   height: 550px;
 }

 @media (max-width: 768px) {
   .img-fluid1 {
     width: 200px;
     height: 250px;
   }
 }


 .gap-41 {
   gap: 2.5rem 40px !important;
 }

 .horizontal-scroll-container {
   overflow-x: auto;
   scroll-behavior: smooth;
   padding: 10px 0;
 }

 .horizontal-product-list::-webkit-scrollbar {
   display: none;
 }

 .product-card {
   width: 200px;
   flex-shrink: 0;
 }

 .scroll-btn {
   position: absolute;
   top: 40%;
   background-color: rgba(0, 0, 0, 0.4);
   color: white;
   border: none;
   padding: 10px;
   z-index: 1;
   cursor: pointer;
   font-size: 24px;
   border-radius: 50%;
   transform: translateY(-50%);
 }

 .left-btn {
   left: 5px;
 }

 .right-btn {
   right: 5px;
 }

 @media (max-width: 768px) {
   .scroll-btn {
     display: none;
   }

   .product-card {
     width: 160px;
   }
 }

 .scroll-row {
   display: flex;
   gap: 1rem;
   overflow-x: auto;
   scroll-behavior: smooth;
   scrollbar-width: none;
   /* Firefox */
 }

 .scroll-row::-webkit-scrollbar {
   display: none;
   /* Chrome/Safari */
 }

 .left-btn {
   left: 0;
 }

 .right-btn {
   right: 0;
 }

 .scroll-row {
   display: flex;
   gap: 10px;
   overflow-x: auto;
   scroll-behavior: smooth;
 }

 .scroll-btn {
   background: none;
   border: none;
   font-size: 30px;
   position: absolute;
   top: 40%;
   z-index: 10;
   cursor: pointer;
 }