html,
body {
	background-color: #262627;
	height: 100%;
	margin: 0;
	font-family: var(--MP-primary-font);
	overflow-x: hidden;
}

main {
	display: block;
	/* Remove flex property from main */
}

:target {
	scroll-margin-top: 75px;
	/* Offset the scroll position by 100px */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

p {
	letter-spacing: 0.02em;
	/* Adjust spacing between letters */
	orphans: 3;
	/* Prevent isolated lines at the bottom of a page */
	widows: 3;
}

.privacy-link {
	margin-top: 10px;
	color: gold;
	cursor: pointer;
	text-decoration: underline;
}

.fab-container {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
	background-color: var(--MP-magenta-op);
	/* Use your preferred color */
	border-radius: 50%;
	box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	cursor: pointer;
}

:root {
	/* Font Weights */
	--MP-font-weight-light: 300;
	--MP-font-weight-normal: 400;
	--MP-font-weight-medium: 500;
	--MP-font-weight-semi-bold: 600;
	--MP-font-weight-bold: 700;
	--MP-font-weight-bold-text: bold;
	/* Font Sizes */
	--MP-font-size-xxs: 0.8em;
	--MP-font-size-xs: 0.9em;
	--MP-font-size-sm: 1em;
	--MP-font-size-smd: 1.1em;
	--MP-font-size-md: 1.2em;
	--MP-font-size-lg: 1.5em;
	--MP-font-size-xlg: 1.8em;
	--MP-font-size-xl: 2em;
	--MP-font-size-xxl: 2.5em;
	--MP-font-size-tiny: 12px;
	--MP-font-size-small: 14px;
	--MP-font-size-base: 16px;
	--MP-font-size-medium: 18px;
	--MP-font-size-large: 20px;
	--MP-font-size-xlarge: 24px;
	--MP-font-size-xxlarge: 36px;
	--MP-font-size-huge: 40px;
	--MP-font-size-giant: 50px;
	--MP-font-size-massive: 60px;
	--MP-font-size-print-small: 24pt;
	--MP-font-size-print-large: 60pt;
	/* Fonts */
	--MP-primary-font: "Poppins", sans-serif;
	--MP-secondary-font: "Bauhaus", sans-serif;
	/* Solid Colors */
	--MP-charcoal-gray: #171718;
	--MP-vibrant-azure: #0e1457;
	--MP-deep-navy: #263238;
	--MP-royal-indigo: #63042d;
	--MP-bright-azure: #2979ff;
	--MP-off-white: #fafafa;
	--MP-royal-indigo-dark: #5c4ebc;
	--MP-tangerine: #ff7043;
	--MP-secondary-gray: #b0b0b0;
	--MP-crimson-red: #d32f2f;
	--MP-solar-gold: #ffa500;
	--MP-magenta: #aa04c4;
	--MP-magenta-op: #aa04c4c3;
	--MP-lime-green: #00ff15;
	--MP-vivid-pink: #fb91ff;
	--MP-aqua-blue: #91fffd;
	--MP-bright-orange: #f04b0b;
	--MP-fresh-green: #82ac2d;
	--MP-purple-vivid: #450976;
	--MP-fuchsia: #e32aa0;
	--MP-soft-pink: #ff74c4;

	/* Card 1 */
	--MP-card-one-one: #222437;
	--MP-card-one-two: #5a3a82;
	/* was #6a4c8c */

	/* Card 2 */
	--MP-card-two-one: #3c264b;
	/* inky grape */
	--MP-card-two-two: #5c0d40;
	/* berry magenta */

	/* Card 3 */
	--MP-card-three-one: #2a1746;
	--MP-card-three-two: #532a7a;
	/* was #5b2f86 */

	/* Card 4 */
	--MP-card-four-one: #24122f;
	/* deep plum */
	--MP-card-four-two: #7b1e63;
	/* cool raspberry */

	/* Card 5 */
	--MP-card-five-one: #1c0621;
	/* cool eggplant */
	--MP-card-five-two: #7a0350;
	/* was #8a1e62 */

	--MP-soft-green: hsl(49, 100%, 85%);
	--MP-lime-yellow: hsl(49, 100%, 39%);
	--MP-teal: #a2fff4;
	--MP-teal-dark: #1a786a;
	--MP-soft-blue: #bdcbff;
	--MP-blue-deep: #3e64d9;
	--MP-soft-pink-bright: #ffb6fb;
	--MP-pink-deep: #c14dbf;
	--MP-sky-blue: #ade8ff;
	--MP-azure-deep: #3189d2;
	--MP-neon-green: #d6ff3e;
	--MP-gold: #f9a825;
	--MP-dusty-gray: #625d5d;
	--MP-light-blue: #7ccceb;
	--MP-dark-red: #3a0d0d;
	--MP-deep-purple: #150326;
	--MP-forest-green: #092613;
	--MP-navy-soft: #2a4b5f;
	--MP-bright-purple: #901fed;
	--MP-burnt-orange: #ff5500;
	--MP-gold-muted: #d4c672;
	--MP-violet: #7366ff;
	--MP-dark-violet: #1e1e3e;
	/* Gradients */
	--MP-gradient-lime: linear-gradient(135deg, #dcef75, #a9c736);
	--MP-gradient-teal: linear-gradient(135deg, #38bcac, #1a786a);
	--MP-gradient-blue: linear-gradient(135deg, #7893f5, #3e64d9);
	--MP-gradient-pink: linear-gradient(135deg, #f892f3, #c14dbf);
	--MP-deep-navy-gradient: linear-gradient(135deg, #263238, #1a252c);
	--MP-gradient-sky-blue: linear-gradient(135deg, #6cccf3, #3189d2);
}

.button {
	align-items: center;
	all: unset;
	border-radius: 10px;
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 8px;
	height: 40px;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.button:active {
	opacity: 0.8;
	transform: scale(0.9);
}

.menu-container {
	display: none;
	justify-content: space-between;
	z-index: 5000;
	position: absolute;
	background-color: var(--MP-charcoal-gray);
	border-radius: 10px 10px 10px 10px;
	width: 70vw;
	margin-left: 15vw;
	margin-right: 15vw;
	margin-top: 20px;
}

#ID_HAMBURGER_LOGO img {
	height: 40px;
}

/* Hamburger Menu Icon */
.menu-icon {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 25px;
	cursor: pointer;
	margin: 15px;
}

.menu-icon span {
	display: block;
	height: 4px;
	background-color: var(--MP-lime-green);
	border-radius: 2px;
	transition: 0.3s ease-in-out;
}

/* Hamburger Menu */
.hamburger-menu {
	position: relative;
}

#ID_HAMBURGER_LOGO {
	margin-left: 10px;
	z-index: 1000;
}

.menu {
	position: absolute;
	top: 0;
	left: -250px;
	/* Hidden initially */
	width: 250px;
	height: 830px;
	background-color: var(--MP-charcoal-gray);
	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
	overflow-y: auto;
	transition: 0.3s ease-in-out;
	z-index: 5000;
	opacity: 0.98;
	border-radius: 0px 0px 10px 0px;
}

.faq-submenu {
	display: none;
	position: absolute;
	background-color: var(--MP-charcoal-gray);
	border-radius: 5px;
	padding: 10px;
	top: 100%;
	left: 0;
	min-width: 200px;
}

.has-submenu {
	position: relative;
	cursor: pointer;
}

.has-submenu:hover .faq-submenu {
	display: block;
}

#hamburger-shop {
	display: flex;
	background-color: var(--MP-magenta);
	color: white;
	padding: 10px;
	margin-top: 5px;
	opacity: 1;
	margin-left: -15px;
	border-radius: 5px;
	font-weight: 700;
	width: 150px;
	max-width: 150px;
	justify-content: center;
	justify-self: center;
}

#hamburger-shop a {
	margin-left: 0px;
}

.menu ul {
	list-style: none;
	margin: 0;
	padding: 20px;
}

.menu-heading {
	font-weight: bold;
	text-transform: uppercase;
	color: var(--MP-gold);
	margin-top: 20px;
	font-size: 18px;
	margin-bottom: 20px;
}

.menu-item {
	margin-left: 15px;
	margin-bottom: 20px;
}

.menu-item a {
	text-decoration: none;
	color: white;
	font-size: 16px;
	transition: color 0.3s;
}

.menu-item a:hover {
	color: #007bff;
}

/* Active Menu */
.menu.open {
	left: 0;
}

/* Hide menu when not active */
.menu:not(.open) {
	display: none;
}

/* Styles specifically for the hamburger menu FAQ dropdown */
/* Styles specifically for the hamburger menu FAQ dropdown */
/* FAQ submenu styles */
/* FAQ submenu styles */
#faq_M-submenu .faq-submenu {
	display: block;
	list-style: none;
	padding-left: 0px;
	background-color: var(--MP-charcoal-gray);
}

#faq_M-submenu.open {
	display: block;
}

#faq-submenu {
	margin: 0px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: -5px;
}

#faq_M-submenu li {
	padding: 5px 10px;
}

#faq_M-submenu a {
	text-decoration: none;
	color: var(--MP-off-white);
	display: block;
}

.has-submenu>a {
	position: relative;
	cursor: pointer;
}

/* Optional: Adjust spacing */
.menu-item.has-submenu {
	margin-bottom: 5px;
}

#landingSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	background-color: var(--MP-charcoal-gray);
	/* Replaced black with Charcoal Gray */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#productsSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	/* Replaced blue with Vibrant Azure */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#insightsSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	background-color: var(--MP-vibrant-azure);
	/* Replaced #1B3A4B with Deep Navy */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#insightsSection #ID_MP_GB1,
#insightsSection #ID_MP_GB2,
#insightsSection #ID_MP_GB3,
#insightsSection #ID_MP_GB4,
#insightsSection #ID_MP_GB5 {
	color: white;
}

#downloadsSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	background-color: var(--MP-deep-navy);
	/* Adjusted to Deep Navy for consistency */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#pressSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	background-color: var(--MP-deep-navy);
	/* Adjusted to Deep Navy for consistency */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#companySection {
	padding-top: 0px;
	position: absolute;
	width: 100vw;
	top: 0;
	/* Replaced purple with Royal Indigo */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#faqMerchantSection,
#faqFashionPopSection,
#faqCapabilitiesSection,
#faqPricingSection,
#faqTopSection,
#faqComSection {
	background-color: var(--MP-deep-navy);
	padding-top: 0px;
	position: absolute;
	width: 100vw;
	top: 0;
	/* Replaced purple with Royal Indigo */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#careersSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	background-color: var(--MP-deep-navy);
	/* Replaced black with Charcoal Gray */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#thankyouSection {
	padding-top: 0px;
	position: absolute;
	width: 100vw;
	top: 0;
	background-color: var(--MP-violet);
	/* Replaced black with Charcoal Gray */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#pagesSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	background-color: var(--MP-off-white) !important;
	/* Replaced black with Charcoal Gray */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#supportSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	background: linear-gradient(135deg, #292929, #1e1e1e);
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#comSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	background-color: var(--MP-deep-navy);
	/* Replaced black with Charcoal Gray */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#networkSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	background-color: rgb(102, 119, 125);
	/* Replaced black with Charcoal Gray */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#topSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	background-color: var(--MP-dark-violet);
	/* Replaced black with Charcoal Gray */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
}

#demoSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	background-color: var(--MP-dark-violet);
	/* Replaced black with Charcoal Gray */
	transition: background-color 0.5s ease;
	/* Adjust timing as desired */
	width: 100vw;
}

#ID_CONTENT_TABLE td {
	vertical-align: top;
}

td {
	max-width: 100vw;
	min-height: 1200px;
	padding-top: 200px;
}

/* Ensure that all sections are hidden by default */
td[id$="Section"] {
	display: none;
}

/* Show only the active section */
td[id$="Section"].active {
	display: block;
}

.video-hidden {
	opacity: 0;
	/* Initially hidden */
	transition: opacity 0.3s ease-in-out;
	/* Smooth fade-in effect */
}

.video-visible {
	opacity: 1;
	/* Fully visible */
	transition: opacity 0.3s ease-in-out;
	/* Smooth fade-in effect */
}

/* Ensure .video-wrapper initially covers full viewport */
.video-wrapper {
	position: relative;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
}

#ID_LP_BACKGROUND_VIDEO,
#ID_PS_BACKGROUND_VIDEO,
#ID_FP_BACKGROUND_VIDEO {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	z-index: -1;
	opacity: 1;
}

#landingSection .video-color-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: rgba(0, 80, 255, 0.35); blue at 35% opacity */
	background: rgba(147, 82, 1, 0.15);
	/* blue at 35% opacity */
	pointer-events: none;
	/* let clicks through */
	z-index: 1;
}

#landingSection .video-color-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(74 60 255 / 45%) 0%, rgba(200, 80, 20, 0.25) 45%, rgba(120, 50, 15, 0.05) 100%);
	mix-blend-mode: multiply;
	pointer-events: none;
}

#landingSection .overlay-text {
	position: relative;
	z-index: 2;
	/* ensure text is above the semi-transparent overlay */
	color: white;
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

#ID_LP_DEMO_FRAME_SECOND,
#ID_PS_DEMO_FRAME_SECOND {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

#ID_LP_DEMO_FRAME_SECOND .button {
	background-color: var(--MP-bright-azure);
	/* Updated to Bright Azure */
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	font-family: var(--MP-primary-font);
	font-weight: var(--MP-font-weight-medium);
	font-size: var(--MP-font-size-huge);
	padding: 30px 60px;
	border: none;
	cursor: pointer;
	border-radius: 20px;
}

.landing-text-container {
	display: flex;
	align-items: center;
	align-content: center;
	flex-direction: column;
	opacity: 0;
	/* Initially hidden */
	transform: translateY(20px);
	/* Start slightly lower */
	animation: fadeInUp 3s ease-out forwards;
	height: 80vh;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

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

.landing-text {
	position: relative;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	font-family: var(--MP-primary-font);
	width: 80vw;
	display: flex;
	flex-direction: column;
	font-size: var(--MP-font-size-medium);
	z-index: 200;
	margin-top: 100px;
}

#ID_LP_LANDING_TEXT_1 .main-title,
#ID_LP_TEXT_SLIDE_1 .main-title {
	color: var(--MP-lime-green);
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

#ID_LP_LANDING_TEXT_2 .main-title,
#ID_LP_TEXT_SLIDE_2 .main-title {
	color: var(--MP-lime-green);
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

#ID_LP_LANDING_TEXT_3 .main-title,
#ID_LP_TEXT_SLIDE_3 .main-title {
	color: var(--MP-lime-green);
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.overlay-text {
	position: absolute;
	color: white;
	/* Replaced white with Off-White */
	font-family: var(--MP-primary-font);
	width: 80vw;
	display: flex;
	flex-direction: column;
	font-size: var(--MP-font-size-medium);
}

#ID_TRAILING {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

#ID_BUTTON_MINI {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0px;
	margin-left: 10px;
}

#ID_MINI_BUTTON {
	margin-right: 0px;
	padding: 0px;
	width: 94px;
}

#ID_DEMO_BUTTON_MINI {
	position: relative;
	width: 94px;
	/* Adjust as needed */
	height: 94px;
	/* Adjust as needed */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--MP-magenta-op);

	/* Updated to Royal Indigo */
	border-radius: 50%;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	border: none;
	cursor: pointer;
	font-family: var(--MP-primary-font);
	font-size: var(--MP-font-size-large);
	font-weight: var(--MP-font-weight-medium);
	text-align: center;
}

/* Button styling */
#ID_DEMO_BUTTON_MINI_SECOND {
	position: relative;
	width: 200px;
	/* Adjust as needed */
	height: 60px;
	/* Adjust as needed */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--MP-royal-indigo-dark);
	/* Updated to Royal Indigo */
	border-radius: 40px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	border: none;
	padding: 10px;
	cursor: pointer;
	font-family: var(--MP-primary-font);
	font-size: var(--MP-font-size-large);
	font-weight: var(--MP-font-weight-medium);
}

.sales-button {
	position: relative;
	width: 200px;
	/* Adjust as needed */
	height: 60px;
	/* Adjust as needed */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--MP-royal-indigo-dark);
	/* Updated to Royal Indigo */
	border-radius: 40px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	border: none;
	padding: 10px;
	cursor: pointer;
	font-family: var(--MP-primary-font);
	font-size: var(--MP-font-size-large);
	font-weight: var(--MP-font-weight-medium);
}

#networkSection .animated-card-container #ID_NETWORK_JOIN_NETWORK {
	height: 60px;
	width: 400px;
}

.main-title {
	font-weight: var(--MP-font-weight-bold);
	font-size: var(--MP-font-size-print-large);
	margin-bottom: 10px;
	color: var(--MP-lime-green);
	/* Updated to Tangerine */
	justify-self: center;
	align-items: center;
	/* Horizontally centers the content */
}

#ID_FP_MAIN_TITLE_1,
#ID_FP_MAIN_TITLE_2,
#ID_FP_MAIN_TITLE_3,
#ID_FP_MAIN_TITLE_4,
#ID_FP_MAIN_TITLE_5 {
	color: var(--MP-lime-green);
}

#fashionpopSection .overlay-text {
	position: relative;
	z-index: 2;
	/* ensure text is above the semi-transparent overlay */
	color: white;
}

#ID_FP_TEXT_SLIDE_1,
#ID_FP_TEXT_SLIDE_2,
#ID_FP_TEXT_SLIDE_3,
#ID_FP_TEXT_SLIDE_4,
#ID_FP_TEXT_SLIDE_5 {
	margin-top: -40px;
}

#fashionpopSection .video-color-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: rgba(0, 80, 255, 0.35); blue at 35% opacity */
	background: rgba(147, 82, 1, 0.15);
	/* blue at 35% opacity */
	pointer-events: none;
	/* let clicks through */
	z-index: 1;
}

#fashionpopSection .video-color-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(46 255 0 / 55%) 0%, /* warm amber top */ rgb(18 234 43 / 35%) 35%, /* orange mid */ rgb(128 55 0 / 55%) 100% /* deep burnt orange bottom */);
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* keep overlay text inside a readable block */
#fashionpopSection .overlay-text {
	max-width: min(92vw, 1100px);
	padding: clamp(16px, 4vw, 48px);
}

#fashionpopSection .overlay-text .main-title,
#fashionpopSection .overlay-text .summary {
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.summary {
	font-weight: var(--MP-font-weight-medium);
	font-size: var(--MP-font-size-print-small);
	margin-top: 20px;
	text-align: justify;
	justify-self: center;
	align-items: center;
	/* Horizontally centers the content */
}

.text-slide {
	opacity: 0;
	transition: opacity 2s ease-in-out;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Horizontally centers the content inside the flex container */
	width: 100%;
	/* Ensures it takes up the full width */
	text-align: center;
	/* Centers text within the container */
	margin-top: -200px;
}

#fashionpopSection {
	padding-top: 0px;
	position: absolute;
	top: 0;
	background-color: rgb(43 36 52);
	transition: background-color 0.5s ease;
}

#ID_FP_BACKGROUND_VIDEO {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	/* fill, cropping as needed */
	object-position: 50% 50%;
	/* center by default */
}

