:root {
	--primary-colour: #9C6322;
	--primary-colour-hover: #5d4634;
	--secondary-colour: #d4a752;
	--secondary-colour-hover: #e2be7a;
	--neutral-colour: #aaaaaa;
	--light-navy: #e6ebf5;
	--default-font-size: 16px;
	--light-gray: #4c4c4c;
	--success-colour: #55d638;
	--success-colour-hover: #58e438;
	--green-colour: #008000;
	--green-colour-hover: #009e00;

	--bs-amber-50: #fffbeb;
	--bs-amber-100: #fef3c7;
	--bs-amber-200: #fde68a;
	--bs-amber-400: #fbbf24;
	--bs-amber-500: #f59e0b;
	--bs-amber-600: #d97706;
	--bs-amber-900: #78350f;
	--bs-slate-50: #f8fafc;
	--bs-slate-100: #f1f5f9;
	--bs-slate-200: #e2e8f0;
	--bs-slate-300: #cbd5e1;
	--bs-slate-400: #94a3b8;
	--bs-slate-500: #64748b;
	--bs-slate-600: #475569;
	--bs-slate-800: #0f172a;
	--bs-emerald-50: #ecfdf5;
	--bs-emerald-100: #d1fae5;
	--bs-emerald-200: #a7f3d0;
	--bs-emerald-300: #6ee7b7;
	--bs-emerald-400: #34d399;
	--bs-emerald-500: #10b981;
	--bs-emerald-600: #059669;
	--bs-emerald-700: #047857;
	--bs-indigo-50: #eef2ff;
	--bs-indigo-400: #818cf8;
	--bs-indigo-500: #6366f1;
	--bs-indigo-600: #4f46e5;
	--bs-pink-50: #fdf2f8;
	--bs-pink-400: #f472b6;
	--bs-pink-500: #ec4899;
	--bs-pink-600: #db2777;
	--bs-blue-50: #eff6ff;
	--bs-blue-400: #60a5fa;
	--bs-blue-500: #3b82f6;
	--bs-blue-600: #2563eb;
	--bs-red-50: #fef2f2;
	--bs-red-400: #f87171;
	--bs-red-500: #ef4444;
	--bs-red-600: #dc2626;

	/* DYNAMIC COLOR CLASSES */
	.bg-emerald-500 {
		background-color: var(--bs-emerald-500) !important;
	}

	.text-emerald-500 {
		color: var(--bs-emerald-500) !important;
	}

	.shadow-emerald-500-30 {
		box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3) !important;
	}

	.bg-indigo-500 {
		background-color: var(--bs-indigo-500) !important;
	}

	.text-indigo-500 {
		color: var(--bs-indigo-500) !important;
	}

	.shadow-indigo-500-30 {
		box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3) !important;
	}

	.bg-pink-500 {
		background-color: var(--bs-pink-500) !important;
	}

	.text-pink-500 {
		color: var(--bs-pink-500) !important;
	}

	.shadow-pink-500-30 {
		box-shadow: 0 10px 15px -3px rgba(236, 72, 153, 0.3) !important;
	}

	.bg-amber-500 {
		background-color: var(--bs-amber-500) !important;
	}

	.text-amber-500 {
		color: var(--bs-amber-500) !important;
	}

	.shadow-amber-500-30 {
		box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.3) !important;
	}

	.bg-blue-500 {
		background-color: var(--bs-blue-500) !important;
	}

	.text-blue-500 {
		color: var(--bs-blue-500) !important;
	}

	.shadow-blue-500-30 {
		box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3) !important;
	}

	.bg-red-500 {
		background-color: var(--bs-red-500) !important;
	}

	.text-red-500 {
		color: var(--bs-red-500) !important;
	}

	.shadow-red-500-30 {
		box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3) !important;
	}

	/* Helpers */
	.text-amber-600 {
		color: var(--bs-amber-600);
	}

	.text-slate-800 {
		color: var(--bs-slate-800);
	}

	.text-slate-500 {
		color: var(--bs-slate-500);
	}

	.text-slate-400 {
		color: var(--bs-slate-400);
	}

	/* ✨ RGB versions (Updated to match hex) */
	--primary-rgb: 74,
	55,
	40;
	--primary-hover-rgb: 93,
	70,
	52;
	--secondary-rgb: 212,
	167,
	82;
	--secondary-hover-rgb: 226,
	190,
	122;
	--neutral-rgb: 170,
	170,
	170;
	--light-navy-rgb: 230,
	235,
	245;
	--light-gray-rgb: 76,
	76,
	76;
	--success-rgb: 85,
	214,
	56;
	--success-hover-rgb: 88,
	228,
	56;
	--green-rgb: 0,
	128,
	0;
	--green-hover-rgb: 0,
	158,
	0;

	--swiper-navigation-size: 20px;
	--swiper-navigation-padding: 18px;
	--swiper-navigation-total-width: calc(var(--swiper-navigation-size) + calc(var(--swiper-navigation-padding) * 2));
	--swiper-pagination-color: #c6c6c6;
	--swiper-pagination-bullet-inactive-color: #d4d4d480;
	--swiper-pagination-bullet-inactive-opacity: 1;

	--progress-step-width: 35px;
	--bs-border-width: 2px;

	/* font size (default: 16px) */
	--fs-default: 1rem;
	--fs-900: 4.5rem;
	/* 72px */
	--fs-800: 3.5rem;
	/* 56px */
	--fs-700: 2rem;
	/* 32px */
	--fs-600: 1.75rem;
	/* 28px */
	--fs-550: 1.5rem;
	/* 24px */
	--fs-500: 1.25rem;
	/* 20px */
	--fs-400: 1.125rem;
	/* 18px */
	--fs-300: 1rem;
	/* 16px */
	--fs-200: 0.875rem;
	/* 14px */
	--fs-100: 0.75rem;
	/* 12px */
	--fs-000: 0.75rem;
	/* 9px */

	/* font weight */
	--fw-900: 900;
	--fw-700: 700;
	--fw-600: 600;
	--fw-normal: normal;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("/fonts/InstrumentSans/InstrumentSans-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("/fonts/InstrumentSans/InstrumentSans-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("/fonts/InstrumentSans/InstrumentSans-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("/fonts/InstrumentSans/InstrumentSans-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("/fonts/InstrumentSans/InstrumentSans-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("/fonts/InstrumentSans/InstrumentSans-MediumItalic.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("/fonts/InstrumentSans/InstrumentSans-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("/fonts/InstrumentSans/InstrumentSans-SemiBoldItalic.woff2") format("woff2");
	font-weight: 600;
	font-style: italic;
}

/* ============================= */
/* ========== GENERAL ========== */
/* ============================= */

body {
    font-size: var(--fs-default) !important;
    font-family: 'Rethink Sans', sans-serif !important;
    background-color: var(--bs-slate-50);
    color: #0f172a;
}

.w-60 {
	width: 60% !important;
}

.text-justify {
	text-align: justify !important;
}

.cursor-pointer {
	cursor: pointer;
}

.form-select {
	font-size: var(--default-font-size) !important;
}

.fs-7 {
	font-size: 0.75rem !important;
}

.fs-sm {
	font-size: 0.875rem !important;
}

.form-control::placeholder, 
.form-select::placeholder,
.form-control-custom::placeholder {
    color: var(--bs-slate-400) !important;
    opacity: 0.8 !important;
    font-weight: 400 !important;
}

.form-control, 
.form-select {
    color: var(--bs-slate-800) !important;
    font-weight: 500 !important;
    border-color: var(--bs-slate-200);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus, 
.form-select:focus {
    border-color: var(--bs-amber-400);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
}

.checkbox-card-wrapper {
    border: 2px solid var(--bs-slate-200);
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.checkbox-card-wrapper:hover {
    background: var(--bs-slate-50);
}
.checkbox-card-wrapper:has(input:checked) {
    border-color: var(--primary-colour);
    background: rgba(var(--primary-rgb), 0.05);
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Upgraded to a frosted glass background so your CI color pops! */
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Boosted z-index to stay above modals */
}

.loading-text {
    color: var(--light-navy); /* Uses your CI color (#9C6322) */
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* Smooth animated dots effect */
.loading-dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* Background Colors */
.bg-primary-app {
	background: var(--primary-colour) !important;
}

.bg-secondary-app {
	background: var(--secondary-colour) !important;
}

.bg-app {
	background-color: #f1f3fa;
}

.bg-mesh {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: radial-gradient(at 0% 0%, rgba(251, 191, 36, 0.15) 0px, transparent 50%),
		radial-gradient(at 100% 0%, rgba(245, 158, 11, 0.1) 0px, transparent 50%),
		radial-gradient(at 100% 100%, rgba(217, 119, 6, 0.15) 0px, transparent 50%),
		radial-gradient(at 0% 100%, rgba(252, 211, 77, 0.1) 0px, transparent 50%);
	pointer-events: none;
}

.footer-anchor {
	color: white !important;
}

.card-header-app {
	background: #f0f4f8 !important;
	font-size: 18px !important;
	padding: 15px !important;
	font-weight: 600 !important;
	border: 0 !important;
}

.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

#lottie-container {
	width: 450px;
	/* Adjust as needed */
	height: 450px;
	/* Adjust as needed */
}

#lottie-container svg {
	width: 100% !important;
	height: 100% !important;
}

.no-scroll {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

.vh-inner {
	height: calc(var(--vh, 1vh) * 100);
	height: 100dvh;
}

/* ========================== */
/* ========== FONT ========== */
/* ========================== */

.fs-900 {
	font-size: var(--fs-900);
}

.fs-800 {
	font-size: var(--fs-800);
}

.fs-700 {
	font-size: var(--fs-700);
}

.fs-600 {
	font-size: var(--fs-600);
}

.fs-550 {
	font-size: var(--fs-550);
}

.fs-500 {
	font-size: var(--fs-500);
}

.fs-400 {
	font-size: var(--fs-400);
}

.fs-300 {
	font-size: var(--fs-300);
}

.fs-200 {
	font-size: var(--fs-200);
}

.fs-100 {
	font-size: var(--fs-100);
}

.fw-900 {
	font-weight: var(--fw-900);
}

.fw-700 {
	font-weight: var(--fw-700);
}

.fw-600 {
	font-weight: var(--fw-600);
}

.fw-normal {
	font-weight: var(--fw-normal);
}

.fc-p-color {
	color: var(--primary-colour);
}

.fc-s-color {
	color: var(--secondary-colour);
}

/* ========================== */
/* ========== NAV ========== */
/* ========================== */

.img-logo {
	max-width: 160px;
}

.nav-lang-pill {
	background: #ffffff;
	border: 1px solid var(--bs-slate-200);
	border-radius: 50rem;
	padding: 0.4rem 1rem 0.4rem 0.85rem;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
    color: var(--bs-slate-600);
}

.nav-lang-pill:hover,
.nav-lang-pill[aria-expanded="true"] {
	background: var(--bs-slate-50);
	border-color: var(--bs-amber-300);
	box-shadow: 0 6px 15px rgba(245, 158, 11, 0.1);
	transform: translateY(-1px);
}

.nav-lang-pill::after {
	display: none !important;
}

.nav-lang-pill[aria-expanded="true"] .fa-chevron-down {
	transform: rotate(-180deg);
}

.transition-transform {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-dropdown-menu {
	position: absolute !important;
	top: 100% !important;
	right: 0 !important;
	left: auto !important;

	/* Existing Styles */
	border: 1px solid var(--bs-slate-200);
	border-radius: 1rem;
	padding: 0.5rem;
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	min-width: 140px;
	margin-top: 0.5rem !important;
	animation: fadeInDropdown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInDropdown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.premium-dropdown-menu .dropdown-item {
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--bs-slate-600);
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	transition: all 0.2s;
	background-color: transparent;
	border: none;
}

.premium-dropdown-menu .dropdown-item:hover,
.premium-dropdown-menu .dropdown-item:focus {
	background: var(--bs-slate-50);
	color: var(--bs-slate-900);
}

.premium-dropdown-menu .dropdown-item.active,
.premium-dropdown-menu .dropdown-item:active {
	background: var(--bs-amber-50);
	color: var(--bs-amber-600);
}

.custom-vh {
	min-height: calc(100vh - 110px);
}

/* ================================================== */
/* ========== Header Policy Expiry Styling ========== */
/* ================================================== */

#countdown-expiry-sticky {
	top: 70px;
	z-index: 1020;
	background-color: #f0f4f8 !important;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.quotation-alert-image {
	max-width: 30px;
	margin-right: 0.7rem;
	animation: pulse-scale 1.5s infinite ease-in-out;
}

/* Animation keyframes */
@keyframes pulse-scale {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.3);
	}

	/* bigger */
	100% {
		transform: scale(1);
	}

	/* back to normal */
}

.countdown-expiry-content {
	display: flex;
	padding: 0.75rem 0 !important;
	background-color: #f0f4f8 !important;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 90%;
	margin: 0 auto;
}

.countdown-boxes {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.countdown-item {
	display: block;
	align-items: center;
	gap: 5px;
	/* space between box and label */
}

.countdown-box {
	background: var(--secondary-colour);
	border-radius: 4px;
	height: 30px;
	width: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.countdown-number {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--light-navy);
}

.countdown-label {
	font-size: 0.6rem;
	color: #666;
	margin-top: 0.3rem;
	text-transform: uppercase;
	font-weight: 600;
}

.countdown-seperator {
	font-size: 20px;
}

/* ============================== */
/* ========== CHECKBOX ========== */
/* ============================== */

.checkbox-mark {
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid #cccccc;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s, border-color 0.15s;
}

.checkbox-input {
	display: none;
}

label.checkbox-box {
	display: inline-flex;
	align-items: flex-start;
	justify-content: flex-end;
	cursor: pointer;
	user-select: none;
	margin-top: 9px;
	align-items: center;
}

.checkbox-mark::after {
	content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20style%3D%22fill%3A%20rgba(255%2C%20255%2C%20255%2C%201)%3Btransform%3A%20%3BmsFilter%3A%3B%22%3E%3Cpath%20d%3D%22m10%2015.586-3.293-3.293-1.414%201.414L10%2018.414l9.707-9.707-1.414-1.414z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
	color: #ffffff;
	height: 1.5rem;
	transform: scale(0);
	transition: transform 0.15s;
}

.checkbox-input {
	display: none;
}

.checkbox-input:checked+.checkbox-mark {
	background: var(--secondary-colour);
	border-color: var(--secondary-colour);
}

.checkbox-input:checked+.checkbox-mark::after {
	transform: scale(1);
}

body {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial;
	background: linear-gradient(180deg, #fbfdff 0%, #f3f7f9 100%);
	color: #0f172a;
}

.group-label {
	font-weight: 600;
	margin-bottom: 10px;
	display: block;
	font-size: 14px;
}

/* Each label acts as a single selectable control */
.nat {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap);
	padding: 20px 12px;
	border-radius: 10px;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s, transform 0.12s;
	margin-bottom: 8px;
	border: var(--bs-border-width) solid var(--bs-border-color);
	font-weight: medium;
}

.nat:has(input[type="radio"]:disabled) {
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.6;
	background-color: var(--bs-secondary-bg, #e9ecef);
	border-color: var(--bs-border-color);
}

.nat>input[type="radio"]:disabled {
	cursor: not-allowed;
}

/* subtle hover/focus states */
.nat:hover {
	background: rgba(var(--secondary-rgb), 0.06);
	transform: translateY(-1px);
}

.nat:focus-within {
	box-shadow: 0 0 0 4px rgba(var(--secondary-rgb), 0.08);
}

/* Hide the native radio/checkbox but keep it accessible */
.nat input[type="radio"],
.nat input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: auto;
}

/* Style the whole card when either radio OR checkbox is checked */
.nat:has(input[type="radio"]:checked),
.nat:has(input[type="checkbox"]:checked) {
	background: rgba(var(--secondary-rgb), 0.1);
	border: 2px solid var(--secondary-colour);
	color: var(--secondary-colour);
	font-weight: 600;
}

/* check icon container — positioned above the control */
.check-icon {
	position: absolute;
	top: -10px;
	/* lifts it above the control */
	left: 50%;
	/* align center */
	transform: translate(-50%, -2px) scale(0);
	transform-origin: center;
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	background: var(--secondary-colour);
	color: white;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1;
	box-shadow: 0 6px 14px rgba(var(--secondary-rgb), 0.18);
	transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.12s;
	opacity: 0;
	pointer-events: none;
}

/* Label text styling */
.label-text {
	font-size: 14px;
	color: var(--light-gray);
}

/* When radio/checkbox is checked: show check icon + change border */
.nat input[type="radio"]:checked+.check-icon,
.nat input[type="checkbox"]:checked+.check-icon {
	transform: translate(-50%, -2px) scale(1);
	opacity: 1;
}

.nat input[type="radio"]:checked+.check-icon+.custom-radio,
.nat input[type="checkbox"]:checked+.check-icon+.custom-radio {
	border-color: rgba(var(--secondary-rgb), 0.95);
	box-shadow: 0 4px 18px rgba(var(--secondary-rgb), 0.07);
}

.nat input[type="radio"]:checked+.check-icon+.custom-radio::after,
.nat input[type="checkbox"]:checked+.check-icon+.custom-radio::after {
	transform: scale(1);
}

/* =================================== */
/* ========== BUTTON / LINK ========== */
/* =================================== */

.modal-link {
	font-weight: 700;
	color: var(--primary-colour);
	cursor: pointer;
}

.modal-link:hover {
	color: var(--secondary-colour);
}

.btn.btn-primary-app {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--primary-colour);
	--bs-btn-border-color: var(--primary-colour);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--primary-colour-hover);
	--bs-btn-hover-border-color: var(--primary-colour-hover);
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--primary-colour-hover);
	--bs-btn-active-border-color: var(--primary-colour-hover);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--primary-colour);
	--bs-btn-disabled-border-color: var(--primary-colour);
}

