{{-- @extends('home.master') --}}
@extends($layout)

@push('title')
    Home
@endpush


@push('css')

    <link rel="stylesheet" href="{{ asset('assets/css/all-product.css') }}">

    <style>
        /* Enhanced Modern Carousel Styles */
        .carousel-bg-image {
            background: linear-gradient(135deg, 
                rgba(40, 167, 69, 0.95) 0%, 
                rgba(32, 201, 151, 0.9) 50%, 
                rgba(40, 167, 69, 0.95) 100%),
                url('/assets/img/banner/slider-bg.jpg') no-repeat center center;
            background-size: cover;
            background-attachment: fixed;
            padding: 0;
            position: relative;
            min-height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        /* Animated Background Particles */
        .carousel-bg-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="particles" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1" fill="rgba(255,255,255,0.1)" opacity="0.5"><animate attributeName="opacity" values="0.1;0.8;0.1" dur="3s" repeatCount="indefinite"/></circle><circle cx="18" cy="18" r="0.5" fill="rgba(255,255,255,0.2)" opacity="0.3"><animate attributeName="opacity" values="0.2;0.9;0.2" dur="4s" repeatCount="indefinite"/></circle><circle cx="10" cy="15" r="0.8" fill="rgba(255,255,255,0.15)" opacity="0.4"><animate attributeName="opacity" values="0.3;0.7;0.3" dur="2.5s" repeatCount="indefinite"/></circle></pattern></defs><rect width="100" height="100" fill="url(%23particles)"/></svg>');
            animation: particleMove 20s linear infinite;
            pointer-events: none;
        }

        @keyframes particleMove {
            0% { transform: translateX(0) translateY(0); }
            25% { transform: translateX(-10px) translateY(-10px); }
            50% { transform: translateX(10px) translateY(-5px); }
            75% { transform: translateX(-5px) translateY(10px); }
            100% { transform: translateX(0) translateY(0); }
        }

        /* Floating Geometric Shapes */
        .carousel-bg-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
            animation: floatingShapes 15s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes floatingShapes {
            0%, 100% { transform: rotate(0deg) scale(1); }
            33% { transform: rotate(120deg) scale(1.1); }
            66% { transform: rotate(240deg) scale(0.9); }
        }

        .carousel-inner {
            max-width: 1200px;
            margin: auto;
            position: relative;
            z-index: 10;
        }

        .custom-slide {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            min-height: 100vh;
            padding: 4rem 2rem;
            position: relative;
        }

        /* Enhanced Text Animations */
        .text-part {
            flex: 1 1 50%;
            padding-right: 3rem;
            color: white;
            position: relative;
            z-index: 15;
        }

        .text-part h2 {
            font-size: 4rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            color: #ffffff;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            line-height: 1.1;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: slideInLeft 1s ease-out;
            position: relative;
        }

        .text-part h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, #ffffff, transparent);
            border-radius: 2px;
            animation: expandWidth 1.5s ease-out 0.5s both;
        }

        @keyframes expandWidth {
            0% { width: 0; }
            100% { width: 100px; }
        }

        .text-part p {
            font-size: 1.3rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2.5rem;
            line-height: 1.7;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            animation: slideInLeft 1s ease-out 0.3s both;
            font-weight: 300;
        }

        /* Enhanced Button Styles */
        .text-part .btn {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border: none;
            padding: 18px 40px;
            border-radius: 50px;
            font-weight: 700;
            color: #28a745;
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            animation: slideInLeft 1s ease-out 0.6s both;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .text-part .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(40, 167, 69, 0.2), transparent);
            transition: left 0.6s ease;
        }

        .text-part .btn:hover::before {
            left: 100%;
        }

        .text-part .btn:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 20px 50px rgba(255, 255, 255, 0.4);
            color: #28a745;
            background: linear-gradient(135deg, #ffffff 0%, #e9ecef 100%);
        }

        .text-part .btn i {
            transition: transform 0.3s ease;
        }

        .text-part .btn:hover i {
            transform: translateX(5px);
        }

        /* Enhanced Image Animations */
        .image-part {
            flex: 1 1 50%;
            text-align: center;
            position: relative;
            z-index: 15;
        }

        .custom-slide img {
            max-height: 500px;
            width: auto;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            animation: slideInRight 1s ease-out 0.4s both;
            position: relative;
        }

        .custom-slide img:hover {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
        }

        /* Slide Animations */
        @keyframes slideInLeft {
            0% {
                opacity: 0;
                transform: translateX(-100px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInRight {
            0% {
                opacity: 0;
                transform: translateX(100px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Enhanced Navigation Controls */
        .carousel-control-prev,
        .carousel-control-next {
            width: 5%;
            z-index: 20;
        }

        .home-carousel-action-btn .action-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.8);
            color: rgba(255, 255, 255, 0.9);
            font-size: 20px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        .home-carousel-action-btn .action-icon:hover {
            border-color: #ffffff;
            background: rgba(255, 255, 255, 0.95);
            color: #28a745;
            transform: scale(1.1);
            box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
        }

        /* Enhanced Indicators */
        .carousel-indicators {
            bottom: 30px;
            z-index: 20;
        }

        .carousel-indicators button {
            background-color: rgba(255, 255, 255, 0.4) !important;
            opacity: 0.6;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.6);
            margin: 0 8px;
            transition: all 0.4s ease;
            backdrop-filter: blur(5px);
        }

        .carousel-indicators .active {
            opacity: 1;
            background-color: #ffffff !important;
            transform: scale(1.3);
            border-color: #ffffff;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
        }

        .carousel-indicators button:hover {
            opacity: 0.8;
            transform: scale(1.1);
            background-color: rgba(255, 255, 255, 0.7) !important;
        }

        /* Slide Transition Effects */
        .carousel-item {
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .carousel-item.active .text-part h2,
        .carousel-item.active .text-part p,
        .carousel-item.active .text-part .btn,
        .carousel-item.active .custom-slide img {
            animation-play-state: running;
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .text-part h2 {
                font-size: 3.5rem;
            }
            
            .custom-slide img {
                max-height: 400px;
            }
        }

        @media (max-width: 992px) {
            .carousel-bg-image {
                min-height: 80vh;
                background-attachment: scroll;
            }
            
            .custom-slide {
                min-height: 80vh;
                padding: 3rem 1.5rem;
            }
            
            .text-part h2 {
                font-size: 3rem;
            }
            
            .text-part p {
                font-size: 1.2rem;
            }
        }

        @media (max-width: 768px) {
            .carousel-bg-image {
                min-height: 100vh;
            }

            .custom-slide {
                flex-direction: column;
                text-align: center;
                padding: 2rem 1rem;
                min-height: 100vh;
                justify-content: center;
            }

            .text-part,
            .image-part {
                flex: 1 1 100%;
                padding: 1rem 0;
            }

            .text-part {
                padding-right: 0;
                order: 2;
            }

            .image-part {
                order: 1;
                margin-bottom: 2rem;
            }

            .text-part h2 {
                font-size: 2.5rem;
                margin-bottom: 1rem;
            }

            .text-part p {
                font-size: 1.1rem;
                margin-bottom: 2rem;
            }

            .text-part .btn {
                padding: 15px 30px;
                font-size: 1rem;
            }

            .custom-slide img {
                max-height: 250px;
            }

            .home-carousel-action-btn .action-icon {
                width: 45px;
                height: 45px;
                font-size: 16px;
            }

            .carousel-indicators button {
                width: 12px;
                height: 12px;
                margin: 0 5px;
            }
        }

        @media (max-width: 480px) {
            .text-part h2 {
                font-size: 2rem;
            }
            
            .text-part p {
                font-size: 1rem;
            }
            
            .custom-slide img {
                max-height: 200px;
            }
            
            .custom-slide {
                padding: 1.5rem 0.5rem;
            }
        }

        /* Enhanced Accessibility */
        .carousel-control-prev,
        .carousel-control-next {
            pointer-events: none;
        }

        .carousel-control-prev .action-icon,
        .carousel-control-next .action-icon {
            pointer-events: auto;
            cursor: pointer;
        }

        .action-icon {
            cursor: pointer;
        }

        /* Preloader for smooth transitions */
        .carousel-item:not(.active) .text-part h2,
        .carousel-item:not(.active) .text-part p,
        .carousel-item:not(.active) .text-part .btn,
        .carousel-item:not(.active) .custom-slide img {
            opacity: 0;
            transform: translateX(-50px);
        }

        /* Focus states for accessibility */
        .home-carousel-action-btn .action-icon:focus,
        .carousel-indicators button:focus {
            outline: 3px solid rgba(255, 255, 255, 0.8);
            outline-offset: 2px;
        }

        /* Floating Decorative Elements */
        .floating-decorations {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 5;
        }

        .floating-shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
            animation: floatAnimation 8s ease-in-out infinite;
        }

        .shape-1 {
            width: 120px;
            height: 120px;
            background: linear-gradient(45deg, #ffffff, rgba(255, 255, 255, 0.5));
            top: 15%;
            left: 10%;
            animation-delay: 0s;
        }

        .shape-2 {
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
            top: 60%;
            right: 15%;
            animation-delay: 2s;
        }

        .shape-3 {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
            bottom: 25%;
            left: 20%;
            animation-delay: 4s;
        }

        .shape-4 {
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
            top: 30%;
            right: 25%;
            animation-delay: 6s;
        }

        @keyframes floatAnimation {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
                opacity: 0.1;
            }
            25% {
                transform: translateY(-30px) rotate(90deg);
                opacity: 0.2;
            }
            50% {
                transform: translateY(-15px) rotate(180deg);
                opacity: 0.15;
            }
            75% {
                transform: translateY(-25px) rotate(270deg);
                opacity: 0.25;
            }
        }

        /* Enhanced Slide Badges */
        .slide-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
            padding: 8px 20px;
            border-radius: 25px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 1rem;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            animation: slideInLeft 1s ease-out 0.1s both;
        }

        .slide-badge i {
            font-size: 1rem;
            animation: pulse 2s ease-in-out infinite;
        }

        /* Slide Features */
        .slide-features {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
            animation: slideInLeft 1s ease-out 0.4s both;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9rem;
            font-weight: 500;
        }

        .feature-item i {
            color: #ffffff;
            font-size: 1rem;
        }

        /* Enhanced Button Styles */
        .btn-enhanced {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border: none;
            padding: 18px 40px;
            border-radius: 50px;
            font-weight: 700;
            color: #28a745;
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            animation: slideInLeft 1s ease-out 0.6s both;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }

        .btn-enhanced:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 20px 50px rgba(255, 255, 255, 0.4);
            color: #28a745;
            background: linear-gradient(135deg, #ffffff 0%, #e9ecef 100%);
            text-decoration: none;
        }

        .btn-glow {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(40, 167, 69, 0.2), transparent);
            transition: left 0.6s ease;
        }

        .btn-enhanced:hover .btn-glow {
            left: 100%;
        }

        .btn-enhanced i {
            transition: transform 0.3s ease;
        }

        .btn-enhanced:hover i {
            transform: translateX(5px);
        }

        /* Image Container Enhancements */
        .image-container {
            position: relative;
            display: inline-block;
        }

        .image-overlay {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 10;
        }

        /* Discount Badge */
        .discount-badge {
            background: linear-gradient(135deg, #ff4757, #ff3742);
            color: white;
            padding: 15px 20px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(255, 71, 87, 0.4);
            animation: bounceIn 1s ease-out 0.8s both;
        }

        .discount-text {
            display: block;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .discount-number {
            display: block;
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
        }

        .discount-off {
            display: block;
            font-size: 0.9rem;
            font-weight: 600;
        }

        /* New Badge */
        .new-badge {
            background: linear-gradient(135deg, #2ed573, #1e90ff);
            color: white;
            padding: 15px 20px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(46, 213, 115, 0.4);
            animation: bounceIn 1s ease-out 0.8s both;
        }

        .new-text {
            display: block;
            font-size: 1.2rem;
            font-weight: 800;
            line-height: 1;
        }

        .arrival-text {
            display: block;
            font-size: 0.8rem;
            font-weight: 500;
        }

        /* Premium Badge */
        .premium-badge {
            background: linear-gradient(135deg, #ffa502, #ff6348);
            color: white;
            padding: 15px 20px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(255, 165, 2, 0.4);
            animation: bounceIn 1s ease-out 0.8s both;
        }

        .premium-text {
            display: block;
            font-size: 1rem;
            font-weight: 800;
            line-height: 1;
        }

        .quality-text {
            display: block;
            font-size: 0.8rem;
            font-weight: 500;
        }

        /* Special Badge */
        .special-badge {
            background: linear-gradient(135deg, #a55eea, #26de81);
            color: white;
            padding: 15px 20px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(165, 94, 234, 0.4);
            animation: bounceIn 1s ease-out 0.8s both;
        }

        .special-text {
            display: block;
            font-size: 1rem;
            font-weight: 800;
            line-height: 1;
        }

        .offer-text {
            display: block;
            font-size: 0.8rem;
            font-weight: 500;
        }

        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3) rotate(-10deg);
            }
            50% {
                opacity: 1;
                transform: scale(1.1) rotate(5deg);
            }
            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
        }

        /* Progress Bar */
        .carousel-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            z-index: 20;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.8));
            width: 0%;
            animation: progressAnimation 6s linear infinite;
        }

        @keyframes progressAnimation {
            0% { width: 0%; }
            100% { width: 100%; }
        }

        /* Mobile Responsive Adjustments */
        @media (max-width: 768px) {
            .slide-features {
                gap: 1rem;
                justify-content: center;
            }

            .feature-item {
                font-size: 0.8rem;
            }

            .image-overlay {
                top: 10px;
                right: 10px;
            }

            .discount-badge,
            .new-badge,
            .premium-badge,
            .special-badge {
                padding: 10px 15px;
            }

            .discount-number {
                font-size: 1.5rem;
            }

            .floating-shape {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .slide-features {
                flex-direction: column;
                align-items: center;
                gap: 0.5rem;
            }

            .slide-badge {
                padding: 6px 15px;
                font-size: 0.8rem;
            }

            .image-overlay {
                position: relative;
                top: auto;
                right: auto;
                margin-top: 1rem;
                text-align: center;
            }
        }

        /* Additional Performance Optimizations */
        .carousel-item {
            will-change: transform;
        }

        .custom-slide img {
            will-change: transform;
        }

        .floating-shape {
            will-change: transform;
        }

        /* Smooth scrolling for the entire page */
        html {
            scroll-behavior: smooth;
        }

        /* Enhanced focus indicators for better accessibility */
        .btn-enhanced:focus {
            outline: 3px solid rgba(255, 255, 255, 0.8);
            outline-offset: 3px;
        }

        /* Reduced motion for users who prefer it */
        @media (prefers-reduced-motion: reduce) {
            .floating-shape,
            .carousel-item,
            .custom-slide img,
            .text-part h2,
            .text-part p,
            .text-part .btn,
            .slide-badge,
            .slide-features,
            .progress-bar {
                animation: none !important;
                transition: none !important;
            }

            .carousel-bg-image::before,
            .carousel-bg-image::after {
                animation: none !important;
            }
        }

        /* High contrast mode support */
        @media (prefers-contrast: high) {
            .carousel-bg-image {
                background: linear-gradient(135deg, 
                    rgba(0, 0, 0, 0.95) 0%, 
                    rgba(0, 0, 0, 0.9) 50%, 
                    rgba(0, 0, 0, 0.95) 100%),
                    url('/assets/img/banner/slider-bg.jpg') no-repeat center center;
            }

            .text-part h2,
            .text-part p,
            .slide-badge {
                color: #ffffff !important;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            }
        }

        /* Enhanced Testimonials Styles */
        .testimonials-section {
            position: relative;
            overflow: hidden;
        }

        .testimonials-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }

        .floating-shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
            animation: float 6s ease-in-out infinite;
        }

        .shape-1 {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, #28a745, #20c997);
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .shape-2 {
            width: 150px;
            height: 150px;
            background: linear-gradient(45deg, #ffc107, #fd7e14);
            top: 60%;
            right: 15%;
            animation-delay: 2s;
        }

        .shape-3 {
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, #6f42c1, #e83e8c);
            bottom: 20%;
            left: 20%;
            animation-delay: 4s;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            33% {
                transform: translateY(-20px) rotate(120deg);
            }

            66% {
                transform: translateY(10px) rotate(240deg);
            }
        }

        .section-badge .badge {
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        .rating-summary .stars i {
            font-size: 1.2rem;
            margin-right: 2px;
        }

        .testimonial-card {
            background: #ffffff;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            height: 100%;
            min-height: 350px;
            display: flex;
            flex-direction: column;
        }

        .testimonial-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(40, 167, 69, 0.05), transparent);
            transition: left 0.6s ease;
        }

        .testimonial-card:hover::before {
            left: 100%;
        }

        .testimonial-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            border-color: rgba(40, 167, 69, 0.3);
        }

        .featured-testimonial {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
            border: 2px solid #28a745;
        }

        .featured-testimonial::after {
            content: 'Featured';
            position: absolute;
            top: 15px;
            right: 15px;
            background: #28a745;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .quote-icon {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #28a745, #20c997);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1rem;
            opacity: 0.8;
        }

        .testimonial-content .rating {
            display: flex;
            gap: 3px;
        }

        .testimonial-content .rating i {
            color: #ffc107;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .testimonial-card:hover .rating i {
            transform: scale(1.1);
        }

        .testimonial-text {
            font-size: 1rem;
            line-height: 1.6;
            color: #495057;
            margin-bottom: 1.5rem;
            font-style: italic;
            position: relative;
            padding-left: 20px;
        }

        .testimonial-text::before {
            content: '"';
            position: absolute;
            left: 0;
            top: -5px;
            font-size: 2rem;
            color: #28a745;
            font-family: Georgia, serif;
        }

        .customer-info {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: auto;
        }

        .customer-avatar {
            position: relative;
            flex-shrink: 0;
        }

        .customer-avatar img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #e9ecef;
            transition: all 0.3s ease;
        }

        .testimonial-card:hover .customer-avatar img {
            border-color: #28a745;
            transform: scale(1.05);
        }

        .verified-badge {
            position: absolute;
            bottom: -2px;
            right: -2px;
            width: 20px;
            height: 20px;
            background: #28a745;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid white;
        }

        .verified-badge i {
            color: white;
            font-size: 0.7rem;
        }

        .customer-details {
            flex: 1;
        }

        .customer-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 4px;
        }

        .customer-title {
            font-size: 0.85rem;
            color: #6c757d;
            margin-bottom: 6px;
        }

        .purchase-info {
            font-size: 0.8rem;
        }

        .purchase-info i {
            color: #28a745;
        }

        /* Custom Carousel Controls */
        .custom-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid #28a745;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 1000;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            outline: none;
            user-select: none;
        }

        .custom-nav-btn:hover {
            background: #28a745;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
            border-color: #28a745;
        }

        .custom-nav-btn:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3);
        }

        .custom-nav-btn .nav-btn-content {
            color: #28a745;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .custom-nav-btn:hover .nav-btn-content {
            color: white;
        }

        .custom-prev-btn {
            left: 15px;
        }

        .custom-next-btn {
            right: 15px;
        }

        /* Override Bootstrap default carousel controls */
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            display: none;
        }

        /* Ensure carousel container has proper positioning */
        #testimonialsCarousel {
            position: relative;
            overflow: visible;
        }

        /* Custom Indicators */
        .custom-indicators {
            position: relative;
            margin-top: 2rem;
            margin-bottom: 0;
        }

        .custom-indicators button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid #28a745;
            background: transparent;
            margin: 0 6px;
            transition: all 0.3s ease;
        }

        .custom-indicators button.active {
            background: #28a745;
            transform: scale(1.2);
        }

        .custom-indicators button:hover {
            background: #28a745;
            transform: scale(1.1);
        }

        /* Trust Indicators */
        .trust-indicators {
            margin-top: 4rem;
        }

        .trust-item {
            text-align: center;
            padding: 1.5rem;
            transition: all 0.3s ease;
        }

        .trust-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #28a745, #20c997);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            color: white;
            font-size: 1.8rem;
            transition: all 0.3s ease;
        }

        .trust-item:hover .trust-icon {
            transform: rotate(360deg) scale(1.1);
            box-shadow: 0 10px 30px rgba(40, 167, 69, 0.3);
        }

        /* Testimonials Responsive Design */
        @media (max-width: 768px) {
            .testimonial-card {
                min-height: 280px;
                padding: 1.5rem;
            }
            
            .testimonial-text {
                font-size: 0.9rem;
                padding-left: 15px;
            }
            
            .customer-avatar img {
                width: 50px;
                height: 50px;
            }
            
            .verified-badge {
                width: 16px;
                height: 16px;
            }
            
            .custom-nav-btn {
                width: 40px;
                height: 40px;
            }
            
            .custom-nav-btn .nav-btn-content {
                font-size: 1rem;
            }
        }

        /* Enhanced About Section Styles */
        .about-section {
            background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(32, 201, 151, 0.1) 100%);
            position: relative;
            overflow: hidden;
            padding: 100px 0;
        }

        .about-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }

        .about-floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }

        .about-floating-shape {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: aboutFloat 8s ease-in-out infinite;
        }

        .about-shape-1 {
            width: 120px;
            height: 120px;
            top: 15%;
            left: 10%;
            animation-delay: 0s;
        }

        .about-shape-2 {
            width: 80px;
            height: 80px;
            top: 70%;
            right: 20%;
            animation-delay: 3s;
        }

        .about-shape-3 {
            width: 60px;
            height: 60px;
            bottom: 20%;
            left: 15%;
            animation-delay: 6s;
        }

        .about-shape-4 {
            width: 100px;
            height: 100px;
            top: 30%;
            right: 10%;
            animation-delay: 2s;
        }

        @keyframes aboutFloat {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
                opacity: 0.1;
            }
            25% {
                transform: translateY(-30px) rotate(90deg);
                opacity: 0.2;
            }
            50% {
                transform: translateY(-15px) rotate(180deg);
                opacity: 0.15;
            }
            75% {
                transform: translateY(-25px) rotate(270deg);
                opacity: 0.25;
            }
        }

        .about-content {
            position: relative;
            z-index: 2;
        }

        .about-badge {
            display: inline-block;
            background: rgba(40, 167, 69, 0.1);
            color: #28a745;
            padding: 8px 20px;
            border-radius: 25px;
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 0.5px;
            margin-bottom: 1.5rem;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(40, 167, 69, 0.3);
        }

        .about-title {
            color: #2c3e50;
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .about-subtitle {
            color: #6c757d;
            font-size: 1.3rem;
            font-weight: 300;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .about-description {
            color: #495057;
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 3rem;
        }

        .about-features {
            margin-bottom: 3rem;
        }

        .about-feature {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(40, 167, 69, 0.2);
            transition: all 0.3s ease;
        }

        .about-feature:hover {
            transform: translateX(10px);
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 10px 30px rgba(40, 167, 69, 0.2);
        }

        .about-feature-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #28a745, #20c997);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            color: white;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .about-feature-content h5 {
            color: #2c3e50;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .about-feature-content p {
            color: #6c757d;
            margin: 0;
            font-size: 0.95rem;
        }

        .about-stats {
            display: flex;
            gap: 2rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }

        .about-stat {
            text-align: center;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(40, 167, 69, 0.2);
            flex: 1;
            min-width: 120px;
            transition: all 0.3s ease;
        }

        .about-stat:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 15px 40px rgba(40, 167, 69, 0.2);
        }

        .about-stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #28a745;
            margin-bottom: 0.5rem;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .about-stat-label {
            color: #6c757d;
            font-size: 0.9rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .about-cta-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .about-btn-primary {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 15px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .about-btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(40, 167, 69, 0.4);
            color: white;
            text-decoration: none;
        }

        .about-btn-secondary {
            background: transparent;
            color: #28a745;
            padding: 15px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: 2px solid rgba(40, 167, 69, 0.3);
            backdrop-filter: blur(10px);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .about-btn-secondary:hover {
            background: rgba(40, 167, 69, 0.1);
            border-color: rgba(40, 167, 69, 0.5);
            transform: translateY(-3px);
            color: #28a745;
            text-decoration: none;
        }

        .about-image-container {
            position: relative;
            z-index: 2;
        }

        .about-main-image {
            border-radius: 30px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            width: 100%;
            height: auto;
        }

        .about-main-image:hover {
            transform: scale(1.05);
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
        }

        .about-image-overlay {
            position: absolute;
            bottom: 30px;
            left: 30px;
            right: 30px;
            background: rgba(255, 255, 255, 0.95);
            padding: 1.5rem;
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .about-image-overlay h6 {
            color: #2c3e50;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .about-image-overlay p {
            color: #6c757d;
            margin: 0;
            font-size: 0.9rem;
        }

        /* Responsive Design for About Section */
        @media (max-width: 768px) {
            .about-section {
                padding: 60px 0;
            }

            .about-title {
                font-size: 2.5rem;
            }

            .about-subtitle {
                font-size: 1.1rem;
            }

            .about-stats {
                gap: 1rem;
            }

            .about-stat {
                padding: 1rem;
                min-width: 100px;
            }

            .about-stat-number {
                font-size: 2rem;
            }

            .about-cta-buttons {
                justify-content: center;
            }

            .about-btn-primary,
            .about-btn-secondary {
                padding: 12px 24px;
                font-size: 1rem;
            }

            .about-feature {
                padding: 0.8rem;
            }

            .about-feature:hover {
                transform: translateX(5px);
            }
        }

        /* Enhanced Featured Products Section Styles */
        .featured-products-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
            position: relative;
            overflow: hidden;
            padding: 100px 0;
            margin: 60px 0;
        }

        .featured-products-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="productGrid" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(40,167,69,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23productGrid)"/></svg>');
            opacity: 0.4;
        }

        .products-bg-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .products-floating-shape {
            position: absolute;
            border-radius: 50%;
            animation: productsFloat 12s ease-in-out infinite;
            opacity: 0.1;
        }

        .products-shape-1 {
            width: 150px;
            height: 150px;
            background: linear-gradient(45deg, #28a745, #20c997);
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .products-shape-2 {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, #ffc107, #fd7e14);
            top: 20%;
            right: 10%;
            animation-delay: 3s;
        }

        .products-shape-3 {
            width: 120px;
            height: 120px;
            background: linear-gradient(45deg, #6f42c1, #e83e8c);
            bottom: 15%;
            left: 15%;
            animation-delay: 6s;
        }

        .products-shape-4 {
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, #17a2b8, #6610f2);
            bottom: 25%;
            right: 20%;
            animation-delay: 9s;
        }

        @keyframes productsFloat {
            0%, 100% {
                transform: translateY(0px) rotate(0deg) scale(1);
                opacity: 0.1;
            }
            25% {
                transform: translateY(-30px) rotate(90deg) scale(1.1);
                opacity: 0.2;
            }
            50% {
                transform: translateY(-15px) rotate(180deg) scale(0.9);
                opacity: 0.15;
            }
            75% {
                transform: translateY(-25px) rotate(270deg) scale(1.05);
                opacity: 0.25;
            }
        }

        .products-header {
            position: relative;
            z-index: 2;
            margin-bottom: 4rem;
        }

        .products-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(40, 167, 69, 0.1);
            color: #28a745;
            padding: 10px 25px;
            border-radius: 30px;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 1.5rem;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(40, 167, 69, 0.3);
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
            transition: all 0.3s ease;
        }

        .products-badge:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
        }

        .products-badge i {
            font-size: 1rem;
            animation: sparkle 2s ease-in-out infinite;
        }

        @keyframes sparkle {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.2) rotate(180deg); }
        }

        .products-title {
            font-size: 4rem;
            font-weight: 800;
            color: #2c3e50;
            margin-bottom: 1rem;
            line-height: 1.2;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            background: linear-gradient(135deg, #2c3e50 0%, #28a745 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .products-subtitle {
            font-size: 1.3rem;
            color: #6c757d;
            font-weight: 300;
            line-height: 1.6;
            margin-bottom: 2rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .products-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .divider-line {
            width: 80px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #28a745, transparent);
        }

        .divider-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #28a745, #20c997);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1rem;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
            animation: pulse 2s ease-in-out infinite;
        }

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

        .products-grid {
            position: relative;
            z-index: 2;
        }

        .products-view-all-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 18px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.2rem;
            transition: all 0.4s ease;
            border: none;
            box-shadow: 0 10px 30px rgba(40, 167, 69, 0.3);
            position: relative;
            overflow: hidden;
        }

        .products-view-all-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s ease;
        }

        .products-view-all-btn:hover::before {
            left: 100%;
        }

        .products-view-all-btn:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 20px 50px rgba(40, 167, 69, 0.4);
            color: white;
            text-decoration: none;
        }

        .products-view-all-btn i {
            transition: transform 0.3s ease;
        }

        .products-view-all-btn:hover i {
            transform: translateX(5px);
        }

        /* Enhanced Product Card Styles */
        .product-card {
            background: #ffffff;
            border-radius: 25px;
            padding: 1.5rem !important;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(32, 201, 151, 0.05) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .product-card:hover::before {
            opacity: 1;
        }

        .product-card:hover {
            transform: translateY(-15px) scale(1.03);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
            border-color: rgba(40, 167, 69, 0.3);
        }

        .product-thumb {
            position: relative;
            overflow: hidden;
            border-radius: 20px !important;
            margin-bottom: 1.5rem;
            background: #f8f9fa;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 250px;
            width: 100%;
        }

        .product-thumb::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(40, 167, 69, 0.1), rgba(32, 201, 151, 0.1));
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1;
        }

        .product-card:hover .product-thumb::before {
            opacity: 1;
        }

        .product-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            transition: all 0.4s ease;
            border-radius: 15px;
            padding: 10px;
            background: transparent;
        }

        .product-img.back {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transform: scale(1.1);
            padding: 10px;
        }

        .product-card:hover .product-img.front {
            opacity: 0;
            transform: scale(0.95);
        }

        .product-card:hover .product-img.back {
            opacity: 1;
            transform: scale(1);
        }

        .product-actions {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            opacity: 0;
            transform: translateX(20px);
            transition: all 0.3s ease;
            z-index: 10;
        }

        .product-card:hover .product-actions {
            opacity: 1;
            transform: translateX(0);
        }

        .buyNowIcon,
        .addCartIcon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .buyNowIcon {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
        }

        .buyNowIcon:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
        }

        .addCartIcon {
            background: rgba(255, 255, 255, 0.95);
            color: #28a745;
            border: 2px solid rgba(40, 167, 69, 0.3);
        }

        .addCartIcon:hover {
            background: #28a745;
            color: white;
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
        }

        .product-details {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 2;
        }

        .product-title {
            font-size: 1.2rem !important;
            font-weight: 600 !important;
            color: #2c3e50 !important;
            margin-bottom: 0.8rem !important;
            line-height: 1.4;
            transition: color 0.3s ease;
        }

        .product-card:hover .product-title {
            color: #28a745 !important;
        }

        .product-price {
            margin-bottom: 1rem !important;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .selling-price {
            font-size: 1.3rem !important;
            font-weight: 700 !important;
            color: #28a745 !important;
        }

        .regular-price {
            font-size: 1rem !important;
            color: #dc3545 !important;
            opacity: 0.8;
        }

        .view-btn {
            background: linear-gradient(135deg, #28a745, #20c997) !important;
            border: none !important;
            color: white !important;
            padding: 12px 20px !important;
            border-radius: 15px !important;
            font-weight: 600 !important;
            font-size: 1rem !important;
            transition: all 0.3s ease !important;
            text-decoration: none !important;
            margin-top: auto;
            position: relative;
            overflow: hidden;
        }

        .view-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        .view-btn:hover::before {
            left: 100%;
        }

        .view-btn:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4) !important;
            color: white !important;
        }

        /* Responsive Design for Featured Products */
        @media (max-width: 768px) {
            .featured-products-section {
                padding: 60px 0;
                margin: 40px 0;
            }

            .products-title {
                font-size: 2.5rem;
            }

            .products-subtitle {
                font-size: 1.1rem;
            }

            .products-badge {
                padding: 8px 20px;
                font-size: 0.85rem;
            }

            .products-view-all-btn {
                padding: 15px 30px;
                font-size: 1.1rem;
            }

            .product-card {
                padding: 1.2rem !important;
            }

            .product-thumb {
                height: 220px;
            }

            .product-img {
                padding: 8px;
            }

            .product-actions {
                top: 10px;
                right: 10px;
            }

            .buyNowIcon,
            .addCartIcon {
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }

            .product-title {
                font-size: 1.1rem !important;
            }

            .selling-price {
                font-size: 1.2rem !important;
            }
        }

        @media (max-width: 576px) {
            .products-title {
                font-size: 2rem;
            }

            .divider-line {
                width: 50px;
            }

            .products-floating-shape {
                display: none;
            }

            .product-thumb {
                height: 200px;
            }

            .product-img {
                padding: 6px;
            }
        }
    </style>