.fp-stat-band {
	gap: clamp(8px, 4vw, 24px);
}

.fp-stat {
	position: relative;
	padding: 8px 0;
}

.fp-stat:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -12px;
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: rgba(255, 255, 255, 0.08);
}

/* FashionPop Stat Band */
.fp-stat-band {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: var(--MP-deep-navy-gradient);
	/* uses an existing gradient */
	padding: 40px 20px;
	margin: 40px 0;
	border-radius: 20px;
}

.fp-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--MP-off-white);
	flex: 1;
}

.fp-stat-hl {
	font-size: var(--MP-font-size-giant);
	/* ~60px */
	font-weight: var(--MP-font-weight-bold);
	color: var(--MP-tangerine);
	/* makes it pop */
	margin-bottom: 10px;
}

.fp-stat-sub {
	font-size: var(--MP-font-size-medium);
	color: var(--MP-secondary-gray);
	letter-spacing: 0.03em;
}

.fp-pricing {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 16px;
	/* small side padding */
	margin: 40px 0 80px;
	/* space above/below */
}

.fp-pricing-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;

	/* visual style: mirror the stat band */
	background: var(--MP-deep-navy-gradient);
	color: var(--MP-off-white);
	border-radius: 20px;
	box-shadow: 5px 5px 5px 5px rgba(28, 28, 30, 0.5);
	/* consistent with landing-card */
	border: 1px solid rgba(255, 255, 255, 0.06);

	/* sizing */
	width: 100%;
	max-width: 960px;
	/* comfortable readable width */
	padding: 32px 24px;
	box-sizing: border-box;
}

/* typography */
.fp-pricing-title {
	font-size: var(--MP-font-size-xlarge);
	font-weight: var(--MP-font-weight-semi-bold);
	letter-spacing: 0.02em;
	opacity: 0.95;
	margin-bottom: 8px;
}

.fp-pricing-main {
	font-size: var(--MP-font-size-xxlarge);
	font-weight: var(--MP-font-weight-bold);
	line-height: 1.1;
	margin: 6px 0 4px;
}

.fp-pricing-main .highlight-lime {
	color: var(--MP-lime-green);
}

.fp-pricing-sub {
	font-size: var(--MP-font-size-medium);
	color: var(--MP-secondary-gray);
	letter-spacing: 0.02em;
	margin-bottom: 16px;
}

/* button treatment inside pricing only (doesn't affect global .sales-button) */
.fp-pricing .sales-button {
	padding: 12px 22px;
	border-radius: 14px;
	background: var(--MP-lime-green);
	color: var(--MP-deep-navy);
	border: none;
	transition: transform 0.15s ease, filter 0.15s ease;
	cursor: pointer;
}

.fp-pricing .sales-button:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

.fp-pricing .sales-button:active {
	transform: translateY(0);
	filter: brightness(0.98);
}

/* === Install CTA frame (scoped) === */
.sales-button-frame {
	width: 90vw;
	/* your request */
	max-width: 960px;
	/* readable cap; adjust if needed */
	margin: 32px auto 48px;
	/* center horizontally */
	padding: 8px;
	/* subtle breathing room */
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

/* Button inside the frame only */
.sales-button-frame .sales-button {
	padding: 14px 28px;
	border-radius: 14px;
	background: var(--MP-lime-green);
	color: var(--MP-deep-navy);
	border: none;
	font-weight: var(--MP-font-weight-medium);
	line-height: 1;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Hover / active / focus states */
.sales-button-frame .sales-button:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
}

.sales-button-frame .sales-button:active {
	transform: translateY(0);
	filter: brightness(0.98);
}

.sales-button-frame .sales-button:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
}

.toppicks-grid {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 20px;
	justify-content: center;
	/* Centers items horizontally */
	align-content: center;
	/* Centers items vertically if there's extra space */
	align-items: center;
	/* Centers items vertically within each row */
}

/* Individual card styling */
.toppicks-card {
	position: relative;
	background-color: var(--MP-charcoal-gray);
	/* Replaced #1c1c1c with Charcoal Gray */
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0px 4px 6px rgba(28, 28, 30, 0.1);
	/* Adjusted shadow color */
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	height: 500px;
	width: 500px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
}

/* Top Pick Grid Styling */
.top-pick-grid {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 20px;
	justify-content: center;
	/* Centers items horizontally */
	align-content: center;
	/* Centers items vertically if there's extra space */
	align-items: center;
	/* Centers items vertically within each row */
}

/* Individual card styling */
.top-pick-card {
	position: relative;
	background-color: var(--MP-charcoal-gray);
	/* Charcoal Gray */
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0px 4px 6px rgba(28, 28, 30, 0.1);
	/* Adjusted shadow color */
	color: var(--MP-off-white);
	/* Off-White */
	height: 500px;
	width: 500px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
}

.top-pick-card-image img {
	width: 100%;
	height: auto;
	display: block;
}

.top-pick-card-content {
	padding: 15px;
}

/* Title styling */
.top-pick-card-title {
	font-size: var(--MP-font-size-base);
	font-weight: var(--MP-font-weight-semi-bold);
	margin-top: 10px;
	color: var(--MP-off-white);
	/* Off-White */
	transition: color 0.3s ease;
}

/* Subtitle styling */
.top-pick-card-subtitle {
	font-size: var(--MP-font-size-small);
	color: var(--MP-secondary-gray);
	margin-top: 5px;
}

/* Badge styling */
.top-pick-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: var(--MP-crimson-red);
	/* Crimson Red */
	color: var(--MP-off-white);
	/* Off-White */
	padding: 5px 10px;
	font-size: var(--MP-font-size-tiny);
	font-weight: var(--MP-font-weight-semi-bold);
	border-radius: 4px;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.top-pick-card:hover {
	transform: translateY(-10px) scale(1.05);
	/* Lift and scale effect */
	box-shadow: 0 8px 16px rgba(28, 28, 30, 0.2);
	/* Enhanced shadow */
}

.top-pick-card:hover .top-pick-card-badge {
	color: var(--MP-tangerine);
	/* Tangerine */
	/* Change badge color on hover */
}

.top-pick-card:hover .top-pick-card-title {
	color: var(--MP-tangerine);
	/* Tangerine */
	/* Change title color on hover */
}

/* Container for badges */
.top-pick-badge-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

/* Individual badge styling */
.top-pick-badge {
	position: relative;
	display: inline-block;
	width: 100px;
	/* Adjust width as needed */
	height: 100px;
	/* Adjust height as needed */
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
	/* Drop shadow */
}

/* Background rectangle */
.top-pick-badge-background {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	/* Ensure it stays at the bottom */
}

/* Badge text (centered over the rectangle) */
.top-pick-badge-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	/* Ensure it stays above the background */
	height: auto;
	text-align: center;
}

.text-slide.active {
	opacity: 1;
}

.highlight-orange {
	color: var(--MP-solar-gold);
	/* Replace var(--MP-solar-gold) with your brand's specific orange color */
	font-weight: var(--MP-font-weight-bold-text);
}

.highlight-magenta {
	color: var(--MP-magenta);
	/* Replace var(--MP-solar-gold) with your brand's specific orange color */
	font-weight: var(--MP-font-weight-bold-text);
}

.highlight-lime {
	color: var(--MP-lime-green);
	/* Replace var(--MP-solar-gold) with your brand's specific orange color */
	font-weight: var(--MP-font-weight-bold-text);
}

#ID_FP_STEPS .highlight-lime {

	font-size: var(--MP-font-size-xxlarge);

}


.card-content-unique .highlight-lime {
	color: var(--MP-lime-green);
	/* Replace var(--MP-solar-gold) with your brand's specific orange color */
	font-weight: var(--MP-font-weight-normal);
	font-size: var(--MP-font-size-xxlarge);
	line-height: 36px;
}

.banner1 {
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	padding: 100px;
	text-align: center;
	font-size: var(--MP-font-size-massive);
}

/* Container Styling */
.banner-container {
	display: flex;
	justify-content: center;
	padding: 20px;
	width: 100vw;
}

/* Initial hidden state */
.banner2 {
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	padding: 100px;
	padding-top: 50px;
	text-align: center;
	font-size: var(--MP-font-size-massive);
	max-width: 100%;
	word-wrap: break-word;
	/* Ensures text breaks properly */
	opacity: 0;
	/* Start hidden */
	transform: translateY(10px);
	/* Start slightly lower */
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.banner-network {
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	padding: 100px;
	padding-bottom: 20px;
	text-align: center;
	font-size: var(--MP-font-size-massive);
	max-width: 100%;
	word-wrap: break-word;
	/* Ensures text breaks properly */
	opacity: 1;
}

/* Keyframe to fade and slide up when coming into view */
@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Keyframe to fade and slide down when going out of view */
@keyframes fadeOutDown {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* Add fade-in animation when element is in view */
.banner2.in-view {
	animation: fadeInUp 0.5s ease forwards;
}

/* Apply fade-out animation when in-view class is removed */
.banner2:not(.in-view) {
	animation: fadeOutDown 0.5s ease forwards;
}

.landing-card-wrapper {
	display: flex;
	flex-direction: row;
	/* was column */
	flex-wrap: wrap;
	/* allow wrapping */
	align-items: stretch;
	/* let cards grow by their own content */
	justify-content: center;
	/* keep rows centered */
	gap: 100px;
	/* keep your spacing as-is */
	width: 98vw;
	/* you asked for width, not just max-width */
	max-width: 98vw;
	margin-inline: auto;
	box-sizing: border-box;
	margin-top: 50px;
}

.landing-card {
	border-radius: 10px;
	box-shadow: 5px 5px 5px 5px rgba(28, 28, 30, 0.5);
	color: white;
	padding: 40px;
	margin-bottom: 20px;
	position: sticky;
	/* unchanged */
	top: 0;
	/* unchanged */
	z-index: 1;
	/* unchanged */
	transform: translateY(0);
	transition: opacity 0.5s ease, transform 0.2s ease;
	font-family: var(--MP-primary-font);
	background-color: #54005c;
	opacity: 0.98;

	/* changed ? */
	height: auto;
	/* was 700px: lets card grow to content */
	width: auto;
	/* was 90vw: lets multiple cards fit per row */
	flex: 1 1 360px;
	/* wrap-friendly: min ~360px, grows as space allows */
	box-sizing: border-box;
}

#fashionpopSection .landing-card {
	background-color: rgb(64, 1, 74);
	/* Changed to a deep blue to contrast with the video */
}

.landing-card .text-section p {
	color: white;
}

.landing-card:nth-child(1) {
	background: linear-gradient(135deg,
			var(--MP-card-one-one),
			var(--MP-card-one-two));
	top: 20px;
	z-index: 1;
}

.landing-card:nth-child(2) {
	background: linear-gradient(135deg,
			var(--MP-card-two-one),
			var(--MP-card-two-two));
	top: 20px;
	z-index: 2;
}

.landing-card:nth-child(3) {
	background: linear-gradient(135deg,
			var(--MP-card-three-one),
			var(--MP-card-three-two));
	top: 20px;
	z-index: 3;
}

.landing-card:nth-child(4) {
	background: linear-gradient(135deg,
			var(--MP-card-four-one),
			var(--MP-card-four-two));
	top: 20px;
	z-index: 4;
}

.landing-card:nth-child(5) {
	background: linear-gradient(135deg,
			var(--MP-card-five-one),
			var(--MP-card-five-two));
	top: 20px;
	z-index: 5;
}

/*
#ID_LP_IB_3 {
		background-color: var(--MP-soft-green);
}

#ID_LP_IB_4 {
	background-color: #7893f5;
}

#ID_LP_IB_5 {
	background-color: #1c233b;
}

#ID_LP_IB_1 {
	background-color: #38bcac;
}

#ID_LP_IB_2 {
	background-color: #6cccf3;
}
*/
/* Overlay applied to all but the last card */
.landing-card:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(28, 28, 30, 0.1);
	/* Adjusted overlay color */
}

.landing-card.overlay::after {
	content: "";
	position: absolute;
	background: rgba(28, 28, 30, 0.1);
	/* Adjusted overlay color */
}

/* Flex container for the text and image sections */
.content {
	display: flex;
	align-items: center;
	/* justify-content: space-between;*/
	flex-wrap: wrap;
	flex-direction: column;
	gap: 20px;
}

.text-section {
	flex: 1;
	margin-right: 50px;
}

.landing-card .text-section h2 {
	font-size: var(--MP-font-size-xlg);
	margin-bottom: 100px;
	font-weight: var(--MP-font-weight-light);
}

.text-section p {
	font-size: var(--MP-font-size-large);
	margin-top: 10px;
	line-height: 1.5;
	color: black;
}

/* Image Section */
.image-section {
	position: relative;
	width: 450px;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.image-background {
	width: 100%;
	height: 100%;
	background-color: var(--MP-purple-vivid);
	/* Updated to Vibrant Azure */
	border-radius: 15px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.transformable-image {
	width: auto;
	height: 275px;
	object-fit: cover;
	border-radius: 10px;
	position: relative;
	z-index: 2;
	transform: scale(1);
	transition: transform 0.3s ease;
	/* Smooth transition */
}

#ID_FP_LOGO .transformable-image,
#ID_FP_LOGO2 .transformable-image {
	width: 600px;
}

/* Scaled-up state */
.transformable-image.scaled-up {
	transform: scale(1.3);
	/* Adjust scale factor as needed */
}

/* General sticker styles */
.sticker {
	position: absolute;
	/* Allows placement over the video */
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	/* Adjust size as needed */
	height: 100px;
	color: white;
	font-family: Arial, sans-serif;
	font-weight: var(--MP-font-weight-bold-text);
	text-align: center;
	transition: transform 0.3s ease-in-out;
	cursor: pointer;
	z-index: 2;
	/* Ensures stickers are above the video */
}

/* Hover effect for stickers */
.sticker:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Text inside the stickers */
.sticker-text {
	z-index: 3;
	font-size: var(--MP-font-size-small);
}

/* YouTube sticker: Positioned on the top-left */
.acquire-sticker {
	display: none;
	background: radial-gradient(circle, #fcaf45, #d67a24, #a36528);
	/* Instagram gradient */
	border-radius: 50%;
	/* Circular shape */
	top: 60px;
	/* Center vertically */
	left: 60px;
	/* Center horizontally */
	transform: translate(-50%, -50%);
	/* Offset for proper centering */
}

/* Instagram sticker: Positioned at the center */
.upfront-sticker {
	display: none;
	background: radial-gradient(circle, #fcaf45, #d67a24, #a36528);
	/* Instagram gradient */
	border-radius: 50%;
	/* Circular shape */
	top: 50%;
	/* Center vertically */
	left: 50%;
	/* Center horizontally */
	transform: translate(-50%, -50%);
	/* Offset for proper centering */
}

/* TikTok sticker: Positioned on the bottom-right */
.join-sticker {
	display: none;
	background: linear-gradient(135deg, #69c9d0, #1da5ee);
	/* TikTok colors */
	border-radius: 20px;
	/* Rounded rectangle */
	padding: 5px;
	box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.2);
	/* Inner shadow for depth */
	bottom: 20px;
	right: 20px;
}

/* Styling for animated-card-container */
.animated-card-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
	width: 100%;
	flex-wrap: wrap;
	gap: 150px;
	color: var(--MP-off-white);
}

#ID_TOP_CARD_CONTAINER {
	display: flex !important;
}

.animated-card-container .button-offer-container {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	/* Use justify-content instead of justify-items */
}

.animated-card-container .button-offer-frame {
	align-items: center;
	justify-content: center;
	/* Use justify-content instead of justify-items */
	display: flex;
	flex-wrap: wrap;
	gap: 35px;
	margin-top: 50px;
	padding: 28px 47px 28px 0px;
	position: relative;
	width: 405px;
	font-size: var(--MP-font-size-large);
}

.animated-card-container::after,
.custom-card-button:active,
.custom-learn-more:active {
	transform: scale(0.95);
	/* Slight press effect */
}

.animated-card-container .button {
	position: relative;
	width: 150px;
	height: 50px;
	/* Adjust as needed */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--MP-bright-purple);
	color: white;
	border: none;
	padding: 10px;
	cursor: pointer;
}

.animated-card-container .button:active {
	opacity: 0.8;
	transform: scale(0.9);
}

.animated-card-container .button-container .state-layer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 2px;
	gap: 0px;
}

/* Styling for animated-card */
.animated-card-unique {
	display: flex;
	border-radius: 16px;
	overflow: hidden;
	width: 90%;
	opacity: 0;
	/* Start hidden */
	transform: translateY(10px);
	/* Start slightly lower */
	transition: opacity 0.5s ease, transform 0.5s ease;
	margin: 20px 0;
	/* Space between cards */
}

/* Fade-in and slide-up animation trigger */
.animated-card-unique.in-view {
	opacity: 1;
	transform: translateY(0);
}

.video-wrapper-unique {
	position: relative;
	min-width: 500px;
	height: 500px;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Portrait video styling */
.portrait-video-unique {
	width: 400px;
	height: 400px;
	object-fit: cover;
	border-radius: 16px;
}

/* Overlay icons */
.overlay-icon-unique {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	opacity: 0.8;
}

.youtube-icon-unique {
	top: 10px;
	left: 10px;
	background-color: var(--MP-off-white);
	/* Replaced white with Off-White */
}

.instagram-icon-unique {
	top: 150px;
	left: 50px;
	background-color: var(--MP-royal-indigo-dark);
	/* Updated to Royal Indigo */
}

.tiktok-icon-unique {
	top: 250px;
	left: 30px;
	background-color: var(--MP-gold);
	/* Updated to Solar Gold */
}

/* Like and comment counts */
.like-count-unique,
.comment-count-unique {
	position: absolute;
	font-size: var(--MP-font-size-base);
	background-color: var(--MP-gold);
	/* Updated to Solar Gold */
	color: #333;
	padding: 5px 10px;
	border-radius: 12px;
	font-weight: var(--MP-font-weight-bold-text);
}

.like-count-unique {
	bottom: 60px;
	right: 10px;
}

.comment-count-unique {
	bottom: 20px;
	left: 10px;
}

/* Content styling */
.card-content-unique {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 20px;
	opacity: 0;
	transform: translateY(20px);
	/* Slight offset for smooth entrance */
	transition: opacity 0.6s ease, transform 0.6s ease;
	/* Smooth transition */
}

/* Apply when in view */
.animated-card-unique.in-view .card-content-unique {
	opacity: 1;
	/* Make visible */
	transform: translateY(0);
	/* Move to original position */
}

.card-content-unique h2 {
	font-size: var(--MP-font-size-giant);
	margin-bottom: 10px;
	color: #686666;
	/* Updated to primary text color */
	transition: color 0.6s ease;
	/* Smooth transition for color change */
}

.card-content-unique.in-view h2 {
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
}

.card-content-unique p {
	font-size: var(--MP-font-size-large);
	line-height: 1.5;
	color: #757575;
	/* Updated to secondary text color */
	transition: color 0.6s ease;
	/* Smooth transition for color change */
}

.card-content-unique.in-view p {
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
}

.HCS-container {
	text-align: center;
	padding: 20px;
	max-width: 1800px;
	width: 90vw;
}

.HCS-title {
	font-size: var(--MP-font-size-xl);
	margin-bottom: 10px;
}

.HCS-slider {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.HCS-cards-wrapper {
	overflow: hidden;
	width: 80%;
	margin: 0 20px;
}

.HCS-cards-track {
	display: flex;
	transition: transform 0.5s ease;
}

.HCS-card {
	min-width: 300px;
	margin: 10px;
	background-color: #f4f6f8;
	/* Updated to Cool Gray */
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(28, 28, 30, 0.2);
	/* Adjusted shadow color */
	text-align: left;
}

.HCS-card img {
	max-width: 100%;
	border-radius: 8px;
	margin-bottom: 10px;
}

.HCS-arrow {
	background: var(--MP-off-white);
	/* Replaced white with Off-White */
	border: none;
	font-size: var(--MP-font-size-lg);
	cursor: pointer;
	padding: 10px;
	color: var(--MP-charcoal-gray);
	/* Updated to Charcoal Gray */
	border-radius: 40px;
}

.HCS-dots {
	margin-top: 10px;
}

.HCS-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	background-color: #ddd;
	border-radius: 50%;
	cursor: pointer;
}

.HCS-dot.active {
	background-color: #333;
}

.custom-product-card-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px auto;
	z-index: 10;
	margin-bottom: 300px;
}