.btn.btn-secondary-app {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--secondary-colour);
	--bs-btn-border-color: var(--secondary-colour);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--secondary-colour-hover);
	--bs-btn-hover-border-color: var(--secondary-colour-hover);
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--secondary-colour-hover);
	--bs-btn-active-border-color: var(--secondary-colour-hover);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--secondary-colour);
	--bs-btn-disabled-border-color: var(--secondary-colour);
}

.btn.btn-green-app {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--green-colour);
	--bs-btn-border-color: var(--green-colour);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--green-colour-hover);
	--bs-btn-hover-border-color: var(--green-colour-hover);
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--green-colour-hover);
	--bs-btn-active-border-color: var(--green-colour-hover);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--green-colour);
	--bs-btn-disabled-border-color: var(--green-colour);
}

/* Outline variant */
.btn-outline-primary-app {
	color: var(--primary-colour);
	border: 2px solid var(--primary-colour);
	background-color: transparent;
	font-weight: 600;
	transition: all 0.2s ease-in-out;
}

.btn-outline-primary-app:hover,
.btn-outline-primary-app:focus {
	color: #fff;
	background-color: var(--primary-colour-hover);
	border-color: var(--primary-colour-hover);
	box-shadow: 0 0 0 0.2rem rgba(75, 9, 131, 0.15);
}

