* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  margin: 0;
  padding: 0;
}
   html, body {
 scroll-behavior: smooth;
    }


    .header-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background-color: #153e2c;
        color: #fff;
width:100%;
Position:fixed;
z-index:1001;

    }


a {
    text-decoration: none;  /* Removes the underline from the link */
    color: inherit;  /* Inherit the text color from its parent element */
}
 .sidebar {
    position: fixed; /* Fix the sidebar */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left side */
    width: 20%; /* Sidebar width */
   height: calc(100vh - 60px - 70px); 
margin-top:100px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index:0; /* Ensure it's above other content */
}


        .cart {
            font-size: 18px;
        }

.nav-links {
    display: flex;
    flex-direction: column;
    background-color:#153e2c;
    position: absolute;
    top: 50px;
    right: 0px;
    width: 100%;
    text-align: left;
    padding: 0; /* Start with no padding for the animation */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Ensures no content spills out during animation */
    max-height: 0; /* Start collapsed */
    opacity: 0; /* Invisible initially */
   z-index:1002; /* Above other content */
    transition: all 0.3s ease-out; /* Smooth animation for height and opacity */

}



/* Hamburger button */
.hamburger {
    display: none; /* Initially hidden on larger screens */
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 15px;
    cursor: pointer;
    margin-right: 0px; /* Align hamburger to the right */
    margin-top: -70px;
    position: absolute;
    right: 20px; /* Position on the right of the screen */
    z-index: 1002; /* Ensure it's above the cart */
}
/* Hamburger spans */
.hamburger span {
    display: block;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease-in-out; /* Smooth transition for both the rotation and opacity */
}
.hamburger.x span:nth-child(1) {
    transform: rotate(45deg); /* Rotate the first span */
    z-index: 2; /* Place it above the other spans */
top:7px;
position: relative;
}

.hamburger.x span:nth-child(2) {
    opacity: 0; /* Hide the middle span */
    z-index: -1; /* Ensure it's behind the other spans */
}

.hamburger.x span:nth-child(3) {
    transform: rotate(-45deg); /* Rotate the third span */
    top:-5px;
    z-index: 2; /* Place it above the other spans */
position: relative;
}


/* Active state for the menu */
.nav-links.active {
    transform: translateY(0); /* Move to original position */
    opacity: 1;
}