#ID_PCC_1 {
	background: linear-gradient(to bottom,
			var(--MP-vivid-pink) 0%,
			rgba(255, 145, 214, 0) 50%,
			rgba(255, 145, 214, 0) 100%);
}

#ID_PCC_2 {
	background: linear-gradient(to bottom,
			var(--MP-aqua-blue) 0%,
			rgba(255, 145, 214, 0) 50%,
			rgba(255, 145, 214, 0) 100%);
}

#ID_PCC_3 {
	background: linear-gradient(to bottom,
			var(--MP-bright-orange) 0%,
			rgba(255, 145, 214, 0) 50%,
			rgba(255, 145, 214, 0) 100%);
}

#ID_PCC_4 {
	background: linear-gradient(to bottom,
			var(--MP-fresh-green) 0%,
			rgba(255, 145, 214, 0) 50%,
			rgba(255, 145, 214, 0) 100%);
}

.product-card-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: 90vw;
	flex-wrap: wrap;
	justify-self: center;
}

.custom-product-card {
	border-radius: 15px;
	box-shadow: 0 4px 8px rgba(28, 28, 30, 0.1);
	/* Adjusted shadow color */
	font-family: var(--MP-primary-font);
	color: #333;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	width: 500px;
	height: 700px;
	position: relative;
	opacity: 0;
	/* Start hidden */
	transform: translateY(20px);
	/* Start slightly lower */
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.custom-product-card.in-view {
	opacity: 1;
	transform: translateY(0);
	/* Move up into view */
}

.custom-image-layers {
	position: relative;
	width: 500px;
	height: 300px;
	border-radius: 20px;
	transition: transform 0.6s ease;
	/* Smooth scaling */
	z-index: 1;
}

.custom-image-layer.scale-up {
	transform: scale(1.3);
	/* Scale up effect */
}

.custom-image-layer1 {
	position: absolute;
	width: 300px;
	border-radius: 10px;
	transition: transform 0.6s ease;
	/* Smooth scaling */
}

#ID_SMALL_BADGE_IMAGE {
	width: 75px;
	height: 75px;
	top: 200px;
	left: -100px;
}

#ID_BADGE_IMAGE {
	width: 325px;
	height: 66px;
	top: -60px;
}

#ID_WB_IMAGE {
	width: 500px;
	top: 15px;
	left: -40px;
}

#ID_GROUP1_IMAGE_TOP {
	width: 400px;
	height: px;
	top: -50px;
	left: -120px;
}

#ID_GROUP2_IMAGE_TOP {
	width: 600px;
	height: 300px;
	top: 50px;
	left: -100px;
}

#ID_GROUP_STAR_IMAGE_TOP {
	width: 600px;
	top: -150px;
	left: -100px;
}

#ID_WB_IMAGE_TOP {
	width: 300px;
	top: -80px;
	left: 300px;
	z-index: 5;
	box-shadow: 0 4px 8px rgba(28, 28, 30);
}

#ID_WB_IMAGE_BOTTOM {
	width: 400px;
	height: auto;
	top: 40px;
	left: -20px;
	box-shadow: 0 4px 8px rgba(28, 28, 30);
}

#ID_WB_IMAGE_M_TOP {
	width: 300px;
	top: 150px;
	left: 350px;
	box-shadow: 0 4px 8px rgba(28, 28, 30);
}

#ID_STAR_IMAGE_TOP {
	top: -80px;
}

#ID_STAR_IMAGE_MID {
	top: 100px;
	left: 50px;
}

#ID_STAR_IMAGE_BOT {
	top: 15px;
	left: 450px;
}

.custom-image-layer2 {
	position: absolute;
	width: 200px;
	height: 300px;
	border-radius: 10px;
	transition: transform 0.6s ease;
	/* Smooth scaling */
}

.custom-image-layer3 {
	position: absolute;
	width: 200px;
	border-radius: 10px;
	transition: transform 0.6s ease;
	/* Smooth scaling */
}

.image-layer-1 {
	z-index: 2;
	top: -100px;
	left: 200px;
}

.image-layer-2 {
	z-index: 3;
	top: 50px;
	/* Adjust as needed for overlapping effect */
	left: 150px;
	/* Adjust as needed for overlapping effect */
}

.image-layer-3 {
	z-index: 4;
	top: 200px;
	/* Adjust as needed for overlapping effect */
	left: 300px;
	/* Adjust as needed for overlapping effect */
}

.custom-text-section {
	text-align: center;
	margin-top: 350px;
	/* Adjust based on the height of the images */
	padding: 10px 20px;
}

.custom-main-title {
	font-size: var(--MP-font-size-huge);
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	margin: 10px 0;
}

.custom-summary {
	font-size: var(--MP-font-size-large);
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	line-height: 1.4;
}

.custom-learn-more-button {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	width: 100%;
	position: relative;
	z-index: 4;
}

.custom-card-button.custom-learn-more {
	padding: 10px 15px;
	background-color: var(--MP-fuchsia);
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	font-size: var(--MP-font-size-sm);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-family: var(--MP-primary-font);
	transition: background-color 0.3s ease;
}

.custom-card-button.custom-learn-more:hover {
	background-color: var(--MP-soft-pink);
}

.badge-container {
	position: relative;
	width: 1500px;
	max-height: 400px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 66px;
	opacity: 0.05;
	z-index: 1;
}

.circle-box {
	width: 89px;
	height: 89px;
	position: relative;
}

.circle-background {
	width: 89px;
	height: 89px;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 0px 4px 4px rgba(28, 28, 30, 0.25);
	/* Adjusted shadow color */
	border-radius: 50%;
}

.circle-content {
	width: 62px;
	height: 62px;
	position: absolute;
	top: 9px;
	left: 13px;
}

.small-rect1 {
	width: 31.14px;
	height: 9.15px;
	position: absolute;
	top: 6.5px;
	left: 15.57px;
}

.small-rect2 {
	width: 53.26px;
	height: 38.38px;
	position: absolute;
	top: 18.3px;
	left: 4.92px;
}

.circle-label {
	width: 54px;
	height: 21px;
	position: absolute;
	top: 34px;
	left: 6px;
	font-size: var(--MP-font-size-base);
	font-family: var(--MP-secondary-font);
	font-weight: var(--MP-font-weight-normal);
	text-align: center;
}

/* Image centering */
.centered-image {
	width: 62px;
	height: 62px;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Specific Styles for Each Badge */
#badge1 .circle-background {
	background: linear-gradient(180deg, #fff 20%, #e4e4e4 98%);
}

#badge1 .small-rect1,
#badge1 .small-rect2 {
	background: linear-gradient(180deg, #fff 20%, #e4e4e4 98%);
}

#badge1 .circle-label {
	color: #00849e;
}

/* Badge 2 */
#badge2 .circle-background {
	background: linear-gradient(180deg, #666666 26%, #000 100%);
}

#badge2 .small-rect1,
#badge2 .small-rect2 {
	background: linear-gradient(180deg, #666666 26%, #000 100%);
}

#badge2 .circle-label {
	color: #ffffff;
}

/* Badge 3 */
#badge3 .circle-background {
	background: linear-gradient(180deg, #00849e 0%, #005f72 100%);
}

#badge3 .small-rect1,
#badge3 .small-rect2 {
	background: linear-gradient(180deg, #00849e 0%, #005f72 100%);
}

#badge3 .circle-label {
	color: #ffffff;
}

/* Badge 4 */
#badge4 .circle-background {
	background: linear-gradient(180deg, #06761e 0%, #00450f 100%);
}

#badge4 .small-rect1,
#badge4 .small-rect2 {
	background: linear-gradient(180deg, #06761e 0%, #00450f 100%);
}

#badge4 .circle-label {
	color: #ffffff;
}

/* Badge 5 */
#badge5 .circle-background {
	background: linear-gradient(180deg,
			var(--MP-burnt-orange) 0%,
			#b83d00 100%);
}

#badge5 .small-rect1,
#badge5 .small-rect2 {
	background: linear-gradient(180deg,
			var(--MP-burnt-orange) 0%,
			#b83d00 100%);
}

#badge5 .circle-label {
	color: #ffffff;
}

/* Badge 6 */
#badge6 .circle-background {
	background: linear-gradient(180deg, #f00004 0%, #a20003 100%);
}

#badge6 .small-rect1,
#badge6 .small-rect2 {
	background: linear-gradient(180deg, #f00004 0%, #a20003 100%);
}

#badge6 .circle-label {
	color: #ffffff;
}

/* Badge 7 */
#badge7 .circle-background {
	background: linear-gradient(180deg, #f8ea9a 0%, var(--MP-gold-muted) 100%);
}

#badge7 .small-rect1,
#badge7 .small-rect2 {
	background: linear-gradient(180deg, #f8ea9a 0%, var(--MP-gold-muted) 100%);
}

#badge7 .circle-label {
	color: #000;
}

/* Badge 8 */
#badge8 .circle-background {
	background: linear-gradient(180deg, #fca2db 0%, #d178a6 100%);
}

#badge8 .small-rect1,
#badge8 .small-rect2 {
	background: linear-gradient(180deg, #fca2db 0%, #d178a6 100%);
}

#badge8 .circle-label {
	color: #ffffff;
}

/* Badge 9 */
#badge9 .circle-background {
	background: linear-gradient(180deg, #5fa2af 0%, #417e8c 100%);
}

#badge9 .small-rect1,
#badge9 .small-rect2 {
	background: linear-gradient(180deg, #5fa2af 0%, #417e8c 100%);
}

#badge9 .circle-label {
	color: #ffffff;
}

/* Badge 10 */
#badge10 .circle-background {
	background: linear-gradient(180deg, #baf0c7 0%, #88c898 100%);
}

#badge10 .small-rect1,
#badge10 .small-rect2 {
	background: linear-gradient(180deg, #baf0c7 0%, #88c898 100%);
}

#badge10 .circle-label {
	color: #000;
}

/* Badge 11 */
#badge11 .circle-background {
	background: linear-gradient(180deg, #fcb692 0%, #c7886c 100%);
}

#badge11 .small-rect1,
#badge11 .small-rect2 {
	background: linear-gradient(180deg, #fcb692 0%, #c7886c 100%);
}

#badge11 .circle-label {
	color: #000;
}

/* Badge 12 */
#badge12 .circle-background {
	background: linear-gradient(180deg, #eb6d6f 0%, #b85052 100%);
}

#badge12 .small-rect1,
#badge12 .small-rect2 {
	background: linear-gradient(180deg, #eb6d6f 0%, #b85052 100%);
}

#badge12 .circle-label {
	color: #ffffff;
}

/* Badge 13 */
#badge13 .circle-background {
	background: linear-gradient(180deg, #001a9e 0%, #001166 100%);
}

#badge13 .small-rect1,
#badge13 .small-rect2 {
	background: linear-gradient(180deg, #001a9e 0%, #001166 100%);
}

#badge13 .circle-label {
	color: #ffffff;
}

/* Badge 14 */
#badge14 .circle-background {
	background: linear-gradient(180deg, #ffde22 0%, #c6ab1a 100%);
}

#badge14 .small-rect1,
#badge14 .small-rect2 {
	background: linear-gradient(180deg, #ffde22 0%, #c6ab1a 100%);
}

#badge14 .circle-label {
	color: #000;
}

/* Badge 15 */
#badge15 .circle-background {
	background: linear-gradient(180deg, #4ecca3 0%, #378e7a 100%);
}

#badge15 .small-rect1,
#badge15 .small-rect2 {
	background: linear-gradient(180deg, #4ecca3 0%, #378e7a 100%);
}

#badge15 .circle-label {
	color: #ffffff;
}

/* Badge 16 */
#badge16 .circle-background {
	background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
}

#badge16 .small-rect1,
#badge16 .small-rect2 {
	background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
}

#badge16 .circle-label {
	color: #000000;
}

/* Badge 17 */
#badge17 .circle-background {
	background: linear-gradient(180deg, #6495ed 0%, #4169e1 100%);
}

#badge17 .small-rect1,
#badge17 .small-rect2 {
	background: linear-gradient(180deg, #6495ed 0%, #4169e1 100%);
}

#badge17 .circle-label {
	color: #ffffff;
}

/* Badge 18 */
#badge18 .circle-background {
	background: linear-gradient(180deg, #8a2be2 0%, #5d3fd3 100%);
}

#badge18 .small-rect1,
#badge18 .small-rect2 {
	background: linear-gradient(180deg, #8a2be2 0%, #5d3fd3 100%);
}

#badge18 .circle-label {
	color: #ffffff;
}

/* Badge 19 */
#badge19 .circle-background {
	background: linear-gradient(180deg, #ff6347 0%, #cd5c5c 100%);
}

#badge19 .small-rect1,
#badge19 .small-rect2 {
	background: linear-gradient(180deg, #ff6347 0%, #cd5c5c 100%);
}

#badge19 .circle-label {
	color: #ffffff;
}

/* Badge 20 */
#badge20 .circle-background {
	background: linear-gradient(180deg, #ffdab9 0%, #ffc0cb 100%);
}

#badge20 .small-rect1,
#badge20 .small-rect2 {
	background: linear-gradient(180deg, #ffdab9 0%, #ffc0cb 100%);
}

#badge20 .circle-label {
	color: #333333;
}

/* Badge 21 */
#badge21 .circle-background {
	background: linear-gradient(180deg, #708090 0%, #2f4f4f 100%);
}

#badge21 .small-rect1,
#badge21 .small-rect2 {
	background: linear-gradient(180deg, #708090 0%, #2f4f4f 100%);
}

#badge21 .circle-label {
	color: #ffffff;
}

/* Badge 22 */
#badge22 .circle-background {
	background: linear-gradient(180deg, #32cd32 0%, #228b22 100%);
}

#badge22 .small-rect1,
#badge22 .small-rect2 {
	background: linear-gradient(180deg, #32cd32 0%, #228b22 100%);
}

#badge22 .circle-label {
	color: #ffffff;
}

/* Badge 23 */
#badge23 .circle-background {
	background: linear-gradient(180deg, #d2691e 0%, #8b4513 100%);
}

#badge23 .small-rect1,
#badge23 .small-rect2 {
	background: linear-gradient(180deg, #d2691e 0%, #8b4513 100%);
}

#badge23 .circle-label {
	color: #ffffff;
}

/* Badge 24 */
#badge24 .circle-background {
	background: linear-gradient(180deg, #ff4500 0%, #b22222 100%);
}

#badge24 .small-rect1,
#badge24 .small-rect2 {
	background: linear-gradient(180deg, #ff4500 0%, #b22222 100%);
}

#badge24 .circle-label {
	color: #ffffff;
}

/* Badge 25 */
#badge25 .circle-background {
	background: linear-gradient(180deg, #da70d6 0%, #ba55d3 100%);
}

#badge25 .small-rect1,
#badge25 .small-rect2 {
	background: linear-gradient(180deg, #da70d6 0%, #ba55d3 100%);
}

#badge25 .circle-label {
	color: #ffffff;
}

/* Badge 26 */
#badge26 .circle-background {
	background: linear-gradient(180deg, #ffc0cb 0%, #ff69b4 100%);
}

#badge26 .small-rect1,
#badge26 .small-rect2 {
	background: linear-gradient(180deg, #ffc0cb 0%, #ff69b4 100%);
}

#badge26 .circle-label {
	color: #333333;
}

/* Badge 27 */
#badge27 .circle-background {
	background: linear-gradient(180deg, #7fffd4 0%, #20b2aa 100%);
}

#badge27 .small-rect1,
#badge27 .small-rect2 {
	background: linear-gradient(180deg, #7fffd4 0%, #20b2aa 100%);
}

#badge27 .circle-label {
	color: #ffffff;
}

/* Badge 28 */
#badge28 .circle-background {
	background: linear-gradient(180deg, #ffd700 0%, #daa520 100%);
}

#badge28 .small-rect1,
#badge28 .small-rect2 {
	background: linear-gradient(180deg, #ffd700 0%, #daa520 100%);
}

#badge28 .circle-label {
	color: #000000;
}

/* Badge 29 */
#badge29 .circle-background {
	background: linear-gradient(180deg, #4682b4 0%, #1e90ff 100%);
}

#badge29 .small-rect1,
#badge29 .small-rect2 {
	background: linear-gradient(180deg, #4682b4 0%, #1e90ff 100%);
}

#badge29 .circle-label {
	color: #ffffff;
}

/* Badge 30 */
#badge30 .circle-background {
	background: linear-gradient(180deg, #ff6347 0%, #ff4500 100%);
}

#badge30 .small-rect1,
#badge30 .small-rect2 {
	background: linear-gradient(180deg, #ff6347 0%, #ff4500 100%);
}

#badge30 .circle-label {
	color: #ffffff;
}

/* Badge 31 */
#badge31 .circle-background {
	background: linear-gradient(180deg, #2e8b57 0%, #006400 100%);
}

#badge31 .small-rect1,
#badge31 .small-rect2 {
	background: linear-gradient(180deg, #2e8b57 0%, #006400 100%);
}

#badge31 .circle-label {
	color: #ffffff;
}

.learning-center-container {
	color: var(--MP-off-white);
	/* Off-White text color */
	text-align: center;
	font-family: var(--MP-primary-font);
	width: 90%;
	/* Dynamically adjusts to 90% of the viewport width */
	max-width: 1800px;
	/* Limits the maximum width for readability */
	margin: 0 auto;
	/* Centers the container horizontally */
	box-sizing: border-box;
	/* Includes padding in width calculations */
	display: flex;
	/* Allows alignment of child elements if needed */
	flex-direction: column;
	/* Ensures vertical stacking of children */
	gap: 20px;
	/* Space between child elements */
}

.learning-center-header h1 {
	font-size: var(--MP-font-size-xxl);
	font-weight: var(--MP-font-weight-bold);
	margin-top: 150px;
}

.learning-center-header p {
	font-size: var(--MP-font-size-md);
	margin: 10px 0 40px;
}