.btn-outline-primary-app:active {
	background-color: var(--primary-colour);
	border-color: var(--primary-colour);
	color: #fff;
}

.btn-outline-primary-app:disabled {
	color: #999;
	border-color: #ccc;
	background-color: transparent;
	opacity: 0.6;
}

.eye-icon {
	width: 15px;
	height: 15px;
	margin-bottom: 5px;
}

.radio-box {
	border-radius: 0.7rem !important;
	cursor: pointer !important;
}

.radio-box .d-flex {
	gap: 0.8rem;
}

.radio-box input {
	margin-top: 0px;
}

.radio-box>label {
	padding: 16px;
	margin-top: 0px;
}

.radio-box * {
	cursor: pointer !important;
}

.payment-logos {
	max-width: 80px !important;
}

/* =================================== */
/* ========== HERO SECTION ========== */
/* =================================== */

.starter-section {
	background: radial-gradient(at 0% 0%, rgba(251, 191, 36, 0.15) 0px, transparent 50%),
		radial-gradient(at 100% 0%, rgba(245, 158, 11, 0.1) 0px, transparent 50%),
		radial-gradient(at 100% 100%, rgba(217, 119, 6, 0.15) 0px, transparent 50%),
		radial-gradient(at 0% 100%, rgba(252, 211, 77, 0.1) 0px, transparent 50%);
}

