/* --- Dedicated Servers --- */
.ds-matrix-pricing-light .server-row-pro.hidden-row {
	display: none !important;
}

/* --- Seamless Gradient Background --- */
.premium-blue-hero {
	background: linear-gradient(180deg, #2c449c 0%, #162454 40%, #0d1636 100%);
	color: #ffffff;
}

.ptb-100 {
	padding: 100px 0;
}

.text-light-silver {
	color: #b3c2e6;
	font-size: 1.15rem;
	line-height: 1.6;
	font-weight: 400;
}

.text-cyan {
	color: #00e5ff;
}

/* --- Abstract Background Glows --- */
.glow-circle {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	z-index: 0;
	pointer-events: none;
}

.glow-top-right {
	top: -10%;
	right: -5%;
	width: 500px;
	height: 500px;
	background: rgba(0, 229, 255, 0.15);
	/* Soft cyan glow */
}

.glow-bottom-left {
	bottom: -10%;
	left: -10%;
	width: 600px;
	height: 600px;
	background: rgba(44, 68, 156, 0.4);
	/* Deep blue glow */
}

/* --- Glassmorphism UI Elements --- */
.glass-badge {
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 8px 20px;
	border-radius: 50px;
	font-size: 0.95rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.text-cyan-glow {
	color: #00e5ff;
	text-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}

/* --- Fix Icon Squishing Globally --- */
.icon-bubble {
	flex-shrink: 0 !important;
	/* Forces the icon to stay a perfect circle/square */
	width: 36px !important;
	height: 36px !important;
}

.modern-card .card-text {
	line-height: 1.3 !important;
	/* Makes wrapped text look much cleaner */
}

/* --- Mobile Specific: Ultra-Modern App-Style Grid --- */
@media (max-width: 768px) {
	.modern-feature-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		/* Keeps the 2x2 layout */
		gap: 12px !important;
	}

	.modern-card {
		flex-direction: column !important;
		/* Stacks the icon above the text */
		text-align: center !important;
		padding: 16px 12px !important;
		justify-content: flex-start !important;
		align-items: center !important;
	}

	.modern-card .icon-bubble {
		margin-bottom: 6px !important;
		/* Space between icon and text */
		width: 40px !important;
		/* Slightly larger icon for mobile touch target */
		height: 40px !important;
		font-size: 1rem !important;
	}

	.modern-card .card-text {
		font-size: 0.85rem !important;
		/* Scaled perfectly for mobile */
	}
}

/* --- Frosted Feature Cards --- */
.glass-feature-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}

.glass-card {
	display: flex;
	align-items: center;
	gap: 15px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 12px 20px;
	border-radius: 12px;
	color: #ffffff;
	font-weight: 500;
	transition: all 0.3s ease;
}

.glass-card:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(0, 229, 255, 0.3);
	transform: translateY(-2px);
}

.icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(0, 229, 255, 0.1);
	color: #00e5ff;
	border-radius: 8px;
	font-size: 0.9rem;
}

/* --- High-Converting CTA Button --- */
.btn-cyan-glow {
	display: inline-flex;
	align-items: center;
	padding: 16px 36px;
	font-size: 1.1rem;
	font-weight: 600;
	color: #0d1636;
	/* Dark text on bright button */
	background: #00e5ff;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}

.btn-cyan-glow:hover {
	background: #ffffff;
	color: #0d1636;
	transform: translateY(-3px);
	box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
}

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

.btn-cyan-glow:hover i {
	transform: translateX(6px);
}

/* --- Image Animation --- */
.floating-img {
	animation: float 6s ease-in-out infinite;
	position: relative;
	z-index: 2;
}

.img-shadow {
	width: 60%;
	height: 20px;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
	margin: 0 auto;
	border-radius: 50%;
	animation: shadow-pulse 6s ease-in-out infinite;
}

@keyframes float {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-20px);
	}

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

