/* Product Section Styling */

            /* Animation keyframes for all sections */
            @keyframes floatAnimation {
                0%, 100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-15px);
                }
            }

            @keyframes slideInRight {
                from {
                    transform: translateX(100px);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 0.85;
                }
            }

            @keyframes slideInLeft {
                from {
                    transform: translateX(-100px);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 0.85;
                }
            }

            @keyframes rotateAnimation {
                from {
                    transform: rotate(-15deg);
                }
                to {
                    transform: rotate(345deg);
                }
            }

            @keyframes pulseAnimation {
                0%, 100% {
                    transform: scale(1);
                    opacity: 0.7;
                }
                50% {
                    transform: scale(1.1);
                    opacity: 0.9;
                }
            }

            @keyframes popIn {
                0% {
                    transform: translateX(-50%) scale(0);
                    opacity: 0;
                }
                70% {
                    transform: translateX(-50%) scale(1.2);
                    opacity: 0.9;
                }
                100% {
                    transform: translateX(-50%) scale(1);
                    opacity: 0.85;
                }
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 0.85;
                }
            }

            @keyframes bounce {
                0%, 100% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.3);
                }
            }

            @keyframes pulse {
                0% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.5);
                }
                100% {
                    transform: scale(1.1);
                }
            }

            @keyframes productBounce {
                0%, 100% {
                    transform: scale(1.1);
                }
                50% {
                    transform: scale(1.15);
                }
            }

            @keyframes glowBorder {
                from {
                    box-shadow: 0 0 15px rgba(138, 143, 39, 0.4);
                }
                to {
                    box-shadow: 0 0 20px rgba(138, 143, 39, 0.6);
                }
            }

            /* White background for product section - with !important to override any conflicting styles */
            .feature-area {
                background-color: #ffffff !important;
                position: relative !important;
                overflow: hidden !important;
                background-image: none !important;
            }

            /* Product card styling */
            .single-feature {
                background-color: #ffffff;
                backdrop-filter: blur(2px);
                -webkit-backdrop-filter: blur(2px);
                border-radius: 25px;
                padding: 20px 20px 20px 20px;
                box-shadow: 0 2px 5px rgba(78, 78, 78, 0.05);
                border: .4px solid #f0f0f0;
                transition: all 0.4s ease;
                height: 100%;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }


            /* Glow animation - keeping definition but not using it */
            @keyframes glowWhite {
                from {
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                }
                to {
                    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
                }
            }

            /* Product image container */
            .single-feature .icon {
                position: relative;
                overflow: hidden;
                margin-bottom: 20px;
                text-align: center;
                height: 350px; /* Increased height from 300px to 450px as requested */
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #ffffff !important; /* Ensure background is white with !important */
                background: #ffffff !important; /* Additional override for the background */
                border-radius: 20px; /* Add border radius to match the card style */
            }

            /* Product image zoom effect */
            .single-feature .icon img {
                max-height: 100%; /* Allow image to take full height of container */
                width: auto;
                object-fit: contain;
                animation: floatAnimation 6s ease-in-out infinite; /* Added floating animation */
                transform-origin: center center;
            }

            /* Product description */
            .single-feature .desc {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding-top: 5px;
                margin-bottom: 25px;
            }

            /* Product title */
            .single-feature .desc h2 {
                font-size: 18px;
                margin-bottom: 20px;
                color: #333;
                transition: color 0.3s ease;
            }

            /* Add styling for the paragraph */
            .single-feature .desc p {
                margin-bottom: 25px;
                line-height: 1.4;
            }

            /* Price styling */
            .single-feature .desc .sp-1 {
                color: var(--brand-primary);
                font-weight: 700;
                font-size: 16px;
            }

            /* Order button container */
            .order-section {
                margin-top: auto;
                margin-bottom: 0;
                display: flex;
                justify-content: start;
            }

            /* Order button styling */
            .order-controls .genric-btn {
                transition: all 0.3s ease;
                padding: 0 20px;
            }

            .order-controls .genric-btn:hover {
                /* Removed hover effects */
                background-color: var(--brand-primary);
                color: #fff;
            }

            /* Feedback Module Styling */
            .feedback-module {
                background-color: rgba(255, 255, 255, 0.9);
                border-radius: 10px;
                padding: 20px;
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .feedback-module h3 {
                color: #6a6e0f;
                margin-bottom: 20px;
                text-align: center;
                font-size: 24px;
                font-weight: 700;
                letter-spacing: -1px;
                text-shadow: 0 0 1px rgba(179, 178, 178, 0.192);
                padding: 10px;
                border-bottom: 1px solid rgba(138, 143, 39, 0.2);
            }

            /* Enhanced Star Rating to match testimonial design */
            .star-rating {
                display: flex;
                flex-direction: row-reverse;
                justify-content: flex-end;
                margin-bottom: 15px;
                background-color: rgba(255, 255, 255, 0.7);
                border-radius: 25px;
                padding: 8px 15px;
                width: fit-content;
                margin-left: auto;
                margin-right: auto;
                border: .5px solid #f2f1f1;
                box-shadow: 0 0 1px rgba(212, 211, 211, 0.912);
                backdrop-filter: blur(2px);
                -webkit-backdrop-filter: blur(2px);
                transition: all 0.3s ease;
            }

            .star-rating:hover {
                transform: translateY(-3px);
                box-shadow: 0 5px 15px rgba(169, 148, 73, 0.3);
            }

            .star-rating input {
                display: none;
            }

            .star-rating label {
                cursor: pointer;
                font-size: 30px;
                color: #ddd;
                margin-right: 5px;
                transition: color 0.2s;
            }

            .star-rating label:hover,
            .star-rating label:hover ~ label,
            .star-rating input:checked ~ label {
                color: var(--brand-primary);
            }

            .star-rating label:hover,
            .star-rating label:hover ~ label {
                animation: bounce 0.3s ease;
            }

            .star-rating input:checked + label {
                animation: pulse 0.5s ease;
            }

            /* Feedback form styling */
            .feedback-form {
                background-color: transparent;
                padding: 20px;
                border-radius: 25px;
                margin-bottom: 20px;
                background-image: url(../../img/Loader/testimonial-element.png);
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                border: .8px solid #e0e54ead;
                box-shadow: 0 0 2px rgba(170, 170, 170, 0.333);
                backdrop-filter: blur(2px);
                -webkit-backdrop-filter: blur(2px);
            }

            /* Two-column layout for feedback form */
            .feedback-form-row {
                display: flex;
                gap: 15px;
            }

            .feedback-form-col {
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            .feedback-form textarea,
            .feedback-form input {
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 5px;
                margin-bottom: 10px;
                background-color: rgba(255, 255, 255, 0.8);
            }

            .feedback-form textarea {
                flex: 1;
                min-height: 80px;
                resize: none;
            }

            .feedback-form button {
                background-color: var(--brand-primary);
                color: white;
                border: none;
                padding: 10px 20px;
                border-radius: 5px;
                cursor: pointer;
                transition: background-color 0.3s;
                margin-top: auto;
            }

            .feedback-form button:hover {
                background-color: #767a22;
            }

            /* Responsive styles */
            @media (max-width: 991px) {
                .feedback-module {
                    margin-top: 30px;
                }
            }

            @media (max-width: 768px) {
                .single-feature {
                    margin-bottom: 30px;
                }
                
                .single-feature .icon {
                    height: 380px; /* Increased height on mobile from 280px to 380px */
                }
                
                .star-rating label {
                    font-size: 30px;
                }
                
                .feedback-form .form-title {
                    font-size: 20px;
                }
                
                .feedback-form textarea {
                    padding: 15px;
                    font-size: 14px;
                    min-height: 100px;
                }

                /* Responsive feedback form layout */
                .feedback-form-row {
                    flex-direction: column;
                }
                
                .feedback-form-col {
                    margin-bottom: 15px;
                }
                
                .feedback-form-col:last-child {
                    margin-bottom: 0;
                }
                
                .feedback-form input[type="text"] {
                    margin-bottom: 15px;
                }
            }

            /* Animation Elements */
            .feature-area {
                position: relative;
                overflow: hidden !important;
            }

            /* Animated background elements */
            .animated-element {
                position: absolute;
                pointer-events: none; /* Ensures elements don't interfere with clicks */
                z-index: 1;
                opacity: 0;
                transition: all 0.5s ease;
            }

            /* Leaf element 1 - top left */
            .leaf-element-1 {
                top: 5%;
                left: 2%;
                width: 120px;
                height: auto;
                background: url('../../img/animation-elements/leaves1-transparent.png') no-repeat;
                background-size: contain;
                animation: floatAnimation 8s ease-in-out infinite, fadeIn 1s ease forwards;
                animation-delay: 0.2s;
            }

            /* Leaf element 2 - bottom right */
            .leaf-element-2 {
                bottom: 10%;
                right: 5%;
                width: 150px;
                height: auto;
                background: url('../../img/animation-elements/leaves2-transparent.png') no-repeat;
                background-size: contain;
                animation: floatAnimation 10s ease-in-out infinite reverse, fadeIn 1s ease forwards;
                animation-delay: 0.5s;
            }

            /* Ginger element - middle right */
            .ginger-element {
                top: 40%;
                right: -30px;
                width: 180px;
                height: auto;
                background: url('../../img/animation-elements/ginger-transparent.png') no-repeat;
                background-size: contain;
                animation: slideInRight 1.5s ease forwards, floatAnimation 12s ease-in-out infinite;
                animation-delay: 0.8s;
            }

            /* Lime element - bottom left */
            .lime-element {
                bottom: 5%;
                left: -20px;
                width: 140px;
                height: auto;
                background: url('../../img/animation-elements/lime-transparent.png') no-repeat;
                background-size: contain;
                animation: slideInLeft 1.5s ease forwards, floatAnimation 9s ease-in-out infinite;
                animation-delay: 1s;
            }

            /* Cane element - top right */
            .cane-element {
                top: 10%;
                right: 10%;
                width: 100px;
                height: auto;
                background: url('../../img/animation-elements/cane-normal-transparent.png') no-repeat;
                background-size: contain;
                transform: rotate(-15deg);
                animation: rotateAnimation 15s linear infinite, fadeIn 1s ease forwards;
                animation-delay: 1.2s;
            }

            /* Green streak - middle left */
            .green-streak {
                top: 50%;
                left: 5%;
                width: 80px;
                height: auto;
                background: url('../../img/animation-elements/green-streak-transparent.png') no-repeat;
                background-size: contain;
                animation: pulseAnimation 4s ease-in-out infinite, fadeIn 1s ease forwards;
                animation-delay: 1.5s;
            }

            /* 100% nature badge - appears on scroll */
            .nature-badge {
                top: 20%;
                left: 50%;
                transform: translateX(-50%) scale(0);
                width: 100px;
                height: auto;
                background: url('../../img/animation-elements/100-nature-transparent.png') no-repeat;
                background-size: contain;
                animation: popIn 0.5s ease forwards;
                animation-delay: 2s;
            }

            /* Product card animation enhancements */
            .single-feature {
                position: relative;
                z-index: 2; /* Ensure products are above animation elements */
            }

            /* Scroll-triggered animations */
            .scroll-reveal {
                opacity: 0;
                transform: translateY(30px);
                transition: all 0.8s ease;
            }

            .scroll-reveal.revealed {
                opacity: 1;
                transform: translateY(0);
            }

            /* Responsive adjustments for animations */
            @media (max-width: 768px) {
                .animated-element {
                    transform: scale(0.7);
                }
                
                .leaf-element-1 {
                    top: 2%;
                    left: 1%;
                }
                
                .ginger-element {
                    width: 120px;
                }
                
                .lime-element {
                    width: 100px;
                }
                
                .cane-element {
                    width: 80px;
                    right: 5%;
                }
            }