/*  
  -------------------------------------------
  -----      CSS for the font used      -----
  -------------------------------------------
*/

@import url('./font/inter.css');

body {
	font-family: 'Inter var', sans-serif;
	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}



/*  
  ------------------------------------------- 
  -----      CSS for the preloader      -----
  -------------------------------------------
*/

.loader-wrapper {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	bottom: 0 !important;
	right: 0 !important;
	background-color: rgba(var(--bs-body-bg-rgb), 1) !important;
	display: flex;
	justify-content: center !important;
	align-items: center !important;
	z-index: 2000 !important;
	transition: opacity 0.3s ease;
}


/*  
  -------------------------------------------------------------------------------- 
  -----      CSS for the default styles for both directions RTL and LTR      -----
  --------------------------------------------------------------------------------
*/

.left-to-right {
	display: none !important;
}

.right-to-left {
	display: none !important;
}

[dir="ltr"] .left-to-right {
	display: inline !important;
}

[dir="rtl"] .right-to-left {
	display: inline !important;
}

[dir="rtl"] .rtl-flip {
	transform: scaleX(-1) !important;
}

[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before {
	transform: scaleX(-1);
}

/* General CSS */

a {
	text-decoration: none !important;
}

.underline-hover {
	position: relative;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.5s;
}

.underline-hover:hover {
	background-size: 100% 2px;
}


/*  
  ----------------------------------------------------  
  -----      CSS for the button back to top      -----
  ----------------------------------------------------
*/

.btn-back-to-top {
	position: fixed;
	bottom: 100px;
	display: none;
	z-index: 10;
}

[dir="ltr"] .btn-back-to-top {
	right: 20px;
}

[dir="rtl"] .btn-back-to-top {
	left: 20px;
}

@media (min-width: 1200px) {
	.overflow-xl-hidden {
		overflow: hidden !important;
	}
}

/***********************/
/*     Header menu     */
/***********************/
header.header-menu .offcanvas .text-body.nav-link {
	padding-right: 1rem !important;
	padding-left: 1rem !important;
}

.header-menu .text-body.nav-link:hover {
	color: #4F46E5 !important;
}

header.header-menu .dropdown-toggle::after {
	display: none;
}

/* End */

.section-header {
	text-align: center;
}

.section-header .above-heading {
	text-transform: uppercase;
	margin-bottom: 1rem;
	letter-spacing: 1px;
	color: #635BFF;
	border-radius: 6px;
	padding: 0.5rem 1.5rem;
	background-color: #ffffff;
	font-weight: 400;
	display: inline-block;
	font-size: 0.9rem;
}


/***********************/
/*     Header Top     */
/***********************/
section.header-top .img-background {
	opacity: 0.1;
	background-size: cover;
	background-repeat: no-repeat;
}

/* End */

/*************************/
/*    package lists button   */
/*************************/
section.package-list-carousel {
	position: relative;
	padding: 40px 0;
}

section.package-list .package-list-carousel .social-item {
	margin-top: 50px;
}

section.package-list .package-list-carousel .social-item .img-logo {
	margin: 0 auto;
	margin-bottom: 30px;
	width: 90px;
	height: 90px;
	background-color: #f0f0f0;
	border-radius: 15px;
	border: 3px solid #e3e3e3;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

section.package-list .package-list-carousel .social-item .img-logo:hover {
	border: 3px solid #635BFF;
}

section.package-list .package-list-carousel .social-item .img-logo img {
	width: 60px;
}

section.package-list .tab {
	cursor: pointer;
	padding: 10px;
	border: 1px solid transparent;
	border-radius: 14px;
	min-width: 90px;
}

section.package-list .tab-item .img-logo {
	margin: 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	background-color: #f0f0f0;
	border-radius: 15px;
	border: 3px solid #e3e3e3;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

section.package-list .tab-item .img-logo:hover,
section.package-list .tab-item.active .img-logo {
	border: 3px solid #635BFF;
}

section.package-list .tab-item .img-logo img {
	width: 3rem;
}

[data-bs-theme=light] section.package-list .tab-content .tab-item {
	background-image: linear-gradient(310deg, #e5e5e5 0%, #f9efe0 100%);
}

.package-btn-list .buy-package-item .icon-right {
	color: #b5b5b5;
	margin-top: 8px;
}

.package-btn-list .buy-package-item .icon-square {
	display: inline-block;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #d0d0d0;
	border-radius: 12px;
	color: #fff;
	padding: 5px 6px;
	font-size: 20px;
	transition: background-color 0.3s;
}

.package-list-tab .buy-package-item .icon-square {
	background: #635BFF;
}

.package-list-carousel .buy-package-item .icon-square {
	color: #635BFF;
	background: #EDE9FE;
}

.package-btn-list .buy-package-item:hover {
	border: 1px solid #f0f0f3;
	background: #f0f0f3 !important;
}

[data-bs-theme=dark] .tab-content .tab-item {
	background-image: linear-gradient(310deg, #211c1c 0%, #27272a 100%);
}

[data-bs-theme=dark] .package-btn-list .buy-package-item {
	background: #3f3e3e !important;
	border-color: #333;
	color: #fff;
}

[data-bs-theme=dark] .package-btn-list .buy-package-item:hover {
	border: 1px solid #525050;
	background: #525050 !important;
}

/*************************/
/*     Counter area    */
/*************************/
section.counts-area {
	padding: 70px 0 60px;
}

section.counts-area .count-box {
	display: flex;
	align-items: center;
	padding: 30px;
	width: 100%;
	border-radius: 15px;
	box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}

section.counts-area .count-box i {
	font-size: 42px;
	line-height: 0;
	margin-right: 20px;
	color: #0d6efd;
}

section.counts-area .count-box span {
	font-size: 36px;
	font-weight: 600;
	color: #4F46E5;
}

section.counts-area .count-box p {
	padding: 0;
	margin: 0;
	font-size: 14px;
}


/*--------------------------------------------------------------
# why-choose-us Section - Stripe-style Modern Design
--------------------------------------------------------------*/
section.why-choose-us {
	position: relative;
}

/* Content Area Typography */
section.why-choose-us h2 {
	color: var(--bs-body-color);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

section.why-choose-us .text-lg {
	font-size: 1.125rem;
	line-height: 1.75;
	max-width: 600px;
}

/* Feature Cards - Using Design System Components */
section.why-choose-us .stripe-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: visible;
}

section.why-choose-us .stripe-card .gradient-icon-container {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

section.why-choose-us .stripe-card:hover .gradient-icon-container {
	transform: translateY(-4px);
}

section.why-choose-us .stripe-card h3 {
	color: var(--bs-body-color);
	line-height: 1.4;
}

section.why-choose-us .stripe-card p {
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Responsive Spacing */
@media (max-width: 992px) {
	section.why-choose-us .row.align-items-center {
		text-align: center;
	}

	section.why-choose-us .badge-gradient,
	section.why-choose-us h2,
	section.why-choose-us .text-lg {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 768px) {
	section.why-choose-us h2 {
		font-size: 1.875rem;
	}

	section.why-choose-us .text-lg {
		font-size: 1rem;
	}
}

/* Dark Mode Enhancements */
[data-bs-theme=dark] section.why-choose-us h2 {
	color: #e4e4e7;
}

[data-bs-theme=dark] section.why-choose-us .text-body-secondary {
	color: #a1a1aa !important;
}

/* End */

/*--------------------------------------------------------------
# What We Offer Section - Stripe-Style Modern Design
--------------------------------------------------------------*/

section.what-we-offer {
	position: relative;
	background: var(--bs-body-bg);
}

/* Section Header Styles */
section.what-we-offer h2 {
	color: var(--bs-body-color);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

section.what-we-offer .text-lg {
	font-size: 1.125rem;
	line-height: 1.75;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* Feature Cards - Using Design System Components */
section.what-we-offer .stripe-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: visible;
}

section.what-we-offer .stripe-card .gradient-icon-container {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

section.what-we-offer .stripe-card:hover .gradient-icon-container {
	transform: translateY(-4px);
}

section.what-we-offer .stripe-card h3 {
	color: var(--bs-body-color);
	line-height: 1.4;
}

section.what-we-offer .stripe-card p {
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Feature Image Styles */
section.what-we-offer .rounded-4 {
	border-radius: 1rem !important;
}

/* Responsive Spacing */
@media (max-width: 992px) {
	section.what-we-offer .row.align-items-center {
		text-align: center;
	}

	section.what-we-offer .badge-gradient,
	section.what-we-offer h2,
	section.what-we-offer .text-lg {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 768px) {
	section.what-we-offer h2 {
		font-size: 1.875rem;
	}

	section.what-we-offer .text-lg {
		font-size: 1rem;
	}
}

/* Dark Mode Enhancements */
[data-bs-theme=dark] section.what-we-offer h2 {
	color: #e4e4e7;
}

[data-bs-theme=dark] section.what-we-offer .text-body-secondary {
	color: #a1a1aa !important;
}

/*--------------------------------------------------------------
# END What We Offer Section
--------------------------------------------------------------*/

/***********************/
/*     How to works     */
/***********************/
.wimax-load {
	-webkit-animation: wimax-load 1500ms linear infinite;
	animation: wimax-load 1500ms linear infinite;
	background-color: transparent;
	border-color: #ffffff;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-radius: 50%;
	border-style: solid;
	border-width: 2px;
	height: 50px;
	left: calc(50% - 25px);
	position: relative;
	top: calc(50% - 25px);
	width: 50px;
	z-index: 9;
}

@-webkit-keyframes wimax-load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes wimax-load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

section.how-it-work .single_work_step {
	position: relative;
	z-index: 1;
	margin-bottom: 50px;
	text-align: center;
}


section.how-it-work .single_work_step .arrow {
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
	position: absolute;
	top: 25%;
	right: -15%;
	font-size: 3rem;
	width: 70px;
	height: 70px;
	margin-top: 10px;
	margin-left: -35px;
	z-index: 1;
	line-height: 1;
	color: #020710;
}

@media only screen and (max-width: 575px) {
	section.how-it-work .single_work_step .arrow {
		display: none;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
	section.how-it-work .single_work_step .arrow {
		display: block;
		right: -35%;
		font-size: 1.5rem;
	}
}

section.how-it-work .single_work_step .step-icon {
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
	position: relative;
	z-index: 1;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	margin: 0 auto 30px;
}

section.how-it-work .single_work_step .step-icon::after {
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
	border-radius: 50%;
	border: 5px dotted #0d1399;
	top: 0;
	left: 0;
}

section.how-it-work .single_work_step .step-icon i {
	font-size: 3rem;
	line-height: 90px;
	color: #0d1399;
}

section.how-it-work .single_work_step p {
	margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	section.how-it-work .single_work_step p {
		font-size: 14px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
	section.how-it-work .single_work_step p {
		font-size: 14px;
	}
}

section.how-it-work .single_work_step h5 {
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
	font-size: 20px;
	font-weight: 600;
}

section.how-it-work .single_work_step:focus::before {
	color: #ff9800;
	right: -35%;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
	section.how-it-work .single_work_step:focus::before {
		right: -40%;
	}
}

section.how-it-work .single_work_step:hover .step-icon::after,
section.how-it-work .single_work_step:focus .step-icon::after {
	-webkit-animation: wimax-load 4000ms linear infinite;
	animation: wimax-load 4000ms linear infinite;
	border-color: #ff9800;
}

section.how-it-work .single_work_step:hover .step-icon i,
section.how-it-work .single_work_step:focus .step-icon i {
	color: #ff9800;
}

section.how-it-work .single_work_step:hover h5,
section.how-it-work .single_work_step:focus h5 {
	color: #ff9800;
}


section.how-it-work .single_work_step:last-child .arrow {
	display: none;
}


/* End */

/***********************/
/*     Customer reviews    */
/***********************/
section.reviews {
	/* 设计系统合规：使用标准灰色背景 */
	background: var(--bs-gray-50, #F9FAFB);
}

section.reviews .review__verified {
	align-items: center;
	/* 设计系统合规：使用主色调的浅色背景 */
	background: var(--bs-primary-bg-subtle, #EDE9FE);
	/* 设计系统合规：标准圆角 1rem */
	border-radius: 1rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	/* 设计系统合规：使用 8px 网格系统 */
	margin-top: 1.25rem;
	padding: 0.75rem;
}

section.reviews .review__verified .icon {
	flex-shrink: 0;
	height: 26px;
	margin-bottom: 11px;
	margin-right: 5px;
	width: 26px;
}

section.reviews .review__verified div {
	/* 设计系统合规：使用主色调强调色 */
	color: var(--bs-primary, #635BFF);
	display: block;
	width: 100%;
}

section.reviews .review__verified h4 {
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 120%;
}

section.reviews .review__verified p {
	/* 设计系统合规：使用主色调强调色 */
	color: var(--bs-primary, #635BFF);
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 120%;
}

section.reviews .review__verified a {
	/* 设计系统合规：使用主色调强调色 */
	color: var(--bs-primary, #635BFF);
	display: inline;
}

section.reviews .rating-box {
	/* 设计系统合规：使用标准边框颜色 */
	border: 1px solid var(--bs-gray-200, #E5E7EB);
	/* 设计系统合规：使用 8px 网格系统 */
	padding: 1.25rem;
	/* 设计系统合规：标准圆角 1rem */
	border-radius: 1rem;
	max-width: 400px;
	margin: auto;
	/* 添加白色背景以增强对比 */
	background: var(--bs-body-bg, #FFFFFF);
}

section.reviews .rating-box .progress {
	/* 设计系统合规：使用 8px 网格系统 */
	height: 0.625rem;
}

section.reviews .rating-box .overall-rating {
	font-size: 2.5rem;
	font-weight: bold;
}

section.reviews .rating-box .stars {
	font-size: 2.0rem;
}

section.reviews .rating-box .rating-bar {
	/* 设计系统合规：使用 8px 网格系统 */
	height: 0.625rem;
	/* 设计系统合规：使用成功色（绿色）代替橙色 */
	background: var(--bs-success, #10B981);
	/* 添加平滑的宽度过渡动画 */
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 评论卡片悬停效果 - Stripe风格 */
section.reviews .bg-body-tertiary.shadow {
	/* 扁平化设计，微妙的边框 */
	border: 1px solid rgba(99, 91, 255, 0.1);
	/* 平滑的过渡动画 */
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

section.reviews .bg-body-tertiary.shadow:hover {
	/* 悬停时上移4px */
	transform: translateY(-4px);
	/* 增强阴影效果 */
	box-shadow: 0 12px 24px rgba(99, 91, 255, 0.15) !important;
	/* 更明显的边框 */
	border-color: rgba(99, 91, 255, 0.2);
}

/*--------------------------------------------------------------
# Quick Links Section - Stripe-Style Modern Design
--------------------------------------------------------------*/

/* Main Card Container */
section.quick-link .quick-link-card {
	background: linear-gradient(135deg, #1a1f36 0%, #2d3655 50%, #1a1f36 100%);
	border: 1px solid rgba(99, 91, 255, 0.2);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

section.quick-link .quick-link-card:hover {
	box-shadow: 0 25px 50px rgba(99, 91, 255, 0.2);
	border-color: rgba(99, 91, 255, 0.3);
}

/* Grid Pattern Overlay */
section.quick-link .quick-link-grid-overlay {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(90deg, rgba(99, 91, 255, 0.05) 1px, transparent 1px),
		linear-gradient(rgba(99, 91, 255, 0.05) 1px, transparent 1px);
	background-size: 40px 40px;
	pointer-events: none;
	opacity: 0.8;
}

/* Light Badge for Dark Background */
section.quick-link .badge-gradient-light {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 2rem;
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.025em;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Quick Link Buttons */
section.quick-link .quick-link-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.25rem;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 2rem;
	color: white;
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

section.quick-link .quick-link-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.25);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

section.quick-link .quick-link-btn:active {
	transform: translateY(0);
}

/* Arrow Icon Animation */
section.quick-link .quick-link-arrow {
	opacity: 0;
	transform: translateX(-8px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 0.875rem;
}

section.quick-link .quick-link-btn:hover .quick-link-arrow {
	opacity: 1;
	transform: translateX(0);
}

/* Title Styling */
section.quick-link h2 {
	letter-spacing: -0.02em;
	line-height: 1.3;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Responsive Adjustments */
@media (max-width: 767px) {
	section.quick-link .quick-link-btn {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
	}

	section.quick-link h2 {
		font-size: 1.5rem;
	}

	section.quick-link .badge-gradient-light {
		font-size: 0.75rem;
		padding: 0.375rem 0.75rem;
	}
}

/* Dark Mode Enhancements */
[data-bs-theme=dark] section.quick-link .quick-link-card {
	background: linear-gradient(135deg, #0f0f12 0%, #1a1a24 50%, #0f0f12 100%);
	border-color: rgba(167, 139, 250, 0.2);
}

[data-bs-theme=dark] section.quick-link .quick-link-card:hover {
	border-color: rgba(167, 139, 250, 0.4);
	box-shadow: 0 25px 50px rgba(167, 139, 250, 0.15);
}

[data-bs-theme=dark] section.quick-link .quick-link-grid-overlay {
	background-image:
		linear-gradient(90deg, rgba(167, 139, 250, 0.08) 1px, transparent 1px),
		linear-gradient(rgba(167, 139, 250, 0.08) 1px, transparent 1px);
}

[data-bs-theme=dark] section.quick-link .quick-link-btn {
	background: rgba(167, 139, 250, 0.1);
	border-color: rgba(167, 139, 250, 0.2);
}

[data-bs-theme=dark] section.quick-link .quick-link-btn:hover {
	background: rgba(167, 139, 250, 0.2);
	border-color: rgba(167, 139, 250, 0.35);
}

/*--------------------------------------------------------------
# END Quick Links Section
--------------------------------------------------------------*/



/* owl-carousel Button */

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
	top: 50% !important;
	-webkit-transform: translateX(-50%);
	transform: translateY(-50%);
	position: absolute;
}

.owl-carousel .owl-nav .owl-prev {
	left: -10px !important;
}

.owl-carousel .owl-nav .owl-next {
	right: -10px !important;
}

.owl-carousel .owl-prev,
.owl-carousel .owl-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: #635BFF;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	outline: none;
}

.owl-carousel .owl-prev span,
.owl-carousel .owl-next span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 41px;
	color: #fff;
	background: #DDD6FE;
	border-radius: 50px;
}

.owl-carousel .owl-prev span:hover,
.owl-carousel .owl-next span:hover {
	background: #635BFF;
}



/*--------------------------------------------------------------
# BLOG AREA - MODERN STRIPE-STYLE DESIGN
--------------------------------------------------------------*/

/* === Blog Hero Section === */
.blog-hero {
  min-height: 280px;
  display: flex;
  align-items: center;
}

/* === Blog Card Component === */
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card__image-wrapper {
  border-radius: 1rem 1rem 0 0;
  aspect-ratio: 16 / 10;
}

.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover .blog-card__image {
  transform: scale(1.05);
}

.blog-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card__title {
  min-height: 2.5em;
  line-height: 1.3;
}

.blog-card__title-link {
  transition: color 0.2s ease;
}

.blog-card__title-link:hover {
  color: var(--bs-primary) !important;
}

.blog-card__excerpt {
  flex: 1;
  min-height: 3em;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__meta {
  margin-top: auto;
}

.blog-card__avatar img {
  width: 28px;
  height: 28px;
  object-fit: cover;
}

/* === Post Article Content === */
.post-article__featured-image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.post-article__content {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.post-article__content p {
  margin-bottom: 1.5em;
}

.post-article__content h2,
.post-article__content h3,
.post-article__content h4 {
  margin-top: 2em;
  margin-bottom: 0.75em;
  font-weight: 600;
}

.post-article__content img {
  border-radius: 0.5rem;
  max-width: 100%;
  height: auto;
}

.post-article__content ul,
.post-article__content ol {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

.post-article__content li {
  margin-bottom: 0.5em;
}

.post-article__content blockquote {
  border-left: 4px solid var(--bs-primary);
  padding-left: 1.5rem;
  margin: 2em 0;
  font-style: italic;
  color: var(--bs-secondary-color);
}

/* === Post Navigation Cards === */
.post-nav-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-nav-card:hover {
  transform: translateY(-2px);
}

.post-nav-card__image {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.post-nav-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* === Social Share Buttons === */
.btn-social {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: all 0.2s ease;
}

.btn-social:hover {
  transform: translateY(-2px);
}

.btn-social--facebook:hover {
  background: #1877F2;
  border-color: #1877F2;
  color: white;
}

.btn-social--twitter:hover {
  background: #000000;
  border-color: #000000;
  color: white;
}

.btn-social--linkedin:hover {
  background: #0077B5;
  border-color: #0077B5;
  color: white;
}

.btn-social--whatsapp:hover {
  background: #25D366;
  border-color: #25D366;
  color: white;
}

.btn-social--copy:hover {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: white;
}

/* === Social Follow Buttons (Sidebar) === */
.btn-social-follow {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  color: white;
  font-size: 1.125rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-social-follow:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  color: white;
}

.btn-social-follow--twitter { background: #000000; }
.btn-social-follow--facebook { background: #1877F2; }
.btn-social-follow--instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.btn-social-follow--linkedin { background: #0077B5; }
.btn-social-follow--youtube { background: #FF0000; }
.btn-social-follow--tiktok { background: #000000; }
.btn-social-follow--whatsapp { background: #25D366; }
.btn-social-follow--pinterest { background: #E60023; }

/* === Sidebar Widgets === */
.sidebar-widget {
  background: var(--bs-body-bg);
}

/* === Category List === */
.category-list__link {
  transition: all 0.2s ease;
  padding: 0.25rem 0;
}

.category-list__link:hover .category-list__name {
  color: var(--bs-primary) !important;
}

.category-list__link:hover .category-list__count {
  background: var(--bs-primary) !important;
  color: white !important;
}

/* === Related Posts === */
.related-post-item {
  transition: all 0.2s ease;
}

.related-post-item:hover .related-post-item__title {
  color: var(--bs-primary) !important;
}

.related-post-item__image {
  width: 70px;
  height: 70px;
  object-fit: cover;
}

.related-post-item__title {
  transition: color 0.2s ease;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Blog Responsive Adjustments === */
@media (max-width: 991px) {
  .blog-hero {
    min-height: 220px;
  }
  
  .blog-sidebar {
    margin-top: 2rem;
  }
  
  .post-nav-card__image {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 767px) {
  .blog-card__title {
    min-height: auto;
    font-size: 1.125rem;
  }
  
  .blog-card__excerpt {
    min-height: auto;
    -webkit-line-clamp: 2;
  }
  
  .post-article__content {
    font-size: 1rem;
  }
  
  .btn-social-follow {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .related-post-item__image {
    width: 60px;
    height: 60px;
  }
}

/*--------------------------------------------------------------
# END BLOG AREA
--------------------------------------------------------------*/


/* Alert Message */
.ajax-alert-message {
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  }
  .ajax-alert-message .alert-success {
	color: #000000!important;
	background-color: rgba(94, 186, 0, 0.2)!important;
	border: none!important;
	border-left: 7px solid #0b9b2b!important;
  }
  
  .ajax-alert-message .alert-success svg {
	color: #0b9b2b!important;
  }
  
  .ajax-alert-message .alert-danger {
	color: #92012f!important;
	background-color: #fbe3ec!important;
	border: none!important;
	border-left: 7px solid #f63f78 !important;
  }
  
  .ajax-alert-message .alert-danger svg {
	color: #f63f78!important;
  }
  
  .overlay {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(249, 249, 249, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10003;
  }


/*--------------------------------------------------------------
# STRIPE-STYLE MODERN DESIGN SYSTEM
--------------------------------------------------------------*/

/* === Custom CSS Variables === */
:root {
  --gradient-primary: linear-gradient(135deg, #635BFF 0%, #00D4FF 100%);
  --gradient-accent: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
  --gradient-soft: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
  --spacing-section: 6rem;
}

[data-bs-theme=dark] {
  --gradient-primary: linear-gradient(135deg, #A78BFA 0%, #00D4FF 100%);
  --gradient-accent: linear-gradient(135deg, #C4B5FD 0%, #A78BFA 100%);
}

/* === Stripe-Style Gradient Grid Background === */
.gradient-grid-bg {
  position: relative;
  background: linear-gradient(to bottom, #FAFAFA 0%, #FFFFFF 100%);
}

[data-bs-theme=dark] .gradient-grid-bg {
  background: linear-gradient(to bottom, #18181b 0%, #27272a 100%);
}

.gradient-grid-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(90deg, rgba(99, 91, 255, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(99, 91, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  opacity: 0.6;
}

/* === Gradient Button Styles === */
.btn-gradient-primary {
  background: var(--gradient-primary);
  border: none;
  color: white !important;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(99, 91, 255, 0.3);
}

.btn-gradient-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 91, 255, 0.4);
}

.btn-gradient-primary:active {
  transform: translateY(0);
}

/* === Enhanced Card Styles === */
.stripe-card {
  background: var(--bs-body-bg);
  border: 1px solid rgba(99, 91, 255, 0.1);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.stripe-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(99, 91, 255, 0.15);
  border-color: rgba(99, 91, 255, 0.2);
}

[data-bs-theme=dark] .stripe-card {
  border-color: rgba(167, 139, 250, 0.15);
}

[data-bs-theme=dark] .stripe-card:hover {
  border-color: rgba(167, 139, 250, 0.3);
  box-shadow: 0 12px 24px rgba(167, 139, 250, 0.2);
}

/* === Gradient Text === */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* === Icon Container with Gradient === */
.gradient-icon-container {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-soft);
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
}

.gradient-icon-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gradient-icon-container:hover::before {
  opacity: 0.1;
}

.gradient-icon-container i,
.gradient-icon-container svg {
  position: relative;
  z-index: 1;
  color: var(--bs-primary);
  font-size: 1.5rem;
}

/* === Enhanced Spacing === */
.py-6 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.py-7 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.py-8 {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

.my-6 {
  margin-top: 4.5rem !important;
  margin-bottom: 4.5rem !important;
}

.my-7 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}

/* === Subtle Shadow Utilities === */
.shadow-subtle {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.shadow-subtle-hover:hover {
  box-shadow: 0 4px 12px rgba(99, 91, 255, 0.15) !important;
}

/* === Gradient Badge === */
.badge-gradient {
  background: var(--gradient-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.875rem;
}

/* === Feature Card with Accent Border === */
.feature-card-accent {
  position: relative;
  padding: 2rem;
  background: var(--bs-body-bg);
  border-radius: 1rem;
  border: 1px solid rgba(99, 91, 255, 0.1);
}

.feature-card-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: 1rem 1rem 0 0;
}

/* === Animated Gradient Border === */
.gradient-border {
  position: relative;
  background: var(--bs-body-bg);
  padding: 2rem;
  border-radius: 1rem;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 2px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* === Responsive Adjustments === */
@media (max-width: 768px) {
  .py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-7 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-8 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

/* === Section Spacing Optimization === */
section.py-5 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

@media (min-width: 992px) {
  section.py-5 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
}

/*--------------------------------------------------------------
# How It Works Section - Stripe-Style Modern Design
--------------------------------------------------------------*/

/* Override old styles */
section.how-it-work {
  background: var(--bs-body-bg);
}

section.how-it-work .stripe-card {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Step Number Badge */
section.how-it-work .step-number-badge {
  display: flex;
  align-items: center;
}

section.how-it-work .step-number-badge .gradient-icon-container {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-soft);
  border-radius: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-bs-theme=dark] section.how-it-work .step-number-badge .gradient-icon-container {
  background: rgba(167, 139, 250, 0.15);
}

section.how-it-work .stripe-card:hover .gradient-icon-container {
  transform: scale(1.05);
  background: var(--gradient-primary);
}

section.how-it-work .stripe-card:hover .gradient-icon-container span {
  color: white !important;
}

/* Step Connector Arrow */
section.how-it-work .step-connector {
  position: absolute;
  right: -2rem;
  top: 2rem;
  color: var(--bs-primary);
  font-size: 1.5rem;
  opacity: 0.6;
  z-index: 10;
  pointer-events: none;
}

[data-bs-theme=dark] section.how-it-work .step-connector {
  color: rgba(167, 139, 250, 0.8);
}

/* Typography */
section.how-it-work h2 {
  color: var(--bs-body-emphasis);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

section.how-it-work h3 {
  color: var(--bs-body-emphasis);
  line-height: 1.4;
  font-size: 1.5rem;
}

section.how-it-work p {
  line-height: 1.625;
  font-size: 0.9375rem;
}

/* Animation Enhancements */
section.how-it-work .stripe-card {
  transform-origin: center;
}

section.how-it-work .stripe-card:hover {
  transform: translateY(-4px) scale(1.02);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  section.how-it-work .step-connector {
    display: none !important;
  }

  section.how-it-work h3 {
    font-size: 1.25rem;
  }

  section.how-it-work .step-number-badge .gradient-icon-container {
    width: 3.5rem;
    height: 3.5rem;
  }

  section.how-it-work .step-number-badge .gradient-icon-container span {
    font-size: 1.25rem !important;
  }
}

@media (max-width: 767px) {
  section.how-it-work h2 {
    font-size: 1.875rem;
  }

  section.how-it-work h3 {
    font-size: 1.125rem;
  }

  section.how-it-work p {
    font-size: 0.875rem;
  }
}

/* Dark Mode Enhancements */
[data-bs-theme=dark] section.how-it-work h2,
[data-bs-theme=dark] section.how-it-work h3 {
  color: #e4e4e7;
}

[data-bs-theme=dark] section.how-it-work .text-body-secondary {
  color: #a1a1aa !important;
}

/*--------------------------------------------------------------
# END How It Works Section
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# END STRIPE-STYLE MODERN DESIGN SYSTEM
--------------------------------------------------------------*/