@keyframes shadow-pulse {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}

	50% {
		transform: scale(0.8);
		opacity: 0.3;
	}

	100% {
		transform: scale(1);
		opacity: 0.6;
	}
}

@media (max-width: 768px) {
	.glass-feature-grid {
		grid-template-columns: 1fr;
	}

	.display-4 {
		font-size: 2.2rem;
	}
}

/* --- Typography Updates --- */
.text-gradient-cyan {
	background: linear-gradient(90deg, #00e5ff, #0088ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

.text-slate-300 {
	color: #cbd5e1;
	/* A cool, silvery-grey that reads beautifully on dark blue */
	font-size: 1.15rem;
	line-height: 1.6;
}

/* --- Luminous Top Badge --- */
.modern-badge {
	display: inline-flex;
	align-items: center;
	background: rgba(0, 229, 255, 0.1);
	/* Soft cyan background */
	border: 1px solid rgba(0, 229, 255, 0.2);
	padding: 8px 20px;
	border-radius: 50px;
}

.badge-icon {
	color: #00e5ff;
	margin-right: 8px;
}

.badge-text {
	color: #e2e8f0;
	font-size: 0.95rem;
}

/* --- Translucent Glass Feature Cards --- */
.modern-feature-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.modern-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.05);
	/* Translucent white, not dark grey */
	border: 1px solid rgba(255, 255, 255, 0.1);
	/* Thin white border for edges */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 12px 16px;
	border-radius: 12px;
	/* Softer rectangle, not a full pill */
	transition: all 0.3s ease;
}

.modern-card:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(0, 229, 255, 0.4);
	transform: translateY(-2px);
}

.icon-bubble {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: rgba(0, 229, 255, 0.15);
	color: #00e5ff;
	border-radius: 8px;
	font-size: 0.9rem;
}

.card-text {
	color: #ffffff;
	font-weight: 500;
	font-size: 0.95rem;
}

/* --- Premium Tactile Button --- */
.btn-premium-cyan {
	display: inline-flex;
	align-items: center;
	padding: 16px 36px;
	font-size: 1.1rem;
	font-weight: 700;
	color: #050b14;
	/* Dark navy text for high contrast */
	background: linear-gradient(135deg, #00e5ff, #00b4d8);
	/* Gradient for depth */
	border-radius: 50px;
	text-decoration: none;
	box-shadow: 0 4px 20px rgba(0, 229, 255, 0.3);
	/* Soft glowing drop shadow */
	transition: all 0.3s ease;
	border: none;
}

.btn-premium-cyan:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 25px rgba(0, 229, 255, 0.5);
	color: #050b14;
	filter: brightness(1.1);
}

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

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

/* --- Background Continuity --- */
.ds-matrix-pricing {
	background-color: #0d1636;
}