.hero-section {
	position: relative;
	overflow: hidden;
	padding: 0 0 8rem 0;
	width: 100%;
}

.hero-content {
	position: relative;
	z-index: 10;
	text-align: center;
	padding: 0 1rem 2rem 1rem;
}

.hero-title {
	font-size: var(--fs-700);
	font-weight: 700;
	color: #2d1654;
	margin-bottom: 0;
	line-height: 1.3;
}

/* Background Circle Image - Moves Left to Right */
.bg-circle {
	position: absolute;
	width: 500px;
	height: 500px;
	top: 35%;
	left: 45%;
	transform: translate(-50%, -50%);
	animation: naturalFloat 20s ease-in-out infinite;
}

.bg-circle img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0.8;
	max-width: 350px;
}

@keyframes naturalFloat {
	0% {
		transform: translate(-50%, -50%) rotate(0deg) scale(1);
	}

	15% {
		transform: translate(-35%, -52%) rotate(3deg) scale(1.04);
	}

	30% {
		transform: translate(-60%, -48%) rotate(-2deg) scale(1.02);
	}

	45% {
		transform: translate(-40%, -54%) rotate(4deg) scale(1.06);
	}

	60% {
		transform: translate(-65%, -50%) rotate(-3deg) scale(1.03);
	}

	75% {
		transform: translate(-45%, -52%) rotate(2deg) scale(1.05);
	}

	90% {
		transform: translate(-55%, -48%) rotate(-1deg) scale(1.02);
	}

	100% {
		transform: translate(-50%, -50%) rotate(0deg) scale(1);
	}
}

