/**
 * Home Page Specific Styles
 * T?i ?u hóa cho trang ch? v?i tabs navigation
 */

/* ====================================
   COURSE TABS NAVIGATION
   ==================================== */

#courseTabs {
	background: var(--bg-light);
	padding: 1rem;
	border-radius: var(--border-radius-xl);
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.05),
		0 4px 16px rgba(0, 0, 0, 0.03);
	display: inline-flex;
	gap: 0.5rem;
}

#courseTabs .nav-link {
	color: var(--text-medium);
	background: transparent;
	border: 2px solid transparent;
	border-radius: var(--border-radius-lg);
	padding: 0.875rem 2rem;
	font-weight: 600;
	font-size: 0.95rem;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	position: relative;
	overflow: hidden;
}

#courseTabs .nav-link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, 
		var(--primary-color), 
		var(--primary-light)
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: var(--border-radius-lg);
}

#courseTabs .nav-link i {
	font-size: 1.1rem;
	transition: transform 0.3s ease;
}

#courseTabs .nav-link:hover {
	color: var(--primary-color);
	background: rgba(37, 99, 235, 0.05);
	border-color: var(--primary-color);
	transform: translateY(-2px);
}

#courseTabs .nav-link:hover i {
	transform: scale(1.2);
}

#courseTabs .nav-link.active {
	color: white;
	background: var(--primary-color);
	border-color: var(--primary-color);
	box-shadow: 
		0 4px 12px rgba(37, 99, 235, 0.3),
		0 2px 6px rgba(37, 99, 235, 0.2);
	transform: translateY(-2px);
}

#courseTabs .nav-link.active::before {
	opacity: 1;
}

#courseTabs .nav-link.active i {
	animation: bounce 0.6s ease;
}

#courseTabs .badge {
	font-size: 0.7rem;
	padding: 0.25rem 0.6rem;
	border-radius: 50px;
	font-weight: 700;
}

/* Tab-specific icon colors */
#free-tab i {
	color: var(--success-color);
}

#free-tab.active i {
	color: white;
}

#sale-tab i {
	color: var(--danger-color);
}

#sale-tab.active i {
	color: white;
}

#trending-tab i {
	color: var(--warning-color);
}

#trending-tab.active i {
	color: white;
}

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

/* ====================================
   TAB CONTENT ANIMATIONS
   ==================================== */

.tab-pane {
	animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ====================================
   HOMEPAGE OPTIMIZATIONS
   ==================================== */

/* Reduce course card gap on homepage for better density */
.tab-content .row {
	--bs-gutter-y: 2rem;
}

/* Smooth transition for tab switching */
.tab-content {
	min-height: 500px;
	position: relative;
}

/* Alert messages in tabs */
.tab-pane .alert {
	border-radius: var(--border-radius-lg);
	padding: 2rem;
	font-size: 1rem;
}

.tab-pane .alert i {
	font-size: 1.5rem;
	vertical-align: middle;
}

/* View All Button */
.tab-pane .btn-primary {
	padding: 0.875rem 2.5rem;
	font-weight: 600;
	border-radius: var(--border-radius-lg);
	box-shadow: 
		0 4px 12px rgba(37, 99, 235, 0.2),
		0 2px 6px rgba(37, 99, 235, 0.15);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tab-pane .btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 
		0 8px 20px rgba(37, 99, 235, 0.3),
		0 4px 12px rgba(37, 99, 235, 0.2);
}

/* ====================================
   RESPONSIVE DESIGN
   ==================================== */

@media (max-width: 991px) {
	#courseTabs {
		flex-direction: column;
		width: 100%;
	}
	
	#courseTabs .nav-link {
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 767px) {
	#courseTabs {
		padding: 0.75rem;
		gap: 0.4rem;
	}
	
	#courseTabs .nav-link {
		padding: 0.75rem 1.5rem;
		font-size: 0.9rem;
	}
	
	.tab-content {
		min-height: 400px;
	}
	
	.tab-pane .btn-primary {
		padding: 0.75rem 2rem;
		width: 100%;
	}
}

/* ====================================
   PERFORMANCE OPTIMIZATIONS
   ==================================== */

/* Use will-change for elements that will animate */
#courseTabs .nav-link,
.tab-pane,
.free-course-card {
	will-change: transform, opacity;
}

/* Disable animations on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Lazy loading skeleton for course cards */
.course-skeleton {
	background: var(--bg-light);
	border-radius: var(--border-radius-xl);
	overflow: hidden;
	height: 450px;
	position: relative;
}