/* --- Table Wrapper & Basic Styles --- */
.matrix-table-wrapper {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 15px;
	/* Reduced from 20px */
	overflow-x: auto;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.matrix-table th {
	color: #cbd5e1;
	font-size: 0.8rem;
	/* Reduced from 0.85rem */
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 12px 15px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.matrix-table td {
	padding: 15px;
	/* Reduced from 20px */
	vertical-align: middle;
	border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.matrix-table tr:last-child td {
	border-bottom: none;
}

/* --- Interactive Rows --- */
.server-row {
	transition: background 0.3s ease, transform 0.3s ease;
	border-radius: 12px;
}

.server-row:hover {
	background: rgba(0, 229, 255, 0.04);
}

.server-row:hover td:first-child {
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}

.server-row:hover td:last-child {
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}

/* --- Typography within the Table --- */
.matrix-subtext {
	font-size: 0.8rem;
	color: #94a3b8;
}

.matrix-spec {
	color: #e2e8f0;
	font-size: 0.9rem;
	font-weight: 500;
}

.price-value {
	color: #00e5ff;
	font-weight: 800;
}

.price-mo {
	font-size: 0.85rem;
}

.strike-price {
	font-size: 0.8rem;
}

/* --- Status Dots --- */
.status-pulse {
	width: 10px;
	height: 10px;
	background-color: #10b981;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
	animation: pulse-green 2s infinite;
}

.status-dot-standard {
	width: 10px;
	height: 10px;
	background-color: #3b82f6;
	border-radius: 50%;
}

@keyframes pulse-green {
	0% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
	}
}

/* --- Delivery Badges --- */
.delivery-badge {
	padding: 4px 10px;
	border-radius: 50px;
	font-size: 0.75rem;
	font-weight: 600;
}

.delivery-instant {
	background: rgba(16, 185, 129, 0.1);
	color: #10b981;
	border: 1px solid rgba(16, 185, 129, 0.2);
}

.delivery-standard {
	background: rgba(59, 130, 246, 0.1);
	color: #60a5fa;
	border: 1px solid rgba(59, 130, 246, 0.2);
}

.btn-matrix-deploy {
	display: inline-block;
	padding: 6px 20px;
	background: transparent;
	border: 1px solid #00e5ff;
	color: #00e5ff;
	border-radius: 50px;
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
	transition: all 0.3s ease;
}

.btn-matrix-deploy:hover {
	background: #00e5ff;
	color: #050b14;
	box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}

/* --- Premium/Light Mode Adjustments --- */
.ds-matrix-pricing-light {
	background-color: #F8FAFC;
}

.text-dark-navy {
	color: #0F172A;
}

.text-muted-dark {
	color: #64748B;
	font-size: 1rem;
}

.text-primary-blue {
	color: #0056D2;
}

.matrix-table-light-wrapper {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
	overflow-x: auto;
}

/* --- REDUCED SPACE HERE --- */
.premium-table-wrapper {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
	overflow: hidden;
}

.premium-server-table {
	border-collapse: collapse;
	table-layout: auto;
	/* Allow columns to shrink to content */
}

.premium-server-table th {
	background: #F8FAFC;
	color: #64748B;
	font-size: 0.75rem;
	/* Smaller headers */
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 12px 10px;
	/* Reduced padding */
	border-bottom: 2px solid #E2E8F0;
}

.premium-server-table td {
	padding: 14px 10px;
	/* Significantly reduced from 24px 20px */
	vertical-align: middle;
}

/* Reduce space specifically between 1st and 2nd column */
.premium-server-table td:first-child {
	padding-left: 25px;
	/* Increase this value (e.g., 20px to 30px) until it looks right */
	padding-right: 5px;
}

.premium-server-table td:nth-child(2) {
	padding-left: 10px !important;
	/* Forces the cell content to the left */
	text-align: left !important;
	/* Pulls the '4 GB' text toward the CPU */
	width: 100px;
}

/* 3. Ensure headers match the alignment */
.premium-server-table th:nth-child(2) {
	text-align: left !important;
	padding-left: 10px;
}

.server-row-pro {
	border-bottom: 1px solid #E2E8F0;
	transition: all 0.2s ease-in-out;
}

.server-row-pro:hover {
	background: #F8FAFC;
	box-shadow: inset 4px 0 0 #0056D2;
}

.delivery-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.65rem;
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: 4px;
	letter-spacing: 0.5px;
}

.tag-instant {
	background: #ECFDF5;
	color: #059669;
}

.tag-standard {
	background: #EFF6FF;
	color: #2563EB;
}

.cpu-title {
	color: #0F172A;
	font-size: 0.95rem;
	/* Reduced from 1.1rem */
	font-weight: 800;
	margin: 0 0 2px 0;
}

.cpu-spec,
.spec-small {
	color: #64748B;
	font-size: 0.8rem;
	display: block;
}

.spec-big {
	color: #0F172A;
	font-size: 0.95rem;
	/* Reduced from 1.1rem */
	font-weight: 700;
	margin-bottom: 0px;
}

.flag-icons {
	font-size: 1.4rem;
	/* Reduced from 1.8rem */
	line-height: 1;
	margin-bottom: 2px;
}

.price-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.strike-price-pro {
	font-size: 0.75rem;
	color: #94A3B8;
	text-decoration: line-through;
	margin-bottom: -2px;
}

.current-price-pro {
	color: #0F172A;
	font-size: 1.2rem;
	/* Reduced from 1.5rem */
	font-weight: 800;
}

.mo-text {
	font-size: 0.8rem;
	color: #64748B;
}

.btn-add-cart {
	background: #0056D2;
	color: #FFFFFF;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	padding: 6px 16px;
	/* Reduced from 10px 24px */
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	border: 1px solid #0056D2;
	white-space: nowrap;
}

.btn-add-cart:hover {
	background: #0043A8;
	transform: translateY(-1px);
}

/* --- Enhanced Filter Bar Styling --- */
.matrix-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	background: #FFFFFF;
	padding: 20px;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	align-items: flex-end;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	/* Softer shadow */
}