/* Navigation links styling */
.nav-links a {
    display: block;
    color: white;
    text-decoration: none;
    font-size: 18px;
    margin: 0px;
    padding: 0px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.nav-links a:hover {
    background-color: #575757; /* Hover effect */
}
 @media (max-width: 768px) {
    .nav-links {
    display: flex;
    flex-direction: column;
    background-color: #153e2c;
    position: absolute;
    top: 50px;
    right: 0;
    width: 100%;
	height:auto;
    text-align: left;
    padding: 0; /* No padding initially */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Prevent content from spilling out */
    opacity: 0; /* Invisible initially */
    z-index: 1007;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out; /* Smooth height and opacity transition */
  }

  .nav-links.active {
    max-height: 600px; /* Use a value that fits your menu content */
    padding: 10px 20px; /* Adds padding when fully visible */
    opacity: 1; /* Makes the menu visible */
  }

  footer {
            font-size: 13px;
            padding: 15px;
        }
}
 /* Sidebar */
      
        .sidebar h3 {
            font-size: 20px;
            margin-bottom: 15px;
            color: #163e2c; /* Dark Green */
        }

        .sidebar ul {
            list-style-type: none;
            line-height: 2;
        }

        .sidebar ul li {
            font-size: 16px;
            cursor: pointer;
            transition: color 0.3s;
        }

        .sidebar ul li:hover {
            color: #163e2c; /* Dark Green */
        }

        .advertisement-panel {
            margin-top: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            text-align: center;
        }

    .hot-deals {
    margin-top: 20px;
    padding: 20px;
    background-color: #7cbf7d;  /* Darker shade of green */
    color: #fff;
    text-align: center;
    border-radius: 8px;
    transition: background-color 0.3s;
}

    .hot-deals:hover {
        background-color: #94c8a8;
    }

        .hot-deals button {
            margin-top: 10px;
            padding: 8px 20px;
            background-color: #d29602;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: color 0.3s;
        }

        .hot-deals button:hover {
            color: #b28402; /* Slightly darker golden yellow for hover */
        }
        /* Main Content */
/* Default layout (for PC view) */
main {
    display: flex;
    padding: 20px 40px;
    gap: 20px;
    width: 80%; /* Content takes up the remaining 80% */
    margin-left: 20%;

}

.product-container {
    display: flex; /* Aligns the image section and details section side by side */
    gap: 20px; /* Space between the sections */
    width: 100%; /* Full width of the parent element */
}


.product-image-section {
    width: 50%; /* Image section takes up 50% of the width */
    position: relative;
    top: 20px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 10px;
margin-top:90px;
}

.product-image-container {
    width: 100%; /* Full width of the image container */
    height: 400px; /* Set a specific height for the image container */
    background-color: #f0f0f0; /* Placeholder background */
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-image-container img {
    width: 100%; /* Ensure the image takes full width */
    height: 100%; /* Set the height to 100% of the container */
    object-fit: contain; /* Ensures the image fits inside the container without cropping */
}

.thumbnail-images {
    display: flex;
    gap: 10px;
    justify-content: center; /* Center align thumbnails */
}

.thumbnail-images img {
    width: 80px; /* Adjust size of thumbnails */
    height: 80px; /* Adjust size of thumbnails */
    object-fit: contain; /* Ensures thumbnails maintain their aspect ratio */
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.3s;
}

.thumbnail-images img:hover {
    transform: scale(1.1);
}


.product-details {
    width: 50%; /* Make details section take up 50% of the width */
height:80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
margin-top:90px;
}

.product-details h1 {
    font-size: 2rem;
    margin-bottom: 5px;
margin-top:50px;
}

.price {
    font-size: 1.5rem;
    color: #333;
}

.retail-price {
    text-decoration: line-through;
    color: #999;
    margin-left: 10px;
}

.discount {
    color: #d9534f;
    font-size: 1rem;
}

.rating {
    color: #f39c12;
    font-size: 1.2rem;
    margin: 10px 0;
}

.product-details label {
    display: block;
    margin-top: 10px;
}

input[type="number"] {
    padding: 5px;
    width: 50px;
    margin: 10px 0;
}

button.add-to-cart, button.buy-now {
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    margin-top: 5px;
}

button.add-to-cart {
    background-color:  #74a787;

    color: white;
}

button.buy-now {
    background-color:#145a98;
    color: white;
}



.description {
    font-size: 1rem;
    color: #555;
    margin-top: 30px;
max-width:500px;
}

/* Media query for 1200px and below */
@media (max-width: 1200px) {
    .product-container {
        flex-wrap: wrap; /* Allow sections to wrap on smaller screens */
    }

    .product-image-section,
    .product-details {
        width: 48%; /* Each section takes up 48% of the width */
    }

    .product-image-section {
        /* Optional: Make image container responsive */
        width: 48%; /* Make image section 48% on 1200px view */
    }

    .product-details {
        /* Optional: Adjust details width */
        width: 48%; /* Make details section 48% on 1200px view */
    }

}





/* Cart Info Styling */
.cart-info {
    font-size: 1.2rem;
    font-weight: bold;
    color: #163e2c; /* Dark Green */
    margin-top: 20px;
}

.notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    display: none; /* Initially hidden */
    z-index: 9999;
}

.notification.hidden {
    display: none; /* Hide notification */
}

/* Buttons Styling */
.add-to-cart, .buy-now {
    background-color: #94c8a8; /* Green */
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 0.9rem;
    cursor: pointer;
}

.add-to-cart:hover {
    background-color: #94c8a8; /* Green color for add-to-cart */
}

.buy-now {
    background-color: 
#145a98 /* Blue */
}

.buy-now:hover {
    background-color: #005bb5; /* Darker blue on hover */
}

/* Transition for buttons */
button {
    transition: background-color 0.3s;
}

/* Ensure the container takes full height */
.container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap in smaller screens */
    justify-content: space-between; /* Adjusts spacing between sections */
    align-items: flex-start;
    gap: 20px; /* Space between image and text sections */
    margin: 20px;
}


/* Product section styles */
.product-section h3 {
    font-size: 34px;
	 margin-left: 30%;
	 margin-top:60px;
    margin-bottom: 10px;
    color: #163e2c; /* Dark Green */
	
}

.product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
	  margin-left: 25%; /* Content is next to the sidebar */
            width: 70%; /* Content takes up the remaining 80% */
            padding: 20px;
				justify-content: center;
			
}

.product-item {
    flex: 0 0 calc(28% - 20px); /* Slightly smaller size for three items per row */
    padding: 15px; /* Reduced padding for a more compact appearance */
    background-color: #fff;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
}


