hr{color:gray;}
#tit{color:white;
    li {
    display: flex;
    align-items: center;
    gap: 2px; /* Adjust spacing between items */
    flex-wrap: wrap; /* Ensures responsiveness */
}

.divider {
    width: 2px;
    height: 15px;
    background-color: gray; /* Light gray divider */
}
    
}
#xzoom-default{width:400px;}
.xzoom-gallery{width:80px;}





.ribbon {
  width: 48%; /* Increased by 20% */
  height: 0px;
  position: relative;
  float: left;
  background-size: cover;
  text-transform: uppercase;
  color: black;
}

.ribbon:nth-child(even) {margin-right: 4%;}

@media (max-width: 500px) {.ribbon {width: 100%;} .ribbon:nth-child(even) {margin-right: 0%; }

#xzoom-default{width:99%;}
.xzoom-gallery{width:20%;}

}

.wrap {
  width: 100%;
  height: 226px; /* Increased by 20% */
  position: absolute;
  top: 1px;
  left: -4px;
  overflow: hidden;
}

.wrap:before, .wrap:after {
  content: ""; 
  position: absolute;
}

.wrap:before {
  width: 24px; /* Increased by 20% */
  height: 5px;
  left: 60px; /* Adjusted position */
  background: #4D6530;
  border-radius: 5px 5px 0px 0px;
}

.wrap:after {
  width: 5px; /* Increased by 20% */
  height: 24px;
  left: 0px;
  top: 60px; /* Adjusted to fit better */
  background: #4D6530;
  border-radius: 0px 5px 5px 0px;
}

.ribbon6 {
  width: 120px; /* Increased by 20% */
  height: 24px;
  line-height: 24px;
  position: absolute;
  top: 18px; /* Adjusted to fit */
  left: -30px; /* Adjusted position */
  z-index: 2;
  overflow: hidden;
  transform: rotate(-45deg); /* Left side rotation */
  border: 1px dashed;
  box-shadow: 0 0 0 2px #57DD43, 0px 12px 3px -9px rgba(0,0,0,0.6);
  background: #57DD43;
  text-align: center;
  font-size: 12px; /* Adjusted for new size */
}

















/*Button + - */
.qty-controls {height: 37px;}


.cart-adjust, .product-adjust {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  background: linear-gradient(145deg, #1d8cf8, #3356d8);
  display:inline-block;
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  font-family:Arial,sans-serif;

  text-transform:uppercase;
  -webkit-box-shadow:inset 0 0 10px gray;
  -moz-box-shadow:inset 0 0 10px gray;
  box-shadow:inset 0 0 10px gray;
    width: 30px;
    height: 30px;
    background-color: #007bff;
    color: white;
    font-size: 20px;
}

.product-adjust:hover {
    background-color: #0056b3;
}

.product-qty {
    min-width: 24px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 4px 35px;
    border: 1px solid #ccc;
    border-radius: 5px;

      border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);

  text-transform:uppercase;
  -webkit-box-shadow:inset 0 0 10px gray;
  -moz-box-shadow:inset 0 0 10px gray;
  box-shadow:inset 0 0 10px gray;

}




/*HEADER FOOTER*/
    /* Global Styling */
* {margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }

body {background-color: #f5f5f5; color: #333; }

a {text-decoration: none; color: #fff; transition: color 0.3s ease, transform 0.3s ease;}

    a:hover { color: #ffe8a1; transform: scale(1.05);}

.cc {
  font-size:14px;
  width:40px;
  height:40px;
float: right;
padding-right:30px;
}
.cc img{width:35px;}
#co {
  position:relative;
  top:-38px;
  right:-16px;
  color:red
}

.three-d input{width:56%;height:30px;border-radius: 5px;}

    /* 3D Effect */
.three-d {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(145deg, #1d8cf8, #3356d8);

background-blend-mode: multiply;
background-image: url('https://www.transparenttextures.com/patterns/dark-leather.png'); 
background-repeat: repeat;
background-color:rgba(255,255,255,0.8);;
    
overflow: hidden;
    }

    /* Header Styling */
header {  
position: fixed;
top: 0px;
padding: 10px;
background: rgba(95, 254, 159, 0.9); /* Adjusted RGB values */
border: 0 solid var(--dark);
overflow: hidden;
width: 100%;
z-index: 2;

}

    header .logo {
        font-size: 1.5rem;
        font-weight: bold;
        color: #fff;
    }

    header nav {
        display: flex;
        gap: 1.5rem;
    }

    header nav a {
        font-size: 1rem;
    }

    /* Footer Styling */
    footer {
        padding: 2rem 2rem;
        text-align: center;
        margin-top: auto;
    }

    footer nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        margin-bottom: 1rem;
    }

    footer nav a {
        font-size: 0.9rem;
    }

    footer p {
        font-size: 0.8rem;
        color: #ccc;
    }


/*HEADER FOOTER //*/

/* Styling for Paragraphs */
p {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
    margin: 1rem 0;
    text-align: justify;
    transition: color 0.3s ease;
}

p:hover {
    color: #1d8cf8; /* Subtle color shift on hover */
}

/* Styling for Headings */
h2 {
    font-size: 2rem;
    margin: 1.5rem 0 1rem;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 0.5rem;
}

h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #1d8cf8, #3356d8);
    margin-top: 8px;
    border-radius: 8px;
}

/* Styling for Unordered Lists */
ul {
    list-style-type: none; /* Remove default bullet points */
    padding-left: 0; /* Remove default padding */
    margin: 1rem 0;
}


.zg ul li {
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    transition: background 0.3s ease, transform 0.2s ease;
}

/* Add a bullet-like symbol with 3D effect */
.zg ul li::before {
    content: "•";
    color: #1d8cf8;
    font-size: 1.5rem;
    margin-right: 1rem;
    line-height: 1;
}

.zg ul li:hover {
    background: #f0f9ff;
    transform: translateX(10px); /* Subtle slide effect */
}

/* Extra responsive styling */
@media (max-width: 768px) {
  h2 {
        font-size: 1.6rem;
    }

    p {
        font-size: 0.95rem;
    }

    ul li {
        padding: 0.75rem 1rem;
    }
}







#customers th,input[type=submit] {
  background-color:#4caf50;
  color:#fff
}
.mySlides {
  display:none
}
.price,
li {
  list-style-type:none
}
.button,
a {
  text-decoration:none
}
*,
.box,
.box span {
  box-sizing:border-box
}
.button,
.price li,
.xzoom-thumbs,
h1 {
  text-align:center
}
.modal {
  top:0px;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgba(0,0,0,.4)
}

.modal-content {
  background-color:#fefefe;
  overflow-y:scroll;
  margin:auto;
  padding:20px;
  border:1px solid #888;
  height:100%
}
#customers {
  font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
  border-collapse:collapse;
  width:100%
}
#customers td,
#customers th {
  border:1px solid #ddd;
  padding:8px
}
#customers tr:nth-child(2n) {
  background-color:#f2f2f2
}
#customers tr:hover {
  background-color:#ddd
}
#customers th {
  padding-top:12px;
  padding-bottom:12px;
  text-align:left
}
.form input[type=text],
select,
textarea {
  width:100%;
  margin-bottom:10px
}
input[type=text],
select,
textarea {
  padding:12px;
  border:1px solid #ccc;
  border-radius:4px;
  box-sizing:border-box;
  resize:vertical
}
input[type=submit] {
  padding:12px 20px;
  border:none;
  border-radius:4px;
  cursor:pointer
}
input[type=submit]:hover {
  background-color:#45a049
}
,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:"Segoe UI",Arial,sans-serif
}
h1 {
  font-size:30px
}
h3 {
  font-size:24px
}
.ps,
.px,
h2,
h4 {
  font-size:20px
}
h5 {
  font-size:18px
}
h6 {
  font-size:16px
}
h1,
h2,
h3,
p {
  line-height:200%
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight:400;
  margin:10px 0
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  font-weight:inherit
}
hr {
  border-top:1px solid #eee;
  margin:10px 0
}
a {
  color:inherit
}
li {
  font-size:16
}
p {
  font-size:17px
}



.pp,
.ps,
.px {
  font-family:"Times New Roman",Times,serif
}
.box,
.button,
.button:link {
  color:#fff
}
.price img {
    max-width:99%;
  object-fit:cover;
}