.filter-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-width: 130px;
}

.filter-group label {
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	color: #475569;
	/* Darker for better readability */
	letter-spacing: 0.5px;
}

.filter-group select {
	appearance: none;
	/* Removes the clunky default browser arrow */
	-webkit-appearance: none;
	-moz-appearance: none;

	background-color: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	/* Smoother luxury rounding */
	padding: 10px 36px 10px 14px;
	/* Space for the custom chevron */

	font-size: 0.85rem;
	font-weight: 600;
	color: #334155;
	cursor: pointer;
	width: 100%;

	/* Luxury Transition: Snappy but smooth */
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

	/* Custom High-End Chevron (Thicker Blue Stroke) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230056D2' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;

	/* Subtle base shadow */
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.filter-group select:hover {
	border-color: #CBD5E1;
	background-color: #FDFDFD;
	transform: translateY(-1px);
}

/* Focus State: The Luxury "Glow" */
.filter-group select:focus {
	outline: none;
	border-color: #0056D2;
	background-color: #FFFFFF;
	/* Soft premium blue shadow */
	box-shadow: 0 0 0 4px rgba(0, 86, 210, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
	transform: translateY(-1px);
}

/* Luxury Label Refinement */
.filter-group label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #94A3B8;
	margin-bottom: 6px;
	letter-spacing: 1px;
	/* Elegant spacing */
	display: flex;
	align-items: center;
}

.filter-group label i {
	color: #0056D2;
	/* Accent color for the icon */
	font-size: 0.8rem;
}

.filter-group select option {
	padding: 10px;
	background: #FFFFFF;
	color: #1E293B;
}

/* --- Multi-Currency Switcher --- */
.currency-switch-enhanced {
	display: flex;
	background: #F1F5F9;
	padding: 4px;
	border-radius: 8px;
	border: 1px solid #E2E8F0;
}

.currency-switch-enhanced button {
	border: none;
	background: transparent;
	padding: 6px 8px;
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 6px;
	cursor: pointer;
	color: #64748B;
	transition: all 0.2s ease;
	flex: 1;
	white-space: nowrap;
}

.currency-switch-enhanced button.active {
	background: #0056D2;
	/* Solid primary color */
	color: #FFFFFF;
	box-shadow: 0 2px 6px rgba(0, 86, 210, 0.3);
}

.currency-switch-enhanced button:hover:not(.active) {
	background: rgba(0, 86, 210, 0.05);
	color: #0056D2;
}

.filter-group.currency-group {
	min-width: 220px;
	/* Increased to fit 4 buttons */
}

/* =========================================
				MOBILE RESPONSIVE CARD LAYOUT (BULLETPROOF FLEXBOX)
				========================================= */
@media (max-width: 991px) {

	/* 1. Obliterate Native Table Behavior */
	.ds-matrix-pricing-light .premium-table-wrapper {
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	.ds-matrix-pricing-light .premium-server-table,
	.ds-matrix-pricing-light .premium-server-table tbody {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		gap: 20px !important;
	}

	.ds-matrix-pricing-light .premium-server-table thead {
		display: none !important;
	}

	/* 2. Build the Clean Flex Card Container */
	.ds-matrix-pricing-light .server-row-pro {
		display: flex !important;
		flex-wrap: wrap !important;
		flex-direction: row !important;
		background: #FFFFFF !important;
		border: 1px solid #E2E8F0 !important;
		border-radius: 12px !important;
		padding: 24px !important;
		margin: 0 !important;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
		position: relative !important;
		/* Critical for flag positioning */
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* 3. Reset all individual cells to clean flex blocks */
	.ds-matrix-pricing-light .premium-server-table td {
		display: flex !important;
		flex-direction: column !important;
		border: none !important;
		padding: 0 !important;
		background: transparent !important;
		text-align: left !important;
		box-sizing: border-box !important;
		width: 100% !important;
		/* Default width */
	}

	/* 4. Top Header Section (CPU & Tags) */
	.ds-matrix-pricing-light .td-cpu {
		width: 100% !important;
		order: 1 !important;
		padding-right: 40px !important;
		/* Safety margin for the flag */
		border-bottom: 1px solid #F1F5F9 !important;
		padding-bottom: 16px !important;
		margin-bottom: 16px !important;
		align-items: flex-start !important;
	}

	.ds-matrix-pricing-light .delivery-tag {
		margin-bottom: 12px !important;
		display: inline-flex !important;
	}

	.ds-matrix-pricing-light .cpu-title {
		font-size: 1.25rem !important;
		margin-bottom: 4px !important;
		color: #0F172A !important;
	}

	.ds-matrix-pricing-light .cpu-spec {
		font-size: 0.85rem !important;
		color: #64748B !important;
		margin-bottom: 0 !important;
	}

	/* 5. Flag Position (Hard Anchored to Top Right) */
	/* 5. Flag Position (Fixed for Windows Text Fallback) */
	.ds-matrix-pricing-light .td-location {
		position: absolute !important;
		top: 24px !important;
		right: 24px !important;
		width: auto !important;
		/* Removed strict 30px width */
		height: auto !important;
		/* Removed strict 30px height to prevent clipping */
		display: block !important;
		order: 0 !important;
	}

	.ds-matrix-pricing-light .td-location .spec-small {
		display: none !important;
	}

	.ds-matrix-pricing-light .flag-icons {
		font-size: 1.5rem !important;
		margin: 0 !important;
		line-height: normal !important;
		/* Normal line height stops the top getting chopped off */
		display: block !important;
	}

	/* 6. Modern Specs Layout */
	.ds-matrix-pricing-light .td-spec {
		flex-direction: column-reverse !important;
		/* Puts Label on top of Value */
		justify-content: flex-start !important;
		margin-bottom: 16px !important;
	}

	/* 50/50 Split for RAM and Storage */
	.ds-matrix-pricing-light .td-spec:nth-child(2) {
		width: 50% !important;
		order: 3 !important;
		padding-right: 10px !important;
	}

	.ds-matrix-pricing-light .td-spec:nth-child(3) {
		width: 50% !important;
		order: 4 !important;
		padding-left: 10px !important;
	}

	/* Network spans full width below them */
	.ds-matrix-pricing-light .td-spec:nth-child(4) {
		width: 100% !important;
		order: 5 !important;
		margin-bottom: 0 !important;
		/* Remove bottom margin before the footer */
	}

	.ds-matrix-pricing-light .td-spec .spec-small {
		font-size: 0.65rem !important;
		text-transform: uppercase;
		font-weight: 700 !important;
		color: #94A3B8 !important;
		margin-bottom: 4px !important;
		letter-spacing: 0.5px !important;
	}

	.ds-matrix-pricing-light .td-spec .spec-big {
		font-size: 0.95rem !important;
		color: #0F172A !important;
		font-weight: 800 !important;
	}

	/* 7. Bottom Price & Action Row */
	.ds-matrix-pricing-light .td-action {
		width: 100% !important;
		order: 6 !important;
		border-top: 1px solid #F1F5F9 !important;
		padding-top: 20px !important;
		margin-top: 20px !important;
	}

	.ds-matrix-pricing-light .price-stack {
		display: flex !important;
		flex-direction: row !important;
		/* Side-by-side */
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
	}

	.ds-matrix-pricing-light .strike-price-pro {
		display: none !important;
	}

	/* Hidden on mobile */
	.ds-matrix-pricing-light .current-price-pro {
		font-size: 1.4rem !important;
		margin: 0 !important;
		color: #0F172A !important;
		font-weight: 800 !important;
	}

	.ds-matrix-pricing-light .btn-add-cart {
		padding: 10px 20px !important;
		font-size: 0.95rem !important;
		width: auto !important;
		margin: 0 !important;
	}
}

/* =========================================
				WHY CHOOSE OWRBIT - FEATURE CARDS
				========================================= */

/* The overall section background (Optional: adjust if you already have a global dark mode) */
.ds-about {
	background: background: #F8FAFC !important;
}

/* Base Card Styling */
.ds-about-column {
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid rgba(255, 255, 255, 0.05);
	/* Very subtle border */
	position: relative;
	overflow: hidden;
	z-index: 1;
	/* Soft shadow to lift it off the background */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* The Hover Effect: Lift and Glow */
.ds-about-column:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
	border-color: rgba(0, 86, 210, 0.3);
	/* Subtle Owrbit blue border on hover */
}

/* The Icon Wrapper (Matches your new pricing table tags) */
.ds-about-column .icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: rgba(0, 86, 210, 0.1);
	/* Soft blue background */
	color: #0056D2;
	/* Owrbit primary blue */
	border-radius: 12px;
	/* Modern square-round shape */
	transition: all 0.3s ease;
}

/* Make the icon slightly bigger */
.ds-about-column .icon-wrapper iconify-icon {
	font-size: 1.5rem;
}

/* Icon Animation on Hover */
.ds-about-column:hover .icon-wrapper {
	background: #0056D2;
	color: #FFFFFF;
	transform: scale(1.05);
}

/* Fix for Iconify icon visibility on hover */
.ds-about-column:hover .icon-wrapper iconify-icon,
.ds-feature-item:hover .icon-wrapper iconify-icon {
	color: #FFFFFF !important;
}

/* Typography Adjustments */
.ds-about-column h4 {
	font-size: 1.1rem;
	font-weight: 800;
	color: #0F172A;
	letter-spacing: -0.3px;
}

.ds-about-column p.text-muted {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #64748B !important;
	/* Forces the color to match the luxury gray */
}

/* Optional: Add a subtle gradient accent line to the bottom of the card */
.ds-about-column::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 4px;
	background: linear-gradient(90deg, #0056D2, #00e5ff);
	transition: width 0.4s ease;
	border-radius: 0 0 10px 10px;
}

.ds-about-column:hover::after {
	width: 100%;
}

/* =========================================
				PREMIUM ADVANTAGES GRID (LUXURY SAAS)
				========================================= */

/* Ensure the section background provides contrast for the white cards */
.ds-feature {
	background-color: #F8FAFC !important;
}

/* Header Styling */
.ds-feature .section-title h2 {
	font-weight: 800;
	color: #0F172A;
	letter-spacing: -0.5px;
}

.ds-feature .section-title p {
	color: #64748B;
	font-size: 1.1rem;
}

/* Base Card Styling */
.ds-feature-item {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 16px !important;
	padding: 32px 24px !important;
	/* Generous breathing room */
	padding-top: 20px !important;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
	position: relative;
	overflow: hidden;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Clean left-alignment */
}

/* The Hover Effect: Lift and Soft Blue Glow */
.ds-feature-item:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 86, 210, 0.08) !important;
	border-color: rgba(0, 86, 210, 0.15) !important;
}