.course-skeleton::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(255, 255, 255, 0.5) 50%, 
		transparent 100%
	);
	animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* ====================================
   COPYRIGHT COMMITMENT SECTION
   ==================================== */

.copyright-commitment-section {
	background: linear-gradient(135deg, 
		#f0fdf4 0%,      /* Green-50 */
		#dcfce7 50%,     /* Green-100 */
		#bbf7d0 100%     /* Green-200 */
	);
	position: relative;
	overflow: hidden;
}

.copyright-commitment-section::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -10%;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

.copyright-commitment-section::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -5%;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

/* Copyright Badge Wrapper */
.copyright-badge-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
}

/* Copyright Shield */
.copyright-shield {
	width: 200px;
	height: 200px;
	background: linear-gradient(135deg, 
		var(--success-color), 
		var(--secondary-color)
	);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 
		0 20px 40px rgba(16, 185, 129, 0.3),
		0 10px 20px rgba(16, 185, 129, 0.2),
		inset 0 -10px 30px rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 2;
	animation: pulse-shield 3s ease-in-out infinite;
}

.copyright-shield i {
	font-size: 6rem;
	color: white;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

@keyframes pulse-shield {
	0%, 100% {
		transform: scale(1);
		box-shadow: 
			0 20px 40px rgba(16, 185, 129, 0.3),
			0 10px 20px rgba(16, 185, 129, 0.2);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 
			0 25px 50px rgba(16, 185, 129, 0.4),
			0 15px 30px rgba(16, 185, 129, 0.3);
	}
}

/* Copyright Icons Around Shield */
.copyright-icons {
	position: absolute;
	width: 100%;
	height: 100%;
}

.copyright-icons .icon-item {
	position: absolute;
	width: 70px;
	height: 70px;
	background: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 
		0 10px 25px rgba(0, 0, 0, 0.1),
		0 4px 10px rgba(0, 0, 0, 0.08);
	animation: float 3s ease-in-out infinite;
}

.copyright-icons .icon-item i {
	font-size: 2rem;
	color: var(--success-color);
}

.copyright-icons .icon-item:nth-child(1) {
	top: 10%;
	left: -10%;
	animation-delay: 0s;
}

.copyright-icons .icon-item:nth-child(2) {
	top: 50%;
	right: -5%;
	animation-delay: 0.5s;
}

.copyright-icons .icon-item:nth-child(3) {
	bottom: 15%;
	left: 10%;
	animation-delay: 1s;
}

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

/* Copyright Content */
.copyright-content {
	position: relative;
	z-index: 2;
}

.copyright-content .badge {
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.copyright-content h2 {
	color: var(--text-dark);
	font-size: 2rem;
	line-height: 1.3;
}

/* Copyright Features */
.copyright-features {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.feature-item {
	display: flex;
	align-items: start;
	gap: 1rem;
	padding: 1rem;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(10px);
	border-radius: var(--border-radius-lg);
	border: 1px solid rgba(16, 185, 129, 0.1);
	transition: all var(--transition-speed);
}

.feature-item:hover {
	background: rgba(255, 255, 255, 0.9);
	border-color: var(--success-color);
	transform: translateX(5px);
	box-shadow: var(--box-shadow-md);
}

.feature-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(16, 185, 129, 0.1);
	border-radius: var(--border-radius);
	transition: all var(--transition-speed);
}

.feature-icon i {
	font-size: 1.5rem;
}

.feature-item:hover .feature-icon {
	background: rgba(16, 185, 129, 0.2);
	transform: scale(1.1);
}

.feature-text h5 {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text-dark);
}

.feature-text p {
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Alert Info */
.copyright-content .alert-info {
	background: rgba(59, 130, 246, 0.1);
	color: var(--info-color);
	font-size: 0.9rem;
	padding: 1rem 1.25rem;
	border-radius: var(--border-radius-lg);
}

.copyright-content .alert-info strong {
	color: var(--primary-color);
}

/* ====================================
   RESPONSIVE DESIGN - COPYRIGHT SECTION
   ==================================== */

@media (max-width: 991px) {
	.copyright-badge-wrapper {
		min-height: 300px;
		margin-bottom: 2rem;
	}
	
	.copyright-shield {
		width: 160px;
		height: 160px;
	}
	
	.copyright-shield i {
		font-size: 4.5rem;
	}
	
	.copyright-icons .icon-item {
		width: 60px;
		height: 60px;
	}
	
	.copyright-icons .icon-item i {
		font-size: 1.75rem;
	}
	
	.copyright-content h2 {
		font-size: 1.75rem;
	}
}

@media (max-width: 767px) {
	.copyright-commitment-section {
		padding: 3rem 0 !important;
	}
	
	.copyright-badge-wrapper {
		min-height: 250px;
	}
	
	.copyright-shield {
		width: 140px;
		height: 140px;
	}
	
	.copyright-shield i {
		font-size: 4rem;
	}
	
	.copyright-icons .icon-item {
		width: 50px;
		height: 50px;
	}
	
	.copyright-icons .icon-item i {
		font-size: 1.5rem;
	}
	
	.copyright-content h2 {
		font-size: 1.5rem;
	}
	
	.copyright-content .lead {
		font-size: 1rem;
	}
	
	.feature-item {
		padding: 0.875rem;
	}
	
	.feature-icon {
		width: 36px;
		height: 36px;
	}
	
	.feature-icon i {
		font-size: 1.25rem;
	}
	
	.feature-text h5 {
		font-size: 0.95rem;
	}
	
	.feature-text p {
		font-size: 0.85rem;
	}
}

/* ====================================
   WHY CHOOSE US SECTION - ENHANCED
   ==================================== */

.why-choose-us-section {
	padding: 4rem 0;
	position: relative;
}

/* Section Badge */
.section-badge {
	display: inline-block;
	background: linear-gradient(135deg, 
		var(--primary-color), 
		var(--primary-light)
	);
	color: white;
	padding: 0.625rem 1.5rem;
	border-radius: 50px;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	box-shadow: 
		0 4px 12px rgba(37, 99, 235, 0.3),
		0 2px 6px rgba(37, 99, 235, 0.2);
	animation: fadeInDown 0.6s ease-out;
}

.section-badge i {
	animation: pulse 2s ease-in-out infinite;
}

/* Feature Cards */
.feature-card {
	position: relative;
	border-radius: var(--border-radius-xl);
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	border: 2px solid transparent;
	background: white;
	box-shadow: 
		0 4px 6px rgba(0, 0, 0, 0.05),
		0 2px 4px rgba(0, 0, 0, 0.03);
}

.feature-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, 
		var(--primary-color), 
		var(--primary-light)
	);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}

