body { font-family: 'Inter', sans-serif; }
         .no-scrollbar::-webkit-scrollbar { display: none; }
         .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
         /* Hover zoom effect for card images */
         .overflow-hidden img {
         transition: transform 0.5s ease-in-out !important;
         }
         .group:hover .overflow-hidden img {
         transform: scale(1.05) !important;
         }
         /* Dropdown visibility utility */
         .dropdown-content {
         display: none;
         }
         .dropdown:hover .dropdown-content {
         display: block;
         }

        /* Category Filtering */
        .category-card.hidden {
            display: none;
        }

        /* Testimonial Slider Styles */
        #testimonial-slider {
            scroll-behavior: smooth;
        }


		img::before {
		  height: 400px; /* Set a specific height */
		  width: 100%;
		  /* Gradient listed first to be on top, then the image URL */
		  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url('your-image.jpg');
		  background-size: cover; /* Ensures the image covers the container */
		  background-position: center; /* Centers the image */
		  z-index: 1; 
		}
		
        @keyframes slidein {
			 from {
				 opacity: 0;
				 transform: translateY(150px); /* Starts 150px below its final position */
			 }
			 to {
				 opacity: 1;
				 transform: translateY(0); /* Ends in its original position */
			 }
         }
		 
        @keyframes slidein-sm {
			 from {
				 opacity: 0;
				 transform: translateY(75px); /* Starts 50px below its final position */
			 }
			 to {
				 opacity: 1;
				 transform: translateY(0); /* Ends in its original position */
			 }
         }		 
         /* 2. Apply the animation to elements and link it to scroll */
         .slide-element {
			 animation-name: slidein;
			 animation-duration: 1s; /* Duration acts as the range across the timeline */
			 animation-timeline: view(); /* Links animation to element's visibility in scrollport */
			 animation-fill-mode: forwards; /* Keeps it visible after animation completes */
			 /* Optional: fine-tune when the animation starts/ends relative to the scrollport */
			 animation-range: entry 0% cover 50%; 
         }	
		 
         .slide-element-sm {
			 animation-name: slidein-sm;
			 animation-duration: 1s; /* Duration acts as the range across the timeline */
			 animation-timeline: view(); /* Links animation to element's visibility in scrollport */
			 animation-fill-mode: forwards; /* Keeps it visible after animation completes */
			 /* Optional: fine-tune when the animation starts/ends relative to the scrollport */
			 animation-range: normal 25%; 
         }			 
		 
        @keyframes float1 {
            0% { transform: translate(0px, 0px); }
            50% { transform: translate(-10px, -10px); }
            100% { transform: translate(0px, 0px); }
        }
        @keyframes float2 {
            0% { transform: translate(0px, 0px); }
            50% { transform: translate(10px, 10px); }
            100% { transform: translate(0px, 0px); }
        }
        .animate-float1 {
            animation: float1 4s ease-in-out infinite;
        }
        .animate-float2 {
            animation: float2 4s ease-in-out infinite;
        }			
		
		.rating_star {
		  font-variation-settings:
		  'FILL' 1,
		  'wght' 600,
		  'GRAD' 0,
		  'opsz' 24 !important
		}