/* 9to5 Media Services Global on Trust CSS – 2026-02-18 */

/* Variables */

:root	{
	--color-bg-white:	#ffffff;
	--color-blue-dark:	#007acc;
	--color-blue-primary:	#33adff;
	--color-grey-dark:	#666666;
	--color-grey-light:	#bbbbbb;
	--color-red:	#ee3333;
	--color-text-main:	#2d3436;
	--color-text-muted:	#636E72;
	--color-white:	#ffffff;
	--container-width:	900px;
	--font-weight-base:	300;
	--font-weight-heavy:	600;
	}

/* Basics – Classless */

html	{
	scroll-behavior:	smooth;
	scroll-padding-top:	100px;  /* Adjust this value to match the height of your sticky nav */
	}
a	{
	border-bottom:	1px solid var(--color-blue-primary);
	color:	var(--color-blue-dark);
	text-decoration:	none;
	}
a:hover	{
	background-color:	var(--color-blue-dark);
	color:	var(--color-white);
	}
a.no-decoration	{
	border-bottom:	1px solid transparent;
	}
a.no-decoration:hover	{
	background-color:	transparent;
	}
body	{
	background-color:	var(--color-bg-white);
	color:	var(--color-text-main);
	font-family:	"IBM Plex Sans", sans-serif;
	font-weight:	var(--font-weight-base);
	}
caption	{
	caption-side:	bottom;
	font-style:	italic;
	margin-top:	1rem;
	}
dd	{
	font-weight:	var(--font-weight-base)
	}
dd,dt	{
	margin-bottom:	1rem;
	}
dt > dl	{
	margin-left:	2.5rem;
	}
dt,
th	{
	font-weight:	var(--font-weight-heavy);
	}
h1, h2, h3 	{
	border-left:	0.2rem solid var(--color-blue-primary);
	padding-left:	1rem;
	}
h1,h2, h3	{
	color:	var(--color-blue-dark);
	font-weight:	var(--font-weight-base);
	}
h1	{
	font-size:	3rem;
	line-height:	4.5rem;
	}
h2	{
	font-size:	2.5rem;
	line-height:	3.5rem;
	}
h3	{
	font-size:	2rem;
	line-height:	2.5rem;
	}
.package-box h3	{
	font-weight:	var(--font-weight-base);
	}
h4, .subtitle	{
	font-size:	1.5rem;
	line-height:	1.8rem;
	}
img	{
	max-width:	100%;
	}
li	{
	border-bottom:	1px solid #f0f0f0;
	display:	block; /* Restores natural text flow and wrapping */
	list-style:	none; /* Removes default bullets */
	padding:	0.6rem 0 0.6rem 2rem; /* Left padding makes room for the arrow */
	position:	relative;
	}
li:last-child	{
	margin-bottom:	1rem;
	}
li::before	{
	color:	var(--color-blue-primary);
	content:	"→";
	left:	0; /* Locks arrow to the left padding area */
	position:	absolute;
	top:	0.6rem; /* Aligns with the first line of text */
	}
strong,
h2.cta	{
	font-weight:	500;
	}
table	{
	border-collapse: collapse;
	width:	98%;
	}
tr	{
	border-bottom:	1px solid var(--color-grey-light);
	}
th,td	{
	padding:	0.4rem 0.2rem 0.6rem 0.1rem;
	}
th	{
	text-align:	left;
	}

/* Class-based */

.center	{
	text-align:	center;
	}
.hero, 
.content-block 	{
	border-bottom:	1px solid var(--color-blue-primary);
	border-left:	1px solid var(--color-blue-primary);
	margin:	1.5rem auto 3rem auto;
	max-width:	var(--container-width);
	padding:	4rem;
	position:	relative;
	}
.right	{
	text-align:	right;
	}

/* Class-based – Broken Frames with arrows */

.hero::before, 
.content-block::before 	{
	border-right:	1px solid var(--color-blue-primary);
	border-top:	1px solid var(--color-blue-primary);
	content:	"";
	height:	90%; /* The gap on the bottom */
	pointer-events:	none; /* Ensures the lines don’t interfere with clicks */
	position:	absolute;
	right:	0;
	top:	0;
	width:	90%; /* The gap on the left */
	}

/* Class-based Frame arrows */

.arrow-top, 
.arrow-bottom 	{
	position:	absolute;
	background:	white; /* Masks the line behind the arrow  */
	color:	var(--color-blue-primary);
	font-size:	12px;
	padding:	0 4px;
	z-index:	10;
	}