.learning-center-content {
	display: flex;
	flex-wrap: wrap;
	/* Enables wrapping of child elements */
	justify-content: center;
	/* Centers items horizontally */
	align-items: flex-start;
	/* Aligns items to the top for wrapping */
	gap: 20px;
	/* Adjusts spacing between elements */
	margin-top: 20px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	max-width: 90vw;
	/* Ensures the container doesn't overflow */
	padding: 10px;
	/* Adds padding for better spacing */
	box-sizing: border-box;
	/* Includes padding in total size */
}

.learning-center-content.visible {
	opacity: 1;
	transform: translateY(0);
}

.learning-center-video {
	/* Ensures the video fits the container */
	height: auto;
	/* Maintains the aspect ratio */
	overflow: hidden;
	/* Hides any overflow */
	display: flex;
	/* Optional: Centers the video in the div */
	justify-content: center;
	align-items: center;
}

.learning-center-video video {
	width: 100%;
	/* Adjust video width */
	height: auto;
	/* Maintain aspect ratio */
	border-radius: 8px;
	/* Optional: Add rounded corners */
}

.learning-center-info {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	/* Allows items to wrap when space is limited */
	background-color: var(--MP-charcoal-gray);
	/* Charcoal Gray */
	color: var(--MP-off-white);
	/* Off-White */
	padding: 5%;
	/* Relative padding to adapt to viewport size */
	border-radius: 10px;
	flex: 1;
	position: relative;
	text-align: left;
	gap: 2em;
	/* Scales with font size for consistent spacing */
	max-width: 90%;
	/* Prevents overflow */
	margin: 0 auto;
	/* Centers the content horizontally */
	box-sizing: border-box;
}

.learning-links {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin-top: 20px;
	gap: 20px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.learning-links:not(.hidden) {
	max-height: 200px;
	/* Adjust as needed */
}

/* Guide styles */
.guide {
	margin-bottom: 1em;
	/* Scales with font size for consistency */
	padding: 1em;
	background-color: var(--MP-deep-navy);
	/* Deep Navy */
	border-radius: 6px;
	width: 100%;
	/* Allows content to fill the parent container */
	box-sizing: border-box;
	/* Ensures padding doesn't affect width */
	transition: transform 0.3s ease;
}

/* Change cursor to pointer when hovering over the links */
.insight-card-download:hover,
.insight-card-link:hover,
a[href="#insightsSection"]:hover {
	cursor: pointer;
	/* Changes the cursor to a hand pointer */
	text-decoration: underline;
	/* Optional: Add an underline effect */
	color: var(--MP-gold);
}

.guide h3 {
	color: #212121;
	/* Primary text color */
	margin-bottom: 0.5em;
	/* Proportional spacing */
	font-size: var(--MP-font-size-md);
	/* Relative font size */
}

.guide p {
	color: #757575;
	/* Secondary text color */
	font-size: var(--MP-font-size-sm);
	/* Relative font size for consistency */
}

.info-title {
	color: #757575;
	/* Secondary text color */
	font-size: var(--MP-font-size-sm);
	/* Relative font size */
	font-weight: var(--MP-font-weight-normal);
	margin: 0 0 1em;
}

.learning-center-info h2 {
	font-size: var(--MP-font-size-xl);
	/* Scales with viewport size */
	font-weight: var(--MP-font-weight-semi-bold);
	margin: 0 0 1em;
}

.info-details {
	color: #757575;
	/* Secondary text color */
	font-size: var(--MP-font-size-sm);
	margin: 0 0 1em;
}

.start-learning {
	color: var(--MP-light-blue);
	font-size: var(--MP-font-size-smd);
	font-weight: var(--MP-font-weight-semi-bold);
	text-decoration: none;
	display: inline-block;
}

.start-learning:hover {
	text-decoration: underline;
	/* Add underline on hover */
	cursor: pointer;
	/* Change cursor to hand */
	color: var(--MP-gold);
}

.info-arrow {
	position: absolute;
	top: 2%;
	/* Adjusts relative to container size */
	right: 2%;
	/* Adjusts relative to container size */
	font-size: var(--MP-font-size-lg);
	/* Scales with container */
	color: var(--MP-light-blue);
}

#ID_DS_GUIDE1 {
	background-color: var(--MP-dark-red);
}

#ID_DS_GUIDE2 {
	background-color: var(--MP-deep-purple);
}

#ID_DS_GUIDE3 {
	background-color: var(--MP-forest-green);
}

.guide:hover {
	transform: scale(1.05);
	/* Slightly increase the size on hover */
	background-color: var(--MP-navy-soft);
	/* Change background color on hover */
	box-shadow: 0 4px 8px rgba(28, 28, 30, 0.8);
	/* Adjusted shadow color */
}

.guide:hover h3 {
	color: var(--MP-light-blue);
	/* Change text color for title on hover */
}

.guide:hover p {
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	/* Slightly brighten the text color on hover */
}

/* Container styling */
#ID_INS_INSIGHT_CARD_CONTAINER {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 30px;
	justify-content: space-between;
	margin-top: 100px;
	margin-left: 20px;
	max-width: 1800px;
	width: 90vw;
	justify-self: center;
}

/* Individual card styling */
.insight-card {
	width: 300px;
	height: 400px;
	background-color: var(--MP-charcoal-gray);
	/* Replaced #1a1a1a with Charcoal Gray */
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(28, 28, 30, 0.2);
	/* Adjusted shadow color */
	transition: transform 0.3s ease;
}

.insight-card:hover {
	transform: translateY(-10px) scale(1.05);
}

/* Image section */
.insight-card-image {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
	/* Replaced #f0f0f0 with Cool Gray */
}

.insight-card-download {
	font-size: var(--MP-font-size-medium);
	font-weight: var(--MP-font-weight-medium);
}

.insight-card-image img {
	max-width: 100%;
}

/* Content section */
.insight-card-content {
	margin-top: 50px;
	padding: 16px;
	background-color: var(--MP-charcoal-gray);
	/* Replaced #1a1a1a with Charcoal Gray */
}

.insight-card-meta {
	color: #757575;
	/* Updated to secondary text color */
	font-size: var(--MP-font-size-small);
	margin-bottom: 8px;
}

.insight-card-title {
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	font-size: var(--MP-font-size-medium);
	font-weight: var(--MP-font-weight-bold-text);
	margin-bottom: 16px;
}

.insight-card-link {
	color: var(--MP-bright-purple);
	/* Updated to Vibrant Azure */
	font-size: var(--MP-font-size-medium);
	font-weight: var(--MP-font-weight-medium);
	text-decoration: none;
	line-height: 40px;
}

.insight-card-link:hover {
	text-decoration: underline;
}

.section-title {
	font-size: var(--MP-font-size-xlarge);
	font-weight: var(--MP-font-weight-semi-bold);
	margin-top: 125px;
	margin-bottom: 20px;
	color: var(--MP-charcoal-gray);
}

.term-title {
	font-weight: var(--MP-font-weight-semi-bold);
}

.title-frame {
	margin-bottom: 20px;
}

.title-text {
	font-size: var(--MP-font-size-huge);
	font-weight: var(--MP-font-weight-semi-bold);
	margin-left: 20px;
	margin-top: 40px;
	color: var(--MP-charcoal-gray);
}

#insights-section .title-text {
	font-size: var(--MP-font-size-huge);
	color: wheat;
	/* Change to your desired font size */
}

#ID_DL_pressSection {
	margin-top: 200px;
	padding: 20px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
}

#ID_DL_pressSection .modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
}

#ID_DL_pressSection .modal-content {
	background: rgb(8, 8, 8);
	width: 80%;
	max-width: 90vw;
	border-radius: 8px;
	position: relative;
}

#ID_DL_pressSection .modal .close {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 24px;
	cursor: pointer;
}

.press-button:active {
	opacity: 0.8;
	transform: scale(0.9);
}

.press-section-title {
	font-size: var(--MP-font-size-xlarge);
	font-weight: var(--MP-font-weight-semi-bold);
	margin-bottom: 20px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
}

.press-grid {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 40px;
	justify-content: center;
	/* Centers items horizontally */
	align-content: center;
	/* Centers items vertically if there's extra space */
	align-items: center;
	/* Centers items vertically within each row */
}

/* Individual card styling */
.press-card {
	position: relative;
	background-color: rgb(65, 64, 64);
	/* Replaced #1c1c1c with Charcoal Gray */
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 6px 4px 6px rgba(0, 0, 0, 0.6);
	/* Adjusted shadow color */
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	height: 550px;
	width: 500px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
}

.press-card-image img {
	width: 100%;
	height: auto;
	display: block;
}

.press-card-content {
	padding: 15px;
}

/* Title styling */
.press-card-title {
	font-size: var(--MP-font-size-base);
	font-weight: var(--MP-font-weight-semi-bold);
	margin-top: 10px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	transition: color 0.3s ease;
}

/* Subtitle styling */
.press-card-subtitle {
	font-size: var(--MP-font-size-small);
	color: var(--MP-secondary-gray);
	margin-top: 5px;
}

/* Badge styling */
.press-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: var(--MP-dusty-gray);
	/* Replaced #ff6b6b with Crimson Red */
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	padding: 5px 10px;
	font-size: var(--MP-font-size-tiny);
	font-weight: var(--MP-font-weight-semi-bold);
	border-radius: 4px;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.press-card:hover {
	transform: translateY(-10px) scale(1.05);
	/* Lift and scale effect */
	box-shadow: 0 8px 16px rgba(28, 28, 30, 0.2);
	/* Enhanced shadow */
}

.press-card:hover .press-card-badge {
	color: var(--MP-gold);
	/* Updated to Tangerine */
	/* Change badge color on hover */
}

.press-card:hover .press-card-title {
	color: var(--MP-gold);
	/* Updated to Tangerine */
	/* Change title color on hover */
}

.custom-press-button {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	width: 100%;
	position: relative;
	z-index: 4;
}

.press-button-container {
	display: flex;
}

.press-button {
	position: relative;

	background-color: var(--MP-gold);
	/* Replaced #B6E5F1 with Vibrant Azure */
	color: #333;
	padding: 10px 20px;
	font-size: var(--MP-font-size-xs);
	font-weight: var(--MP-font-weight-bold-text);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s ease;
}

.press-button:hover {
	background-color: var(--MP-gold-muted);
	/* Replaced #9AD8C6 with new accent color */
}

/* Container styling */
#ID_DL_downloadSection {
	margin-top: 200px;
	padding: 20px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
}

.download-button:active {
	opacity: 0.8;
	transform: scale(0.9);
}

.download-section-title {
	font-size: var(--MP-font-size-xlarge);
	font-weight: var(--MP-font-weight-semi-bold);
	margin-bottom: 20px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
}

.download-grid {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 40px;
	justify-content: center;
	/* Centers items horizontally */
	align-content: center;
	/* Centers items vertically if there's extra space */
	align-items: center;
	/* Centers items vertically within each row */
}

/* Individual card styling */
.download-card {
	position: relative;
	background-color: rgb(65, 64, 64);
	/* Replaced #1c1c1c with Charcoal Gray */
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 6px 4px 6px rgba(0, 0, 0, 0.6);
	/* Adjusted shadow color */
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	height: 550px;
	width: 500px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
}

.download-card-image img {
	width: 100%;
	height: auto;
	display: block;
}

.download-card-content {
	padding: 15px;
}

/* Title styling */
.download-card-title {
	font-size: var(--MP-font-size-base);
	font-weight: var(--MP-font-weight-semi-bold);
	margin-top: 10px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	transition: color 0.3s ease;
}

/* Subtitle styling */
.download-card-subtitle {
	font-size: var(--MP-font-size-small);
	color: var(--MP-secondary-gray);
	margin-top: 5px;
}

/* Badge styling */
.download-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: var(--MP-dusty-gray);
	/* Replaced #ff6b6b with Crimson Red */
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	padding: 5px 10px;
	font-size: var(--MP-font-size-tiny);
	font-weight: var(--MP-font-weight-semi-bold);
	border-radius: 4px;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.download-card:hover {
	transform: translateY(-10px) scale(1.05);
	/* Lift and scale effect */
	box-shadow: 0 8px 16px rgba(28, 28, 30, 0.2);
	/* Enhanced shadow */
}

.download-card:hover .download-card-badge {
	color: var(--MP-gold);
	/* Updated to Tangerine */
	/* Change badge color on hover */
}

.download-card:hover .download-card-title {
	color: var(--MP-gold);
	/* Updated to Tangerine */
	/* Change title color on hover */
}

/* Container styling */
/* Main Container */
.about-container {
	background-color: var(--MP-royal-indigo);
	/* Replaced #7d558c with Royal Indigo */
	padding: 50px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	font-family: var(--MP-primary-font);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100vw;
	margin-top: 100px;
}

.about-content-title-container {
	width: 100%;
	flex-wrap: wrap;
	flex-direction: column;
	display: flex;
	align-content: flex-start;
}

/* Title */
.about-title {
	display: flex;
	justify-self: flex-start;
	align-self: flex-start;
	font-size: var(--MP-font-size-xxl);
	font-weight: var(--MP-font-weight-bold);
	margin-bottom: 40px;
}

/* Content */
.about-content {
	display: flex;
	justify-content: space-between;
	gap: 60px;
	max-width: 1000px;
	width: 80vw;
}

/* Text Section */
.about-text {
	flex: 1;
	text-align: left;
}

.about-text h2 {
	flex: 1;
	text-align: left;
	font-size: var(--MP-font-size-huge);
	font-weight: var(--MP-font-weight-bold-text);
	margin-bottom: 20px;
}

#ID_ABOUT_HIGHLIGHT {
	color: var(--MP-tangerine);
	/* Updated to Tangerine */
	position: relative;
}

/* Styling for the wrapper of the squiggle */
.squiggle-wrapper {
	display: flex;
	margin-top: -2px;
	margin-bottom: 60px;
	opacity: 0;
	/* Adjust as needed to position closer or farther */
}

/* Styling for the squiggly line */
.about-squiggle {
	width: 200px;
	/* Adjust width as needed */
	height: auto;
	margin-left: 70px;
}

.about-text p {
	flex: 1;
	font-size: var(--MP-font-size-large);
	font-weight: var(--MP-font-weight-light);
	margin: 0 0 20px;
	color: var(--MP-off-white);
	/* Replaced black with Off-White */
	text-align: justify;
}

.about-highlight {
	font-weight: var(--MP-font-weight-bold-text);
	color: var(--MP-tangerineK);
	position: relative;
	font-size: 54px;
}

/* Images Section */
.about-images {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex-wrap: nowrap;
	align-items: center;
}

.about-image-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 4px 10px rgba(28, 28, 30, 0.1);
	/* Adjusted shadow color */
	width: fit-content;
}

.about-image {
	width: 200px;
	height: 200px;
	border-radius: 10px;
}

.about-label {
	background-color: var(--MP-aqua-blue);
	/* Replaced #9AD8C6 with Vibrant Azure */
	color: #333;
	padding: 5px 10px;
	border-radius: 5px;
	font-size: var(--MP-font-size-xxs);
	margin-top: -10px;
}

.about-product-list h4 {
	color: #333;
	margin-bottom: 10px;
}

.about-product-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
	color: #333;
}

.about-product-list li {
	font-size: var(--MP-font-size-xs);
	margin: 5px 0;
}

.about-options {
	font-style: italic;
	color: #666;
}

.about-crm-button {
	margin-top: 10px;
	padding: 8px 15px;
	background-color: var(--MP-soft-green);
	/* Replaced #D4F34A with new accent color */
	color: #333;
	border-radius: 5px;
	font-size: var(--MP-font-size-xs);
	font-weight: var(--MP-font-weight-bold-text);
	text-align: center;
}

#ID_ABOUT_CONTENT {
	margin-top: 50px;
}

#ID_AB_IMAGE {
	transition: transform 0.6s ease-in-out;
	z-index: 5;
}

#ID_AB_IMAGE.scale-up {
	transform: scale(1.3);
}

.about-promise-section {
	display: block;
	align-items: center;
	justify-content: space-between;
	background-color: var(--MP-charcoal-gray);
	/* Replaced black with Charcoal Gray */
	padding: 100px 50px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	font-family: var(--MP-primary-font);
	width: 100vw;
}

.about-promise-content {
	padding-right: 40px;
}

.about-section-title {
	font-size: var(--MP-font-size-xxl);
	font-weight: var(--MP-font-weight-bold-text);
	margin: 0px;
}

.about-description {
	font-size: var(--MP-font-size-smd);
	margin-bottom: 30px;
}

.about-pillars {
	display: flex;
	flex-direction: column;
	gap: 60px;
	transition: gap 0.6s ease-in-out;
	/* Smooth transition for gap change */
	justify-self: center;
	align-self: center;
	max-width: 600px;
}

.about-pillars h3 {
	font-size: var(--MP-font-size-lg);
	/* Adjust as needed */
	font-weight: var(--MP-font-weight-bold-text);
	color: var(--MP-off-white);
	/* Ensure consistency with the Off-White theme */
	margin-bottom: 10px;
	/* Add spacing below the heading */
	text-transform: uppercase;
	/* Optional: For a stylized look */
	letter-spacing: 1px;
	/* Optional: For added emphasis */
}

.about-pillar {
	background-color: #484377;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	padding: 30px 20px;
	border-radius: 10px;
	font-weight: var(--MP-font-weight-medium);
	font-size: var(--MP-font-size-smd);
	transition: transform 0.3s;
}

.about-pillar:hover {
	transform: translateY(-10px) scale(1.05);
	/* Lift and scale effect */
	box-shadow: 0 8px 16px rgba(28, 28, 30, 0.2);
}

.about-pillar-discovery {
	background-color: #91abff;
	/* Replaced #B6E5F1 with Vibrant Azure */
	color: var(--MP-charcoal-gray);
	/* Replaced #111 with Charcoal Gray */
}

.about-creator-search {
	display: flex;
	flex-direction: column;
	gap: 15px;
	position: relative;
	width: 40vw;
}

.about-creator-image,
.about-influencer-image {
	max-width: 100%;
	border-radius: 15px;
	box-shadow: 0px 8px 14px rgba(28, 28, 30, 0.8);
	/* Adjusted shadow color now */
}

.about-influencer-image {
	position: absolute;
	top: 50px;
	left: 180px;
	width: 80%;
	max-width: 300px;
}

.content-group .redux-card-wide,
.content-group .card-grid {
	margin-left: 5px;
	margin-right: 5px;
	max-height: none;
	padding: 10px;
	line-height: 20px;
	color: var(--MP-charcoal-gray);
	text-align: justify;
	/* Adjust to full width */
}

.content-group .label-text {
	width: 100%;
	line-height: 24px;
	/* Adjust to full width */
}

.content-group .label-frame {
	width: 100%;
	line-height: 24px;
	margin-bottom: 20px;
	/* Adjust to full width */
}

.content-group li {
	color: var(--MP-charcoal-gray);
	font-size: var(--MP-font-size-base);
}