/* Sparkle effect for star image */
.sparkle {
	position: absolute;
	z-index: 5;
	top: 75%;
	left: 67.5%;
	animation: sparkle 10s ease-in-out infinite;
}

.sparkle img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

/* Sparkle animation with rotation and glow */
@keyframes sparkle {

	0%,
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.5);
	}

	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* =================================== */
/* ========== CARD SECTION ========== */
/* =================================== */

.card-section {
	margin-top: -110px;
}

.section-title {
	font-size: var(--fs-550);
}

.item-card {
	width: 100%;
	height: auto;
	border-radius: 15px;
	position: relative;
	z-index: 9999;
}

.card-lines {
	border: 0.5px solid grey;
}

/* Extra Extra Large (XXL) */
@media (max-width: 1400px) {}

/* Extra Large (XL) */
@media (max-width: 1200px) {
	.sparkle {
		top: 95%;
		left: 77.5%;
	}
}

/* Large (LG) */
@media (max-width: 992px) {}

/* Medium (MD) */
@media (max-width: 768px) {
	.item-card {
		max-width: 370px;
	}
}

/* Extra Small (XS) */
@media (max-width: 575px) {
	.hero-title {
		margin-top: 2rem;
		font-size: var(--fs-500);
	}

	.section-title {
		font-size: var(--fs-400);
	}

	.item-card {
		max-width: 300px;
	}

	.bg-circle {
		width: 250px;
		height: 250px;
	}

	.bg-circle img {
		max-width: 250px;
	}

	.hero-section {
		padding: 0 0 6rem 0;
	}

	.sparkle {
		left: 80%;
	}

	.healthfair-size {
		font-size: var(--fs-200);
	}
}