.slideshow-container {
  max-width:1000px;
  position:relative;
  margin:auto;
}
.fade {
  -webkit-animation-name:fade;
  -webkit-animation-duration:1.5s;
  animation-name:fade;
  animation-duration:1.5s
}
@-webkit-keyframes fade {
  from {
    opacity:.4
  }
  to {
    opacity:1
  }
}
@keyframes fade {
  from {
    opacity:.4
  }
  to {
    opacity:1
  }
}
@media only screen and (max-width:300px) {
  .text {
    font-size:11px
  }
}
.price {
  border:1px solid #eee;
  margin:0;
  padding:0;
  -webkit-transition:.3s;
  transition:.3s
}
.price:hover {
  box-shadow:0 8px 12px 10px rgba(0,0,0,.5)
}
.price li {
  border-bottom:1px solid #eee;
    padding: 6px 0;

    
}


.button {
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 background: linear-gradient(145deg, #1d8cf8, #3356d8);
 border-radius: 8px;

  display:inline-block;
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  font-family:Arial,sans-serif;
  line-height:2.5em;
  padding:0 2em;
  text-transform:uppercase;
  -webkit-box-shadow:inset 0 0 10px gray;
  -moz-box-shadow:inset 0 0 10px gray;
  box-shadow:inset 0 0 10px gray
}
.columns { display:inline-block; padding:5px;  flex: 0 0 auto;}



@media only screen and (max-width:1000px) {
  .modal-content {
    width:100%;
    height:100%
  }
  .modal {
    padding-top:0
  }

}
@media only screen and (max-width:600px) {
.columns {width:49%;}
  .mh {display:none;}}

.box span,.box:before { top:0; height:100%; position:absolute; width:100% }

@media screen and (min-width:900px) {
.title,.title2 {left:420px;position:absolute}
#d,.title,.title2 {position:absolute}
#tit {top:0px;}
#d {right:100px;top:280px}
}



/* Product card styling */
.price {list-style-type: none;
padding: 5px; margin: 0; width: 200px; 
background-color: #fff; border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
text-align: center; transition: transform 0.3s ease;
white-space: nowrap; -webkit-line-clamp: 1;  overflow: hidden; margin:0px 5px 0px 5px;
}


/* Styling for the product image */
.price img {width: 100%; height: 130px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease;}
/* Product details */
.price li:nth-child(3) {font-weight: bold;color: black;}


.cp { font-size: 1.1em; font-weight: bold;}

.cart-add:hover {background-color: #2980b9;}

/* Responsive adjustments */
@media (max-width: 768px) {.price {width: 180px;}}
@media (max-width: 480px) {.price {width: 100%; }}


.box,.box span{box-sizing:border-box}.box span,.box span:before,.box:before{position:absolute;width:100%}.box{border-radius:20px;position:fixed;bottom:4px;right:4px;width:70px;height:70px;background:#111845a6;overflow:hidden;box-shadow:0 20px 50px #17205a;border:2px solid #2a3cad;color:#fff;padding:20px}.box:before{content:'';top:0;left:-100%;height:100%;background:rgba(255,255,255,.1);transition:.5s;pointer-events:none}.box:hover:before{left:-50%;transform:skewX(-5deg)}.box span{top:0;left:0;height:100%;display:block}.box span:first-child{transform:rotate(0)}.box span:nth-child(2){transform:rotate(90deg)}.box span:nth-child(3){transform:rotate(180deg)}.box span:nth-child(4){transform:rotate(270deg)}.box span:before{content:'';height:2px;background:#50dfdb;animation:4s linear infinite animate}@keyframes animate{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}50.1%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}.whatsapplogo{width:58px;height:58px;border-radius:20px;border:1px solid #f0a591;padding:1px;box-shadow:0 5px 10px rgba(9,0,0,.5);position:fixed;right:10px;bottom:10px;background:url(/whatsapp.png) center center no-repeat;z-index:100}



.xzoom-container{height:auto; display:inline-block}
.xzoom-thumbs{margin-bottom:10px}
.xzoom-gallery,.xzoom-gallery2,.xzoom-gallery3,.xzoom-gallery4,.xzoom-gallery5 {border:1px solid #cecece; margin-left:5px; margin-bottom:10px}









/*THEME CUBE START*/

/* Reset */


html, body {overflow: hidden;  width: 100vw;  height: 100dvh;   display: flex;  justify-content: center;  align-items: center;}
* {box-sizing: border-box;  margin: 0;padding: 0;}











/*Bottom Bar*/
#MAIN {
    z-index: 10000;
    background-color: #22A322; /* Green background */
    color: #fff;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 15px; /* Rounded corners */
    border: 3px solid white; /* White border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Outer shadow */
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
}

.T{font-size: 11px;}

/* Left side (Savings) */
.cart-sav {
    background: #EAF8E6; /* Light green background */
    color: #2E7D32; /* Dark green text */
    padding: 5px 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    width:43%;
}

/* Savings Icon */
.cart-save::before {
    content: "💡"; /* Placeholder emoji */
    margin-right: 5px;
    font-size: 14px;
}


.cart-save::before {
    content: "";
    display: inline-block;
    width: 5px; /* Adjust width */
    height: 18px; /* Adjust height */
    background-size: contain; /* Ensures the image fits */
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 5px;
    vertical-align: middle;
}



/* Vertical White Line Between Elements */
.divider {
    width: 1.5px; /* Slightly thinner line */
    height: 25px;
    background-color: white;
    margin: 0px 7px; /* Reduced space around divider */
}

/* Right side (Total + Items) */
.cart-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
width:45%;
}

/* Cart Total */
.cart-subtotal2 { font-size: 14px; font-weight: bold; }

/* Item Count */
.cart-items-count2 {
    font-size: 11px;
    font-weight: bold;
    opacity: 0.8;
}
/* Arrow */
.arrow {
    font-size: 14px;
    font-weight: bold;
    margin-left: 6px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}
.arrow:hover {transform: translateX(4px);}
/*Bottom Bar /*/





/* Radio Button Container */

/* Hide default radio input */
.radio-label input {
  display: none;
}

/* macOS-Style Buttons */
.radio-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 10px;
  width: min(12vw, 12vh, 55px);
  height: min(12vw, 12vh, 55px);
  transition: all 0.3s ease-in-out;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.5), 
              0 4px 10px rgba(0, 0, 0, 0.1);
}