/* Main Container */
.merchant-section {
	background-color: var(--MP-deep-navy);
	/* Replaced #2C3E50 with Deep Navy */
	padding: 60px 20px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	font-family: var(--MP-primary-font);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.merchant-header {
	width: 100%;
}

.merchant-header h1 {
	font-size: var(--MP-font-size-xxl);
	font-weight: var(--MP-font-weight-bold);
	color: var(--MP-gold);
	/* Replaced var(--MP-neon-green) with Solar Gold */
	margin-bottom: 20px;
}

.merchant-header p {
	font-size: var(--MP-font-size-smd);
	padding-left: 50px;
	padding-right: 50px;
	margin-bottom: 20px;
	text-align: justify;
}

.merchant-visual {
	display: flex;
	gap: 40px;
	margin-top: 40px;
	align-items: center;
}

.merchant-visual-image {
	position: relative;
}

.merchant-visual-image img {
	border-radius: 10px;
	width: 250px;
	height: auto;
	box-shadow: 0 4px 12px rgba(28, 28, 30, 0.2);
}

.download-button {
	position: absolute;
	top: 20px;
	right: 20px;
	background-color: var(--MP-gold);
	/* Replaced #B6E5F1 with Vibrant Azure */
	color: #333;
	padding: 10px 20px;
	font-size: var(--MP-font-size-xs);
	font-weight: var(--MP-font-weight-bold-text);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s ease;
}

.download-button:hover {
	background-color: var(--MP-gold-muted);
	/* Replaced #9AD8C6 with new accent color */
}

.merchant-visual-stats {
	background-color: #34495e;
	border-radius: 10px;
	padding: 20px;
	color: #e5e5e5;
	font-size: var(--MP-font-size-sm);
	box-shadow: 0 4px 12px rgba(28, 28, 30, 0.2);
}

.merchant-visual-stats h3 {
	font-size: var(--MP-font-size-lg);
	color: var(--MP-gold);
	/* Replaced var(--MP-neon-green) with Solar Gold */
	margin-bottom: 15px;
}

.merchant-visual-stats ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.merchant-visual-stats li {
	font-size: var(--MP-font-size-sm);
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.merchant-visual-stats li span {
	font-weight: var(--MP-font-weight-bold-text);
	color: var(--MP-aqua-blue);
	/* Replaced #B6E5F1 with Vibrant Azure */
}

/* Core Values Section */
.core-values-section {
	background-color: var(--MP-charcoal-gray);
	/* Replaced black with Charcoal Gray */
	padding: 60px 20px;
	text-align: center;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
}

.core-values-section h2 {
	font-size: var(--MP-font-size-xl);
	font-weight: var(--MP-font-weight-bold-text);
	color: var(--MP-gold);
	/* Replaced var(--MP-neon-green) with Solar Gold */
	margin-bottom: 20px;
}

.highlight::after {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background-color: var(--MP-gold);
	/* Replaced var(--MP-neon-green) with Solar Gold */
	position: absolute;
	bottom: -5px;
	left: 0;
	transform: rotate(-2deg);
}

/* Cards within Core Values */
.values-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 100px;
}

.value-card {
	background-color: #2a2936;
	padding: 30px 20px;
	border-radius: 10px;
	text-align: center;
	width: 330px;
	color: white;
	/* Replaced white with Off-White */
	box-shadow: 0px 4px 10px rgba(28, 28, 30, 0.2);
	transition: transform 0.3s ease;
}

@keyframes wiggle {

	0%,
	100% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(-1deg);
	}

	50% {
		transform: rotate(1deg);
	}

	75% {
		transform: rotate(-1deg);
	}
}

.value-card.wiggle {
	animation: wiggle 0.6s ease-in-out;
}

.value-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 15px;
}

.value-icon img {
	width: 40px;
	height: 40px;
}

.value-card h3 {
	font-size: var(--MP-font-size-smd);
	font-weight: var(--MP-font-weight-bold-text);
	margin-bottom: 10px;
	color: #cccccc;
}

.value-card p {
	font-size: 20px;
	color: var(--MP-off-white);
	text-align: left;
}

#demo-tab,
#demo-tab-1,
#demo-tab-2,
#demo-tab-3 {
	background-color: var(--MP-purple-vivid);
	border-radius: 10px;
	margin-left: -20px;
	margin-top: 10px;
}

.demo-item {
	margin-left: 15px;
	padding: 5px;
	color: white;
}

/* Add styles for active tab if needed */
.tab-contents.active {
	font-weight: var(--MP-font-weight-bold-text);
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
}

#shop-tab {
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	font-weight: var(--MP-font-weight-bold-text);
	color: white;
	background-color: var(--MP-magenta);
	min-height: 50px;
	border-radius: 10px;
}

#shop-tab .label {
	color: white;
}

/* Container styling */
#ID_SP_supportSection {
	margin-top: 200px;
	padding: 20px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	width: 100vw;
}

#ID_CS_careersSection {
	margin-top: 50px;
	padding: 20px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	width: 100vw;
}

/* Container styling */
#ID_TP_topSection {
	margin-top: 200px;
	padding: 20px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	width: 100vw;
}

/* Container styling */
#ID_NW_networkSection {
	margin-top: 200px;
	padding: 20px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	width: 100vw;
}

/* Container styling */
#ID_CM_comSection {
	margin-top: 200px;
	padding: 20px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	width: 100vw;
}

.network-section .card-content-badge {
	width: 300px;
	height: 300px;
	background-color: var(--MP-charcoal-gray);
	/* Adjust color as needed */
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	z-index: 10;
}

#ID_TN_BADGE {
	position: fixed;
	top: 100px;
	right: 100px;
	width: 250px;
	height: 250px;
	background-color: var(--MP-tangerine);
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 1000;
}

#ID_TN_BADGE {
	color: white;
	font-size: 26px;
	margin-top: 26px;
}

#ID_FP_BADGE,
#ID_FP_BADGE2 {
	position: fixed;
	top: 50px;
	right: 50px;
	width: 200px;
	height: 200px;
	background-color: #b443ffbf;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 1000;
	cursor: pointer;
	gap: 10px;
}



#ID_FP_BADGE .badge-label,
#ID_FP_BADGE2 .badge-label {
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	font-family: inter, sans-serif;
	margin-top: -20px;
}

#ID_FP_LOGO,
#ID_FP_LOGO2 {
	height: 80px;
	width: auto;
	margin: 0;
	position: static;
	transform: none;
	/* center via flex */
	margin-left: 10px;
}

#ID_TN_TITLE {
	background-color: #baf0c700;
	border-radius: 50%;
	width: 175px;
	height: 20px;
	margin-top: 0px;
}

#ID_TN_FOURCLICK {
	position: fixed;
	background-color: #baf0c700;
	border-radius: 50%;
	width: 275px;
	min-height: 275px;
	margin-top: 0px;
	z-index: 12;
}

#ID_TN_BADGE li {
	display: relative;
	list-style: none;
	font-size: var(--MP-font-size-medium);
	color: var(--MP-off-white);
	margin: 3px 0;
}

.network-section .card-content-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.network-section .card-content-badge-title {
	font-size: var(--MP-font-size-medium);
	font-weight: var(--MP-font-weight-bold);
	color: var(--MP-off-white);
	margin-bottom: 10px;
	margin-top: 10px;
}

.network-section .card-content-badge li {
	list-style: none;
	font-size: var(--MP-font-size-medium);
	color: var(--MP-off-white);
	margin: 3px 0;
}

.network-section li {
	font-size: var(--MP-font-size-medium);
	/* Medium font size for readability */
	font-weight: var(--MP-font-weight-regular);
	/* Regular font weight for text */
	color: var(--MP-off-white);
	/* Consistent text color */
	line-height: 1.6;
	/* Improve readability */
	margin-bottom: 30px;
	text-decoration: none;
}

.network-section li strong {
	font-weight: var(--MP-font-weight-bold);
	/* Bold the key phrases for emphasis */
	color: var(--MP-off-white);
	/* Ensure it matches the text color */
}

.network-section h2,
.com-section h2,
.top-section h2 {
	font-size: var(--MP-font-size-huge);
	margin-bottom: 0px;
	font-weight: var(--MP-font-weight-light);
}

.com-section h2,
.top-section h2 {
	font-size: var(--MP-font-size-huge);
	margin-bottom: 0px;
	font-weight: var(--MP-font-weight-light);
}

/* Styling for the squiggly line */
.network-squiggle {
	width: 350px;
	/* Adjust width as needed */
	height: 30px;
	margin-left: 170px;
}

#ID_NETWORK_TITLE {
	margin-bottom: 40px;
}

/* Tokuhn Network Section */
.tokuhn-network {
	background: linear-gradient(135deg, #1e1e1e, #2e2e2e);
	/* Subtle gradient background */
	color: #fff;
	/* White text for contrast */
	padding: 40px 20px;
	text-align: center;
	border-radius: 10px;
}

.network-title {
	font-size: 2rem;
	font-weight: 700;
	color: #ffd700;
	/* Golden accent for title */
	margin-bottom: 10px;
}

.network-description {
	font-size: 20px;
	color: #ddd;
	/* Slightly off-white for description */
	margin-bottom: 30px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.network-description p {
	line-height: 1.4rem;
}

.network-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: center;
	margin-top: 60px;
}

.network-card {
	background: #292929;
	/* Card background */
	border-radius: 10px;
	padding: 20px;
	max-width: 500px;
	min-width: 500px;
	min-height: 600px;
	/* Maintain a consistent card height */
	width: 100%;
	text-align: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.network-card:hover {
	transform: translateY(-10px) scale(1.1);
	/* Combine vertical movement and scaling */
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
	/* Enhanced shadow on hover */
}

.network-card-icon img {
	max-width: 460px;
	height: auto;
	margin-bottom: 50px;
}

.network-card-title {
	font-size: 1.2rem;
	font-weight: 600;
	color: #ffd700;
	/* Golden accent for card titles */
	margin-bottom: 10px;
}

.network-card-description {
	font-size: 20px;
	line-height: 24px;
	color: #ccc;
	/* Lighter text for description */
	margin-top: 30px;
	text-align: justify;
}

.com-squiggle {
	width: 270px;
	/* Adjust width as needed */
	height: 30px;
	margin-left: 170px;
}

.top-squiggle {
	width: 200px;
	/* Adjust width as needed */
	height: 30px;
	margin-left: 170px;
}

.support-section h2 {
	font-size: var(--MP-font-size-huge);
	margin-bottom: 0px;
	font-weight: var(--MP-font-weight-light);
}

/* Styling for the squiggly line */
.support-squiggle {
	width: 200px;
	/* Adjust width as needed */
	height: auto;
	margin-left: 175px;
}

.support-section-title,
.network-section-title,
.com-section-title,
.top-section-title {
	font-size: var(--MP-font-size-xlarge);
	font-weight: var(--MP-font-weight-semi-bold);
	margin-bottom: 20px;
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
}

/* Container for the entire Top Pick section */
.top-pick-container {
	padding: 40px;
	text-align: center;
	background: linear-gradient(135deg, #292929, #1e1e1e);
	/* Subtle gradient */
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	width: 100%;
	margin: 0 auto;
	color: #ffffff;
}

/* Title for the Top Pick */
.top-pick-title {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 20px;
	color: #f39c12;
}

/* Card container for the image and badge */
.top-pick-card-prod {
	position: relative;
	max-width: 500px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 10px 20px 30px rgba(0, 0, 0, 0.2);
}

/* Image container to position badge over image */
.image-container {
	position: relative;
	display: inline-block;
}

.top-pick-card-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 20px;
	width: 100%;
	gap: 50px;
	color: var(--MP-off-white);
}

/* Main website image */
.top-pick-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Top Picks Info Container */
.top-picks-info {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
	background: var(--MP-deep-navy-gradient);
	/* Adjust based on your theme */
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	color: var(--MP-off-white);
	/* Off-white text for content */
	text-align: left;
	margin: 20px auto;
}

/* Title Styling */
.top-picks-title {
	font-size: var(--MP-font-size-large);
	/* Use a large font size */
	font-weight: var(--MP-font-weight-bold);
	/* Bold for emphasis */
	color: var(--MP-off-white);
	/* Ensure the title matches the text color */
	margin-bottom: 10px;
}

/* Benefits List Styling */
.top-picks-benefits {
	list-style-type: none;
	/* Remove default list styling */
	padding: 0;
	margin: 0;
}

.top-picks-benefits li {
	font-size: var(--MP-font-size-medium);
	/* Medium font size for readability */
	font-weight: var(--MP-font-weight-regular);
	/* Regular font weight for text */
	color: var(--MP-off-white);
	/* Consistent text color */
	line-height: 1.6;
	/* Improve readability */
	margin-bottom: 10px;
}

.top-picks-benefits li strong {
	font-weight: var(--MP-font-weight-bold);
	/* Bold the key phrases for emphasis */
	color: var(--MP-off-white);
	/* Ensure it matches the text color */
}

.top-picks-intro {
	color: var(--MP-off-white);
	padding: 40px 20px;
	border-radius: 10px;
	margin-bottom: 40px;
}

.intro-container {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.intro-title {
	font-size: var(--MP-font-size-xxlarge);
	font-weight: var(--MP-font-weight-bold);
	margin-bottom: 20px;
	color: var(--MP-gold);
}

.intro-description {
	font-size: var(--MP-font-size-lg);
	line-height: 1.6;
	margin-bottom: 40px;
}

.intro-tophighlights {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

.tophighlight {
	text-align: center;
	max-width: 300px;
	background: var(--MP-blue-dark);
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background-color: var(--MP-deep-navy);
}

.tophighlight:hover {
	transform: translateY(-10px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.tophighlight-image {
	width: 100px;
	height: 100px;
	margin-bottom: 15px;
}

.tophighlight-title {
	font-size: var(--MP-font-size-md);
	font-weight: var(--MP-font-weight-bold);
	margin-bottom: 10px;
	color: var(--MP-gold);
}

.tophighlight-text {
	font-size: var(--MP-font-size-sm);
	line-height: 1.4;
	color: var(--MP-off-white);
}

.benefits-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	font-family: var(--MP-primary-font);
	color: var(--MP-off-white);
}

.benefit {
	background: linear-gradient(135deg, rgb(25, 25, 25), rgb(35, 35, 35));
	border-radius: 10px;
	padding: 20px 30px;
	width: 100%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit:hover {
	transform: translateY(-10px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.benefit-title {
	font-size: var(--MP-font-size-xlarge);
	font-weight: var(--MP-font-weight-bold);
	margin-bottom: 15px;
	color: var(--MP-gold);
}

.benefit-features {
	list-style: none;
	padding: 0;
	margin: 0;
}

.benefit-features li {
	font-size: var(--MP-font-size-md);
	margin: 10px 0;
	line-height: 1.5;
	color: var(--MP-off-white);
}

/* Badge overlaid on top of the website image */
.top-pick-badge-image {
	position: absolute;
	top: 10px;
	/* Adjust the positioning */
	left: 10px;
	/* Adjust the positioning */
	width: 80px;
	/* Resize badge */
	height: auto;
	z-index: 2;
	/* Ensure it appears above the image */
	transform: rotate(-15deg);
	/* Optional: Slight tilt for style */
}

#ID_LIGHT_BADGE {
	transform: rotate(0deg);
	/* Optional: Slight tilt for style */
	top: 10px;
	/* Adjust the positioning */
	left: 415px;
	/* Adjust the positioning */
	height: 75px;
	width: 75px;
}

#ID_WHITE_BADGE {
	transform: rotate(0deg);
	/* Optional: Slight tilt for style */
	top: 280px;
	/* Adjust the positioning */
	left: 445px;
	/* Adjust the positioning */
	height: 50px;
	width: 50px;
}

#ID_PASTEL_BADGE {
	top: 255px;
	/* Adjust the positioning */
	left: 415px;
	/* Adjust the positioning */
	transform: rotate(0deg);
	/* Optional: Slight tilt for style */
}

#ID_WINK_BADGE {
	position: absolute;
	top: 5px;
	/* Starting position */
	left: 0px;
	/* Starting position */
	transform: rotate(-15deg);
	/* Optional: Slight tilt for style */
	height: 20px;
	width: 20px;
	animation: moveCorners 10s infinite;
	/* Apply animation */
}

/* Define the keyframes for moving the badge through each corner */
/* Define keyframes with delays */
@keyframes moveCorners {

	0%,
	10% {
		/* Hold at top-left */
		top: 5px;
		left: 0px;
	}

	25%,
	35% {
		/* Hold at top-right */
		top: 5px;
		left: 80px;
		transform: rotate(0deg);
	}

	50%,
	60% {
		/* Hold at bottom-right */
		top: 75px;
		left: 80px;
	}

	75%,
	85% {
		/* Hold at bottom-left */
		top: 75px;
		left: 0px;
	}

	100% {
		/* Back to top-left */
		top: 5px;
		left: 0px;
		transform: rotate(15deg);
	}
}

#ID_WIGGLE_BADGE {
	animation: wiggleBadge 10s infinite;
	/* Apply animation */
}

/* Define the keyframes for moving the badge through each corner */
/* Define keyframes with delays */
@keyframes wiggleBadge {
	0% {
		transform: rotate(-15deg);
		/* Initial tilt */
	}

	50% {
		transform: rotate(15deg);
		/* Tilt in the opposite direction */
	}

	100% {
		transform: rotate(-15deg);
		/* Return to initial tilt */
	}
}

/* Support Section Container */
.support-grid-container {
	padding: 40px;
	background: linear-gradient(135deg, #292929, #1e1e1e);
}

.support-title {
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	color: #ffffff;
	/* Matches text color from your support section */
	margin-bottom: 30px;
}

.support-grid {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 40px;
	justify-content: center;
	/* Centers items horizontally */
	align-content: center;
	/* Centers items vertically if there's extra space */
	align-items: center;
	/* Centers items vertically within each row */
	margin-top: 30px;
}

/* Individual card styling */
.support-card {
	position: relative;
	background-color: rgb(37, 32, 27);
	/* Replaced #1c1c1c with Charcoal Gray */
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 6px 4px 6px rgba(0, 0, 0, 0.6);
	/* Adjusted shadow color */
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	height: 550px;
	width: 500px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
}

.support-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.support-card-image {
	height: 281px;
}

.support-card-badge {
	background-color: #f39c12;
	/* Matches badge styling */
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	padding: 5px 10px;
	text-align: left;
}

.support-content {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-top: 20px;
	align-items: center;
	justify-items: center;
}

.support-card h2 {
	font-size: 36px;
	margin-left: 10px;
	margin-top: 10px;
	padding-left: 60px;
	padding-right: 60px;
	text-align: center;
}

.support-card p {
	font-size: 18px;
	font-weight: 300;
	padding-left: 30px;
	padding-right: 30px;
	text-transform: none;
	font-family: var(--MP-primary-font);
}

.faq-card .support-card-badge {
	background-color: var(--MP-bright-purple);
	/* Matches badge styling */
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	padding: 5px 10px;
	text-align: left;
}

.faq-card {
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	padding: 5px 10px;
	text-align: left;
}

/* FAQ Section Styles */
.faq-container {
	max-width: 95vw;
	margin: 20px auto;
	padding: 20px;
	background-color: var(--MP-deep-navy-gradient);
	border-radius: 10px;
	color: var(--MP-off-white);
	font-family: "Poppins", sans-serif;
}

.faq-master-container {
	margin-left: 5px;
	margin-top: 100px;
}

.faq-title {
	text-align: start;
	font-size: 1.8rem;
	margin-bottom: 20px;
	color: var(--MP-off-white);
	margin-left: 5px;
}

.faq-list {
	margin-top: 20px;
}

.faq-item {
	border-bottom: 1px solid var(--MP-off-white);
	padding: 10px 0;
}

.faq-question {
	background: none;
	border: none;
	width: 100%;
	text-align: left;
	font-size: 1rem;
	font-weight: 500;
	color: var(--MP-secondary-gray);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.faq-question:focus {
	outline: none;
}

.faq-answer {
	display: block;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
	font-size: 0.9rem;
	margin-top: 10px;
	color: var(--MP-off-white);
	opacity: 0;
}

.faq-answer.active {
	display: block;
	/* Ensure visibility */
	max-height: 500px;
	/* Expand smoothly */
	opacity: 1;
}

.faq-answer p {
	margin: 0;
}

.faq-answer[hidden] {
	display: none;
	max-height: 0;
	opacity: 0;
}

.faq-answer:not([hidden]) {
	max-height: 500px;
	/* Adjust based on content */
	opacity: 1;
}

.faq-item[aria-expanded="true"] .faq-answer {
	max-height: 100px;
	/* Adjust as needed for content */
}

.arrow {
	height: 35px;
	transition: transform 0.3s ease;
}

.faq-item[aria-expanded="true"] .arrow {
	transform: rotate(180deg);
}

.support-card-image img {
	width: 100%;
	height: 281px;
}

.video-container {
	width: 100%;
	height: 281px;
}

.video-container iframe {
	width: 100%;
	height: 281px;
}

.support-card-content {
	padding: 20px;
	color: #ffffff;
}

.support-card-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px;
	color: #ffffff;
}

.support-card-subtitle {
	font-size: 14px;
	color: #cccccc;
	line-height: 1.6;
}

.custom-support-button {
	display: flex;
	width: 120px;
	justify-self: flex-end;
	padding: 10px 20px;
	background-color: var(--MP-bright-purple);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	margin-top: 50px;
	margin-bottom: 20px;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.3s;
}

.faq-card .support-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: var(--MP-bright-purple);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.3s;
}

.support-button:hover {
	background-color: #d35400;
}

/* Compact Navigation Bar */
.compact {
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-self: center;
	justify-items: center;
	align-items: center;
	height: 75px;
	background: var(--MP-charcoal-gray);
	/* Replaced black with Charcoal Gray */
	border-radius: 10px;
	transition: transform 0.3s ease-in-out;
}

/* Class to hide compact when scrolled past 150px */
.compact.hidden {
	transform: translateY(-100%);
	/* Slide up to hide */
}

/* Style for the main tab container */
.building-blocks-tab {
	position: relative;
	padding: 10px;
	width: 175px;
}

#ID_LOG {
	width: 80px;
}

.building-blocks-tab-container {
	display: flex;
	flex-direction: row;
	padding: 10px;
	justify-content: center;
	justify-items: center;
	align-items: center;
}

.tab-contents .submenu {
	border-radius: 10px;
	display: none;
	/* Hide by default */
	position: absolute;
	/* Make submenu absolute to avoid layout shifts */
	top: 20px;
	/* Position below the tab label */
	left: -40px;
	padding: 40px;
	z-index: 10;
	/* Ensure submenu appears on top */
	background-color: var(--MP-charcoal-gray);
	/* Replaced black with Charcoal Gray */
	min-width: 250px;
}

/* Show submenu on hover over the tab-contents */
.tab-contents:hover .submenu {
	display: block;
}

.tab-contents .submenu-item.active {
	font-weight: var(--MP-font-weight-medium);
}

.tab-contents .submenu-item {
	padding: 5px 0px;
	cursor: pointer;
	white-space: nowrap;
	color: var(--MP-secondary-gray);
	/* Replaced gray with secondary text color */
	font-weight: var(--MP-font-weight-medium);
}

.tab-contents .submenu-item:hover {
	cursor: pointer;
	color: var(--MP-tangerine);
}

#landing-tab {
	display: flex;
	flex-direction: row;
}

#ID_TOKI {
	width: auto;
	height: 50px;
}