.payment-details {
	max-height: 100vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* smoother iOS scroll */
}

/* ======================== */
/* ======== LISTING ======= */
/* ======================== */
.styled-list {
	counter-reset: main-counter;
	list-style: none;
	padding-left: 0;
}

.styled-list>li {
	counter-increment: main-counter;
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.75rem;
}

.styled-list>li::before {
	content: counter(main-counter) ".";
	position: absolute;
	left: 0;
	font-weight: 700;
}

.styled-list ol {
	counter-reset: sub-counter;
	list-style: none;
	padding-left: 1.8rem;
	margin-top: 0.4rem;
}

.styled-list ol>li {
	counter-increment: sub-counter;
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.4rem;
}

.styled-list ol>li::before {
	content: "(" counter(sub-counter, lower-alpha) ")";
	position: absolute;
	left: 0;
	font-weight: 700;
}

/* ============================= */
/* ======== Step Progress ======== */
/* ============================= */

.progress-container {
	position: relative;
	margin-bottom: 20px;
	text-align: center;
	margin: 0 5%;
}

.progress {
	height: 6px;
	width: 100%;
	background: #ddd;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	--bs-progress-bar-bg: var(--primary-colour) !important;
	--bs-progress-height: 0.25rem !important;
	transform: translate(-50%, calc(var(--progress-step-width) / 2));
	width: 68%;
}