/*    display: flex;
    flex-direction: column; 
    align-items: center; 
    cursor: pointer;
.F{font-size:9px;}

*/


.radio-label:hover {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.7), 
              0 6px 15px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}

/* Active (Selected) Button */
.radio-label input:checked + svg {
  fill: white;
  filter: drop-shadow(0px 0px 10px rgba(0, 122, 255, 0.5));
}

.radio-label:has(input:checked) {
  background: linear-gradient(145deg, #007aff, #005ecb);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.5), 
              0 6px 15px rgba(0, 122, 255, 0.3);
  transform: scale(1.05);
}

/* macOS-Style Icons */
.radio-label svg {
  width: 30px;
  height: 30px;
  fill: rgba(51, 51, 51, 0.8);
  transition: fill 0.3s ease-in-out, transform 0.2s ease;
}

.radio-label:hover svg {
  fill: #007aff;
  transform: scale(1.1);
}


#MAIN, .radio-group {
    position: fixed;
    bottom: 83px; /* Adjust this value for spacing */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 380px;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    #MAIN, .radio-group {
        bottom: 78px; /* Adjust this value for spacing */}
}


.radio-group {
    bottom: 10px; /* Adjusted spacing */
    z-index: 1000;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 10px;
    border-radius: 16px;
    display: flex;
    gap: 9px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow:hidden;
}


.radio-input {
    display: none; /* Initially hidden */
    cursor: pointer;
    font-size: 16px; /* Adjust as needed */
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 10px;
    min-width: 0%;
    height: min(12vw, 12vh, 55px);
    transition: min-width 1.2s ease-in-out, opacity 1.2s ease-in-out;
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.5), 
                0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0; /* Hidden initially */
}

/* Active state */
.radio-input.active {
    display: flex; /* Show the element */
    opacity: 1;
    min-width: 67%;
}





/* Global Reset */














/* Scene */
.scene {
  width: 100vw;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2500px;
  position: absolute;
  top: 0;
  left: 0;
}