/* Ensure the submenu items are styled correctly */
#tokuhn-network,
#tokuhn,
#top-picks {
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	font-family: var(--MP-primary-font);
	font-size: var(--MP-font-size-large);
	font-weight: var(--MP-font-weight-light);
	letter-spacing: 0.1px;
	line-height: 20px;
	position: relative;
	text-align: center;
	white-space: nowrap;
	width: fit-content;
}

#tokuhn-network:hover,
#tokuhn:hover,
#top-picks:hover {
	color: var(--MP-off-white);
	/* Replaced white with Off-White */
	font-family: var(--MP-primary-font);
	font-size: var(--MP-font-size-large);
	font-weight: var(--MP-font-weight-bold);
	letter-spacing: 0.1px;
	line-height: 20px;
	position: relative;
	text-align: center;
	white-space: nowrap;
	width: fit-content;
}

/* Indicator styling */
.indicator .shape {
	display: none;
	width: 100%;
	height: 8px;
	border-radius: 50%;
}

.bubble-indicator {
	position: absolute;
	margin-left: 115px;
	margin-bottom: 20px;
}

.red-dot {
	background-color: var(--MP-crimson-red);
	/* Replaced red with Crimson Red */
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.compact .state-layer {
	align-items: flex-start;
	align-self: stretch;
	display: flex;
	flex: 1;
	flex-direction: column;
	flex-grow: 1;
	justify-content: flex-end;
	position: relative;
	width: 150px;
}

.compact .tab-contents {
	align-items: flex-start;
	align-self: stretch;
	display: flex;
	flex: 1;
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
	padding: 0px;
	position: relative;
	cursor: pointer;
}

.compact .div {
	align-items: center;
	align-self: stretch;
	display: flex;
	flex: 1;
	flex-direction: column;
	flex-grow: 1;
	justify-content: flex-end;
	position: relative;
	width: 100%;
}

.compact .text-wrapper {
	color: var(--MP-off-white);
	font-family: var(--MP-primary-font);
	font-size: var(--MP-font-size-small);
	font-weight: var(--MP-font-weight-medium);
	letter-spacing: 0.1px;
	line-height: 20px;
	position: relative;
	text-align: center;
	white-space: nowrap;
	width: fit-content;
}

.compact .indicator {
	align-self: stretch;
	height: 14px;
	position: relative;
	width: 100%;
}

.compact .label {
	color: var(--MP-secondary-gray);
	/* Replaced gray with secondary text color */
	font-family: var(--MP-primary-font);
	font-size: var(--MP-font-size-large);
	font-weight: var(--MP-font-weight-medium);
	letter-spacing: 0.1px;
	line-height: 20px;
	position: relative;
	text-align: center;
	white-space: nowrap;
	width: fit-content;
}

.compact .shape {
	background-color: transparent;
	border-radius: 100px 100px 0px 0px;
	height: 3px;
	left: 2px;
	position: relative;
	top: 11px;
}

.compact .tab-contents.active .label {
	color: var(--MP-off-white);
}

.compact .tab-contents.active .shape {
	background-color: var(--MP-off-white);
}

.compact .horizontal-dark-full {
	align-items: flex-start;
	align-self: stretch;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: center;
	position: relative;
	width: 100%;
}

.compact .divider {
	align-self: stretch;
	height: 1px;
	object-fit: cover;
	position: relative;
	width: 100%;
}

.compact .state-layer-wrapper {
	align-items: flex-end;
	background-color: var(--MP-charcoal-gray);
	display: flex;
	height: 72px;
	justify-content: center;
	margin-bottom: -49px;
	position: relative;
	width: 141px;
}

.compact .div-wrapper {
	align-items: flex-end;
	background-color: var(--MP-charcoal-gray);
	display: flex;
	height: 72px;
	justify-content: center;
	margin-bottom: -121px;
	position: relative;
	width: 141px;
}

.thank-you-container {
	display: flex;
	width: 80%;
	max-width: 100vw;
	background-color: var(--MP-royal-indigo-dark);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	position: fixed;
	/* Fixed to stay centered while scrolling */
	top: 50%;
	/* Position in the middle of the viewport */
	left: 50%;
	/* Center horizontally */
	transform: translate(-50%, -50%);
	/* Adjust positioning for centering */
}

.left-section {
	background-color: var(--MP-off-white);
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon-wrapper {
	background-color: var(--MP-off-white);
	border-radius: 50%;
	width: 150px;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon-wrapper img {
	width: 80%;
}

.right-section {
	flex: 1.5;
	padding: 2rem;
	background-color: var(--MP-royal-indigo-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.logo {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 1rem;
	color: #ffffff;
}

h1 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #ffffff;
}

.main-text {
	font-size: 1rem;
	color: #a3a3f0;
	/* Light purple text */
	margin-bottom: 1.5rem;
}

.small-text {
	font-size: 0.9rem;
	color: #d3d3d3;
	/* Lighter gray text */
}

.highlight {
	/* Replaced var(--MP-neon-green) with Solar Gold */
	position: relative;
	color: #a3a3f0;
	/* Light purple for emphasis */
	font-weight: bold;
}

/* Form Container */
.form-container,
.form-container-sales {
	position: fixed;
	/* Fixed to stay centered while scrolling */
	top: 50%;
	/* Position in the middle of the viewport */
	left: 50%;
	/* Center horizontally */
	transform: translate(-50%, -50%);
	/* Adjust positioning for centering */
	background-color: var(--MP-royal-indigo);
	padding: 2rem;
	/* Padding inside the form */
	border-radius: 8px;
	/* Rounded corners */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
	/* Shadow for elevation */
	width: 400px;
	/* Ensure it appears above other UI elements */
	display: block;
	/* Initially hidden */
}

.form-container,
.ID_FORM_CONTAINER_SALES_PAGE {
	display: block;
}

/* Backdrop Overlay */
.backdrop {
	position: fixed;
	/* Fixed to cover the entire viewport */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* Semi-transparent black background */
	z-index: 999;
	/* Below the form container but above the UI */
	display: none;
	/* Initially hidden */
}

.form-close {
	display: flex;
	justify-self: flex-end;
	cursor: pointer;
}

.form-header {
	text-align: center;
	margin-bottom: 1.5rem;
}

.form-header h1 {
	font-size: 1.8rem;
	margin: 0;
	color: white;
}

.form-group {
	margin-bottom: 1.5rem;
}

.form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
	color: #ffffff;
}

input[type="email"],
input[type="text"],
input[type="tel"],
input[type="url"] {
	width: 100%;
	padding: 0.8rem;
	font-size: 1rem;
	color: white;
	background-color: whitesmoke;
	border: 1px solid #444;
	border-radius: 4px;
	outline: none;
}

input[type="email"]::placeholder,
input[type="text"]::placeholder,
input[type="tel"]::placeholder {
	color: #888;
}

.radio-group label {
	display: block;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
	color: white;
}

input[type="radio"] {
	margin-right: 0.5rem;
}

.checkbox-group {
	font-size: 0.8rem;
	color: #d6d6f2;
}

.checkbox-group a {
	color: #ffd700;
	text-decoration: underline;
}

.error-message {
	display: none;
	font-size: 0.75rem;
	color: #ff6a6a;
	margin-top: 0.5rem;
}

.form-footer {
	text-align: center;
	margin-top: 1rem;
}

.global-error {
	display: none;
	font-size: 0.9rem;
	color: #ff6a6a;
	margin-bottom: 1rem;
	/* display: block; Show for global error */
}

.submit-button {
	background-color: var(--MP-gold);
	color: #1e1e3e;
	padding: 0.8rem 2rem;
	font-size: 1rem;
	font-weight: bold;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.submit-button:hover {
	background-color: var(--MP-gold);
}

#offer-dialog {
	position: fixed;
	/* Fixed to stay centered while scrolling */
	top: 50%;
	/* Position in the middle of the viewport */
	left: 50%;
	/* Center horizontally */
	transform: translate(-50%, -50%);
	/* Adjust positioning for centering */
	background-color: white;
}

/* Style for the dialog */
dialog {
	border: none;
	border-radius: 10px;
	box-shadow: 0 10px 25px rgba(28, 28, 30, 0.1);
	/* Adjusted shadow color */
	max-width: 500px;
	min-height: 350px;
	padding: 20px;
	width: 80%;
	/* Ensure minimum height to accommodate content */
}

dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

/* Styles for input fields */
.input-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}

.input-field label {
	font-family: var(--MP-primary-font);
	font-weight: var(--MP-font-weight-semi-bold);
	margin-bottom: 5px;
}

.input-field input {
	border: 1px solid #cfd8dc;
	/* Replaced #ccc with Cool Gray */
	border-radius: 5px;
	font-family: var(--MP-primary-font);
	font-size: var(--MP-font-size-small);
	padding: 10px;
}

#close-dialog,
#submit-dialog {
	align-items: center;
	background-color: var(--MP-purple-vivid);
	/* Updated to Vibrant Azure */
	border-radius: 10px;
	color: var(--MP-off-white);
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 8px;
	height: 40px;
	justify-content: center;
	overflow: hidden;
	padding-left: 20px;
	padding-right: 20px;
	position: relative;
	border: none;
	cursor: pointer;
}

.dialog-buttons {
	display: flex;
	justify-content: space-between;
}

/* Footer styles */
.custom-footer {
	background-color: #000;
	/* Black background */
	color: #fff;
	/* White text */
	padding: 40px;
	font-family: "Poppins", sans-serif;
	position: relative;
}

#thankyouSection .custom-footer,
#demoSection .custom-footer {
	display: none;
}

.footer-content {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.footer-demo {
	flex: 1;
	max-width: 300px;
	max-height: 76px;
}

.footer-demo-link {
	display: block;
	background-color: #3546d4;
	/* Button color */
	color: #fff;
	text-decoration: none;
	padding: 20px;
	border-radius: 8px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	max-height: 75px;
	align-content: center;
}

.footer-demo-link:hover {
	transform: scale(1.05);
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.footer-demo-link span {
	display: block;
	font-size: 14px;
	font-weight: 400;
	margin-top: 8px;
}

.footer-links {
	display: flex;
	flex: 3;
	justify-content: space-between;
	gap: 20px;
	margin-right: 10px;
	margin-left: 10px;
}

.footer-column h4 {
	font-size: 16px;
	margin-bottom: 10px;
	color: #aaa;
	/* Gray heading */
	text-transform: uppercase;
}

.footer-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-column ul li {
	margin-bottom: 10px;
}

.footer-column ul li a {
	color: #fff;
	/* Link color */
	text-decoration: none;
	font-size: 14px;
}

.footer-column ul li a:hover {
	text-decoration: underline;
}

.footer-bottom {
	margin-top: 40px;
	text-align: center;
	font-size: 12px;
	color: #aaa;
	/* Gray text */
}

.content-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
	margin-top: 5px;
	margin-left: 20px;
	width: 95vw;
	font-family: var(--MP-primary-font);
	font-size: var(--MP-font-size-base);
	font-weight: var(--MP-font-weight-normal);
}

.header {
	align-items: center;
	display: flex;
	font-family: var(--MP-primary-font);
	font-size: var(--MP-font-size-xxlarge);
	font-weight: var(--MP-font-weight-bold);
	justify-content: space-between;
	padding: 20px;
	width: 100%;
}

.breadcrumb {
	align-items: center;
	display: flex;
}

.breadcrumb-item {
	color: var(--MP-secondary-gray);
	/* Replaced #606060 with secondary text color */
	font-family: var(--MP-primary-font);
	font-size: var(--MP-font-size-xxlarge);
	font-weight: var(--MP-font-weight-bold);
	margin-right: 8px;
}

.breadcrumb-separator {
	color: var(--MP-secondary-gray);
	/* Replaced #606060 with secondary text color */
	font-size: var(--MP-font-size-medium);
	margin-right: 8px;
}

.breadcrumb-item.current {
	color: var(--MP-charcoal-gray);
	/* Replaced #000000 with Charcoal Gray */
	font-weight: var(--MP-font-weight-bold-text);
}

.header-right {
	align-items: center;
	display: flex;
}

.dropdown-button {
	background-color: #f4f6f8;
	/* Replaced #F0F0F0 with Cool Gray */
	border: 1px solid #cfd8dc;
	/* Replaced #CCCCCC with Cool Gray */
	border-radius: 4px;
	color: var(--MP-charcoal-gray);
	/* Replaced #000000 with Charcoal Gray */
	cursor: pointer;
	font-size: var(--MP-font-size-base);
	margin-right: 20px;
	padding: 10px 20px;
	position: relative;
}

.dropdown-select {
	cursor: pointer;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.dropdown {
	margin-right: 20px;
	position: relative;
}

.dropdown-text {
	color: var(--MP-charcoal-gray);
	/* Replaced #000000 with Charcoal Gray */
	font-size: var(--MP-font-size-base);
}

.user-info {
	align-items: center;
	display: flex;
}

.user-company {
	color: var(--MP-charcoal-gray);
	/* Replaced #000000 with Charcoal Gray */
	font-size: var(--MP-font-size-base);
	margin-right: 8px;
}

.user-name {
	color: var(--MP-secondary-gray);
	/* Replaced #606060 with secondary text color */
	font-size: var(--MP-font-size-small);
	margin-right: 20px;
}

.user-avatar {
	background-color: #e0e0e0;
	border-radius: 50%;
	height: 32px;
	width: 32px;
}

/* Ensure that all colors and styles align with your specified palette */
.infographic2400-body strong {
	font-weight: var(--MP-font-weight-bold-text);
}

.infographic2400-body h4 {
	font-size: var(--MP-font-size-large);
	font-weight: var(--MP-font-weight-normal);
}

.infographic-frame {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	justify-content: center;
	overflow-x: hidden;
	position: relative;
	width: 100%;
}

.infographic-frame .info-graphic {
	height: 750px;
	position: relative;
}

.infographic-frame .img {
	max-width: 650px;
	position: relative;
}

.infographic2400-body {
	font-family: var(--MP-primary-font);
	margin: 0;
	padding: 20px;
	max-width: 94vw;
}

.infographic2400-container {
	margin: auto;
	width: 90vw;
	justify-content: center;
}

.infographic2400-container h1 {
	font-size: var(--MP-font-size-xxl);
	line-height: 3em;
	color: white;
	text-align: center;
	margin-bottom: 20px;
	border-bottom: 2px solid white;
	padding-bottom: 10px;
}

.infographic2400-container h2 {
	font-size: var(--MP-font-size-xlg);
	color: white;
	margin-top: 30px;
	margin-bottom: 10px;
	background-color: #00000000;
}

.infographic2400-container h3 {
	font-size: var(--MP-font-size-lg);
	color: white;
	margin-top: 20px;
	margin-bottom: 20px;
}

.infographic2400-container p {
	font-size: var(--MP-font-size-smd);
	line-height: 1.5em;
	margin-top: 20px;
	text-align: justify;
	margin-bottom: 30px;
	max-width: 100%;
	color: white;
}

.infographic2400-sub-section {
	margin-bottom: 50px;
}

a {
	color: #00849e;
}

li {
	color: #00849e;
	font-size: var(--MP-font-size-smd);
	line-height: 1.2em;
	margin-bottom: 30px;
	text-align: left;
}

#fashionpopSection li {
	color: white;
	font-size: 16px;
	line-height: 28px;
	margin-bottom: 30px;
	text-align: left;
}

#ID_MP_CONCLUSION strong {
	color: var(--MP-magenta);
	font-size: var(--MP-font-size-lg);
}