.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.product-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.rating {
    margin: 10px 0;
}

.star {
    color: #d29602;
    font-size: 20px;
}

.product-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.product-item p {
    font-size: 18px;
    margin: 10px 0;
    color: #333;
    flex: 1;
    padding: 10px;

}

.product-item p.price {
    font-size: 20px;
    font-weight: bold;
    color: #163e2c;
}

.logo {
    display: inline-block; /* Ensures proper spacing */
    height: 70px; /* Adjust the height as needed */
    line-height: 50px; /* Matches the height for centering */
}

.logo img {
    height: 100%; /* Makes the image fit the height of the logo container */
    width: auto; /* Keeps the image aspect ratio */
}

@media (max-width: 480px) {
	
    footer {
        font-size: 10px;
        padding: 10px;
    }
	}

/* Hide Sidebar by Default for Smaller Screens */
@media (max-width: 768px) {

    main {
            display: flex;
            padding: 20px 40px;
            gap: 0px;
 flex-direction: column; /* Stack images and details vertically */
        align-items: center; /* Center the content */
        width: 100%;
			    width: 100%; /* Content takes up the remaining 80% */

    margin-left: 0%;
        }
    .hamburger-menu {
        display: block; /* Show hamburger menu */
    }
    .sidebar {
        display: none; /* Hide sidebar on mobile */
    }
    .content {
        margin-left: 0; /* Content spans the full width */
    }

    .product-grid {
        gap: 0px;
        margin-left: 0; /* Content is next to the sidebar */
        width: 100%; /* Content takes up the remaining 80% */
        padding: 0px;
        justify-content: center;
    }

    .product-item {
        flex: 0;
        justify-content: center;
    }

    .product-item img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    .content {
        width: 100%; /* Full width for smaller screens */
    }

    .product-container {
        flex-direction: column; /* Stack product image and details vertically */
    }

    .product-image-section {
        flex-direction: column; /* Stack images vertically */
        align-items: center; /* Center images */
    }

    .product-image-container {
        width: 100%; /* Make image container take full width */
    }

    .thumbnail-images {
        flex-direction: row; /* Display thumbnails in a row */
        justify-content: center;
        margin-top: 10px;
    }

    .product-details {
        width: 100%; /* Ensure the details take full width on small screens */
    }

}

/* Footer */
footer {
    padding: 5px;
	font-size:13px;
    background-color: #153e2c;
    color: white;
    text-align: center;
    margin-top: 20px;
}

/* Default Layout for Larger Screens (PC) */
.product-container {
    display: flex; /* Align image section and details section side by side */
    gap: 20px; /* Space between sections */
    width: 100%; /* Full width of the parent element */
}

/* Mobile View (max-width: 768px) */
@media (max-width: 768px) {
.content {
    width: 100%;
    padding: 0px;
    margin-left: 0%; 
    margin-top: 10px; 
}
    .product-container {
        flex-direction: column; /* Stack product image and details vertically */
        align-items: center; /* Center the content */
width: 100%;
 position: relative; 
    }

    .product-image-container {
        width: 98vw; /* Make image container take full width */
        height: 250px; /* Maintain fixed height for image */
        position: relative; /* Default positioning (no sticky or fixed) */
        margin-top:-30px; /* Add spacing between image and details */
    }

    .product-details {
        width: 100%; /* Make details take full width */
position:relative;
        padding: 0px;
margin-top:30px;
        box-sizing: border-box; /* Prevent padding from affecting width */
    }
/* Thumbnail Images */
.thumbnail-images {
    display: flex;
    gap: 5px;
    justify-content: center;
    width: 100vw; /* Full width */
}
   .product-image-section {
            width: 100%;
            position: relative;
             margin-top: 110px;
            align-self: flex-start;
            display: flex;
            flex-direction: column;
            gap: 0px;
        }

  .header-top {
            flex-direction: column;
            align-items: flex-start;
        }

    .nav-links li {
        margin: 10px 0;
 list-style-type: none; 
    }
           
         .nav-links {
    display: flex;
    flex-direction: column;
    background-color: #163e2c;
    position: absolute;
    top: 110px;
    right: 0px;
    width: 100%;
    text-align: left;
    padding: 0; /* Start with no padding for the animation */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Ensures no content spills out during animation */
    max-height: 0; /* Start collapsed */
    opacity: 0; /* Invisible initially */
z-index:1009;
    transition: all 0.3s ease-out; /* Smooth animation for height and opacity */

}
    .hamburger {
        display: flex;
    }
    
    .nav-links.active {
        display: block;
    }
  .nav-links.active {
    max-height: 500px; /* Use a value that fits your menu content */
    padding: 10px 20px; /* Adds padding when fully visible */
    opacity: 1; /* Makes the menu visible */
  }

    .product-details {
        padding: 10px;
    }

    .product-details h1 {
        font-size: 1.5rem; /* Adjust title size */
margin-top:0;
    }

    .price {
        font-size: 1.4rem;
    }

   .rating {
        margin-bottom: 10px; /* Optional: adds space between rating and quantity */
  font-size: 1.1rem;
    }

    #quantity {
        margin-left: 5px; /* Reset margin-left if needed */
    }

    label[for="quantity"] {
        margin-left: 0; /* Remove left margin for label */
    }