/* The Modern Icon Wrapper */
.ds-feature-item .icon-wrapper {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 56px !important;
	height: 56px !important;
	background: rgba(0, 86, 210, 0.06);
	/* Soft blue tint */
	color: #0056D2 !important;
	border-radius: 14px !important;
	/* Modern squircle shape */
	margin-bottom: 12px !important;
	transition: all 0.4s ease;
}

/* Force all Iconify icons to uniform size */
.ds-feature-item .icon-wrapper iconify-icon {
	font-size: 28px !important;
	width: auto !important;
	height: auto !important;
	transition: all 0.4s ease;
}

/* Icon Animation on Card Hover */
.ds-feature-item:hover .icon-wrapper {
	background: #0056D2;
	color: #FFFFFF !important;
	transform: scale(1.05) rotate(-5deg);
	/* Playful luxury tilt */
}

/* Crisp Typography */
.ds-feature-item h5 {
	font-size: 1.15rem;
	font-weight: 800;
	color: #0F172A;
	margin-bottom: 8px !important;
	line-height: 1.4;
}

.ds-feature-item p {
	font-size: 0.9rem;
	color: #64748B !important;
	line-height: 1.65;
	margin: 0 !important;
}

/* The Signature SaaS Accent Line on Hover */
.ds-feature-item::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 4px;
	background: linear-gradient(90deg, #0056D2, #00e5ff);
	transition: width 0.4s ease;
}

