/* --- Section Content Styling --- */
 .product-section-content {
     position: relative;
     /* Ensures content stays above the background */
     z-index: 1;
     max-width: 1200px;
     margin: 0 auto;
 }

 .section-title {
     color: #ff9216;
     /* Orange color from the image */
     font-weight: bold;
     font-size: 24px;
     margin-bottom: 40px;
     text-transform: uppercase;
 }

 /* --- Product Grid Layout --- */
 .product-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     /* 4 columns on desktop */
     gap: 30px;
 }

 .product-grid:hover .product-card {
     opacity: 0.6;
 }

 .product-grid .product-card:hover {
     opacity: 1;
     transform: scale(1.05);
 }

 /* --- Individual Product Card Styling --- */
 .product-card {
     text-align: center;
     border: 1px solid #eee;
     padding: 15px;
     border-radius: 8px;
     transition: opacity 0.3s ease, transform 0.3s ease;
 }

 .product-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
 }

 .product-category {
     font-size: 12px;
     color: #888;
     display: block;
     margin-bottom: 10px;
     text-transform: uppercase;
 }

 .product-image img {
     max-width: 100%;
     height: 200px;
     /* Fixed height for uniform card size */
     object-fit: contain;
     margin-bottom: 15px;
 }

 .product-name {
     font-size: 16px;
     color: #333;
     font-weight: 600;
     margin: 0 0 15px 0;
 }

 .product-pricing {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
     font-size: 16px;
 }

 .current-price {
     font-weight: bold;
     color: #222;
 }

 .original-price {
     color: #aaa;
     text-decoration: line-through;
 }

 .discount {
     color: #28a745;
     /* Green color for the discount */
     font-size: 13px;
     font-weight: bold;
 }

 /* --- Responsive Adjustments --- */
 @media (max-width: 992px) {
     .product-grid {
         grid-template-columns: repeat(3, 1fr);
         /* 3 columns for tablets */
     }
 }

 @media (max-width: 768px) {
     .product-grid {
         grid-template-columns: repeat(2, 1fr);
         /* 2 columns for smaller tablets */
     }
 }

 @media (max-width: 480px) {
     .product-grid {
         grid-template-columns: 1fr;
         /* 1 column for mobile phones */
     }
 }