.add-to-cart, .buy-now {
    font-size: 14px; 
    width: 100%; /* Buttons will now be next to each other, taking up 48% of width */
    padding: 10px; /* Add padding for better button appearance */
    display: inline-flex; /* Align buttons horizontally */
    justify-content: center; /* Center content inside each button */
    margin: 10px; /* Space between buttons */
}

    
 
     .product-section h3 {
        font-size: 28px;
        margin-left: 0;
        margin-top: 20px;
        margin-bottom: 10px;
        color: #163e2c; /* Dark Green */
        text-align: center; /* Center the heading on mobile */
    }

    /* Product grid adjustments for mobile */
    .product-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0; /* Remove gap between items */
        margin-left: 0;
        width: 90%; /* Full width on mobile */
        padding: 20px;
margin-left:auto;
margin-right:auto;
        justify-content: space-between;
    }

    /* Adjust product item for two items per row on mobile */
    .product-item {
        flex: 0 0 calc(50% - 10px); /* Two items per row, no gap */
        padding: 0; /* Remove padding */
        background-color: #fff;
        text-align: center;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
        text-decoration: none;
        color: inherit;
        display: flex;
margin-left:auto;
margin-right:auto;
margin-top:15px;
        flex-direction: column; /* Ensure content stays in column */
    }

    .product-item img {
        width: 70%; /* Ensure image is responsive */
        height: auto;
        border-radius: 8px;
    }

    .product-item p {
        font-size: 16px;
        margin: 10px 0;
        color: #333;
        padding: 10px;
    }

    .product-item p.price {
        font-size: 18px;
        font-weight: bold;
        color: #163e2c;
    }

    .rating {
        margin: 10px 0;
        font-size: 16px;
    }

    .star {
        color: #d29602;
        font-size: 18px;
    }


}

@media (max-width: 500px) {

 /* Product grid adjustments for mobile */
    .product-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0; /* Remove gap between items */
        margin-left: 0;
        width: 100%; /* Full width on mobile */
        padding: 20px;
margin-left:auto;
margin-right:auto;
        justify-content: space-between;
    }

    /* Adjust product item for two items per row on mobile */
    .product-item {
        flex: 0 0 calc(50% - 10px); /* Two items per row, no gap */
        padding: 0; /* Remove padding */
        background-color: #fff;
        text-align: center;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
        text-decoration: none;
        color: inherit;
        display: flex;
margin-left:auto;
margin-right:auto;
margin-top:15px;
        flex-direction: column; /* Ensure content stays in column */
    }

    .product-item img {
        width: 90%; /* Ensure image is responsive */
        height: auto;
        border-radius: 8px;
    }
}



@keyframes vibrate {
    0%, 100% {
        transform: translateX(0); /* Start and end at the original position */
    }
    25% {
        transform: translateX(-3px); /* Move left */
    }
    50% {
        transform: translateX(3px); /* Move right */
    }
    75% {
        transform: translateX(-3px); /* Move left again */
    }
}

.whatsapp-icon {
    position: fixed;
    bottom: 80px; /* Distance from the bottom */
    right: 20px; /* Distance from the right */
    z-index: 1000; /* Keep above other elements */
    width: 60px; /* Default size */
    height: 60px; /* Default size */
    border-radius: 50%; /* Circular button */
    overflow: hidden; /* Prevent image overflow */
    background-color: #25d366; /* WhatsApp green background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow */
    cursor: pointer;
    animation: vibrate 1s ease infinite alternate; /* Vibrate for 1 second */
}

.whatsapp-icon img {
    width: 100%; /* Make the image fill the container */
    height: 100%; /* Ensure full coverage */
    object-fit: cover; /* Keep the image proportional */
}