.arrow-top 	{
	top:	-8px;
	left:	10%;
	}
.arrow-bottom 	{
	bottom:	-9px;
	right:	-4px;
	}

/* Class-based – Price section */

/* Container for the price packages */

.package-grid 	{
	display:	grid;
	gap:	2rem;
	grid-template-columns:	repeat(3, 1fr); /* Three equal columns */
	margin-top:	3rem;
	max-width:	var(--container-width);
	}

/* Class-based – Other */

.brand-color	{
	color:	var(--color-blue-dark);
	}

.hero h1	{
	border-left-width:	0;
	color:	var(--color-blue-primary);
	line-height:	1.1;
	text-transform:	uppercase;
	}
.hero h1,
.large	{
	font-size:	5.5rem;
	font-weight:	900;
	}
.large	{
	margin-top:	0;
	margin-bottom:	0;
	line-height:	1;
	}
.muted	{
	color:	var(--color-text-muted)
	}
.subtitle	{
	font-style:	italic;
	}
ul.negative li::before	{
	color:	var(--color-red);
	}

/* Class-based – Navigation */

.nav-container	{
	display:	flex;
	justify-content:	space-between;
	margin:	0 auto;
	max-width:	var(--container-width);
	padding:	1rem 2rem;
	}
.sticky-nav	{
	backdrop-filter:	blur(3px);
	background:	rgba(255, 255, 255, 0.9);
	border-bottom:	1px solid rgba(51, 173, 255, 0.2);
	position:	sticky;
	top:	0;
	width:	100%;
	z-index:	1000;
	}
.sticky-nav a	{
	border-radius:	0.5rem;
	border:	2px solid transparent;
	color:	var(--color-text-muted);
	font-size:	0.75rem;
	font-weight:	400;
	letter-spacing:	1.5px;
	padding:	1em;
	text-decoration:	none;
	text-transform:	uppercase;
	}
.sticky-nav a:hover	{
	color:	var(--color-bg-white);
	background-color:	var(--color-blue-primary);
	}
.sticky-nav a.nav-cta	{
	border:	2px solid var(--color-blue-primary);
	}


/* ID-based */

#scroll-progress	{
	background:	var(--color-blue-primary);
	height:	4px;
	left:	0;
	position:	absolute;
	top:	0;
	transition:	width 0.1s ease-out;
	width:	0%;
	z-index:	1002;
	}

/* ID-based – Footer Styles */

footer#purple	{
	background-color:	#1a0a40;
	color:	#b399ff;
	margin-top:	8rem; 
	padding:	6rem 2rem;
	text-align:	left;
	}
footer#purple a	{
	border-bottom:	0px solid var(--color-white);
	color:	var(--color-bg-white);
	text-decoration:	none;
	}
footer#purple a:hover	{
	background-color:	transparent;
	}

/* MEDIA QUERIES: Smaller and lighter h1 on small screens */

@media screen and (max-width: 480px)	{

.hero, 
.content-block 	{
	padding:	2rem;
	}

.hero h1,
.large	{
	font-size:	3rem;
	font-weight:	800;
	}

/* Allow navigation items to scroll horizontally if they don’t fit. */

.nav-container 	{ 
	-ms-overflow-style:	none; /* Hide scrollbar for a cleaner look */
	gap:	1.5rem;
	justify-content:	flex-start;
	overflow-x:	auto;
	padding:	1rem;
	scrollbar-width:	none; /* Hide scrollbar for a cleaner look */
	white-space:	nowrap;
	}
.nav-container::-webkit-scrollbar 	{
	display:	none; /* Hide scrollbar for a cleaner look */
	}
.sticky-nav a 	{
	font-size:	0.7rem;
	flex-shrink:	0;
	}

	}

/* MEDIA QUERIES: Pricing adjust for small screens */

@media screen and (max-width: 850px)	{

.package-grid	{
	grid-template-columns:	1fr; /* Stack on mobile */
	}

/* Individual Package Box */

.package-box 	{
	position:	relative;
	padding:	2.5rem 1.5rem;
	border-left:	1px solid var(--color-blue-primary);
	border-bottom:	1px solid var(--color-blue-primary);
	background:	transparent;
	display:	flex;
	flex-direction:	column;
	justify-content:	space-between;
	}

	}