.progress-bar {
	height: 100%;
	background: #007bff;
	width: 0%;
	transition: width 0.3s ease;
}

.step-indicator {
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}

.step-wrapper {
	flex: 1;
	text-align: center;
	position: relative;
}

.step {
	width: var(--progress-step-width);
	height: var(--progress-step-width);
	background: #eaeaea;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	position: relative;
	color: #aaaaaa;
	transition: 0.3s;
	margin: auto;
	border: 0;
	font-size: 0.9rem;
	line-height: 0;
	cursor: default;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.step.active,
.step.completed {
	background: var(--primary-colour);
	color: #fff;
}

.step.completed {
	cursor: pointer;
}

.step-label {
	margin-top: 10px;
	font-size: 0.9rem;
	font-weight: normal;
	color: #1d1729;
}

.step-panel {
	display: none;
}

.step-panel.active {
	display: block;
}

/* =================================== */
/* ========== TEXT SECTION ========== */
/* =================================== */

.text-primary-app {
	color: var(--primary-colour);
}

/* =================================== */
/* ========== VALIDATION SECTION ========== */
/* =================================== */

/* Highlight for the entire card/section */
.section-invalid-error {
	background-color: #fff5f5;
	/* Very light red */
	transition: background-color 0.5s ease;
	border-radius: 8px;
}

/* Optional: shake animation to grab attention */
.section-invalid-error {
	animation: shake 0.4s ease-in-out;
}

.footer-heading {
    font-size: 0.95rem;
}

.footer-text {
    opacity: 0.85; 
    line-height: 1.6;
}

.social-icon-btn {
    width: 35px; 
    height: 35px;
}

.bg-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-5px);
	}

	75% {
		transform: translateX(5px);
	}
}