@endpush

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Enhanced Carousel Functionality
            const carousel = document.getElementById('customCarousel');
            const progressBar = document.querySelector('.progress-bar');
            const carouselInstance = new bootstrap.Carousel(carousel, {
                interval: 6000,
                wrap: true,
                touch: true
            });

            let currentSlide = 0;
            const totalSlides = document.querySelectorAll('.carousel-item').length;

            // Progress bar animation
            function animateProgressBar() {
                if (progressBar) {
                    progressBar.style.animation = 'none';
                    progressBar.offsetHeight; // Trigger reflow
                    progressBar.style.animation = 'progressAnimation 6s linear';
                }
            }

            // Reset animations for active slide
            function resetSlideAnimations() {
                // Remove animation classes from all slides
                document.querySelectorAll('.carousel-item').forEach(item => {
                    const elements = item.querySelectorAll('.text-part h2, .text-part p, .text-part .btn, .custom-slide img, .slide-badge, .slide-features');
                    elements.forEach(el => {
                        el.style.animation = 'none';
                    });
                });

                // Add animations to active slide
                setTimeout(() => {
                    const activeSlide = document.querySelector('.carousel-item.active');
                    if (activeSlide) {
                        const h2 = activeSlide.querySelector('.text-part h2');
                        const p = activeSlide.querySelector('.text-part p');
                        const btn = activeSlide.querySelector('.text-part .btn');
                        const img = activeSlide.querySelector('.custom-slide img');
                        const badge = activeSlide.querySelector('.slide-badge');
                        const features = activeSlide.querySelector('.slide-features');

                        if (badge) badge.style.animation = 'slideInLeft 1s ease-out 0.1s both';
                        if (h2) h2.style.animation = 'slideInLeft 1s ease-out 0.2s both';
                        if (p) p.style.animation = 'slideInLeft 1s ease-out 0.3s both';
                        if (features) features.style.animation = 'slideInLeft 1s ease-out 0.4s both';
                        if (btn) btn.style.animation = 'slideInLeft 1s ease-out 0.6s both';
                        if (img) img.style.animation = 'slideInRight 1s ease-out 0.4s both';
                    }
                }, 100);
            }

            // Carousel event listeners
            carousel.addEventListener('slide.bs.carousel', function(e) {
                currentSlide = e.to;
                animateProgressBar();
            });

            carousel.addEventListener('slid.bs.carousel', function(e) {
                resetSlideAnimations();
            });

            // Initialize
            animateProgressBar();
            resetSlideAnimations();

            // Pause on hover
            carousel.addEventListener('mouseenter', function() {
                carouselInstance.pause();
                if (progressBar) {
                    progressBar.style.animationPlayState = 'paused';
                }
            });

            carousel.addEventListener('mouseleave', function() {
                carouselInstance.cycle();
                if (progressBar) {
                    progressBar.style.animationPlayState = 'running';
                }
            });

            // Touch/Swipe support enhancement
            let startX = 0;
            let endX = 0;

            carousel.addEventListener('touchstart', function(e) {
                startX = e.touches[0].clientX;
            });

            carousel.addEventListener('touchend', function(e) {
                endX = e.changedTouches[0].clientX;
                handleSwipe();
            });

            function handleSwipe() {
                const threshold = 50;
                const diff = startX - endX;

                if (Math.abs(diff) > threshold) {
                    if (diff > 0) {
                        // Swipe left - next slide
                        carouselInstance.next();
                    } else {
                        // Swipe right - previous slide
                        carouselInstance.prev();
                    }
                }
            }

            // Keyboard navigation
            document.addEventListener('keydown', function(e) {
                if (e.key === 'ArrowLeft') {
                    carouselInstance.prev();
                } else if (e.key === 'ArrowRight') {
                    carouselInstance.next();
                }
            });

            // Intersection Observer for performance
            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.1
            };

            const carouselObserver = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        // Carousel is visible, ensure it's running
                        carouselInstance.cycle();
                    } else {
                        // Carousel is not visible, pause it
                        carouselInstance.pause();
                    }
                });
            }, observerOptions);

            carouselObserver.observe(carousel);

            // Add smooth scroll behavior for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });

            // Preload images for better performance
            const images = carousel.querySelectorAll('img');
            images.forEach(img => {
                const imageLoader = new Image();
                imageLoader.src = img.src;
            });

            // Add loading animation
            const loadingOverlay = document.createElement('div');
            loadingOverlay.className = 'carousel-loading';
            loadingOverlay.innerHTML = '<div class="loading-spinner"></div>';
            loadingOverlay.style.cssText = `
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(40, 167, 69, 0.9);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1000;
                opacity: 1;
                transition: opacity 0.5s ease;
            `;

            const spinner = loadingOverlay.querySelector('.loading-spinner');
            spinner.style.cssText = `
                width: 50px;
                height: 50px;
                border: 4px solid rgba(255, 255, 255, 0.3);
                border-top: 4px solid #ffffff;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            `;

            // Add spinner animation
            const spinnerStyle = document.createElement('style');
            spinnerStyle.textContent = `
                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            `;
            document.head.appendChild(spinnerStyle);

            carousel.appendChild(loadingOverlay);

            // Hide loading overlay after images are loaded
            Promise.all(Array.from(images).map(img => {
                return new Promise(resolve => {
                    if (img.complete) {
                        resolve();
                    } else {
                        img.onload = resolve;
                        img.onerror = resolve;
                    }
                });
            })).then(() => {
                setTimeout(() => {
                    loadingOverlay.style.opacity = '0';
                    setTimeout(() => {
                        loadingOverlay.remove();
                    }, 500);
                }, 1000);
            });

            // Add parallax effect on scroll (subtle)
            let ticking = false;
            
            function updateParallax() {
                const scrolled = window.pageYOffset;
                const parallaxElements = document.querySelectorAll('.floating-shape');
                
                parallaxElements.forEach((element, index) => {
                    const speed = 0.5 + (index * 0.1);
                    const yPos = -(scrolled * speed);
                    element.style.transform = `translate3d(0, ${yPos}px, 0)`;
                });
                
                ticking = false;
            }

            function requestTick() {
                if (!ticking) {
                    requestAnimationFrame(updateParallax);
                    ticking = true;
                }
            }

            // Only add parallax if user hasn't requested reduced motion
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                window.addEventListener('scroll', requestTick);
            }

            // Add auto-pause when tab is not visible
            document.addEventListener('visibilitychange', function() {
                if (document.hidden) {
                    carouselInstance.pause();
                } else {
                    carouselInstance.cycle();
                }
            });

            // Add error handling for images
            images.forEach(img => {
                img.addEventListener('error', function() {
                    console.warn('Failed to load image:', this.src);
                    // You could add a placeholder image here
                    // this.src = 'assets/img/placeholder.png';
                });
            });

            // Performance monitoring
            if ('performance' in window) {
                window.addEventListener('load', function() {
                    setTimeout(function() {
                        const perfData = performance.getEntriesByType('navigation')[0];
                        if (perfData.loadEventEnd - perfData.loadEventStart > 3000) {
                            console.warn('Carousel loaded slowly. Consider optimizing images.');
                        }
                    }, 0);
                });
            }
        });
    </script>