#ID_MP_CONCLUSION li {
	color: whitesmoke;
	font-size: var(--MP-font-size-large);
}

.infographic2400-section {
	display: flex;
	flex-direction: column;
	background: #00000000;
	margin-bottom: 40px;
	margin-top: 40px;
	border-radius: 10px;
	padding: 60px;
	justify-content: center;
}

.infographic2400-section img {
	height: auto;
	display: block;
	margin: 10px auto;
	max-width: 60vw;
	justify-self: center;
}

.infographic2400-source {
	font-style: italic;
	color: #666;
	margin-top: 10px;
}

.infographic2400-conclusion {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 2px solid #00849e;
}

.infographic2400-highlight {
	background-color: #00849e;
	padding-left: 3px;
	padding-right: 3px;
	border-radius: 10px;
	color: #fffcfc;
}

.infographic2400-section .infographic2400-image {
	max-height: 500px;
	border-radius: 10px;
	margin-top: 100px;
	margin-bottom: 20px;
	max-width: 60vw;
}

.infographic2400-section .infographic2400-imagetop {
	max-height: 500px;
	border-radius: 10px;
	margin-top: 50px;
	margin-bottom: 100px;
}

.carousel-container {
	overflow: hidden;
	/* Hide overflowing items */
	width: 100%;
}

.carousel-track {
	display: flex;
	/* Flex to place items in a row */
	transition: transform 0.3s ease-in-out;
	/* Smooth transition */
	width: 100%;
}

.carousel-item {
	flex: 0 0 100%;
	/* Each item takes full width */
	box-sizing: border-box;
	padding: 5px;
}

.nav-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
}

.carousel-nav-button {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #dddddd;
	/* Inactive color */
	border: none;
	margin: 0 5px;
	cursor: pointer;
}

.carousel-nav-button.active {
	background-color: black;
	/* Active color */
}

.button-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 94vw;
}

.carousel-button {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin: 0 5px;
	background-color: #ccc;
	/* Inactive color */
	border: none;
	cursor: pointer;
}

.carousel-button.active {
	background-color: rgba(8, 103, 127, 1);
}

.infographic2400-section table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-family: Arial, sans-serif;
}

.infographic2400-section table th,
.infographic2400-section table td {
	border: 1px solid #ddd;
	padding: 8px;
}

.infographic2400-section table th {
	background-color: #f2f2f2;
	text-align: left;
	font-weight: var(--MP-font-weight-bold-text);
}

.infographic2400-section table tr:nth-child(even) {
	background-color: #f9f9f9;
}

.infographic2400-section table tr:hover {
	background-color: #eaeaea;
}

.infographic2400-section table td {
	color: #333;
}

.infographic2400-section table th:first-child,
.infographic2400-section table td:first-child {
	padding-left: 16px;
}

.infographic2400-section table th:last-child,
.infographic2400-section table td:last-child {
	padding-right: 16px;
}

#prevButton,
#nextButton {
	margin-top: 50px;
	margin-left: 50px;
	margin-right: 50px;
	background-color: #00000000;
	/* Adjust the degree as needed */
}

#prevButton .button-image {
	transform: rotate(180deg);
	background-color: #00000000;
	/* Adjust the degree as needed */
}

#nextButton .button-image {
	transform: rotate(0deg);
	/* Adjust the degree as needed */
}

/* Careers Section Styling */
.careers-container {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.careers-background {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url("img/map-pattern.png");
	/* Replace with your background image */
	background-size: cover;
	background-position: center;
}

.careers-content {
	position: relative;
	text-align: center;
	top: 30%;
	transform: translateY(-50%);
	z-index: 1;
	color: #ffffff;
	/* White text */
	padding: 0 20px;
}

.careers-title {
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 20px;
}

.careers-subtitle {
	font-size: 1.2rem;
	line-height: 1.5;
	margin-bottom: 30px;
	color: #e0e0e0;
	/* Slightly off-white for readability */
}

.careers-button {
	color: #ffffff;
	padding: 10px 20px;
	font-size: 1rem;
	border: none;
	border-radius: 5px;
	cursor: not-allowed;
	opacity: 0.6;
	/* Indicates disabled state */
	text-transform: uppercase;
	transition: all 0.3s ease;
}

.careers-button:hover {
	opacity: 0.8;
}

/* Container for the video */
#ID_VIDEO_CONTAINER_DEMO {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 600px;
	margin: 20px auto;
	max-height: 200px;
}

/* Thumbnail wrapper */
#ID_VIDEO_THUMBNAIL_DEMO {
	position: relative;
	cursor: pointer;
	width: 100%;
	max-width: 600px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Thumbnail image */
.form-video-thumbnail-image {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Play button */
.form-video-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 30px;
	color: white;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 30px 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.form-video-play-button:hover {
	background-color: rgba(0, 0, 0, 0.7);
}

/* Hidden iframe for the YouTube video */
#ID_YOUTUBE_IFRAME_DEMO {
	width: 100%;
	height: 315px;
	/* Adjust height as needed */
	border: none;
	display: none;
	margin-top: 20px;
}

#ID_YOUTUBE_IFRAME_DEMO.active {
	display: block;
}

/* grid for triptych */
.image-section .triptych {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	width: 100%;
	height: 300px;
	/* adjust to your card height */
}

.image-section .triptych img {
	width: 100%;
	height: 300px;
	/* adjust to your card height */
	object-fit: cover;
}

#ID_FP_STEPS .image-section,
#ID_FP_CHROME .image-section {
	width: auto;
	/* adjust to your card height */
}

#ID_FP_STEPS .text-section {
	margin-right: 0px;
	margin-left: 20px;
}

/*
.triptych-pane,
.mobile-only .transformable-image{
  width:100%; height:100%; object-fit:cover; border-radius:12px;
}*/

/* visibility */
.desktop-only {
	display: block;
}

.mobile-only {
	display: none;
}

/* mobile: show single, hide triptych */
@media (max-width: 600px) {
	.desktop-only {
		display: none;
	}

	.mobile-only {
		display: block;
	}

	.image-section {
		width: 100%;
		height: auto;
	}

	.image-section .mobile-only {
		width: 300px;
	}

	/* tune */
}


/* Additional styles */
/* Mobile Phones */
@media (max-aspect-ratio: 3/5) {
	:root {
		/* Font Weights */
		--MP-font-weight-light: 300;
		--MP-font-weight-normal: 400;
		--MP-font-weight-medium: 500;
		--MP-font-weight-semi-bold: 600;
		--MP-font-weight-bold: 700;
		--MP-font-weight-bold-text: bold;
		/* Font Sizes */
		--MP-font-size-xxs: 0.5em;
		--MP-font-size-xs: 0.6em;
		--MP-font-size-sm: 0.7em;
		--MP-font-size-smd: 0.7em;
		--MP-font-size-md: 0.8em;
		--MP-font-size-lg: 1em;
		--MP-font-size-xlg: 1.2em;
		--MP-font-size-xl: 1.3em;
		--MP-font-size-xxl: 1.7em;
		--MP-font-size-tiny: 8px;
		--MP-font-size-small: 9.3px;
		--MP-font-size-base: 10.7px;
		--MP-font-size-medium: 14px;
		--MP-font-size-large: 13.3px;
		--MP-font-size-xlarge: 16px;
		--MP-font-size-xxlarge: 24px;
		--MP-font-size-huge: 26.7px;
		--MP-font-size-giant: 33.3px;
		--MP-font-size-massive: 40px;
		--MP-font-size-print-small: 16pt;
		--MP-font-size-print-large: 38pt;
	}

	.offer-title{
		font-size: var(--MP-font-size-xl);
	}

	.animated-card-container .button {

    font-size: 18px;
}

	#ID_FP_BADGE, #ID_FP_BADGE2 {
		top: 100px;
		right: 20px;
		width: 100px;
		height: 100px;
		gap: 2px;
	}

	.main-title {
		text-align: center;
	}

	#ID_FP_BADGE .badge-label,
	#ID_FP_BADGE2 .badge-label {
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		font-family: inter, sans-serif;
		margin-top: -5px;
	}

	#ID_FP_LOGO,
	#ID_FP_LOGO2 {
		height: 45px;
		width: auto;
		margin: 0;
		position: static;
		transform: none;
		/* center via flex */
		margin-left: 10px;
	}

	.transformable-image.scaled-up {
		transform: scale(1);
	}

	.benefit-features li {
		text-align: left;
	}

	.fp-stat-hl {
		font-size: var(--MP-font-size-huge);
	}

	.network-section h2,
	.com-section h2,
	.top-section h2 {
		line-height: 60px;
		margin-left: 20px;
		margin-bottom: 20px;
		font-size: 36px;
	}

	.network-card-description {
		text-align: left;
	}

	.landing-card {
		height: 840px;
	}

	#ID_FP_STEPS.landing-card {
		height: 1100px;
	}

	.triptych.desktop-only {
		display: none;
	}

	.value-card h3 {
		font-size: var(--MP-font-size-xxlarge);
	}

	.menu-icon {
		display: flex;
	}

	.menu-container {
		display: flex;
	}

	.compact {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		border-radius: 0px;
		width: 100vw;
		height: 60px;
	}

	.tab-contents .submenu-item {
		padding-top: 20px;
	}

	.tab-contents .submenu {
		top: 18px;
		padding: 40px;
		padding-left: 5px;
		padding-top: 10px;
		background-color: #1c1c1ef9;
		min-width: 50px;
		width: 150px;
		left: -5px;
		border-radius: 0px 0px 5px 5px;
	}

	.leading-icon {
		padding-bottom: 5px;
	}

	.building-blocks-tab-container {
		padding: 0px;
		padding-left: 5px;
		margin-top: 10px;
	}

	.building-blocks-tab {
		position: relative;
		padding: 3px;
		width: 120px;
	}

	#landing-tab {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		justify-items: flex-start;
		margin-top: -10px;
	}

	#ID_TOKI {
		height: 20px;
		width: 20px;
		margin-left: 5px;
		margin-right: 5px;
		padding-bottom: 0px;
	}

	#ID_LOGO_TAB {
		width: 150px;
		height: 25px;
	}

	.custom-footer {
		padding: 5px;
	}

	.footer-content {
		display: flex;
		flex-direction: column;
	}

	.footer-demo {
		flex: 1;
		max-width: 100vw;
	}

	.footer-links {
		display: flex;
		flex-direction: column;
	}

	.summary {
		font-weight: var(--MP-font-weight-medium);
		font-size: 20px;
		line-height: 22px;
		margin-top: 20px;
		text-align: left;
	}

	.landing-text {
		text-align: left;
	}

	.text-slide {
		text-align: left;
	}

	.compact .label {
		font-family: var(--MP-primary-font);
		font-size: 20px;
	}

	#ID_MINI_BUTTON {
		display: none;
	}

	.tab-contents .submenu-item {
		font-family: var(--MP-primary-font);
	}

	.banner2,
	.banner1,
	.banner-network {
		padding: 10px;
		font-size: 28px;
		text-align: left;
		margin-left: 20px;
	}

	.banner-container {
		padding: 0px;
		width: 100vw;
		margin-bottom: 50px;
	}

	.landing-card .content {
		flex-direction: column;
		flex-wrap: wrap;
	}

	#ID_FP_STEPS .content {
		width: 95vw;
	}

	.landing-card .text-section h2 {
		margin-bottom: 10px;
		font-weight: 700;
	}

	.landing-card .text-section {
		margin: 0px;
		margin-bottom: 20px;
	}

	.landing-card .text-section p {
		font-size: 18px;
	}

	.landing-card .image-section {
		position: relative;
		width: 300px;
		height: 300px;
		margin: 0px;
	}

	.transformable-image {
		position: relative;
		width: 300px;
		height: 300px;
	}

	.animated-card-container {
		gap: 50px;
		padding: 0px;
		justify-items: center;
	}

	.animated-card-unique {
		align-self: center;
		justify-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		border-radius: 6px;
		background-color: #ffffff0f;
		justify-content: center;
	}

	.video-wrapper-unique {
		min-width: 250px;
		margin-bottom: 20px;
		max-width: 95vw;
		height: 250px;
		border-radius: 6px;
	}

	.portrait-video-unique {
		width: 95vw;
		height: 400px;
		object-fit: cover;
		border-radius: 16px;
	}

	.card-content-unique {
		justify-content: center;
		width: 98vw;
	}

	.sales-button {
		margin-bottom: 20px;
		width: 100%;
	}

	#ID_FP_INSTALL_BOTTOM {
		font-size: large;
	}

	#ID_PS_BACKGROUND_VIDEO {
		opacity: 0.7;
	}

	#ID_NW_networkSection {
		padding: 0px;
	}

	#productsSection .overlay-text {
		color: var(--MP-off-white);
		font-size: 26px;
		hyphens: auto;
		/* Adds hyphenation to break long words cleanly */
		word-break: break-word;
		/* Ensures long words don?t overflow */
		line-height: 1.6;
		/* Provides comfortable line spacing */
		text-justify: inter-word;
		/* Creates even spacing between words */
		word-spacing: 0.05em;
		/* Adjusts word spacing slightly for balance */
		width: 90vw;
	}

	.benefit-features {
		font-size: 20px;
	}

	.tophighlight-title {
		font-size: 20px;
	}

	.tophighlight-text {
		font-size: 16px;
	}

	.top-picks-info,
	.top-pick-card-container {
		padding: 0px;
	}

	.animated-card-unique p {
		font-family: var(--MP-primary-font);
		font-size: 20px;
		padding-left: 5px;
		padding-right: 5px;
	}

	.custom-product-card-container {
		margin-top: 125px;
		width: 100vw;
	}

	.product-card-wrapper {
		width: 100vw;
	}

	.custom-product-card {
		width: 400px;
	}

	#ID_WB_IMAGE {
		width: 300px;
		left: 30px;
	}

	#ID_BADGE_IMAGE {
		left: 60px;
	}

	#ID_STAR_IMAGE_TOP {
		margin-left: -100px;
	}

	#ID_STAR_IMAGE_BOT {
		display: none;
	}

	#ID_GROUP_STAR_IMAGE_TOP {
		width: 100px;
		left: 200px;
		top: 100px;
	}

	#ID_GROUP_STAR_IMAGE_TOP {
		width: 200px;
		left: 175px;
		top: 130px;
	}

	#ID_GROUP2_IMAGE_TOP {
		display: none;
	}

	#ID_GROUP1_IMAGE_TOP {
		left: -30px;
	}

	#ID_WB_IMAGE_TOP {
		width: 150px;
		left: 190px;
	}

	#ID_WB_IMAGE_BOTTOM {
		width: 300px;
		left: 70px;
	}

	#ID_WB_IMAGE_M_TOP {
		width: 200px;
		left: 20px;
		top: 190px;
	}

	.custom-image-layers {
		width: 400px;
		height: 300px;
	}

	.image-layer-1,
	.image-layer-2,
	.image-layer-3 {
		overflow-x: hidden;
	}

	.button-offer-container {
		font-family: var(--MP-primary-font);
	}

	.com-squiggle {
		margin-left: 130px;
		width: 170px;
	}

	.com-section-title {
		margin-left: 10px;
	}

	#ID_CM_comSection {
		margin-top: 200px;
		padding: 0px;
	}

	.top-squiggle {
		margin-left: 110px;
		width: 140px;
	}

	/* Styling for the squiggly line */
	.support-squiggle {
		margin-left: 110px;
		width: 140px;
	}

	/* Styling for the squiggly line */
	.about-squiggle {
		margin-left: 50px;
		width: 130px;
	}

	#ID_PROMISE_SQUIGGLE {
		margin-left: 50px;
		width: 130px;
	}

	.network-squiggle {
		margin-left: 120px;
		width: 220px;
	}

	#ID_NW_networkSection {
		display: block;
	}

	.network-card {
		max-width: 95vw;
		width: 95vw;
		min-width: 95vw;
	}

	.tokuhn-network {
		background: none;
	}

	.button-container {
		display: none;
	}

	.network-card-icon img {
		max-width: 80vw;
	}

	.learning-center-container,
	.learning-center-content,
	.learning-center-info {
		width: 100vw;
		gap: 20px;
		max-width: 100vw;
	}

	.insight-card {
		width: 98vw;
		height: 400px;
	}

	.insight-card-title {
		margin-bottom: 40px;
	}

	#insightsSection {
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
		font-size: 20px;
	}

	#insightsSection p {
		font-size: 16px;
		padding-left: 5px;
		padding-right: 5px;
	}

	.about-pillars {
		justify-items: center;
	}

	#companySection {
		background-color: var(--MP-royal-indigo);
		flex-direction: column;
		flex-wrap: nowrap;
		font-size: 16px;
		font-family: var(--MP-primary-font);
		width: 100vw;
	}

	.about-highlight {
		font-size: 34px;
	}

	.about-container {
		padding: 0px;
	}

	.about-content {
		display: flex;
		gap: 60px;
		width: 100vw;
		justify-items: center;
	}

	.about-text {
		display: flex;
		flex-direction: column;
		justify-items: center;
		padding: 15px;
		width: 100vw;
	}

	.about-text p {
		font-size: 16px;
		font-family: var(--MP-primary-font);
		hyphens: auto;
		/* Adds hyphenation to break long words cleanly */
		word-break: break-word;
		/* Ensures long words don?t overflow */
		line-height: 1.6;
		/* Provides comfortable line spacing */
		text-justify: inter-word;
		/* Creates even spacing between words */
		word-spacing: 0.05em;
		/* Adjusts word spacing slightly for balance */
		letter-spacing: 0.02em;
	}

	.value-card {
		width: 80vw;
	}

	.about-section-title {
		margin-left: 10px;
	}

	.merchant-section {
		padding: 0px 0px;
	}

	.merchant-header p {
		padding-left: 10px;
		padding-right: 10px;
	}

	.core-values-section h2 {
		line-height: 40px;
	}

	#companySection p,
	.about-pillar {
		font-size: 16px;
		font-family: var(--MP-primary-font);
	}

	#ID_INS_INSIGHT_CARD_CONTAINER {
		justify-content: center;
		justify-items: center;
		margin-left: 0px;
		width: 100vw;
	}

	.about-promise-section {
		width: 100vw;
		padding-left: 0px;
	}

	.about-promise-content {
		width: 100vw;
		padding-right: 0px;
	}

	.learning-center-container {
		display: none;
	}

	.infographic2400-body,
	.infographic2400-container,
	.carousel-item {
		width: 100vw;
	}

	.infographic2400-body {
		max-width: 100vw;
	}

	.infographic2400-body p,
	.infographic2400-body li {
		font-size: var(--MP-font-size-medium);
	}

	.infographic2400-body li {
		font-size: var(--MP-font-size-medium);
		color: #b1f0f0;
	}

	.infographic2400-section {
		padding: 10px;
	}

	.infographic2400-body,
	.infographic2400-container,
	.carousel-item {
		margin: 0px;
		padding: 0px;
	}

	.carousel-track {
		width: 98%;
	}

	.infographic2400-container h1 {
		line-height: 1.2em;
	}

	#downloadsSection {
		font-size: var(--MP-font-size-medium);
	}

	.download-card-badge {
		font-size: var(--MP-font-size-medium);
	}

	.download-card-title {
		font-size: var(--MP-font-size-xxl);
		font-weight: var(--MP-font-weight-semi-bold);
	}

	.download-button {
		font-size: var(--MP-font-size-xl);
		font-weight: var(--MP-font-weight-semi-bold);
	}

	.support-card {
		min-width: 95vw;
		min-height: auto;
		background-color: #1d1813;
	}

	.support-content {
		gap: 10px;
	}

	.custom-support-button {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.top-pick-badge-image {
		height: 50px;
		width: 50px;
	}

	.intro-tophighlights .tophighlight {
		text-align: center;
		max-width: 98vw;
		width: 98vw;
	}

	.tophighlight-image {
		width: 100px;
		height: 100px;
		margin-bottom: 15px;
	}

	#ID_LIGHT_BADGE {
		top: 10px;
		left: 70vw;
		height: 50px;
		width: 50px;
	}

	#ID_PASTEL_BADGE {
		top: 170px;
		left: 70vw;
		height: 50px;
		width: 50px;
	}

	#ID_WHITE_BADGE {
		top: 180px;
		left: 70vw;
		height: 35px;
		width: 35px;
	}

	.benefits-container {
		display: flex;
		padding: 0px;
	}

	.network-section .card-content-badge {
		width: 220px;
		height: 220px;
	}

	#networkSection .animated-card-container #ID_NETWORK_JOIN_NETWORK {
		height: 60px;
		width: 300px;
	}

	#ID_TN_BADGE {
		position: fixed;
		top: 100px;
		right: 20px;
		width: 175px;
		height: 175px;
		opacity: 0.95;
	}

	#ID_TN_BADGE #ID_TN_TITLE {
		color: white;
		font-size: 14px;
		margin-top: 28px;
	}

	#ID_FP_BACKGROUND_VIDEO {
		object-position: 30% 0%;
		/* 50% X (center), 20% Y (pan up) */
	}

	#fashionpopSection .summary {
		margin-top: 50px;
	}

	#ID_FP_LOGO .transformable-image,
	#ID_FP_LOGO2 .transformable-image {
		width: auto;
		height: 150px;
	}

	.highlight-orange {
		color: var(--MP-solar-gold);
		/* Replace var(--MP-solar-gold) with your brand's specific orange color */
		font-weight: var(--MP-font-weight-bold-text);
		line-height: 60px;
	}

	.highlight-magenta {
		color: var(--MP-magenta);
		/* Replace var(--MP-solar-gold) with your brand's specific orange color */
		font-weight: var(--MP-font-weight-bold-text);
		line-height: 60px;
	}

	.highlight-lime {
		color: var(--MP-lime-green);
		/* Replace var(--MP-solar-gold) with your brand's specific orange color */
		font-weight: var(--MP-font-weight-bold-text);
		line-height: 60px;
	}

}