.feature-card:hover::before {
	transform: scaleX(1);
}

.feature-card:hover {
	transform: translateY(-10px);
	box-shadow: 
		0 20px 40px rgba(0, 0, 0, 0.1),
		0 10px 20px rgba(0, 0, 0, 0.06);
}

/* Card Variants */
.feature-card-primary {
	border-color: rgba(37, 99, 235, 0.1);
}

.feature-card-primary:hover {
	border-color: var(--primary-color);
	background: linear-gradient(135deg, 
		rgba(37, 99, 235, 0.02) 0%, 
		rgba(59, 130, 246, 0.05) 100%
	);
}

.feature-card-success {
	border-color: rgba(16, 185, 129, 0.1);
}

.feature-card-success:hover {
	border-color: var(--success-color);
	background: linear-gradient(135deg, 
		rgba(16, 185, 129, 0.02) 0%, 
		rgba(52, 211, 153, 0.05) 100%
	);
}

.feature-card-warning {
	border-color: rgba(245, 158, 11, 0.1);
}

.feature-card-warning:hover {
	border-color: var(--warning-color);
	background: linear-gradient(135deg, 
		rgba(245, 158, 11, 0.02) 0%, 
		rgba(251, 191, 36, 0.05) 100%
	);
}

/* Feature Card Inner */
.feature-card-inner {
	padding: 2.5rem 2rem;
	position: relative;
	z-index: 2;
}

/* Feature Icon Wrapper */
.feature-icon-wrapper {
	position: relative;
	margin-bottom: 1.5rem;
	display: flex;
	justify-content: center;
}

.feature-icon {
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	position: relative;
	z-index: 2;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feature-card-primary .feature-icon {
	background: linear-gradient(135deg, 
		var(--primary-color), 
		var(--primary-light)
	);
	box-shadow: 
		0 10px 30px rgba(37, 99, 235, 0.3),
		0 5px 15px rgba(37, 99, 235, 0.2);
}

.feature-card-success .feature-icon {
	background: linear-gradient(135deg, 
		var(--success-color), 
		var(--secondary-light)
	);
	box-shadow: 
		0 10px 30px rgba(16, 185, 129, 0.3),
		0 5px 15px rgba(16, 185, 129, 0.2);
}

.feature-card-warning .feature-icon {
	background: linear-gradient(135deg, 
		var(--warning-color), 
		var(--accent-light)
	);
	box-shadow: 
		0 10px 30px rgba(245, 158, 11, 0.3),
		0 5px 15px rgba(245, 158, 11, 0.2);
}

.feature-icon i {
	font-size: 3rem;
	color: white;
	transition: all 0.4s ease;
}

.feature-card:hover .feature-icon {
	transform: scale(1.1) rotate(5deg);
}

.feature-card:hover .feature-icon i {
	transform: scale(1.2);
}

/* Background Icon */
.feature-bg-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.05;
	pointer-events: none;
	z-index: 1;
}