.ds-feature-item:hover::after {
	width: 100%;
}

/* This targets the icon wrapper specifically in this section */
.ds-feature-item .icon-wrapper {
	margin-bottom: 0 !important;
	/* Force remove bottom margin from icon */
}

/* This targets the h5 specifically in this section */
.ds-feature-item h5 {
	margin-top: 25px !important;
	/* Minimal gap above the text */
	margin-bottom: 10px !important;
	/* Space between title and description */
}

/* =========================================
		COMPACT PREMIUM CTA (SUPPORT SECTION)
		========================================= */

/* Reduce overall section height */
.ds-cta {
	padding: 60px 0 !important;
	/* Smaller vertical gap */
}

/* Tighten the blue container */
.bg-primary-gradient {
	background: linear-gradient(135deg, #0056D2 0%, #002D70 100%) !important;
	min-height: 350px;
	/* Limits the vertical growth */
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 15px 35px rgba(0, 86, 210, 0.15);
}

/* Reduce Heading and Paragraph scale */
.ds-cta-left h2 {
	font-size: 2.2rem !important;
	/* Smaller, punchier title */
	font-weight: 800;
	margin-bottom: 15px !important;
}

.ds-cta-left p {
	font-size: 0.95rem !important;
	/* More refined text size */
	max-width: 480px;
	margin-bottom: 25px !important;
}

/* Compact Buttons */
.template-btn.primary-btn {
	padding: 12px 28px !important;
	font-size: 0.9rem !important;
}

.cta-phone-btn {
	font-size: 1rem !important;
}

.cta-phone-btn span {
	width: 38px !important;
	height: 38px !important;
}

/* Support Team Image Fix (The "Sizing" Fix) */
.ds-cta-right img {
	max-height: 380px;
	/* Forces the image to stay small */
	width: auto;
	object-fit: contain;
	/* Shifts image down slightly to sit on the bottom edge */
	margin-bottom: -1px;
	filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.2));
}