@keyframes pause-animation {
    0%, 49% {
        visibility: visible;
    }
    50%, 100% {
        visibility: hidden;
    }
}


.whatsapp-icon:hover {
    transform: scale(1.1); /* Add a hover zoom effect */
}



.cart {
    font-size: 20px;
    position: absolute;  /* Ensure the position is absolute */
    right: 20px;  /* Align to the right */
    top: 33px;    /* Align to the top */
    color: inherit;
    display: flex;
    align-items: center;
}

#cart-icon {
    width: 30px;  /* Adjust the size of the cart icon */
    height: auto;
    margin-right: 8px;  /* Space between icon and total */
    animation: lean 2s ease-in-out infinite; /* Apply the lean animation */
}

/* Keyframe for the leaning (tilting) effect */
@keyframes lean {
    0% {
        transform: rotate(0deg);  /* No tilt */
    }
    25% {
        transform: rotate(-10deg); /* Lean left */
    }
    50% {
        transform: rotate(10deg);  /* Lean right */
    }
    75% {
        transform: rotate(-10deg); /* Lean left again */
    }
    100% {
        transform: rotate(0deg);   /* Return to original position */
    }
}


#cart-item-count {
    position: absolute;
    top: -5px;
    right: 110px;
    background-color: #f39c12;
    color: #153e2c;
	font-weight:bold;
    font-size: 12px;
    border-radius: 50%;
    padding: 2px 6px;
	  white-space: nowrap;
	  width: 20px; /* Ensure fixed width for circular shape */
    height: 20px; 
	  display: flex;
    justify-content: center;
    align-items: center;
}

#cart-item-count.hidden {
    display: none;
}

@media (max-width: 920px) {
.cart {
        font-size: 18px;
        position: relative;
        left: 10px;  /* Align cart to the left */
        top: -25px;   /* Adjust top position */
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
        cursor: pointer;  /* Indicate clickable */
    }

.cart img {
    cursor: pointer; /* Makes the icon itself clickable */
}

.cart span {
    cursor: pointer; /* Makes the text clickable */
}


	
	    .logo img {
           height: 90%; /* Makes the image fit the height of the logo container */
    width: auto; /* Keeps the image aspect ratio */
	margin-left:0px;
    }
	

    #cart-icon {
        width: 25px; /* Reduce the icon size slightly */
        position: relative; /* Make it a reference point for the badge */
    }

    #cart-item-count {
        position: absolute;
        top: 0px; /* Position above the icon */
        left: 4px; /* Align horizontally to the top-left of the icon */
        background-color: #f39c12;
        color:#153e2c;
        font-size: 12px; /* Font size for the text */
        border-radius: 50%; /* Makes the badge circular */
        width: 18px; /* Fix width */
        height: 18px; /* Fix height */
        line-height: 18px; /* Vertically center the text */
        text-align: center; /* Horizontally center the text */
        padding: 0; /* No padding to prevent stretching */
        z-index: 10; /* Ensures it stays above the icon */
        white-space: nowrap; /* Prevents text wrapping */
    }
	

        .header-top {
            padding: 10px;
			padding-bottom:35px
        }

}


/* Social Media Icons in Sidebar */
.social-media-icons {
    margin-top: 5px;
    display: flex;
    justify-content: space-around; /* Space icons evenly */
    align-items: center;
    padding: 10px 0;
    width: 100%; /* Make the icons take full width inside the sidebar */
    box-sizing: border-box; /* Ensure padding is included in width */
}

/* Individual Social Icon Styling */
.social-icon img {
    width: 30px; /* Adjust icon size to be smaller */
    height: 30px; /* Maintain aspect ratio */
    transition: transform 0.3s, opacity 0.3s; /* Smooth hover effect */
    margin: 0 5px; /* Space between icons */
}

/* Hover Effect for Icons */
.social-icon img:hover {
    transform: scale(1.2); /* Slight zoom on hover */
    opacity: 0.8; /* Faded effect */
}


#google_translate_element {
  display: inline-block; /* Make sure the element is displayed inline */
    position: fixed;
	margin-left:45%;
	margin-right:auto;
  z-index: 9999; /* Ensures it appears above other elements */
  background-color: rgba(225, 255, 255, 0); /* Optional: Add background to make it more visible */
  padding: 10px; /* Optional: Add some padding around the widget */
  border-radius: 5px; /* Optional: Add rounded corners */

}