.feature-bg-icon i {
	font-size: 15rem;
	color: currentColor;
}

.feature-card-primary .feature-bg-icon {
	color: var(--primary-color);
}

.feature-card-success .feature-bg-icon {
	color: var(--success-color);
}

.feature-card-warning .feature-bg-icon {
	color: var(--warning-color);
}

/* Feature Title */
.feature-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 1rem;
	text-align: center;
	transition: color 0.3s ease;
}

.feature-card-primary:hover .feature-title {
	color: var(--primary-color);
}

.feature-card-success:hover .feature-title {
	color: var(--success-color);
}

.feature-card-warning:hover .feature-title {
	color: var(--warning-color);
}

/* Feature Description */
.feature-description {
	font-size: 1rem;
	color: var(--text-medium);
	line-height: 1.7;
	text-align: center;
	margin-bottom: 1.5rem;
}

.feature-description .highlight {
	font-weight: 600;
	color: var(--text-dark);
	position: relative;
	padding: 0 0.25rem;
}

.feature-card-primary .highlight {
	color: var(--primary-color);
}

.feature-card-success .highlight {
	color: var(--success-color);
}

.feature-card-warning .highlight {
	color: var(--warning-color);
}

/* Feature Stats */
.feature-stats {
	display: flex;
	justify-content: center;
	padding-top: 1.5rem;
	border-top: 2px solid rgba(0, 0, 0, 0.05);
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.stat-number {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	background: linear-gradient(135deg, 
		var(--primary-color), 
		var(--primary-light)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.feature-card-primary .stat-number {
	background: linear-gradient(135deg, 
		var(--primary-color), 
		var(--primary-light)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.feature-card-success .stat-number {
	background: linear-gradient(135deg, 
		var(--success-color), 
		var(--secondary-light)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.feature-card-warning .stat-number {
	background: linear-gradient(135deg, 
		var(--warning-color), 
		var(--accent-light)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.stat-label {
	font-size: 0.85rem;
	color: var(--text-light);
	font-weight: 500;
}

/* Action Buttons */
.action-buttons-wrapper {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.btn-action {
	padding: 1rem 2.5rem;
	font-weight: 600;
	font-size: 1.05rem;
	border-radius: var(--border-radius-lg);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.15),
		0 2px 6px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

.btn-action::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.btn-action:hover::before {
	width: 300px;
	height: 300px;
}

.btn-action:hover {
	transform: translateY(-3px);
	box-shadow: 
		0 8px 20px rgba(0, 0, 0, 0.2),
		0 4px 12px rgba(0, 0, 0, 0.15);
}

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

.btn-action:hover i {
	transform: scale(1.2);
}

/* Trust Indicators */
.trust-indicators {
	display: flex;
	gap: 2rem;
	justify-content: center;
	flex-wrap: wrap;
	padding: 1.5rem;
	background: rgba(37, 99, 235, 0.03);
	border-radius: var(--border-radius-xl);
	border: 1px dashed rgba(37, 99, 235, 0.2);
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-medium);
	font-weight: 500;
	font-size: 0.95rem;
	transition: all 0.3s ease;
}

.trust-item i {
	font-size: 1.25rem;
	color: var(--primary-color);
	transition: transform 0.3s ease;
}

.trust-item:hover {
	color: var(--primary-color);
	transform: translateY(-2px);
}

.trust-item:hover i {
	transform: scale(1.2);
}

/* ====================================
   ANIMATIONS
   ==================================== */

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

/* ====================================
   RESPONSIVE - WHY CHOOSE US
   ==================================== */

@media (max-width: 991px) {
	.why-choose-us-section {
		padding: 3rem 0;
	}
	
	.feature-card-inner {
		padding: 2rem 1.5rem;
	}
	
	.feature-icon {
		width: 80px;
		height: 80px;
	}
	
	.feature-icon i {
		font-size: 2.5rem;
	}
	
	.feature-title {
		font-size: 1.25rem;
	}
	
	.stat-number {
		font-size: 1.75rem;
	}
}

@media (max-width: 767px) {
	.why-choose-us-section {
		padding: 2rem 0;
	}
	
	.section-badge {
		font-size: 0.85rem;
		padding: 0.5rem 1.25rem;
	}
	
	.feature-card-inner {
		padding: 1.75rem 1.25rem;
	}
	
	.feature-icon {
		width: 70px;
		height: 70px;
	}
	
	.feature-icon i {
		font-size: 2rem;
	}
	
	.feature-bg-icon i {
		font-size: 10rem;
	}
	
	.feature-title {
		font-size: 1.15rem;
	}
	
	.feature-description {
		font-size: 0.95rem;
	}
	
	.stat-number {
		font-size: 1.5rem;
	}
	
	.action-buttons-wrapper {
		flex-direction: column;
		width: 100%;
	}
	
	.btn-action {
		width: 100%;
		padding: 0.875rem 2rem;
	}
	
	.trust-indicators {
		gap: 1rem;
		padding: 1rem;
	}
	
	.trust-item {
		font-size: 0.85rem;
	}
	
	.trust-item i {
		font-size: 1.1rem;
	}
}

/* ====================================
   PARTNERSHIP SECTION
   ==================================== */

.partnership-section {
	background: linear-gradient(135deg, 
		#fff7ed 0%,      /* Orange-50 */
		#ffedd5 50%,     /* Orange-100 */
		#fed7aa 100%     /* Orange-200 */
	);
	position: relative;
	overflow: hidden;
}

.partnership-section::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -10%;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
	pointer-events: none;
}

.partnership-section::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -5%;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
	pointer-events: none;
}

/* Partnership Visual */
.partnership-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
}

.partnership-icon-grid {
	position: absolute;
	width: 100%;
	height: 100%;
}

.partnership-icon {
	position: absolute;
	width: 80px;
	height: 80px;
	background: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 
		0 10px 25px rgba(0, 0, 0, 0.1),
		0 4px 10px rgba(0, 0, 0, 0.06);
	animation: floatPartnership 3s ease-in-out infinite;
	border: 3px solid rgba(245, 158, 11, 0.2);
}

.partnership-icon i {
	font-size: 2.5rem;
	color: var(--warning-color);
}

.partnership-icon-1 {
	top: 10%;
	left: 5%;
	animation-delay: 0s;
}

.partnership-icon-2 {
	top: 15%;
	right: 10%;
	animation-delay: 0.5s;
}

.partnership-icon-3 {
	bottom: 20%;
	left: 15%;
	animation-delay: 1s;
}

.partnership-icon-4 {
	bottom: 15%;
	right: 5%;
	animation-delay: 1.5s;
}

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

/* Partnership Center Icon */
.partnership-center-icon {
	width: 180px;
	height: 180px;
	background: linear-gradient(135deg, 
		var(--warning-color), 
		var(--accent-light)
	);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 
		0 20px 40px rgba(245, 158, 11, 0.3),
		0 10px 20px rgba(245, 158, 11, 0.2),
		inset 0 -10px 30px rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 2;
	animation: pulsePartnership 3s ease-in-out infinite;
}

.partnership-center-icon i {
	font-size: 5rem;
	color: white;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

@keyframes pulsePartnership {
	0%, 100% {
		transform: scale(1);
		box-shadow: 
			0 20px 40px rgba(245, 158, 11, 0.3),
			0 10px 20px rgba(245, 158, 11, 0.2);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 
			0 25px 50px rgba(245, 158, 11, 0.4),
			0 15px 30px rgba(245, 158, 11, 0.3);
	}
}

/* Partnership Content */
.partnership-content {
	position: relative;
	z-index: 2;
}

.partnership-content .badge {
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.partnership-content h2 {
	color: var(--text-dark);
	font-size: 2rem;
	line-height: 1.3;
}

/* Partnership Benefits */
.partnership-benefits {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.benefit-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(10px);
	border-radius: var(--border-radius);
	border: 1px solid rgba(245, 158, 11, 0.1);
	transition: all var(--transition-speed);
}

.benefit-item:hover {
	background: rgba(255, 255, 255, 0.9);
	border-color: var(--warning-color);
	transform: translateX(5px);
	box-shadow: var(--box-shadow-md);
}

.benefit-item i {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.benefit-item span {
	font-size: 0.95rem;
	line-height: 1.4;
}

/* Partnership CTA */
.partnership-cta .btn {
	font-weight: 600;
	transition: all var(--transition-speed);
	box-shadow: var(--box-shadow-md);
}

.partnership-cta .btn:hover {
	transform: translateY(-3px);
	box-shadow: var(--box-shadow-lg);
}

.partnership-cta .alert-info {
	background: rgba(59, 130, 246, 0.1);
	color: var(--info-color);
	font-size: 0.9rem;
	padding: 1rem 1.25rem;
	border-radius: var(--border-radius-lg);
}

.partnership-cta .alert-info strong {
	color: var(--primary-color);
}

/* ====================================
   HERO SECTION - HOMEPAGE
   ==================================== */

.hero-section {
	background: linear-gradient(135deg, 
		#f0f9ff 0%,      /* Blue-50 */
		#e0f2fe 50%,     /* Sky-100 */
		#dbeafe 100%     /* Blue-100 */
	);
	position: relative;
	overflow: hidden;
}

.hero-section::before {
	content: '';
	position: absolute;
	top: -20%;
	right: -10%;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

.hero-section::after {
	content: '';
	position: absolute;
	bottom: -15%;
	left: -5%;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
	pointer-events: none;
}

.hero-section h1 {
	position: relative;
	z-index: 2;
}

.hero-section .lead {
	position: relative;
	z-index: 2;
}

.hero-section .btn {
	position: relative;
	z-index: 2;
	box-shadow: 
		0 4px 12px rgba(37, 99, 235, 0.2),
		0 2px 6px rgba(37, 99, 235, 0.15);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-section .btn:hover {
	transform: translateY(-3px);
	box-shadow: 
		0 8px 20px rgba(37, 99, 235, 0.3),
		0 4px 12px rgba(37, 99, 235, 0.2);
}

/* ====================================
   RESPONSIVE - BLOG & PARTNERSHIP
   ==================================== */

@media (max-width: 991px) {
	.partnership-visual {
		min-height: 300px;
		margin-bottom: 2rem;
	}
	
	.partnership-center-icon {
		width: 150px;
		height: 150px;
	}
	
	.partnership-center-icon i {
		font-size: 4rem;
	}
	
	.partnership-icon {
		width: 70px;
		height: 70px;
	}
	
	.partnership-icon i {
		font-size: 2rem;
	}
	
	.partnership-content h2 {
		font-size: 1.75rem;
	}
}

@media (max-width: 767px) {
	.partnership-section {
		padding: 3rem 0 !important;
	}
	
	.partnership-visual {
		min-height: 250px;
	}
	
	.partnership-center-icon {
		width: 120px;
		height: 120px;
	}
	
	.partnership-center-icon i {
		font-size: 3.5rem;
	}
	
	.partnership-icon {
		width: 60px;
		height: 60px;
	}
	
	.partnership-icon i {
		font-size: 1.75rem;
	}
	
	.partnership-content h2 {
		font-size: 1.5rem;
	}
	
	.partnership-content .lead {
		font-size: 1rem;
	}
	
	.benefit-item {
		padding: 0.6rem;
		font-size: 0.9rem;
	}
	
	.benefit-item i {
		font-size: 1.25rem;
	}
	
	.partnership-cta .btn {
		width: 100%;
		margin-bottom: 0.75rem;
	}
	
	.hero-section h1 {
		font-size: 1.75rem;
	}
	
	.hero-section .btn {
		width: 100%;
		margin-bottom: 0.75rem;
	}
}

/* ====================================
   SCROLL ANIMATIONS
   ==================================== */

@media (prefers-reduced-motion: no-preference) {
	.blog-post-card,
	.partnership-icon,
	.feature-card {
		opacity: 0;
		animation: fadeInUp 0.6s ease-out forwards;
	}
	
	.blog-post_card:nth-child(1) { animation-delay: 0.1s; }
	.blog-post_card:nth-child(2) { animation-delay: 0.2s; }
	.blog-post_card:nth-child(3) { animation-delay: 0.3s; }
	.blog-post_card:nth-child(4) { animation-delay: 0.4s; }
	.blog-post_card:nth-child(5) { animation-delay: 0.5s; }
	.blog-post_card:nth-child(6) { animation-delay: 0.6s; }
	.blog-post_card:nth-child(7) { animation-delay: 0.7s; }
	.blog-post_card:nth-child(8) { animation-delay: 0.8s; }
	.blog-post_card:nth-child(9) { animation-delay: 0.9s; }
	
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}