/* 
═══════════════════════════════════════════════════════════════════
HOMEPAGE IMPROVEMENTS - CUSTOM CSS
═══════════════════════════════════════════════════════════════════
File: assets/css/homepage-improvements.css
Purpose: Modern, conversion-focused homepage styling
═══════════════════════════════════════════════════════════════════
*/

/* ══════════════════════════════════════════════
   🎯 TRUST BANNER AT TOP
   ══════════════════════════════════════════════ */
.pg-trust-banner {
	background: linear-gradient(135deg, #fc6e1d 0%, #fc6e1d 100%);
	padding: 12px 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.trust-items {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	color: white;
	font-size: 14px;
}

.trust-item i {
	font-size: 20px;
	color: #fff;
}

.trust-item strong {
	font-weight: 600;
}

@media (max-width: 768px) {

	.pg-trust-banner {
        display: none;
    }
	.main-product{
		display: none !important;
	}
	.trust-items {
		justify-content: center;
	}

	.trust-item {
		font-size: 12px;
		flex: 0 0 calc(50% - 10px);
	}
}

/* ══════════════════════════════════════════════
   🎨 MODERN HERO SECTION
   ══════════════════════════════════════════════ */
.pg-hero-modern {
	background: linear-gradient(135deg, #f5f7fa 0%, #e2d0c3 100%);
	padding: 80px 0;
	position: relative;
	overflow: hidden;
}

.pg-hero-modern::before {
	content: "";
	position: absolute;
	width: 500px;
	height: 500px;
	background: radial-gradient(
		circle,
		rgba(255, 107, 0, 0.1) 0%,
		transparent 70%
	);
	top: -100px;
	right: -100px;
	border-radius: 50%;
}

.hero-content-wrapper {
	display: flex;
	align-items: center;
	gap: 60px;
}

.hero-text {
	flex: 1;
	z-index: 2;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: white;
	padding: 8px 20px;
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	font-size: 13px;
	font-weight: 600;
	color: #fc6e1d;
	margin-bottom: 20px;
	animation: pulse 2s infinite;
}

.badge-dot {
	width: 8px;
	height: 8px;
	background: #ff6b00;
	border-radius: 50%;
	animation: blink 1.5s infinite;
}

@keyframes blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}

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

.hero-title {
	font-size: 56px;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 20px;
	color: #1a1a1a;
}

.gradient-text {
	background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-subtitle {
	font-size: 18px;
	color: #666;
	margin-bottom: 30px;
	line-height: 1.6;
}

.hero-features {
	display: flex;
	gap: 15px;
	margin-bottom: 30px;
	flex-wrap: wrap;
}

.feature-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	background: white;
	padding: 8px 16px;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.feature-chip i {
	color: #10b981;
	font-size: 12px;
}

.hero-cta-group {
	display: flex;
	gap: 15px;
	margin-bottom: 40px;
}

.pg-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%);
	color: white;
	padding: 16px 32px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 8px 25px rgba(255, 107, 0, 0.3);
	transition: all 0.3s ease;
}

.pg-btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 35px rgba(255, 107, 0, 0.4);
	color: white;
}

.pg-btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: white;
	color: #ff6b00;
	padding: 16px 32px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid #ff6b00;
	transition: all 0.3s ease;
}

.pg-btn-secondary:hover {
	background: #ff6b00;
	color: white;
	transform: translateY(-3px);
}

/* Hero Social Proof */
.hero-social-proof {
	display: flex;
	align-items: center;
	gap: 20px;
}

.customer-avatars {
	display: flex;
	align-items: center;
}

.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid white;
	margin-left: -10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar:first-child {
	margin-left: 0;
}

.avatar-count {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #ff6b00;
	color: white;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	margin-left: -10px;
	border: 3px solid white;
}

.trust-text .stars {
	margin-bottom: 5px;
}

.trust-text .stars i {
	color: #ffd700;
	font-size: 14px;
}

.rating-text {
	font-size: 13px;
	color: #666;
	font-weight: 500;
}

/* Hero Image */
.hero-image {
	flex: 1;
	position: relative;
}

.hero-image-wrapper {
	position: relative;
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
}

.main-product {
	width: 100%;
	max-width: 500px;
	filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
	display: flex;
	align-self: center;
	justify-self: end;
}

