:root {
            --medkart-blue: #1c5ba6;
            --medkart-green: #37b396;
            --text-dark: #1e293b;
            --text-muted: #64748b;
            --border-color: #e2e8f0;
            --bg-light: #f8fafc;
            --white: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        body {
            background-color: var(--bg-light);
        }

        /* ==================== 1. HEADER STYLES ==================== */

		.header {
			background-color: var(--white);
			border-bottom: 1px solid var(--border-color);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
			position: sticky;
			top: 0;
			z-index: 1000;
		}

		.navbar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12px 1%;
			max-width: 1440px;
			margin: 0 auto;
			gap: 15px;
		}

		/* ================= Left Section: Logo =========== */

		.nav-left {
			display: flex;
			align-items: center;
		}

		/* Image Logo Styling */
		.logo {
			display: flex;
			align-items: center;
			text-decoration: none;
		}

		.logo-img {
			height: 48px; /* Perfectly scaled for navbar */
			width: auto;
			object-fit: contain;
			display: block;
		}

		/* Middle Navigation Links */
		.nav-center {
			display: flex;
			align-items: center;
			gap: 28px;
			list-style: none;
		}

		.nav-link {
			text-decoration: none;
			color: var(--text-dark);
			font-weight: 600;
			font-size: 0.95rem;
			transition: color 0.2s;
			white-space: nowrap;
		}

		.nav-link:hover,
		.nav-link.active {
			color: var(--medkart-blue);
		}

		/* Right Section: Search Bar + Language + Cart + Sign In */
		.nav-right {
			display: flex;
			align-items: center;
			gap: 20px;
		}

		/* Search Bar */
		.search-box {
			display: flex;
			align-items: center;
			background: var(--bg-light);
			border: 1px solid var(--border-color);
			border-radius: 20px;
			padding: 6px 14px;
			width: 220px;
			transition: all 0.2s;
		}

		.search-box:focus-within {
			border-color: var(--medkart-blue);
			width: 260px;
			background: var(--white);
			box-shadow: 0 0 0 3px rgba(28, 91, 166, 0.1);
		}

		.search-box input {
			border: none;
			outline: none;
			background: transparent;
			width: 100%;
			font-size: 0.85rem;
			color: var(--text-dark);
		}

		.search-box button {
			background: none;
			border: none;
			color: var(--text-muted);
			cursor: pointer;
			font-size: 0.9rem;
		}

		/* Action Buttons (Sign in) */
		.action-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			color: var(--text-dark);
			gap: 2px;
			cursor: pointer;
			background: none;
			border: none;
			padding-left: 20px;
		}

		.action-btn i {
			font-size: 1.3rem;
		}

		.action-btn span {
			font-size: 0.72rem;
			font-weight: 600;
		}

		/* Hamburger Toggle for Mobile */
		.hamburger-btn {
			display: none;
			font-size: 1.5rem;
			color: var(--text-dark);
			background: none;
			border: none;
			cursor: pointer;
		}

		/* Mobile Slide Drawer Menu */
		.mobile-drawer {
			position: fixed;
			top: 0;
			right: -300px;
			width: 300px;
			height: 100vh;
			background: var(--white);
			box-shadow: -4px 0 15px rgba(0,0,0,0.1);
			z-index: 2000;
			transition: right 0.3s ease;
			padding: 20px;
			display: flex;
			flex-direction: column;
		}

		.mobile-drawer.open {
			right: 0;
		}

		.drawer-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 15px;
			border-bottom: 1px solid var(--border-color);
			margin-bottom: 20px;
		}

		.drawer-close {
			font-size: 1.4rem;
			cursor: pointer;
			color: var(--text-muted);
		}

		.drawer-menu {
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: 18px;
		}

		.drawer-menu a {
			text-decoration: none;
			color: var(--text-dark);
			font-weight: 600;
			font-size: 1rem;
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.drawer-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background: rgba(0,0,0,0.4);
			z-index: 1500;
			display: none;
		}

		.drawer-overlay.active {
			display: block;
		}

		/* Responsive Breakpoints */
		@media (max-width: 1100px) {
			.nav-center {
				gap: 15px;
			}
			.search-box {
				width: 160px;
			}
			.search-box:focus-within {
				width: 200px;
			}
		}

		@media (max-width: 900px) {
			.nav-center, .nav-right {
				display: none;
			}
			.hamburger-btn {
				display: block;
			}
			.logo-img {
				height: 40px;
			}
		}

        /* ==================== 2. BANNER SLIDER STYLES ==================== */
        .banner-section {
            max-width: 1440px;
            margin: 20px auto;
            padding: 0 3%;
        }

        .slider-container {
            position: relative;
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .slider-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out;
            width: 100%;
        }

        .slide {
            min-width: 100%;
            box-sizing: border-box;
        }

        .slide img {
            width: 100%;
            height: 400px;
            display: block;
            object-fit: cover;
        }

        /* Controls (Next/Prev Buttons) */
        .slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.85);
            color: var(--medkart-blue);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            transition: all 0.2s;
            z-index: 10;
        }

        .slider-btn:hover {
            background: var(--medkart-blue);
            color: #fff;
        }

        .prev-btn { left: 15px; }
        .next-btn { right: 15px; }

        /* Slider Indicators / Dots */
        .slider-dots {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 10;
        }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            background: var(--medkart-blue);
            width: 24px;
            border-radius: 10px;
        }

        /* Responsive Breakpoints */
        @media (max-width: 1100px) {
            .nav-center { gap: 15px; }
            .search-box { width: 160px; }
            .search-box:focus-within { width: 200px; }
        }

        @media (max-width: 900px) {
            .nav-center, .nav-right { display: none; }
            .hamburger-btn { display: block; }
        }

        @media (max-width: 600px) {
            .banner-section { padding: 0 2%; margin: 10px auto; }
            .slider-btn { width: 32px; height: 32px; font-size: 0.9rem; }
            .prev-btn { left: 8px; }
            .next-btn { right: 8px; }
            .slider-dots { bottom: 6px; }
            .dot { width: 8px; height: 8px; }
            .dot.active { width: 16px; }
        }
		
		/* ==================== CONCERNS SECTION STYLES ==================== */
        .concerns-section {
            max-width: 1440px;
            margin: 40px auto;
            padding: 0 3%;
        }

        .concerns-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .concerns-title {
            font-size: 1.35rem;
            font-weight: 800;
            color: #0f172a;
            letter-spacing: -0.3px;
        }

        .view-all-btn {
            color: #1957A4;
            font-weight: 700;
            font-size: 0.85rem;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: color 0.2s;
        }

        .view-all-btn:hover {
            color: #0a2954;
        }

        /* 6 Column Grid Container */
        .concerns-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 16px;
        }

        /* Card Container */
        .concern-card {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transition: all 0.25s ease;
        }

        .concern-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
            border-color: #cbd5e1;
        }

        /* Image Box (Pink Background style as per Medkart UI) */
        .concern-img-box {
            width: 100%;
            aspect-ratio: 1 / 0.85;
            background-color: #fdf0ed; /* Soft peach/pink tint */
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
        }

        .concern-img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .concern-card:hover .concern-img-box img {
            transform: scale(1.05);
        }

        /* Title Text Under Card */
        .concern-name {
            font-size: 0.82rem;
            font-weight: 700;
            color: #0f2942;
            line-height: 1.25;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Responsive Grids */
        @media (max-width: 1200px) {
            .concerns-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 14px;
            }
        }

        @media (max-width: 768px) {
            .concerns-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
            }
            .concerns-title {
                font-size: 1.15rem;
            }
            .concern-name {
                font-size: 0.78rem;
            }
        }

        @media (max-width: 480px) {
            .concerns-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
            .concern-card {
                padding: 8px;
            }
        }
		
		/* ==================== TRENDING SECTION STYLES ==================== */
        .trending-section {
            max-width: 1440px;
            margin: 40px auto;
            padding: 0 3%;
        }

        .trending-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 18px;
        }

        .trending-title {
            font-size: 1.4rem;
            font-weight: 800;
            color: #0f172a;
        }

        .trending-carousel-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        /* Horizontal Scrollable Track */
        .trending-track {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 10px 4px;
            scrollbar-width: none; /* Hide Scrollbar Firefox */
        }

        .trending-track::-webkit-scrollbar {
            display: none; /* Hide Scrollbar Chrome/Safari */
        }

        /* Product Card Box */
        .product-card {
            min-width: 200px;
            max-width: 200px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            flex-shrink: 0;
        }

        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
            border-color: #cbd5e1;
        }

        /* Product Image Box */
        .prod-img-box {
            width: 100%;
            height: 140px;
            background: #f8fafc;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .prod-img-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        /* Card Content Details */
        .prod-details {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .prod-name {
            font-size: 0.82rem;
            font-weight: 700;
            color: #0f2942;
            line-height: 1.25;
            height: 32px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 6px;
        }

        .prod-by {
            font-size: 0.7rem;
            color: #64748b;
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .prod-mrp {
            font-size: 0.72rem;
            color: #94a3b8;
            text-decoration: line-through;
            margin-bottom: 2px;
        }

        .prod-price-box {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 12px;
        }

        .prod-selling-price {
            font-size: 1rem;
            font-weight: 800;
            color: #0f172a;
        }

        .prod-discount {
            font-size: 0.7rem;
            font-weight: 700;
            color: #16a34a;
        }

        /* Add to Cart Button */
        .btn-add-cart-outline {
            width: 100%;
            background-color: #1c5ba6;
            color: #ffffff;
            border: none;
            padding: 8px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 0.8rem;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .btn-add-cart-outline:hover {
            background-color: #14447d;
        }

        /* Navigation Arrows */
        .nav-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            background: #ffffff;
            color: #1c5ba6;
            border: 1px solid #e2e8f0;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.12);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            transition: all 0.2s;
        }

        .nav-arrow:hover {
            background: #1c5ba6;
            color: #ffffff;
        }

        .left-arrow { left: -16px; }
        .right-arrow { right: -16px; }

        @media (max-width: 600px) {
            .product-card { min-width: 160px; max-width: 160px; padding: 10px; }
            .prod-img-box { height: 110px; }
            .left-arrow { left: -5px; }
            .right-arrow { right: -5px; }
        }
		
		/* ==================== GENERIC INFO SECTION STYLES ==================== */
        .generic-info-section {
            max-width: 1440px;
            margin: 40px auto;
            padding: 0 3%;
        }

        /* Outer Box with soft blue/teal gradient background & border */
        .generic-container {
            background: linear-gradient(135deg, #eef7fe 0%, #e8f8f5 50%, #eef7fe 100%);
            border: 1px solid #bfdbfe;
            border-radius: 16px;
            padding: 24px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            box-shadow: 0 4px 15px rgba(28, 91, 166, 0.03);
        }

        /* Left side feature cards wrapper */
        .generic-cards-wrapper {
            display: flex;
            gap: 16px;
            flex: 1;
        }

        /* Feature Card Base */
        .generic-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden; /* For NABL ribbon clipping */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .generic-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
        }

        /* NABL Ribbon Badge */
        .ribbon-badge {
            position: absolute;
            top: 12px;
            left: -28px;
            background: linear-gradient(135deg, #d97706, #f59e0b);
            color: #ffffff;
            font-size: 0.62rem;
            font-weight: 800;
            text-transform: uppercase;
            padding: 3px 28px;
            transform: rotate(-45deg);
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
            letter-spacing: 0.5px;
        }

        /* Icon Styling */
        .generic-card-icon {
            font-size: 2.2rem;
            color: #2a9d8f;
            margin-bottom: 12px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Card Content */
        .generic-card-title {
            font-size: 1rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 6px;
        }

        .generic-card-desc {
            font-size: 0.76rem;
            color: #64748b;
            line-height: 1.35;
            margin: 0;
        }

        /* Right Content Block */
        .generic-content {
            flex: 0.8;
            padding-left: 10px;
        }

        .generic-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 10px;
            letter-spacing: -0.3px;
        }

        .generic-description {
            font-size: 0.9rem;
            color: #334155;
            line-height: 1.5;
            margin-bottom: 16px;
        }

        .know-more-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #1c5ba6;
            font-weight: 700;
            font-size: 0.88rem;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .know-more-btn:hover {
            color: #0f2942;
            text-decoration: underline;
        }

        .know-more-btn i {
            font-size: 0.95rem;
        }

        /* Responsive Breakpoints */
        @media (max-width: 1024px) {
            .generic-container {
                flex-direction: column-reverse;
                text-align: center;
                padding: 24px;
            }
            .generic-content {
                padding-left: 0;
            }
            .generic-cards-wrapper {
                width: 100%;
            }
        }

        @media (max-width: 640px) {
            .generic-cards-wrapper {
                flex-direction: column;
            }
            .generic-title {
                font-size: 1.25rem;
            }
        }
		
		/* ==================== SPOTLIGHT SECTION STYLES ==================== */
        .spotlight-section {
            max-width: 1440px;
            margin: 40px auto;
            padding: 0 3%;
        }

        .spotlight-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 18px;
        }

        .spotlight-title {
            font-size: 1.4rem;
            font-weight: 800;
            color: #0f172a;
        }

        .spotlight-carousel-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .spotlight-track {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 10px 4px;
            scrollbar-width: none;
        }

        .spotlight-track::-webkit-scrollbar {
            display: none;
        }

        /* Product Card Box */
        .spotlight-card {
            min-width: 200px;
            max-width: 200px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            flex-shrink: 0;
            position: relative;
        }

        .spotlight-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
            border-color: #cbd5e1;
        }

        /* Top Overlay Badge for "Not For Online Sale" */
        .not-for-sale-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            right: 12px;
            background: #5b6777;
            color: #ffffff;
            font-size: 0.72rem;
            font-weight: 700;
            text-align: center;
            padding: 4px 0;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            z-index: 2;
        }

        .spotlight-img-box {
            width: 100%;
            height: 140px;
            background: #f8fafc;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-bottom: 10px;
            position: relative;
        }

        .spotlight-img-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .spotlight-details {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .spotlight-name {
            font-size: 0.82rem;
            font-weight: 700;
            color: #0f2942;
            line-height: 1.25;
            height: 32px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 6px;
        }

        .spotlight-by {
            font-size: 0.7rem;
            color: #64748b;
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .spotlight-mrp {
            font-size: 0.72rem;
            color: #94a3b8;
            text-decoration: line-through;
            margin-bottom: 2px;
        }

        .spotlight-price-box {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 12px;
        }

        .spotlight-selling-price {
            font-size: 1rem;
            font-weight: 800;
            color: #0f172a;
        }

        .spotlight-discount {
            font-size: 0.7rem;
            font-weight: 700;
            color: #16a34a;
        }

        .btn-spotlight-cart {
            width: 100%;
            background-color: #1c5ba6;
            color: #ffffff;
            border: none;
            padding: 8px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 0.8rem;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .btn-spotlight-cart:hover {
            background-color: #14447d;
        }
		
		
	/* WhatsApp Dedicated Button Style */
	
		.btn-whatsapp-order {
			width: 100%;
			background-color: #1c5ba6; /* Official WhatsApp */
			color: #ffffff;
			border: none;
			padding: 8px 10px;
			border-radius: 6px;
			font-weight: 700;
			font-size: 0.8rem;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			transition: background 0.2s ease, transform 0.1s ease;
		}

		.btn-whatsapp-order:hover {
			background-color: #1eb857;
			transform: translateY(-1px);
		}

		.btn-whatsapp-order i {
			font-size: 1rem;
		}
		
		/* ============ Generic Section Styling =================== */
		
		.generic-section {
			width: 100%;
			max-width: 1440px; 
			margin: 40px auto;
			padding: 0 3%;     
			box-sizing: border-box;
		}

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 18px; 
		}

		.section-header h2 {
			font-size: 1.4rem;  
			color: #0f172a;
			font-weight: 800;
		}

		.view-all-link {
			color: #1c5ba6;     
			text-decoration: none;
			font-weight: 700;
			font-size: 0.85rem;
			display: flex;
			align-items: center;
			gap: 5px;
		}

		.view-all-link:hover {
			color: #0a2954;
		}

		/* Carousel Container Styling */
		.carousel-container {
			position: relative;
			background-color: #fff9ed;
			padding: 15px 10px;
			border-radius: 12px;
		}

		.generic-track {
			display: flex;
			gap: 15px;
			overflow-x: auto;
			scroll-behavior: smooth;
			padding: 5px;
		}

		.generic-track::-webkit-scrollbar {
			display: none; /* Hide scrollbar */
		}

		/* Horizontal Card Layout (Image Left, Text Right) */
		.generic-card {
			min-width: 280px;
			max-width: 280px;
			background: #ffffff;
			border: 1px solid #e2e8f0;
			border-radius: 8px;
			padding: 12px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-shadow: 0 2px 5px rgba(0,0,0,0.03);
		}

		.generic-card-content {
			display: flex;
			gap: 12px;
			align-items: flex-start;
		}

		.generic-img-box {
			width: 80px;
			height: 80px;
			background: #f8fafc;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		.generic-img-box img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}

		.generic-details {
			flex-grow: 1;
		}

		.generic-name {
			font-size: 13px;
			font-weight: 700;
			color: #1e293b;
			margin: 0 0 4px 0;
			line-height: 1.3;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.generic-by {
			font-size: 11px;
			color: #64748b;
			margin: 0 0 6px 0;
		}

		.generic-mrp {
			font-size: 11px;
			color: #94a3b8;
			text-decoration: line-through;
			margin: 0;
		}

		.generic-price-box {
			display: flex;
			align-items: center;
			gap: 6px;
			margin-top: 2px;
		}

		.generic-price {
			font-size: 15px;
			font-weight: 700;
			color: #000;
		}

		.generic-discount {
			font-size: 11px;
			color: #16a34a;
			font-weight: 700;
		}

		/* Button & Arrows */
		.btn-whatsapp-generic {
			width: 100%;
			background-color: #1c5ba6; 
			color: white;
			border: none;
			padding: 8px 0;
			border-radius: 6px;
			font-weight: 600;
			font-size: 13px;
			cursor: pointer;
			margin-top: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			transition: background 0.2s;
		}

		.btn-whatsapp-generic:hover {
			background-color: #00565e;
		}

		.scroll-btn {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 32px;
			height: 50px;
			background: rgba(224, 236, 248, 0.9);
			border: none;
			cursor: pointer;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #006D77;
			font-size: 14px;
		}

		.prev-btn { left: 0; border-radius: 0 4px 4px 0; }
		.next-btn { right: 0; border-radius: 4px 0 0 4px; }
		
		/* ==============  Promo Banners   ===============*/
		
		/* Container Spacing */
		.promo-banners-container {
			max-width: 1200px;
			margin: 20px auto;
			display: flex;
			flex-direction: column;
			gap: 20px;
			padding: 0 15px;
		}

		/* Base Banner Style */
		.promo-banner {
			position: relative;
			width: 100%;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		}

		.banner-bg {
			width: 100%;
			height: auto;
			display: block;
			object-fit: cover;
		}

		.banner-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 5%;
			box-sizing: border-box;
		}

		/* --- Top Store Banner Styles --- */
		
		.store-banner .text-group {
			margin-left: 38%; 
		}

		.store-banner h3 {
			font-size: 27px;
			color: #1a1a1a;
			font-weight: 600;
			margin: 0 0 4px 0;
		}

		.store-banner h2 {
			font-size: 25px;
			color: #1c5ba6; /* Madisonmart Primary Blue */
			font-weight: 700;
			margin: 0 0 10px 0;
		}

		.store-banner p {
			font-size: 18px;
			color: #555;
			margin: 0;
		}

		/* Locate Store Button */
		.store-banner .btn-group {
			padding-left: 20px;
			border-left: 1px solid #dcdcdc; /* Screenshot wali vertical divider line */
		}

		.locate-btn {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			border: 1.5px solid #1c5ba6;
			color: #1c5ba6;
			background: transparent;
			padding: 8px 16px;
			border-radius: 6px;
			text-decoration: none;
			font-weight: 600;
			font-size: 0.85rem;
			transition: all 0.2s ease;
		}

		.locate-btn:hover {
			background: #1c5ba6;
			color: #ffffff;
		}

		/* --- Bottom WhatsApp Banner Styles --- */
		.whatsapp-content {
			justify-content: flex-end; /* Button ko right side WhatsApp text ke niche position karne ke liye */
			padding-right: 7.5%;
			padding-top: 5%;
		}

		.whatsapp-btn {
			display: inline-block;
			background-color: #42b293; /* Same green shade as screenshot */
			color: #ffffff;
			text-decoration: none;
			padding: 10px 22px;
			border-radius: 6px;
			font-weight: 600;
			font-size: 0.9rem;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			transition: background-color 0.2s ease;
		}

		.whatsapp-btn:hover {
			background-color: #32967a;
		}

		/* --- Responsive Layout for Mobile --- */
		@media (max-width: 768px) {
			.banner-content {
				position: relative;
				padding: 15px;
				background: #f8fafc;
				flex-direction: column;
				align-items: flex-start;
				gap: 12px;
			}

			.store-banner .text-group {
				margin-left: 0;
			}

			.store-banner .btn-group {
				border-left: none;
				padding-left: 0;
			}

			.whatsapp-content {
				justify-content: center;
				align-items: center;
				padding-right: 15px;
				padding-top: 15px;
			}
		}
		
		/* ==================== TESTIMONIALS STYLES ==================== */
		.testimonials-section {
			padding: 40px 0;
			background-color: var(--white, #ffffff);
			overflow: hidden;
		}

		.testimonials-section .container {
			max-width: 1300px;
			margin: 0 auto;
			padding: 0 15px;
		}

		.section-title {
			font-size: 1.6rem;
			font-weight: 700;
			color: #111827;
			margin-bottom: 25px;
		}

		.testimonial-slider-wrapper {
			position: relative;
			display: flex;
			align-items: center;
		}

		/* Horizontal Track Setup */
		.testimonial-cards-container {
			display: flex;
			gap: 20px;
			overflow-x: auto;
			scroll-behavior: smooth;
			padding: 10px 5px;
			scrollbar-width: none; /* Firefox */
		}

		.testimonial-cards-container::-webkit-scrollbar {
			display: none; /* Chrome, Safari, Edge */
		}

		/* Individual Card Styling */
		.testimonial-card {
			min-width: 310px;
			max-width: 310px;
			background: #ffffff;
			border: 1px solid #e2e8f0;
			border-radius: 10px;
			padding: 24px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
			flex-shrink: 0;
			text-align: center;
		}

		.review-text {
			font-size: 0.88rem;
			color: #4a5568;
			line-height: 1.55;
			margin-bottom: 20px;
			display: -webkit-box;
			-webkit-line-clamp: 6;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.card-footer {
			border-top: 1px solid #edf2f7;
			padding-top: 15px;
		}

		.star-rating {
			color: #f59e0b;
			font-size: 0.95rem;
			margin-bottom: 10px;
			letter-spacing: 2px;
		}

		.author-name {
			font-size: 0.95rem;
			font-weight: 700;
			color: #1a202c;
			margin-bottom: 4px;
		}

		.author-location {
			font-size: 0.82rem;
			color: #718096;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
		}

		/* Navigation Arrow Buttons */
		.slider-btn {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 36px;
			height: 70px;
			background: #dbeaff;
			border: none;
			color: #1c5ba6;
			font-size: 1.1rem;
			cursor: pointer;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.2s ease;
		}

		.prev-btn {
			left: 0;
			border-top-right-radius: 6px;
			border-bottom-right-radius: 6px;
		}

		.next-btn {
			right: 0;
			border-top-left-radius: 6px;
			border-bottom-left-radius: 6px;
		}

		.slider-btn:hover {
			background: #1c5ba6;
			color: #ffffff;
		}

		/* Bottom Dots Pagination */
		.dots-pagination {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 8px;
			margin-top: 20px;
		}

		.dot {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background-color: #cbd5e1;
			cursor: pointer;
			transition: all 0.2s ease;
		}

		.dot.active {
			background-color: #006D77; /* Primary Brand Teal Color */
			width: 10px;
			height: 10px;
		}

		/* Responsive Scaling */
		@media (max-width: 768px) {
			.testimonial-card {
				min-width: 270px;
				max-width: 270px;
				padding: 18px;
			}
			
			.slider-btn {
				height: 50px;
				width: 30px;
			}
		}
		
		
		/* ==================== FAQ ACCORDION STYLES ==================== */
		.faq-section {
			padding: 40px 0;
			background-color: var(--white, #ffffff);
		}

		.faq-container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px;
		}

		.faq-main-title {
			font-size: 1.35rem;
			font-weight: 700;
			color: #111827;
			margin-bottom: 25px;
			line-height: 1.4;
		}

		/* Accordion Wrapper */
		.faq-accordion {
			display: flex;
			flex-direction: column;
		}

		/* Accordion Item */
		.faq-item {
			border-bottom: 1px solid #e5e7eb;
		}

		/* Header/Question */
		.faq-question {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16px 0;
			background: none;
			border: none;
			outline: none;
			cursor: pointer;
			text-align: left;
			font-size: 0.95rem;
			font-weight: 500;
			color: #374151;
			transition: color 0.2s ease;
		}

		.faq-question:hover {
			color: var(--medkart-blue, #1c5ba6);
		}

		.faq-question i {
			font-size: 0.9rem;
			color: #6b7280;
			transition: transform 0.3s ease;
			margin-left: 15px;
		}

		/* Active State Arrow Rotation */
		.faq-item.active .faq-question {
			color: var(--medkart-blue, #1c5ba6);
			font-weight: 600;
		}

		.faq-item.active .faq-question i {
			transform: rotate(180deg);
			color: var(--medkart-blue, #1c5ba6);
		}

		/* Answer Body Panel */
		.faq-answer {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease-out, padding 0.3s ease;
			padding: 0;
		}

		.faq-answer p {
			font-size: 0.9rem;
			color: #4b5563;
			line-height: 1.6;
			margin: 0;
			padding-bottom: 16px;
		}

		/* Mobile Responsive */
		@media (max-width: 768px) {
			.faq-main-title {
				font-size: 1.15rem;
			}
			
			.faq-question {
				font-size: 0.88rem;
				padding: 14px 0;
			}
		}
		
		/* ==================== TRUST STATS STYLES ==================== */
		
		.trust-stats-section {
			background-color: #dbeaff; 
			padding: 15px 20px;
		}

		.stats-container {
			max-width: 1100px;
			margin: 0 auto;
			text-align: center;
		}

		.stats-heading {
			font-size: 1.25rem;
			font-weight: 700;
			color: #1c5ba6; /* Primary brand blue */
			margin-bottom: 30px;
		}

		/* Grid Layout for Metrics */
		.stats-grid {
			display: flex;
			justify-content: space-around;
			align-items: center;
			gap: 20px;
		}

		.stat-card {
			flex: 1;
		}

		.stat-number {
			font-size: 1.8rem;
			font-weight: 800;
			color: #1c5ba6;
			margin-bottom: 6px;
			line-height: 1.2;
		}

		.stat-label {
			font-size: 0.95rem;
			color: #4b5563;
			font-weight: 500;
		}

		/* Middle Divider Line */
		.stats-divider {
			height: 1px;
			background-color: #bfdbfe;
			margin: 35px auto;
			width: 85%;
		}

		/* Bottom Certification Box */
		.cert-badge-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.badge-icon-wrapper {
			margin-bottom: 12px;
		}

		.cert-title {
			font-size: 1rem;
			font-weight: 700;
			color: #1c5ba6;
			margin: 0 0 4px 0;
		}

		.cert-subtitle {
			font-size: 0.85rem;
			color: #4b5563;
			margin: 0;
			font-weight: 500;
		}

		/* Mobile Responsive Adjustments */
		@media (max-width: 768px) {
			.stats-grid {
				flex-direction: column;
				gap: 25px;
			}
			
			.stat-number {
				font-size: 1.6rem;
			}
			
			.stats-heading {
				font-size: 1.1rem;
			}
		}
		   
		   /* ==================== FOOTER STYLES ==================== */
		   
		.footer-section {
			background-color: #ffffff;
			padding: 50px 0 20px 0;
			border-top: 1px solid #eaeaea;
			color: #333333;
		}

		.footer-container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px;
		}

		/* 4 Column Grid */
		.footer-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 30px;
			margin-bottom: 30px;
		}

		.footer-col h3 {
			font-size: 1rem;
			font-weight: 700;
			color: #111827;
			margin-bottom: 18px;
		}

		.footer-col ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.footer-col ul li {
			margin-bottom: 12px;
		}

		.footer-col ul li a {
			text-decoration: none;
			color: #4b5563;
			font-size: 0.88rem;
			transition: color 0.2s ease;
		}

		.footer-col ul li a:hover {
			color: #006D77;
		}

		.footer-divider {
			height: 1px;
			background-color: #f0f0f0;
			margin: 25px 0;
		}

		/* Middle Row: Socials & Apps */
		.footer-middle {
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
			gap: 30px;
			padding: 10px 0;
		}

		.social-box, .app-download-box {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.social-box h4, .app-download-box h4 {
			font-size: 0.95rem;
			font-weight: 600;
			color: #111827;
			margin-bottom: 14px;
		}

		/* Social Circular Buttons */
		.social-icons {
			display: flex;
			gap: 12px;
		}

		.social-icons a {
			width: 38px;
			height: 38px;
			background-color: #000000;
			color: #ffffff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			font-size: 0.95rem;
			transition: transform 0.2s ease, opacity 0.2s ease;
		}

		.social-icons a:hover {
			opacity: 0.85;
			transform: translateY(-2px);
		}

		/* Store Download Buttons */
		.store-buttons {
			display: flex;
			gap: 12px;
		}

		.store-btn {
			display: flex;
			align-items: center;
			gap: 10px;
			background-color: #000000;
			color: #ffffff;
			padding: 6px 14px;
			border-radius: 6px;
			text-decoration: none;
			transition: background-color 0.2s ease;
		}

		.store-btn:hover {
			background-color: #222222;
		}

		.store-btn i {
			font-size: 1.5rem;
		}

		.btn-text {
			display: flex;
			flex-direction: column;
		}

		.btn-text .sub {
			font-size: 0.6rem;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			color: #cccccc;
		}

		.btn-text .main {
			font-size: 0.85rem;
			font-weight: 600;
		}

		/* Bottom Copyright */
		.footer-bottom {
			text-align: center;
		}

		.footer-bottom p {
			font-size: 0.82rem;
			color: #6b7280;
			margin: 0;
		}

		/* Responsive Mobile Layout */
		@media (max-width: 768px) {
			.footer-grid {
				grid-template-columns: repeat(2, 1fr);
				gap: 25px;
			}
			
			.footer-middle {
				flex-direction: column;
				align-items: center;
				gap: 25px;
			}
		}

		@media (max-width: 480px) {
			.footer-grid {
				grid-template-columns: 1fr;
			}
			
			.store-buttons {
				flex-direction: column;
				width: 100%;
			}
		}