@endpush

@section('content')

    {{-- <!-- carousel section -->
    <div id="customCarousel" class="carousel position-relative carousel-bg-image">
        <div class="carousel-inner">
            <div class="container-md">
                <div class="carousel-item active">
                    <div class="custom-slide bg-slide-1">
                        <div class="text-part animate__animated animate__fadeInUp">
                            <h2 class="heading">Big Sale!</h2>
                            <p class="text">Get up to 50% off on selected items. Limited time offer!</p>
                            <a href="#" class="btn btn-success">Shop Now</a>
                        </div>
                        <div class="image-part animate__animated animate__fadeInRight">
                            <img src="assets/img/banner/banner-1.png" alt="Banner 1">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}

    <!-- Enhanced Modern Carousel Section -->
    <div id="customCarousel" class="carousel slide position-relative carousel-bg-image" data-bs-ride="carousel" data-bs-interval="6000">
        <!-- Floating Decorative Elements -->
        <div class="floating-decorations">
            <div class="floating-shape shape-1"></div>
            <div class="floating-shape shape-2"></div>
            <div class="floating-shape shape-3"></div>
            <div class="floating-shape shape-4"></div>
        </div>

        <!-- Carousel Indicators -->
        <div class="carousel-indicators">
            @foreach($sliders as $index => $slider)
                <button type="button" data-bs-target="#customCarousel" data-bs-slide-to="{{ $index }}" 
                        class="{{ $index === 0 ? 'active' : '' }}"
                        aria-current="{{ $index === 0 ? 'true' : 'false' }}" 
                        aria-label="Slide {{ $index + 1 }}"></button>
            @endforeach
        </div>

        <!-- Carousel Items -->
        <div class="carousel-inner">
            @if($sliders->count() > 0)
                @foreach($sliders as $index => $slider)
                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                        <div class="custom-slide" style="{{ $slider->background_color ? 'background: linear-gradient(135deg, ' . $slider->background_color . ', ' . $slider->background_color . '80);' : '' }}">
                            <div class="text-part" style="{{ $slider->text_color ? 'color: ' . $slider->text_color . ';' : '' }}">
                                @if($slider->badge_text)
                                    <div class="slide-badge">
                                        @if($slider->badge_icon)
                                            <i class="{{ $slider->badge_icon }}"></i>
                                        @endif
                                        <span>{{ $slider->badge_text }}</span>
                                    </div>
                                @endif
                                
                                <h2>{{ $slider->title }}</h2>
                                <p>{!! $slider->description !!}</p>
                                
                                @if($slider->features && count($slider->features) > 0)
                                    <div class="slide-features">
                                        @foreach($slider->features as $feature)
                                            <div class="feature-item">
                                                <i class="{{ $feature['icon'] ?? 'fas fa-check' }}"></i>
                                                <span>{{ $feature['text'] }}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                                
                                <a href="{{ $slider->button_link ?? route('all-products') }}" class="btn btn-enhanced">
                                    @if($slider->button_icon)
                                        <i class="{{ $slider->button_icon }}"></i>
                                    @endif
                                    <span>{{ $slider->button_text }}</span>
                                    <div class="btn-glow"></div>
                                </a>
                            </div>
                            <div class="image-part">
                                <div class="image-container">
                                    <img src="{{ $slider->image_url }}" alt="{{ $slider->title }}" class="img-fluid">
                                    @if($slider->overlay_badge_type)
                                        <div class="image-overlay">
                                            <div class="{{ $slider->overlay_badge_type }}-badge">
                                                @if($slider->overlay_badge_text)
                                                    <span class="{{ $slider->overlay_badge_type }}-text">{{ $slider->overlay_badge_text }}</span>
                                                @endif
                                                @if($slider->overlay_badge_subtext)
                                                    <span class="{{ $slider->overlay_badge_type === 'new' ? 'arrival' : ($slider->overlay_badge_type === 'premium' ? 'quality' : ($slider->overlay_badge_type === 'special' ? 'offer' : 'off')) }}-text">{{ $slider->overlay_badge_subtext }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <!-- Default slide if no sliders are available -->
                <div class="carousel-item active">
                    <div class="custom-slide">
                        <div class="text-part">
                            <div class="slide-badge">
                                <i class="fas fa-store"></i>
                                <span>Welcome</span>
                            </div>
                            <h2>Welcome to Our Store</h2>
                            <p>Discover amazing products and great deals. Start shopping today!</p>
                            <div class="slide-features">
                                <div class="feature-item">
                                    <i class="fas fa-shipping-fast"></i>
                                    <span>Fast Shipping</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-shield-alt"></i>
                                    <span>Quality Products</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-heart"></i>
                                    <span>Customer Care</span>
                                </div>
                            </div>
                            <a href="{{ route('all-products') }}" class="btn btn-enhanced">
                                <i class="fas fa-shopping-cart"></i>
                                <span>Shop Now</span>
                                <div class="btn-glow"></div>
                            </a>
                        </div>
                        <div class="image-part">
                            <div class="image-container">
                                <img src="assets/img/banner/banner-1.png" alt="Welcome Banner" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Enhanced Carousel Controls -->
        <button class="carousel-control-prev home-carousel-action-btn" type="button" data-bs-target="#customCarousel"
            data-bs-slide="prev">
            <span class="action-icon" aria-hidden="true">
                <i class="fas fa-chevron-left"></i>
            </span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next home-carousel-action-btn" type="button" data-bs-target="#customCarousel"
            data-bs-slide="next">
            <span class="action-icon" aria-hidden="true">
                <i class="fas fa-chevron-right"></i>
            </span>
            <span class="visually-hidden">Next</span>
        </button>

        <!-- Progress Bar -->
        <div class="carousel-progress">
            <div class="progress-bar"></div>
        </div>
    </div>

    <!-- Enhanced Featured Products Section -->
    <section class="featured-products-section">
        <!-- Background Elements -->
        <div class="products-bg-elements">
            <div class="products-floating-shape products-shape-1"></div>
            <div class="products-floating-shape products-shape-2"></div>
            <div class="products-floating-shape products-shape-3"></div>
            <div class="products-floating-shape products-shape-4"></div>
        </div>
        
        <div class="container">
            <!-- Section Header -->
            <div class="products-header text-center">
                <div class="products-badge">
                    <i class="fas fa-star"></i>
                    <span>Premium Collection</span>
                </div>
                <h2 class="products-title">Featured Products</h2>
                <p class="products-subtitle">Discover our handpicked selection of premium products crafted with excellence</p>
                <div class="products-divider">
                    <div class="divider-line"></div>
                    <div class="divider-icon">
                        <i class="fas fa-gem"></i>
                    </div>
                    <div class="divider-line"></div>
                </div>
            </div>

            <!-- Products Grid -->
            <div class="row g-4 products-grid">
                @includeIf('home.pages.product-list', ['products' => $products])
            </div>

            <!-- View All Button -->
            <div class="text-center mt-5">
                <a href="{{ route('all-products') }}" class="products-view-all-btn">
                    <span>Explore All Products</span>
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Enhanced About Nivanta Section -->
    @if($aboutSection)
        <section class="about-section">
            <!-- Floating Background Elements -->
            <div class="about-floating-elements">
                <div class="about-floating-shape about-shape-1"></div>
                <div class="about-floating-shape about-shape-2"></div>
                <div class="about-floating-shape about-shape-3"></div>
                <div class="about-floating-shape about-shape-4"></div>
            </div>

            <div class="container">
                <div class="row align-items-center">
                    <!-- Content Column -->
                    <div class="col-lg-6">
                        <div class="about-content">
                            <!-- Section Badge -->
                            <div class="about-badge">
                                <i class="{{ $aboutSection->badge_icon }} me-2"></i>{{ $aboutSection->badge_text }}
                            </div>

                            <!-- Main Title -->
                            <h1 class="about-title">{{ $aboutSection->title }}</h1>
                            
                            <!-- Subtitle -->
                            <p class="about-subtitle">{{ $aboutSection->subtitle }}</p>
                            
                            <!-- Description -->
                            <p class="about-description">{{ $aboutSection->description }}</p>

                            <!-- Key Features -->
                            @if($aboutSection->features && count($aboutSection->features) > 0)
                                <div class="about-features">
                                    @foreach($aboutSection->features as $feature)
                                        <div class="about-feature">
                                            <div class="about-feature-icon">
                                                <i class="{{ $feature['icon'] }}"></i>
                                            </div>
                                            <div class="about-feature-content">
                                                <h5>{{ $feature['title'] }}</h5>
                                                <p>{{ $feature['description'] }}</p>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            <!-- Statistics -->
                            <div class="about-stats">
                                <div class="about-stat">
                                    <div class="about-stat-number">{{ $aboutSection->formatted_customers_count }}</div>
                                    <div class="about-stat-label">{{ $aboutSection->customers_label }}</div>
                                </div>
                                <div class="about-stat">
                                    <div class="about-stat-number">{{ $aboutSection->formatted_products_count }}</div>
                                    <div class="about-stat-label">{{ $aboutSection->products_label }}</div>
                                </div>
                                <div class="about-stat">
                                    <div class="about-stat-number">{{ $aboutSection->formatted_experience_years }}</div>
                                    <div class="about-stat-label">{{ $aboutSection->experience_label }}</div>
                                </div>
                            </div>

                            <!-- Call to Action Buttons -->
                            <div class="about-cta-buttons">
                                <a href="{{ $aboutSection->primary_btn_url }}" class="about-btn-primary">
                                    <i class="{{ $aboutSection->primary_btn_icon }}"></i>
                                    {{ $aboutSection->primary_btn_text }}
                                </a>
                                <a href="{{ $aboutSection->secondary_btn_url }}" class="about-btn-secondary">
                                    <i class="{{ $aboutSection->secondary_btn_icon }}"></i>
                                    {{ $aboutSection->secondary_btn_text }}
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Image Column -->
                    <div class="col-lg-6">
                        <div class="about-image-container">
                            <img src="{{ $aboutSection->main_image_url }}" 
                                 alt="About {{ $aboutSection->title }}" 
                                 class="about-main-image">
                            
                            <!-- Image Overlay Card -->
                            <div class="about-image-overlay">
                                <h6><i class="{{ $aboutSection->overlay_icon }} text-success me-2"></i>{{ $aboutSection->overlay_title }}</h6>
                                <p>{{ $aboutSection->overlay_description }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @else
        <!-- Fallback About Section -->
        <section class="about-section">
            <div class="about-floating-elements">
                <div class="about-floating-shape about-shape-1"></div>
                <div class="about-floating-shape about-shape-2"></div>
                <div class="about-floating-shape about-shape-3"></div>
                <div class="about-floating-shape about-shape-4"></div>
            </div>

            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="about-content">
                            <div class="about-badge">
                                <i class="fas fa-heart me-2"></i>About Our Story
                            </div>
                            <h1 class="about-title">Welcome to Nivanta</h1>
                            <p class="about-subtitle">Your trusted partner in quality shopping experiences</p>
                            <p class="about-description">
                                At Nivanta, we believe shopping should be more than just a transaction—it should be an experience. 
                                We're committed to bringing you the finest selection of products with unmatched quality, 
                                competitive prices, and exceptional customer service.
                            </p>
                            <div class="about-stats">
                                <div class="about-stat">
                                    <div class="about-stat-number">50K+</div>
                                    <div class="about-stat-label">Happy Customers</div>
                                </div>
                                <div class="about-stat">
                                    <div class="about-stat-number">10K+</div>
                                    <div class="about-stat-label">Products</div>
                                </div>
                                <div class="about-stat">
                                    <div class="about-stat-number">5+</div>
                                    <div class="about-stat-label">Years Experience</div>
                                </div>
                            </div>
                            <div class="about-cta-buttons">
                                <a href="/about" class="about-btn-primary">
                                    <i class="fas fa-info-circle"></i>
                                    Learn More
                                </a>
                                <a href="/products" class="about-btn-secondary">
                                    <i class="fas fa-shopping-bag"></i>
                                    Shop Now
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="about-image-container">
                            <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=600&h=500&fit=crop&crop=center" 
                                 alt="About Nivanta - Quality Shopping Experience" 
                                 class="about-main-image">
                            <div class="about-image-overlay">
                                <h6><i class="fas fa-award text-success me-2"></i>Quality Guaranteed</h6>
                                <p>Every product is carefully selected and tested to ensure the highest quality standards.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!-- End of Enhanced About Nivanta Section -->


    <!-- Enhanced Testimonials Section -->
    <section class="py-5 testimonials-section" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); position: relative; overflow: hidden;">
        <!-- Background Animation Elements -->
        <div class="testimonials-bg">
            <div class="floating-shape shape-1"></div>
            <div class="floating-shape shape-2"></div>
            <div class="floating-shape shape-3"></div>
        </div>

        <div class="container position-relative">
            <!-- Section Header -->
            <div class="text-center mb-5">
                <div class="section-badge mb-3">
                    <span class="badge bg-success bg-opacity-10 text-success px-3 py-2 rounded-pill">
                        <i class="fas fa-star me-2"></i>Customer Reviews
                    </span>
                </div>
                <h2 class="display-5 fw-bold mb-3" style="color: #2c3e50;">What Our Customers Say</h2>
                <p class="lead text-muted mb-4">Discover why thousands of customers trust Nivanta for their shopping needs</p>
                <div class="rating-summary d-flex justify-content-center align-items-center gap-3 mb-4">
                    <div class="stars">
                        <i class="fas fa-star text-warning"></i>
                        <i class="fas fa-star text-warning"></i>
                        <i class="fas fa-star text-warning"></i>
                        <i class="fas fa-star text-warning"></i>
                        <i class="fas fa-star text-warning"></i>
                    </div>
                    <span class="rating-text fw-semibold">4.9 out of 5</span>
                    <span class="text-muted">Based on 2,847 reviews</span>
                </div>
            </div>

            <!-- Enhanced Testimonials Carousel -->
            <div id="testimonialsCarousel" class="carousel slide" data-bs-ride="carousel">
                @if($testimonials->count() > 0)
                    <!-- Carousel Indicators -->
                  

                    @include('home.partials.testimonials-section')
                @else
                    <!-- No testimonials fallback -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="row justify-content-center">
                                <div class="col-lg-6 text-center">
                                    <div class="testimonial-card">
                                        <div class="testimonial-content">
                                            <div class="quote-icon">
                                                <i class="fas fa-quote-left"></i>
                                            </div>
                                            <div class="rating mb-3">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </div>
                                            <p class="testimonial-text">"We're working hard to provide you with the best shopping experience. Your testimonials will appear here soon!"</p>
                                            <div class="customer-info">
                                                <div class="customer-avatar">
                                                    <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face" alt="Nivanta Team">
                                                </div>
                                                <div class="customer-details">
                                                    <h6 class="customer-name">Nivanta Team</h6>
                                                    <p class="customer-title">Your Shopping Partner</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                  <div class="carousel-indicators custom-indicators">
                        @php
                            $totalSlides = ceil($testimonials->count() / 3); // 3 testimonials per slide
                        @endphp
                        @for($i = 0; $i < $totalSlides; $i++)
                            <button type="button" data-bs-target="#testimonialsCarousel" data-bs-slide-to="{{ $i }}" 
                                    class="{{ $i === 0 ? 'active' : '' }}"></button>
                        @endfor
                    </div>

                <!-- Custom Navigation Controls -->
                <button class="custom-nav-btn custom-prev-btn" type="button">
                    <div class="nav-btn-content">
                        <i class="fas fa-chevron-left"></i>
                    </div>
                </button>
                <button class="custom-nav-btn custom-next-btn" type="button">
                    <div class="nav-btn-content">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </button>
            </div>

            <!-- Trust Indicators -->
            {{-- <div class="trust-indicators mt-5">
                <div class="row g-4 text-center">
                    <div class="col-md-3 col-6">
                        <div class="trust-item">
                            <div class="trust-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <h4 class="trust-number">50K+</h4>
                            <p class="trust-label">Happy Customers</p>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="trust-item">
                            <div class="trust-icon">
                                <i class="fas fa-star"></i>
                            </div>
                            <h4 class="trust-number">4.9</h4>
                            <p class="trust-label">Average Rating</p>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="trust-item">
                            <div class="trust-icon">
                                <i class="fas fa-box"></i>
                            </div>
                            <h4 class="trust-number">100K+</h4>
                            <p class="trust-label">Products Delivered</p>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="trust-item">
                            <div class="trust-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <h4 class="trust-number">100%</h4>
                            <p class="trust-label">Secure Shopping</p>
                        </div>
                    </div>
                </div>
            </div> --}}
        </div>
    </section>

@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize original carousel
            const customCarousel = document.getElementById('customCarousel');
            if (customCarousel) {
                const carousel = new bootstrap.Carousel(customCarousel, {
                    interval: 5000,
                    wrap: true,
                    pause: 'hover'
                });
            }

            // Initialize testimonials carousel
            const testimonialsCarousel = document.getElementById('testimonialsCarousel');
            if (testimonialsCarousel) {
                const carousel = new bootstrap.Carousel(testimonialsCarousel, {
                    interval: 5000,
                    wrap: true,
                    pause: 'hover'
                });

                // Custom navigation buttons
                const prevBtn = document.querySelector('.custom-prev-btn');
                const nextBtn = document.querySelector('.custom-next-btn');

                if (prevBtn) {
                    prevBtn.addEventListener('click', () => carousel.prev());
                }
                if (nextBtn) {
                    nextBtn.addEventListener('click', () => carousel.next());
                }
            }

            // Enhanced image placeholder interactions
            document.querySelectorAll('.image-placeholder').forEach(placeholder => {
                placeholder.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.05) rotate(2deg)';
                    this.style.boxShadow = '0 25px 50px rgba(40, 167, 69, 0.4)';
                });
                
                placeholder.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1) rotate(0deg)';
                    this.style.boxShadow = '0 20px 40px rgba(40, 167, 69, 0.3)';
                });
            });

            // Trust indicators animation
            document.querySelectorAll('.trust-item').forEach(item => {
                item.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-10px) scale(1.05)';
                });
                
                item.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });

            // Debug: Log when buttons are clicked
            console.log('Testimonials carousel initialized');
        });
    </script>

@endpush