.md\:h-16{
  height:7rem;
  width:7rem;
}
.w-60p {
    width: auto !important;
}
p.text-sm.font-medium.roboto-regular.mt-5.break-all{
word-break: normal !important;
  overflow-wrap: normal !important;
}
.text-gray-10 {
    color: #2c2c2c;
}
.bg-white.border.border-gray-2.rev-img.rounded-md.relative.product-hover {
    height: 220px !important;
}
@media (min-width: 768px) {
    .md\:w-1\/5 {
        width: 25%;
    }
   .order-3 {
     width:35% !important;
   }
}

@media (max-width: 768px) {
  .w-36.h-11.object-contain {
    filter: brightness(0) invert(1);
  }
.other-slider-images{
   height:290px !important;
 }
}
@media (max-width: 640px) {
.other-slider-images{
   height:180px !important;
 }
}

 .card-container {
           width: 100%;       
        }

        /* --- CARDS CONTAINER --- */
        .cards-list {
            display: flex;
            gap: 20px;
        }

        /* --- GENERIC CARD STYLES --- */
        .card {
            border-radius: 8px;
            padding: 30px;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 180px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.2s ease;
        }

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

        .card-content {
            flex: 1;
            z-index: 2; /* Ensures text is above background elements */
            max-width: 60%; /* Prevents text from hitting the image too hard */
        }

        .card-category {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }

        .card-title {
            /* clamps font size: min 1.5rem, max 2rem based on screen width */
            font-size: clamp(1.5rem, 4vw, 2rem); 
            font-weight: 800;
            line-height: 1;
    		margin-bottom: 5px;
        }
        .first-row {
            font-size: 18px;
            font-weight:600;
			text-transform: upper-case;
        }
        .highlight{
        color:#FCCA19;
        }
        .shop-btn {
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: opacity 0.3s;
            border:none;
        }
        
        .shop-btn:hover {
            opacity: 0.8;
        }

        .card-image-wrapper {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Using mask to fade image slightly on the left could be cool, 
               but basic object-fit works for the requested look */
        }

        /* --- SPECIFIC CARD THEMES --- */

        /* Red Card */
        .card-red {
            background-color: #900d0d; /* Deep Red */
            color: white;
            width:100%;
        }

        .card-red .card-category { color: #ffcccc; }
        
        .card-red .shop-btn {
            color: #2c2c2c;
            background: #fcca19dd;
        }
.card-red .shop-btn:hover {
color: #2c2c2c !important;
    background: #fcca19;  
  background-color: #fcca19 !important;  
}

        /* Green Card */
        .card-green {
            background-color: #a6c4b0; /* Sage Green */
            color: #1a3c25;
            width:100%;
        }

        .card-green .card-category { color: #3d5e48; }

        .card-green .shop-btn {
            color: #2c2c2c;
            background: #fcca19dd;
        }
.card-green .shop-btn:hover {
color: #2c2c2c !important;
    background: #fcca19;  
background-color: #fcca19 !important;  
}

        .card-image-wrapper-lg{
        	position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .card-image-wrapper-xs{
        	display:none;  
        	position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            align-items: center;
            justify-content: center;          	
        }

 /* --- RESPONSIVE ADJUSTMENTS (MOBILE) --- */
        @media  (min-width: 601px) and (max-width: 768px) {
        	.card-content {
                max-width: 81%; /* Give text a bit more room on small screens */
            }
            .card-image-wrapper-lg{
	        	display: none;
	        	position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            align-items: center;
            justify-content: center;  
	        }
	        .card-image-wrapper-xs{
	        	display:block; 
	        	position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            align-items: center;
            justify-content: center;             	
	        }
        }

        /* --- RESPONSIVE ADJUSTMENTS (MOBILE) --- */
        @media (max-width: 600px) {
            .card {
                padding: 20px;
                min-height: 180px;
            }
            .cards-list {
            display: flex;
            flex-direction:column;
            gap: 20px;
        }
            .card-content {
                max-width: 67%; /* Give text a bit more room on small screens */
            }

            .card-image-wrapper {
                width: 100%; /* Shrink image area slightly */
                opacity: 0.9;
            }
            
            .search-wrapper {
                margin-bottom: 15px;
            }
            .card-image-wrapper-lg{
	        	display: none;
	        	position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            align-items: center;
            justify-content: center;  
	        }
	        .card-image-wrapper-xs{
	        	display:block; 
	        	position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            align-items: center;
            justify-content: center;             	
	        }

        }

        @media (max-width: 380px) {
             /* For very small phones */
            .card-title {
                font-size: 1.4rem; /* Force smaller font */
            }
            .shop-btn {
                padding: 8px 12px;
                font-size: 0.8rem;
            }
            .card-image-wrapper-lg{
	        	display: none;
	        	position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            align-items: center;
            justify-content: center;  
	        }
	        .card-image-wrapper-xs{
	        	display:block;
	        	position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            align-items: center;
            justify-content: center;              	
	        }

        }