/* Position shapes so they don't clutter the space */
.cta-rectangle,
.cta-dots {
	transform: scale(0.7);
	/* Shrinks background decorative shapes */
	opacity: 0.2;
}

/* Mobile: Hide image if still too big, or stack neatly */
@media (max-width: 991px) {
	.bg-primary-gradient {
		min-height: auto;
		padding: 40px 20px !important;
	}

	.ds-cta-left h2 {
		font-size: 1.8rem !important;
	}

	.ds-cta-right {
		display: none;
	}

	/* Recommended: Hide image on mobile for speed */
}

/* =========================================
		LUXURY FEEDBACK & TRUST PLATFORMS
		========================================= */

/* Feedback Card Enhancements */
.ds-feedback-single {
	border: 1px solid #E2E8F0 !important;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
	display: flex;
	flex-direction: column;
}

.ds-feedback-single:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0, 86, 210, 0.06) !important;
	border-color: rgba(0, 86, 210, 0.2) !important;
}

/* Client Image Refinement */
.ds-feedback-single .item-top img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid #F1F5F9;
}

.ds-feedback-single h5 {
	font-weight: 800;
	color: #0F172A;
	font-size: 1rem;
}

.ds-feedback-single span {
	font-size: 0.8rem;
	color: #0056D2;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Star Rating and Text spacing */
.item-content p {
	font-style: italic;
	line-height: 1.6;
	font-size: 0.95rem;
}

.item-content img {
	max-width: 90px;
	/* Uniform star size */
	opacity: 0.9;
}

/* Review Platforms Bar Styling */
.review-platforms-wrapper {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.platform-logo {
	height: 24px;
	/* Adjust based on your logo images */
	width: auto;
	filter: grayscale(1);
	opacity: 0.6;
	transition: all 0.3s ease;
}

.platform-link:hover .platform-logo {
	filter: grayscale(0);
	opacity: 1;
	transform: scale(1.05);
}

.letter-spacing-1 {
	letter-spacing: 1px;
}

/* Mobile Fix */
@media (max-width: 768px) {
	.review-platforms-wrapper {
		flex-direction: column;
		text-align: center;
		gap: 20px !important;
	}
}

/* =========================================
		ENTERPRISE INFRASTRUCTURE SECTION
		========================================= */

/* Use a clean white or very light blue background to contrast with the CTA above */
.ds-enterprise {
	background-color: #ffffff !important;
}

.ds-enterprise h2 {
	font-weight: 800;
	color: #0F172A;
	letter-spacing: -0.5px;
	line-height: 1.3;
}

.ds-enterprise p {
	color: #64748B;
	line-height: 1.7;
	font-size: 1.05rem;
}

/* Transform the list into modern horizontal "Spec Strips" */
.ds-enterprise ul li {
	background: #F8FAFC;
	padding: 14px 20px !important;
	border-radius: 10px !important;
	border: 1px solid #E2E8F0 !important;
	margin-bottom: 12px !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex !important;
	align-items: center !important;
}

/* Tactile interaction: slides right and glows on hover */
.ds-enterprise ul li:hover {
	transform: translateX(10px);
	border-color: #0056D2 !important;
	background: #ffffff !important;
	box-shadow: 0 10px 25px rgba(0, 86, 210, 0.06);
}

.ds-enterprise ul li span {
	color: #334155;
	font-size: 0.95rem;
}

.ds-enterprise ul li strong {
	color: #0056D2;
	/* Technical highlight color */
}

/* Infrastructure Image Styling */
.ds-enterprise-right {
	position: relative;
	padding: 20px;
}

/* Adds a soft technical "radar" glow behind the globe/map */
.ds-enterprise-right::before {
	content: '';
	position: absolute;
	width: 70%;
	height: 70%;
	top: 15%;
	left: 15%;
	background: radial-gradient(circle, rgba(0, 86, 210, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
	z-index: 0;
	filter: blur(50px);
}

.ds-enterprise-right img {
	position: relative;
	z-index: 1;
	transition: transform 0.6s ease;
	filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.05));
}

.ds-enterprise:hover .ds-enterprise-right img {
	transform: translateY(-10px) scale(1.03);
}

/* Mobile Styling */
@media (max-width: 991px) {
	.ds-enterprise {
		text-align: center;
		padding: 60px 0 !important;
	}

	.ds-enterprise ul li {
		justify-content: flex-start;
		/* Keeps icons aligned left inside centered cards */
		text-align: left;
	}

	.ds-enterprise-right {
		margin-top: 40px;
	}
}