/* Tablet in Portrait Mode */
@media only screen and (min-device-width: 600px) and (max-device-width: 1400px) and (orientation: portrait) {
	:root {
		/* Font Weights */
		--MP-font-weight-light: 300;
		--MP-font-weight-normal: 400;
		--MP-font-weight-medium: 500;
		--MP-font-weight-semi-bold: 600;
		--MP-font-weight-bold: 700;
		--MP-font-weight-bold-text: bold;
		/* Font Sizes */
		--MP-font-size-xxs: 0.5em;
		--MP-font-size-xs: 0.6em;
		--MP-font-size-sm: 0.7em;
		--MP-font-size-smd: 0.7em;
		--MP-font-size-md: 0.8em;
		--MP-font-size-lg: 1em;
		--MP-font-size-xlg: 1.2em;
		--MP-font-size-xl: 1.3em;
		--MP-font-size-xxl: 1.7em;
		--MP-font-size-tiny: 8px;
		--MP-font-size-small: 9.3px;
		--MP-font-size-base: 10.7px;
		--MP-font-size-medium: 14px;
		--MP-font-size-large: 13.3px;
		--MP-font-size-xlarge: 16px;
		--MP-font-size-xxlarge: 24px;
		--MP-font-size-huge: 26.7px;
		--MP-font-size-giant: 33.3px;
		--MP-font-size-massive: 40px;
		--MP-font-size-print-small: 16pt;
		--MP-font-size-print-large: 40pt;
	}



	.value-card h3 {
		font-size: var(--MP-font-size-xxlarge);
	}

	.menu-icon {
		display: flex;
	}

	.menu-container {
		display: flex;
	}

	.compact {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		border-radius: 0px;
		width: 100vw;
		height: 60px;
	}

	.tab-contents .submenu-item {
		padding-top: 20px;
	}

	.tab-contents .submenu {
		top: 18px;
		padding: 40px;
		padding-left: 5px;
		padding-top: 10px;
		background-color: #1c1c1ef9;
		min-width: 50px;
		width: 150px;
		left: -5px;
		border-radius: 0px 0px 5px 5px;
	}

	.leading-icon {
		padding-bottom: 5px;
	}

	.building-blocks-tab-container {
		padding: 0px;
		padding-left: 5px;
		margin-top: 10px;
	}

	.building-blocks-tab {
		position: relative;
		padding: 3px;
		width: 120px;
	}

	#landing-tab {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		justify-items: flex-start;
		margin-top: -10px;
	}

	#ID_TOKI {
		height: 20px;
		width: 20px;
		margin-left: 5px;
		margin-right: 5px;
		padding-bottom: 0px;
	}

	#ID_LOGO_TAB {
		width: 150px;
		height: 25px;
	}

	.custom-footer {
		padding: 5px;
	}

	.footer-content {
		display: flex;
		flex-direction: column;
	}

	.footer-demo {
		flex: 1;
		max-width: 100vw;
	}

	.footer-links {
		display: flex;
		flex-direction: column;
	}

	.summary {
		font-weight: var(--MP-font-weight-medium);
		font-size: 20px;
		line-height: 22px;
		margin-top: 20px;
		text-align: left;
	}

	.landing-text {
		text-align: left;
	}

	.text-slide {
		text-align: left;
	}

	.compact .label {
		font-family: var(--MP-primary-font);
		font-size: 20px;
	}

	#ID_MINI_BUTTON {
		display: none;
	}

	.tab-contents .submenu-item {
		font-family: var(--MP-primary-font);
	}

	.highlight-orange {

		line-height: 24px;

	}

	.highlight-magenta {
		line-height: 24px;
	}

	.highlight-lime {
		line-height: 24px;
	}

	.network-section li {
		font-size: 18px;

	}

	.banner2,
	.banner1,
	.banner-network {
		padding: 10px;
		font-size: 32px;
		justify-content: left;
		text-align: left;
		padding-top: 50px;
	}

	.banner-container {
		padding: 0px;
		width: 100vw;
		margin-bottom: 100px;
	}

	.landing-card .content {
		flex-direction: column;
		flex-wrap: wrap;
	}

	.landing-card .text-section h2 {
		margin-bottom: 50px;
		font-weight: 700;
	}

	.landing-card .content .text-section {
		margin: 0px;
		margin-bottom: 20px;

	}



	.landing-card .content .text-section p {

		font-size: 16px;
	}

	.landing-card .image-section {
		position: relative;
		width: 400px;

		margin: 0px;
	}

	.transformable-image {
		position: relative;
		width: 200px;
		height: auto;
	}

	.animated-card-container {
		gap: 50px;
		padding: 0px;
		justify-items: center;
	}

	

	.animated-card-unique {
		flex-direction: row;
		flex-wrap: wrap;
		border-radius: 6px;
		background-color: #ffffff0f;
		justify-content: center;
	}

	.video-wrapper-unique {
		min-width: 250px;
		margin-bottom: 20px;
		max-width: 95vw;
		height: 250px;
		border-radius: 6px;
	}

	.portrait-video-unique {
		width: 95vw;
		height: 400px;
		object-fit: cover;
		border-radius: 16px;
	}

	.card-content-unique {
		padding: 0px;
		padding-left: 7px;
		justify-content: center;
		width: 95vw;
	}

	.sales-button {
		margin-bottom: 20px;
		align-self: center;
		font-size: 24px;
	}

	#ID_PS_BACKGROUND_VIDEO {
		opacity: 0.7;
	}

	#ID_NW_networkSection {
		padding: 0px;
	}

	#productsSection .overlay-text {
		color: var(--MP-off-white);
		font-size: var(--MP-font-size-xlg);
		hyphens: auto;
		/* Adds hyphenation to break long words cleanly */
		word-break: break-word;
		/* Ensures long words don?t overflow */
		line-height: 1.6;
		/* Provides comfortable line spacing */
		text-justify: inter-word;
		/* Creates even spacing between words */
		word-spacing: 0.05em;
		/* Adjusts word spacing slightly for balance */
		letter-spacing: 0.02em;
		/* Adds slight spacing between letters */
		width: 90vw;
	}

	.animated-card-unique p {
		font-family: var(--MP-primary-font);
		font-size: 24px;
		padding-left: 5px;
		padding-right: 5px;
		padding-bottom: 5px;
	}

	.custom-product-card-container {
		margin-top: 125px;
		width: 100vw;
	}

	.product-card-wrapper {
		width: 100vw;
	}

	.custom-product-card {
		width: 400px;
	}

	#ID_WB_IMAGE {
		width: 300px;
		left: 30px;
	}

	#ID_BADGE_IMAGE {
		left: 60px;
	}

	#ID_STAR_IMAGE_TOP {
		margin-left: -100px;
	}

	#ID_STAR_IMAGE_BOT {
		display: none;
	}

	#ID_GROUP_STAR_IMAGE_TOP {
		width: 100px;
		left: 200px;
		top: 100px;
	}

	#ID_GROUP_STAR_IMAGE_TOP {
		width: 200px;
		left: 175px;
		top: 130px;
	}

	#ID_GROUP2_IMAGE_TOP {
		display: none;
	}

	#ID_GROUP1_IMAGE_TOP {
		left: -30px;
	}

	#ID_WB_IMAGE_TOP {
		width: 150px;
		left: 190px;
	}

	#ID_WB_IMAGE_BOTTOM {
		width: 300px;
		left: 70px;
	}

	#ID_WB_IMAGE_M_TOP {
		width: 200px;
		left: 20px;
		top: 190px;
	}

	.custom-image-layers {
		width: 400px;
		height: 300px;
	}

	.image-layer-1,
	.image-layer-2,
	.image-layer-3 {
		overflow-x: hidden;
	}

	.button-offer-container {
		font-family: var(--MP-primary-font);
	}

	.com-squiggle {
		margin-left: 130px;
		width: 170px;
	}

	.com-section-title {
		margin-left: 10px;
	}

	#ID_CM_comSection {
		margin-top: 200px;
		padding: 0px;
	}

	.top-squiggle {
		margin-left: 110px;
		width: 140px;
	}

	/* Styling for the squiggly line */
	.support-squiggle {
		margin-left: 110px;
		width: 140px;
	}

	/* Styling for the squiggly line */
	.about-squiggle {
		margin-left: 50px;
		width: 130px;
	}

	#ID_PROMISE_SQUIGGLE {
		margin-left: 50px;
		width: 130px;
	}

	.network-squiggle {
		margin-left: 120px;
		width: 220px;
	}

	#ID_NW_networkSection {
		display: block;
	}

	.animated-card-unique {
		align-self: center;
		justify-items: center;
	}

	.network-card {
		max-width: 95vw;
		width: 95vw;
		min-width: 95vw;
	}

	.tokuhn-network {
		background: none;
	}

	.button-container {
		display: none;
	}

	.network-card-icon img {
		max-width: 80vw;
	}

	.learning-center-container,
	.learning-center-content,
	.learning-center-info {
		width: 100vw;
		gap: 20px;
		max-width: 100vw;
	}

	.insight-card {
		width: 98vw;
		height: 400px;
	}

	.insight-card-title {
		margin-bottom: 10px;
	}

	#insightsSection {
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
		font-size: 20px;
	}

	#insightsSection p {
		font-size: 16px;
		padding-left: 5px;
		padding-right: 5px;
	}

	.about-pillars {
		justify-items: center;
	}

	#companySection {
		background-color: var(--MP-royal-indigo);
		flex-direction: column;
		flex-wrap: nowrap;
		font-size: 16px;
		font-family: var(--MP-primary-font);
		width: 100vw;
	}

	.about-container {
		padding: 0px;
	}

	.about-content {
		display: flex;
		gap: 60px;
		width: 100vw;
		justify-items: center;
	}

	.about-text {
		display: flex;
		flex-direction: column;
		justify-items: center;
		padding: 15px;
		width: 100vw;
	}

	.about-text p {
		font-size: 16px;
		font-family: var(--MP-primary-font);
		hyphens: auto;
		/* Adds hyphenation to break long words cleanly */
		word-break: break-word;
		/* Ensures long words don?t overflow */
		line-height: 1.6;
		/* Provides comfortable line spacing */
		text-justify: inter-word;
		/* Creates even spacing between words */
		word-spacing: 0.05em;
		/* Adjusts word spacing slightly for balance */
		letter-spacing: 0.02em;
	}

	.value-card {
		width: 80vw;
	}

	.about-section-title {
		margin-left: 10px;
	}

	.merchant-section {
		padding: 0px 0px;
	}

	.merchant-header p {
		padding-left: 10px;
		padding-right: 10px;
	}

	.core-values-section h2 {
		line-height: 40px;
	}

	#companySection p,
	.about-pillar {
		font-size: 16px;
		font-family: var(--MP-primary-font);
	}

	#ID_INS_INSIGHT_CARD_CONTAINER {
		justify-content: center;
		justify-items: center;
		margin-left: 0px;
		width: 100vw;
	}

	.about-promise-section {
		width: 100vw;
		padding-left: 0px;
	}

	.about-promise-content {
		width: 100vw;
		padding-right: 0px;
	}

	.learning-center-container {
		display: none;
	}

	.infographic2400-body,
	.infographic2400-container,
	.carousel-item {
		width: 100vw;
	}

	.infographic2400-body {
		max-width: 100vw;
	}

	.infographic2400-body p,
	.infographic2400-body li {
		font-size: var(--MP-font-size-medium);
	}

	.infographic2400-body li {
		font-size: var(--MP-font-size-medium);
		color: #b1f0f0;
	}

	.infographic2400-section {
		padding: 10px;
	}

	.infographic2400-body,
	.infographic2400-container,
	.carousel-item {
		margin: 0px;
		padding: 0px;
	}

	.carousel-track {
		width: 98%;
	}

	.infographic2400-container h1 {
		line-height: 1.2em;
	}

	#downloadsSection {
		font-size: var(--MP-font-size-medium);
	}

	.download-card-badge {
		font-size: var(--MP-font-size-medium);
	}

	.download-card-title {
		font-size: var(--MP-font-size-xxl);
		font-weight: var(--MP-font-weight-semi-bold);
	}

	.download-button {
		font-size: var(--MP-font-size-xl);
		font-weight: var(--MP-font-weight-semi-bold);
	}

	.support-card {
		min-width: 95vw;
		min-height: auto;
		background-color: #1d1813;
	}

	.support-content {
		gap: 10px;
	}

	.custom-support-button {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.top-pick-badge-image {
		height: 50px;
		width: 50px;
	}

	.intro-tophighlights .tophighlight {
		text-align: center;
		max-width: 98vw;
		width: 98vw;
	}

	.tophighlight-image {
		width: 100px;
		height: 100px;
		margin-bottom: 15px;
	}

	#ID_LIGHT_BADGE {
		top: 10px;
		left: 415px;
		height: 50px;
		width: 50px;
	}

	#ID_PASTEL_BADGE {
		top: 275px;
		left: 415px;
		height: 50px;
		width: 50px;
	}

	#ID_WHITE_BADGE {
		top: 275px;
		left: 435px;
		height: 35px;
		width: 35px;
	}

	.benefits-container {
		display: flex;
		padding: 10px;
	}

	.video-wrapper-unique {
		height: auto;
		margin-bottom: 0px;
	}

	.support-card-image {
		height: auto;
		margin-bottom: 0px;
	}

	.support-card-image img {
		height: auto;
		margin-bottom: 0px;
	}

	.card-content-unique {
		margin-top: 20px;
	}

	.support-card {
		height: auto;
	}

	.support-content {
		padding-bottom: 40px;
	}

	.video-container {
		width: 100%;
		height: auto;
	}

	.video-container iframe {
		width: 100%;
		height: 500px;
	}

		.highlight-orange {
		color: var(--MP-solar-gold);
		/* Replace var(--MP-solar-gold) with your brand's specific orange color */
		font-weight: var(--MP-font-weight-bold-text);
		line-height: 60px;
	}

	.highlight-magenta {
		color: var(--MP-magenta);
		/* Replace var(--MP-solar-gold) with your brand's specific orange color */
		font-weight: var(--MP-font-weight-bold-text);
		line-height: 60px;
	}

	.highlight-lime {
		color: var(--MP-lime-green);
		/* Replace var(--MP-solar-gold) with your brand's specific orange color */
		font-weight: var(--MP-font-weight-bold-text);
		line-height: 60px;
	}
}

/* Tablet in Landscape Mode */
@media only screen and (min-device-width: 600px) and (max-device-width: 1500px) and (orientation: landscape) {
	#ID_TOKI {
		display: none;
	}

	.landing-card-wrapper{
		gap: 20px;;
	}
}

/* Desktop */
@media (hover: hover) and (pointer: fine) {
	#ID_TOKI {
		display: none;
	}
}

@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
	.product-card-wrapper {
		gap: 200px;
	}

	.network-grid {
		gap: 200px;
	}
}

/* ============================================================================================================== */
.captcha-container {
	/* Added for inline display */
	align-items: center;
	/* Adds space between items */
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	display: flex;
	/* Centers items horizontally */
	gap: 10px;
	/* Aligns items vertically */
	justify-content: center;
	padding: 20px;
}

.captcha-image {
	border: 1px solid #ddd;
	border-radius: 4px;
	/* Adjust size as needed */
	height: auto;
	max-width: 100px;
}

#captcha-input {
	border: 1px solid #ddd;
	border-radius: 4px;
	/* Adjust width as needed */
	padding: 10px;
	width: 125px;
}

/* Style for the refresh button */
#captcha-refresh {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.refresh-icon {
	/* Adjust as needed */
	cursor: pointer;
	height: 24px;
	width: 24px;
	/* Adjust as needed */
}

#captcha-submit {
	background-color: #007bff;
	border: none;
	border-radius: 4px;
	color: white;
	cursor: pointer;
	padding: 10px 20px;
}

#captcha-submit:hover {
	background-color: #0056b3;
}

/* ============================================================================================================== */