/* Custom Variables */
:root {
	--primary: #166ea2;
	--primary-hover: #2563eb;
	--secondary: #64748b;
	--success: #000;
	--gradient-primary: #166ea2;
	--shadow-elegant: 0 10px 30px -10px rgba(59, 130, 246, 0.3);
	--shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hero Section */
.hero-section {
	min-height: 100vh;
	background: #ffffff;
	position: relative;
}

.success-section {
	min-height: 100vh;
	background: #ffffff;
	position: relative;
}

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

/* Custom Badge */
.badge-secondary {
	background-color: #f1f5f9;
	color: #344256;
	padding: 0.5rem;
	font-size: 13px !important;
	border-radius: 50px;
	font-weight: 600;
}
span {
	font-weight: 600;
}
.fw-semibold {
	font-weight: 600;
}
.form-label {
	font-weight: 600;
}
/* Card Enhancements */
.card {
	border: none;
	border-radius: 0.5rem;
	transition: var(--transition-smooth);
	box-shadow: var(--shadow-card);
}

.shadow-xl {
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
		0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
		0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
		0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
		0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow-sm {
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.border-call {
	border-width: 1px;
	border: 1px solid #e5e7eb;
}
/* Button Enhancements */
.btn-primary {
	background: #000;
	border: none;
	font-weight: 600;
	padding: 0.75rem 1.5rem;
}

/* Form Enhancements */
.form-control,
.form-select {
	border-radius: 12px;
	border: 2px solid #e2e8f0;
	padding: 0.75rem 1rem;
	transition: var(--transition-smooth);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.form-control-lg {
	padding: 1rem 1.25rem;
	font-size: 1.1rem;
}

/* Option Cards */
.option-card {
	cursor: pointer;
	transition: var(--transition-smooth);
	border: 2px solid #e2e8f0;
}

.option-card:hover {
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
		0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
		0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.option-card.selected {
	border-color: var(--primary);
	background-color: rgba(59, 130, 246, 0.05);
}

.icon-wrapper {
	width: 50px;
	height: 50px;
	background: #166ea21a;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	color: var(--primary);
	padding: 0.75rem;
}
.bi {
	-webkit-text-stroke: 0.5px;
}
/* Success Icon */
.success-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: var(--success);
}

/* Timeline */
.timeline {
	position: relative;
}

.timeline-item {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
	align-items: flex-start;
}

.timeline-number {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 0.875rem;
	flex-shrink: 0;
	margin-top: 0.125rem;
}

.timeline-number.active {
	background: var(--primary);
	color: white;
}

.timeline-number:not(.active) {
	background: #166ea20d;
	color: #64748b;
}

/* Loading State */
.btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.hero-section {
		padding-top: 2rem;
	}

	.display-3 {
		font-size: 2.5rem;
	}

	.card-body {
		padding: 2rem 1.5rem;
	}

	.btn-lg {
		padding: 0.875rem 1.5rem;
	}
}

/* Animation Classes */
.fade-in {
	animation: fadeIn 0.6s ease-out;
}

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

/* Toast Styling */
.toast {
	border: none;
	border-radius: 12px;
	box-shadow: var(--shadow-elegant);
}

/* Sticky Positioning */
@media (min-width: 992px) {
	.sticky-top {
		position: sticky !important;
		top: 2rem !important;
	}
}

/* Utilities */
.text-primary {
	color: var(--primary) !important;
}

.bg-primary {
	background-color: var(--primary) !important;
}

.border-primary {
	border-color: var(--primary) !important;
}

.text-success {
	color: var(--success) !important;
}
.back-phone {
	background-color: #166ea21a;
	padding: 1rem;
	border-radius: 50%;
}
.bg-lightblueshade {
	background-color: #166ea20d;
}

.border-blueshade {
	border: 1px solid #e2e8f0;
}
.btn-outline-blue {
	border: 1px solid #e2e8f0;
}
.btn-outline-blue:hover {
	background-color: #166ea20d;
	border: 1px solid #e2e8f0;
}
.btn.btn-link.text-decoration-none {
	margin: 0 10px;
	padding: 0 20px;
	height: 30px;
	color: #333;
	font-size: 13px !important;
	box-shadow: none;
}
.btn.btn-link.text-decoration-none:hover {
	color: #166ea2;
	background-color: #edf7fd;
	box-shadow: none;
}
.iti--separate-dial-code input {
	border-left: none;
	border-radius: 0.375rem 0.375rem !important;
	border: 1px solid #ced4da;
	padding: 0.375rem 1rem;
	height: 50px;
	width: 100%;
	box-sizing: border-box;
}

.iti--separate-dial-code .iti__selected-flag {
	background-color: transparent;
	border: none;
	padding: 0.375rem 0.75rem;
	height: 50px;
	display: flex;
	align-items: center;
	min-width: 80px;
}
.iti__flag-container {
	border-radius: 0.375rem 0 0 0.375rem;
	border: 1px solid #ced4da;
	border-right: none;
	background-color: #f8f9fa;
}
.form-control:focus,
.form-select:focus {
	border-color: var(--primary) !important;
	box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}
.py-165-50 {
	padding-top: 90px !important;
	padding-bottom: 50px;
}