/* Cube */
.cube {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

/* Cube Faces */
.cube__face {
    position: absolute;
    width: 200px;  /* Adjust according to your cube size */
    height: 200px;
    overflow: auto; /* Enable scrolling */
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
    pointer-events: auto; /* Ensure interaction */
    touch-action: auto; /* Allow touch scrolling */
}

/* Active Face */
.cube__face.active {
  pointer-events: auto; /* Enables interaction */
  opacity: 1; /* Fully visible */
  z-index: 10; /* Moves it above other faces */
}

/* Cube Face Colors */
.cube__face--front  { background: hsla(0, 0%, 0%, 0.7); }
.cube__face--right  { background: hsla(0, 0%, 0%, 0.7); }
.cube__face--back   { background: hsla(0, 0%, 0%, 0.7); }
.cube__face--left   { background: hsla(0, 0%, 0%, 0.7); }
.cube__face--top    { background: hsla(0, 0%, 0%, 0.7); }
.cube__face--bottom { background: hsla(0, 0%, 0%, 0.7); }

/*V IMP ADD TO CART, PRODUCT VIEW*/
.cart-addd {cursor: pointer; position: relative; }


/* NEW SLIDES ALL IN ONE */
.slider-container {
    position: relative;
    max-width: 100%;
    border: 1px solid #000;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 🔥 Fix: Ensure all slides fit in one row */
.slider {
    display: flex;
    transition: transform 0.3s ease-in-out;
    width: 100%; /* Default, will be set dynamically in JS */
}

/* 🔥 Fix: Each slide takes full space */
.slide {
    padding:10px;
    flex-shrink: 0;
    width: 100%; /* Ensure full image display */
    box-sizing: border-box;
}

/* 🔥 Fix: Ensure images are fully displayed */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures full image display */
}

/* Radio button navigation */
.slider-buttons {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.slider-buttons input {
    display: none;
}

.slider-buttons label {
    cursor: pointer;
    padding: 3px;
    background: #ddd;
    margin: 3px;
    border-radius: 1px;
    width: 15px;
    display: inline-block;
}

.slider-buttons input:checked + label {
    background: #333;
    color: #fff;
}

/* Responsive Fix */
@media (max-width: 600px) {
    .slider-container {
        flex-direction: column;
    }
}


/*Horizintal scroll 2*/
        .my-slider {
            all: unset; /* Reset inherited styles */
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            scroll-snap-type: x mandatory;
            display: flex;
            box-sizing: border-box; /* Prevent unwanted width changes */
            padding: 15px;
            border: 0px solid #000;
margin-bottom: 10px;
}


        .my-slider .columns {
            flex: 0 0 210px; /* Fixed width */
            height: auto;
            scroll-snap-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        /* Mobile styles */
        @media (max-width: 768px) {
            .my-slider {padding-left: 25%}
            .my-slider > *:first-child {margin-left: 30%;}
}


        
        
        





/*MOON AND SUN */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }  /* Start & End at normal position */
    16% { transform: translateY(-10px); }   /* Move up */
    32% { transform: translateY(10px); }    /* Move down */
    48% { transform: translateY(-8px); }    /* Move up again */
    64% { transform: translateY(8px); }     /* Move down again */
    80% { transform: translateY(-5px); }    /* Final small up */
}

#themeToggle {
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    animation: bounce 2s ease-in-out;
}

/*MOON AND SUN */




/*CATEGODY STYLE*/

        .sidebar { width: 30%; padding: 5px; color: white; overflow-y: auto; }
        .category-list { list-style: none; }
        .category-list li { padding: 10px; cursor: pointer; background: #34495e; margin-bottom: 5px; text-align: center; position: relative; }
        .category-list li.active { background: #1abc9c; }
        .category-list li:hover { background: #1abc9c; }
        .category-image { text-align: center; margin-top: 5px; display: none; }
        .category-image img { width: 100%; max-height: 150px; object-fit: contain; }
        .content { width: 68%; overflow-y: auto; padding: 5px; }
        .product-section h2 {color:white;}
        .products { display: flex; gap: 10px; flex-wrap: wrap; }
        .product { width: 120px; padding: 5px; background: #ecf0f1; text-align: center; border-radius: 5px; }
        .product img { width: 100px; height: 100px; object-fit: cover; }
        @media (max-width: 768px) {
            body { flex-direction: row;}
            .sidebar { width: 30%; height: 100vh; overflow-y: auto; }
            .category-list { display: block;}
            .content { width: 68%; height: 100vh; overflow-y: scroll;}
            .product { width: 27vw;}
            .product img { width: 24vw;}
}

.sidebar, .content {
    display: inline-block;
    vertical-align: top;
    height: 100%;
}
/*CATEGODY STYLE*/