/* Floating Badges */
.float-badge {
	position: absolute;
	background: white;
	padding: 12px 16px;
	border-radius: 15px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

.badge-1 {
	top: 50px;
	left: -50px;
	animation-delay: 0s;
}

.badge-2 {
	bottom: 80px;
	right: -30px;
	animation-delay: 1s;
}

.badge-icon {
	font-size: 24px;
}

.badge-text {
	line-height: 1.2;
	font-size: 11px;
	color: #666;
}

/* ══════════════════════════════════════════════
   ✨ SECTION HEADERS
   ══════════════════════════════════════════════ */
.section-header {
	text-align: center;
	margin-bottom: 50px;
}

.section-title {
	font-size: 42px;
	font-weight: 800;
	margin-bottom: 10px;
	color: #1a1a1a;
}

.section-subtitle {
	font-size: 18px;
	color: #666;
	font-weight: 400;
}

/* ══════════════════════════════════════════════
   🏷️ PRODUCT BADGES
   ══════════════════════════════════════════════ */
.popular-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%);
	color: white;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	z-index: 2;
	box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
}

.new-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: white;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	z-index: 2;
	box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.stock-badge {
	position: absolute;
	top: 10px;
	left: 90px;
	background: linear-gradient(135deg, #fa8a3a 0%, #ff6b00 100%);
	color: white;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	z-index: 2;
	box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

/* ══════════════════════════════════════════════
   📦 VIEW ALL BUTTON
   ══════════════════════════════════════════════ */
.pg-btn-view-all {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: white;
	color: #ff6b00;
	padding: 14px 30px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid #ff6b00;
	transition: all 0.3s ease;
}

.pg-btn-view-all:hover {
	background: #ff6b00;
	color: white;
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(255, 107, 0, 0.3);
}

/* ══════════════════════════════════════════════
   💎 VALUE PROPOSITION SECTION
   ══════════════════════════════════════════════ */
.pg-value-section {
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	padding: 80px 0;
	margin-top: 60px;
}

.value-card {
	text-align: center;
	padding: 30px 20px;
	background: white;
	border-radius: 20px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	height: 100%;
}

.value-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.value-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 25px rgba(255, 107, 0, 0.3);
}

.value-icon i {
	font-size: 36px;
	color: white;
}

.value-card h4 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 15px;
	color: #1a1a1a;
}

.value-card p {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
	margin: 0;
}

/* ══════════════════════════════════════════════
   📝 BLOG SECTION
   ══════════════════════════════════════════════ */
.pg-blog-section {
	padding: 60px 0;
}

.blog-card {
	background: white;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	height: 100%;
}

.blog-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.blog-card a {
	text-decoration: none;
	color: inherit;
}

.blog-image {
	width: 100%;
	height: 220px;
	overflow: hidden;
}

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

.blog-card:hover .blog-image img {
	transform: scale(1.1);
}

.blog-content {
	padding: 25px;
}

.blog-meta {
	margin-bottom: 12px;
}

.blog-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #999;
}

.blog-date i {
	font-size: 12px;
}

.blog-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 12px;
	color: #1a1a1a;
	line-height: 1.4;
}

.blog-excerpt {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 15px;
}

.blog-read-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #ff6b00;
	font-size: 14px;
	font-weight: 600;
	transition: gap 0.3s ease;
}

.blog-card:hover .blog-read-more {
	gap: 12px;
}

/* ══════════════════════════════════════════════
   📱 RESPONSIVE DESIGN
   ══════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 991px) {
	.hero-content-wrapper {
		flex-direction: column;
		text-align: center;
	}

	.hero-title {
		font-size: 42px;
	}

	.hero-cta-group {
		justify-content: center;
	}

	.hero-social-proof {
		justify-content: center;
	}

	.section-title {
		font-size: 36px;
	}

	.float-badge {
		display: none;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.pg-hero-modern {
		padding: 40px 0;
	}

	.hero-title {
		font-size: 32px;
	}

	.hero-subtitle {
		font-size: 16px;
	}

	.hero-cta-group {
		flex-direction: column;
	}

	.pg-btn-primary,
	.pg-btn-secondary {
		width: 100%;
		justify-content: center;
	}

	.section-title {
		font-size: 28px;
	}

	.section-subtitle {
		font-size: 16px;
	}

	.pg-value-section {
		padding: 40px 0;
	}
}

/* Small Mobile */
@media (max-width: 576px) {
	.hero-title {
		font-size: 28px;
	}

	.feature-chip {
		font-size: 12px;
		padding: 6px 12px;
	}

	.trust-item {
		flex: 0 0 100%;
		justify-content: center;
	}
}