/* ---------------------------------------------------------------- */
/* 2025_Aug_21_Thursday_09:16_AM | 65 (80) COL WIDE */
/*   ↑↓ ┏ ━ ┓ ┗ ━ ┛ ┏ ━ ┓  ▛ ▀ ▜ ▙ ▄ ▟               */
/*    ░ ▒ ▓ ╳ ╔ ═ ╗ ╚ ╝ ╱╲  ╱▔╲▁ ●■ 📐🚧⏹️📦🏷️  */
/* #REGION 📐 SELF HOSTED FONTS */
/* #region FONTS HOSTED */
@font-face {
	font-family: "Inter-Regular";
	src: url("fo/Inter-VariableFont_opsz,wght.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter-Italic";
	src: url("fo/Inter-Italic-VariableFont_opsz,wght.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Zilla Slab";
	src: url("fo/ZillaSlab-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Zilla Slab";
	src: url("fo/ZillaSlab-Medium.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Zilla Slab";
	src: url("fo/ZillaSlab-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* #endregion */

@font-face {
	font-display: swap;
	font-family: "BarlowSemiCondensedRegular";
	font-style: normal;
	font-weight: 400;
	src: url("a/BarlowSemiCondensed-Regular.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "BarlowSemiCondensedMedium";
	font-style: normal;
	font-weight: 500;
	src: url("a/BarlowSemiCondensed-Medium.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "BarlowSemiCondensedSemiBold";
	font-style: normal;
	font-weight: 600;
	src: url("a/BarlowSemiCondensed-SemiBold.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "BarlowSemiBold";
	font-style: normal;
	font-weight: 600;
	src: url("a/Barlow-SemiBold.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "OpenSansRegular";
	font-style: normal;
	font-weight: 400;
	src: url("a/OpenSans-Regular.woff2") format("woff2");
}

/* #ENDREGION */
/* #REGION 📐 * - GLOBAL - HTML - BODY STUFF */
* {
	box-sizing: border-box;
	margin: 0rem;
	padding: 0rem;
	font-family: sans-serif;
}

html {
	margin: 0rem;
	padding: 0rem;
}

body {
	/* Per your request, the body style remains unchanged. */
	background-color: var(--bckgrndCol);
	display: overlay;
	overflow-x: clip;
	scrollbar-gutter: stable both-edges;
	display: grid;
	place-items: center;
}

.fast {
	text-align: left;
	color: black;
	font-size: 16px;
	justify-self: left;
}

/* #ENDREGION */
/* #REGION 📐 ROOT SITE-WIDE - VARIABLES */
:root {

	--white-not-so-white: hsl(0, 0%, 90%);
	/* 🏷️ MARGIN PADDING GAP AND SPACING STUFF */
	--cmnGap: 0rem;
	--cmnImgGap: 0.5rem;
	/* 🏷️ ICON STUFF */
	--iconSz: 1.625rem;
	--iconGap: 0.75rem;
	/* 🏷️ CORNER RADIUS STUFF */
	--borRad: 0.25rem;
	--borRad2: 0.125rem;
	--borWdth: 0.0625rem;
	/* 🏷️ BUTTON STUFF */
	--butCpySze: 1.125rem;
	--butCpyWgt: 600;
	--butCpyLinHgt: 1.125rem;
	--butWdt: 10rem;
	--butHgt: 2.5rem;
	/* 🏷️ FONT STUFF */
	--hdrFce: "BarlowSemiCondensedMedium", Trebuchet MS, sans-serif;
	/* 🏷️ H1 */
	--hdr1Wgt: 500;
	--hdr1Sze: 2.44rem;
	--hdr1SzeLinHgt: 2.94rem;
	/* 🏷️ H2 */
	--hdr2Wgt: 500;
	--hdr2Sze: 1.7125rem;
	--hdr2SzeLinHgt: 1.935rem;
	/* 🏷️ H3 */
	--hdr3Wgt: 500;
	--hdr3Sze: 1.75rem;
	--hdr3SzeLinHgt: 1.625rem;
	/* 🏷️ H4 */
	--hdr4Wgt: 500;
	--hdr4Sze: 1.25rem;
	--hdr4SzeLinHgt: 1.5rem;
	/* 🏷️ P GENERAL BODY COPY */
	--pFntFceQ: "OpenSansRegular", Verdana, sans-serif;
	--pFntSzeQ: 1rem;
	--pFntSzeLinHgtQ: 1.375rem;
	--pParagraphSpaceAfter: 1rem;
	/* 🏷️ P - EMAIL */
	--pFntFceEml: "BarlowSemiBold", Verdana, sans-serif;
	--pFntSzeEml: 1.5rem;
	--pFntSzeLinHgtEml: 1.125rem;
	--pFntWgtEml: 600;
	/* 🏷️ COLORS STUFF */
	--bckgrndCol: hsl(0, 0%, 92%);
	--cardBckgrndCol: hsl(0, 0%, 98%);
	--cardBrdrCol: hsla(345, 100%, 33%);
	--bodyCopyCol: hsl(0, 0%, 20%);
	--redCol: hsl(345, 100%, 33%);
	--buttonCol: hsl(226, 100%, 50%);
	--buttonLblCol: hsl(0, 0%, 90%);
	--emailCol: var(--buttonCol);
	--switchCol: hsl(0, 0%, 33%);
	--switchFillCol: hsl(0, 0%, 90%);
	--dscrptnEyebrowCol: hsl(345, 100%, 33%);
	--dscrptnEyebrowCopyCol: hsl(0, 0%, 100%);
	--hero-copy-weight: 300;
	--hero-copy-size: 1.125rem;
	--hero-copy-line-height: 1.4625rem;
	--hero-copy-letter-spacing: 2%;
}

/* #ENDREGION */
/* #REGION 📐 A P PRE H1-H6 AND PARAGRAPH SPACINGS */
a {
	text-decoration: none;
}

p {
	color: var(--bodyCopyCol);
	font-family: var(--pFntFceQ);
	font-size: var(--pFntSzeQ);
	line-height: var(--pFntSzeLinHgtQ);
	font-weight: var(--fntWgtQ);
}

.paragraphSpacing {
	display: grid;
	gap: var(--pParagraphSpaceAfter) 0rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--redCol);
	font-family: var(--hdrFce);
}

h1 {
	font-family: "Zilla Slab", sans-serif;
	font-weight: 600;
	font-size: 2.57rem;
	line-height: 2.27rem;
}

h2 {
	font-family: "Zilla Slab", sans-serif;
	font-weight: 600;
	font-size: 1.575rem;
	line-height: 1.035rem;
}

h3 {
	font-family: "Inter-Regular", sans-serif;
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.25rem;
}

h4 {
	font-family: "Inter-Regular", sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1rem;
}

/* #ENDREGION */
/* #REGION 📐 ALL GROUPS */
.allGroups_C {
	display: grid;
	place-content: center;
	place-items: center;
	width: 94%;
	/* margin: 0rem; */
	/* padding: 0rem 0rem 0rems 0rem; */
}

.allContentCards_C {
	width: 94%;
	/* margin: 0rem; */
	/* padding: 0rem; */
}

/* .allContentCards_C_M { */
/* display: grid; */
/* margin: 0rem;s */
/* padding: 0rems */
/* } */
.masonryHolder {
	column-count: 1;
	row-gap: 2rem;
	column-gap: 2rem;
	width: 94%;
	break-inside: avoid;
}

.masonryBlocks {
	display: inline-block;
	break-inside: avoid;
	width: auto;
}

/* #ENDREGION */
/* #REGION 📐 GROUPS */
.grpHero_CM {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		heroVideo_C
		heroWordsLinks_C;
	margin: 2rem 0rem 0rem 0rem;
	width: 100%;
}

.toolSetsButtonsIntroTitle {
	/* THIS IS A COPY OF .heroIntroTitle */
	color: var(--white-not-so-white);
	letter-spacing: 0.08625rem;
	line-height: 1em;
	padding-bottom: var(--hero-copy-spacing2);
	margin: 0rem 0rem 0rem 0rem;
	padding: .25rem 0rem .25rem 0rem;
}

.grpCardsMaster_C {
	background-color: var(--cardBckgrndCol);
	border-style: solid;
	border-width: var(--borWdth);
	border-color: var(--cardBrdrCol);
	border-radius: var(--borRad);
	padding: 0.75rem 1rem 1.125rem 1rem;
	margin-bottom: 2rem;
	width: 100%;
}

.grpKeylines_CM,
.grpPowerPoint_CM,
.grpSnacked_CM,
.grpPrint_CM,
.grpBanners_CM,
.grpEmails_CM,
.grpCgi_CM {
	width: 100%;
}

/* #ENDREGION */
/* #REGION 🚧 NEW ANIMATION */
.allGroups_Container {
	/* background-color: rgb(255, 173, 173); */
	display: grid;
	place-content: center;
	place-items: center;
	width: 100%;
	padding: 1rem;
}

.box {
	background-color: transparent;
	width: 100vw;
	height: 1px;
	visibility: hidden;
}

.group_Container {
	/* background-color: rgb(83, 83, 255); */
	/* This container will take up 100% of the width of its parent
(.allGroups_Container)
	*/
	width: 100%;
	/* --- EDITABLE WIDTH VALUES --- */
	/* You can change the maximum width of the container here. */
	max-width: 800px;
	/* You can change the minimum width of the container here. */
	min-width: 320px;
	/* --------------------------- */
}

/* The main container for the animation */
.heroAnimationContainer {
	/* The width is now 100%, so it will always match the width of its parent,
.group_Container.
	*/
	width: 100%;
	/* The 'aspect-ratio' property maintains the original 800x600 (4:3)
	proportions. */
	/* The height will now adjust automatically as the width changes. */
	aspect-ratio: 800 / 600;
	/* Make background transparent as requested */
	background-color: transparent;
	/* This is crucial for positioning the images on top of each other
	*/
	position: relative;
}

/* Styling for all images within the container */
.heroAnimationContainer img {
	/* Position all images at the top-left corner of the container */
	position: absolute;
	top: 0;
	left: 0;
	/* Images will fill the container completely */
	width: 100%;
	height: 100%;
	/* Start with images being invisible */
	opacity: 0;
	/* Apply the animation.
			  - 'imageFade' is the name of our @keyframes rule.
			  - '10.5s' is the total duration for one full loop (3.5s per image * 3
			    images).
			  - 'infinite' makes the animation loop forever.
			*/
	-webkit-animation: imageFade 10.5s infinite;
	animation: imageFade 10.5s infinite;
}

/*
		  ANIMATION DELAYS We use the same animation on all images but start it at
		  different times. This creates the sequential cross-fade effect.
		*/
/* The 2nd image starts its animation after the first one's fade-in and pause
cycle is over.
		*/
.heroAnimationContainer img:nth-child(2) {
	-webkit-animation-delay: 3.5s;
	/* 1.5s fade-in + 2s pause */
	animation-delay: 3.5s;
}

/* The 3rd image starts after the second one's cycle is over (7s total). */
.heroAnimationContainer img:nth-child(3) {
	-webkit-animation-delay: 7s;
	/* 3.5s * 2 */
	animation-delay: 7s;
}

/* KEYFRAME DEFINITION This defines the fade-in, pause, and fade-out sequence
		  for the cross-fade effect. The percentages are calculated based on the
		  total 10.5-second animation duration.
		*/
@-webkit-keyframes imageFade {

	/* At 0%, the image is invisible */
	0% {
		opacity: 0;
	}

	/* From 0% to 14.28% (0s to 1.5s), fade in to full opacity. Calculation: 1.5s
/ 10.5s = 14.28%
			*/
	14.28% {
		opacity: 1;
	}

	/* Hold at full opacity for 2 seconds. The hold ends at 3.5s total (1.5s
			  fade-in + 2s hold). Calculation: 3.5s / 10.5s = 33.33%
			*/
	33.33% {
		opacity: 1;
	}

	/*
			  Fade out over 1.5 seconds. The fade-out ends at 5s total (3.5s
			  + 1.5s). Calculation: 5s / 10.5s = 47.62%
			*/
	47.62% {
		opacity: 0;
	}

	/* For the rest of the 10.5s cycle, the image remains invisible */
	100% {
		opacity: 0;
	}
}

@keyframes imageFade {

	/* At 0%, the image is invisible */
	0% {
		opacity: 0;
	}

	/* From 0% to 14.28% (0s to 1.5s), fade in to full opacity. Calculation: 1.5s
/ 10.5s = 14.28%
			*/
	14.28% {
		opacity: 1;
	}

	/* Hold at full opacity for 2 seconds. The hold ends at 3.5s total (1.5s
			  fade-in + 2s hold). Calculation: 3.5s / 10.5s = 33.33%
			*/
	33.33% {
		opacity: 1;
	}

	/*
			  Fade out over 1.5 seconds. The fade-out ends at 5s total (3.5s
			  + 1.5s). Calculation: 5s / 10.5s = 47.62%
			*/
	47.62% {
		opacity: 0;
	}

	/* For the rest of the 10.5s cycle, the image remains invisible */
	100% {
		opacity: 0;
	}
}

/* #ENDREGION */
/* #REGION 📐 HERO CARD */
.heroVideo_C {
	grid-area: heroVideo_area;
	justify-self: center;
	min-width: 320px;
	max-width: 760px;
}

.heroVideo {
	width: 100%;
}

.heroWordsLinks_C {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"heroWords_C_area"
		"heroLinks_C_area";
	gap: 3rem 0rem;
	width: 100%;
	margin-bottom: 2rem;
}

.heroWords_C {
	grid-area: heroWords_C_area;
	width: 100%;
}

.heroLinks_C {
	grid-area: heroLinks_C_area;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"email_C_area"
		"heroAllButtons_area";
	gap: 3rem 0rem;
	text-align: center;
	place-items: center;
	width: 100%;
}

.heroEmail_C {
	grid-area: email_C_area;
	width: 100%;
}

.heroEmailFont {
	font-family: var(--pFntFceEml);
	font-size: var(--pFntSzeEml);
	line-height: var(--pFntSzeLinHgtEml);
	font-weight: var(--pFntWgtEml);
	color: var(--emailCol);
}

.heroAllButtons {
	grid-area: heroAllButtons_area;
	display: grid;
	place-items: center;
	grid-template-columns: 100%;
	grid-template-areas:
		"resumeButton_C_area"
		"linkedinButton_C_area";
	gap: 3rem 0rem;
	width: 100%;
}

.heroResumeButton_C {
	grid-area: resumeButton_C_area;
	background-color: var(--buttonCol);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--borRads);
	width: var(--butWdt);
	height: var(--butHgt);
}

.heroButton_Linkedin_C {
	grid-area: linkedinButton_C_area;
	background-color: var(--buttonCol);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--borRads);
	width: var(--butWdt);
	height: var(--butHgt);
}

.heroButtonLabels {
	color: var(--buttonLblCol);
	font-family: var(--butCpyFac);
	font-size: var(--butCpySze);
	line-height: var(--butCpyLinHgt);
	font-weight: var(--butCpyWgt);
	display: grid;
	place-items: center;
	width: 55%;
}

.heroButtonIcons {
	display: flex;
	justify-content: center;
	align-items: center;
	border-style: solid;
	border-width: var(--borWdth);
	border-color: var(--buttonCol);
	border-radius: 50%;
	width: calc(var(--iconSz) * 2);
	height: calc(var(--iconSz) * 2);
}

/* #ENDREGION */
/* #REGION 🚧 ACCODRION */
/* Container for the entire accordion component */
.accordion-container {
	/* 1. Responsive width rules */
	width: 94%;
	/* Responsive width with side margins */
	min-width: 320px;
	max-width: 1000px;
	margin: 0 auto;
	/* Center the container */
	/* 5. Retained visual styling */
	border-style: solid;
	border-width: var(--borWdth);
	border-color: var(--redCol);
	border-radius: var(--borRad);
	overflow: hidden;
	/* Keeps content within the rounded corners */
	margin: 1rem 0rem 2rem 0rem;
}

/* The clickable red box (accordion header) */
.accordion-header {
	background-color: var(--dscrptnEyebrowCol);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s ease-in-out;
	font-weight: 600;
	letter-spacing: 0.05em;
	height: 64px;
	padding: 0.79rem 0rem 1rem 1rem;
	/* background-color: var(--dscrptnEyebrowCol); display: grid; align-items:
	center; border-radius: var(--borRad2); border-bottom-left-radius: 0rem;
	border-bottom-right-radius: 0rem; width: calc(100% + 2rem); height:
	fit-content; margin: -0.75rem 0rem 1rem -1rem; padding: 0.79rem 0rem 1rem
	1rem; */
}

.accordion-header:hover {
	background-color: #dc2626;
}

/* The dropdown content area. We use CSS Grid to animate the height from 0 to
its natural, auto height. This makes it perfectly adaptable to variable content.
        */
.accordion-content {
	background-color: #f3f4f6;
	display: grid;
	grid-template-rows: 0fr;
	/* Start collapsed (0 fractional units high) */
	transition: grid-template-rows 0.2s ease-in-out;
}

/* When the container is active, the content expands to 1 fractional unit (its
full natural height)
*/
.accordion-container.active .accordion-content {
	grid-template-rows: 1fr;
}

/* This inner wrapper is crucial for the grid animation. It holds the content
and has its overflow hidden.
        */
.content-wrapper {
	overflow: hidden;
	padding: 0 1.5rem;
	/* Horizontal padding is always present */
}

/* Apply vertical padding only when the accordion is active/open */
.accordion-container.active .content-wrapper {
	padding-top: 0rem;
	padding-bottom: 0rem;
}

/* Standard styling for paragraphs within the content */
.content-wrapper p {
	margin: 0;
}

.content-wrapper p:not(:last-child) {
	margin-bottom: 1rem;
}

.popUpSpotMaster {
	/* background-color: burlywood; */
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 1rem 0rem 1rem -0.5rem;
	padding: 0rem 0rem 0rem 0rem;
}

.popUp_QueAndAns_spacer {
	margin: 0rem 0rem 0.25rem 0rem;
}

.popUpQuestionsText {
	display: inline;
	font-size: var(--pFntSzeQ);
	font-weight: 600;
	font-family: "OpenSansRegular";
	line-height: var(--pFntSzeLinHgtQ);
	width: 100%;
	height: auto;
	margin: 0rem 0rem 0rem 0rem;
	padding: 0rem 0rem 0rem 0rem;
}

.popUpAnswersText {
	display: inline;
	font-size: var(--pFntSzeQ);
	font-weight: 500;
	font-family: "OpenSansRegular";
	/* Use the single family name */
	line-height: var(--pFntSzeLinHgtQ);
	width: 100%;
	height: auto;
	margin: 0rem 0rem 0rem 0rem;
	padding: 0rem 0rem 0rem 0rem;
}

.makeColumns {
	columns: 1;
	column-gap: 2rem;
}

/* #ENDREGION */
/* #REGION 🚧 ACCODRION 2 */
/* Container for the entire accordion component */
.accordion-container2 {
	/* 1. Responsive width rules */
	width: 94%;
	/* Responsive width with side margins */
	min-width: 320px;
	max-width: 1000px;
	margin: 0 auto;
	/* Center the container */
	/* 5. Retained visual styling */
	border-style: solid;
	border-width: var(--borWdth);
	border-color: var(--redCol);
	border-radius: var(--borRad);
	overflow: hidden;
	/* Keeps content within the rounded corners */
	margin: 1rem 0rem 3rem 0rem;
}

/* The clickable red box (accordion header) */
.accordion-header2 {
	background-color: var(--dscrptnEyebrowCol);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s ease-in-out;
	font-weight: 600;
	letter-spacing: 0.05em;
	height: 64px;
	padding: 0.79rem 0rem 1rem 1rem;
	/* background-color: var(--dscrptnEyebrowCol); display: grid; align-items:
	center; border-radius: var(--borRad2); border-bottom-left-radius: 0rem;
	border-bottom-right-radius: 0rem; width: calc(100% + 2rem); height:
	fit-content; margin: -0.75rem 0rem 1rem -1rem; padding: 0.79rem 0rem 1rem
	1rem; */
}

.accordion-header2:hover {
	background-color: #dc2626;
}

/* The dropdown content area. We use CSS Grid to animate the height from 0 to
its natural, auto height. This makes it perfectly adaptable to variable content.
        */
.accordion-content2 {
	background-color: #f3f4f6;
	display: grid;
	grid-template-rows: 0fr;
	/* Start collapsed (0 fractional units high) */
	transition: grid-template-rows 0.2s ease-in-out;
}

/* When the container is active, the content expands to 1 fractional unit (its
full natural height)
*/
.accordion-container2.active .accordion-content2 {
	grid-template-rows: 1fr;
}

/* This inner wrapper is crucial for the grid animation. It holds the content
and has its overflow hidden.
        */
.content-wrapper2 {
	overflow: hidden;
	padding: 0 1.5rem;
	/* Horizontal padding is always present */
}

/* Apply vertical padding only when the accordion is active/open */
.accordion-container2.active .content-wrapper2 {
	padding-top: 0rem;
	padding-bottom: 0rem;
}

/* Standard styling for paragraphs within the content */
.content-wrapper2 p {
	margin: 0;
}

.content-wrapper2 p:not(:last-child) {
	margin-bottom: 1rem;
}

.popUpSpotMaster2 {
	/* background-color: burlywood; */
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 1rem 0rem 1rem -0.5rem;
	padding: 0rem 0rem 0rem 0rem;
}

.popUp_QueAndAns_spacer2 {
	margin: 0rem 0rem 0.25rem 0rem;
}

.popUpQuestionsText2 {
	display: inline;
	font-size: var(--pFntSzeQ);
	font-weight: 600;
	font-family: "OpenSansRegular";
	line-height: var(--pFntSzeLinHgtQ);
	width: 100%;
	height: auto;
	margin: 0rem 0rem 0rem 0rem;
	padding: 0rem 0rem 0rem 0rem;
}

.popUpAnswersText2 {
	display: inline;
	font-size: var(--pFntSzeQ);
	font-weight: 500;
	font-family: "OpenSansRegular";
	/* Use the single family name */
	line-height: var(--pFntSzeLinHgtQ);
	width: 100%;
	height: auto;
	margin: 0rem 0rem 0rem 0rem;
	padding: 0rem 0rem 0rem 0rem;
}

.makeColumns2 {
	columns: 1;
	column-gap: 2rem;
}

/* #ENDREGION */
/* #REGION 🚧 ACCODRION 3 */
/* Container for the entire accordion component */
.accordion-container3-more {
	/* 1. Responsive width rules */
	width: 94%;
	/* Responsive width with side margins */
	min-width: 320px;
	max-width: 1000px;
	margin: 0 auto;
	/* Center the container */
	/* 5. Retained visual styling */
	border-style: solid;
	border-width: var(--borWdth);
	border-color: var(--redCol);
	border-radius: var(--borRad);
	overflow: hidden;
	/* Keeps content within the rounded corners */
	margin: 1rem 0rem 3rem 0rem;
}

/* The clickable red box (accordion header) */
.accordion-header3-more {
	background-color: var(--dscrptnEyebrowCol);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s ease-in-out;
	font-weight: 600;
	letter-spacing: 0.05em;
	height: 64px;
	padding: 0.79rem 0rem 1rem 1rem;
	/* background-color: var(--dscrptnEyebrowCol); display: grid; align-items:
	center; border-radius: var(--borRad2); border-bottom-left-radius: 0rem;
	border-bottom-right-radius: 0rem; width: calc(100% + 2rem); height:
	fit-content; margin: -0.75rem 0rem 1rem -1rem; padding: 0.79rem 0rem 1rem
	1rem; */
}

.accordion-header3:hover {
	background-color: #dc2626;
}

/* The dropdown content area. We use CSS Grid to animate the height from 0 to
its natural, auto height. This makes it perfectly adaptable to variable content.
        */
.accordion-content3 {
	background-color: #f3f4f6;
	display: grid;
	grid-template-rows: 0fr;
	/* Start collapsed (0 fractional units high) */
	transition: grid-template-rows 0.2s ease-in-out;
}

/* When the container is active, the content expands to 1 fractional unit (its
full natural height)
*/
.accordion-container3.active .accordion-content3 {
	grid-template-rows: 1fr;
}

/* This inner wrapper is crucial for the grid animation. It holds the content
and has its overflow hidden.
        */
.content-wrapper3 {
	overflow: hidden;
	padding: 0 1.5rem;
	/* Horizontal padding is always present */
}

/* Apply vertical padding only when the accordion is active/open */
.accordion-container3.active .content-wrapper3 {
	padding-top: 0rem;
	padding-bottom: 0rem;
}

/* Standard styling for paragraphs within the content */
.content-wrapper3 p {
	margin: 0;
}

.content-wrapper3 p:not(:last-child) {
	margin-bottom: 1rem;
}

.popUpSpotMaster3 {
	/* background-color: burlywood; */
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 1rem 0rem 1rem -0.5rem;
	padding: 0rem 0rem 0rem 0rem;
}

.popUp_QueAndAns_spacer3 {
	margin: 0rem 0rem 0.25rem 0rem;
}

.popUpQuestionsText3 {
	display: inline;
	font-size: var(--pFntSzeQ);
	font-weight: 600;
	font-family: "OpenSansRegular";
	line-height: var(--pFntSzeLinHgtQ);
	width: 100%;
	height: auto;
	margin: 0rem 0rem 0rem 0rem;
	padding: 0rem 0rem 0rem 0rem;
}

.popUpAnswersText3 {
	display: inline;
	font-size: var(--pFntSzeQ);
	font-weight: 500;
	font-family: "OpenSansRegular";
	/* Use the single family name */
	line-height: var(--pFntSzeLinHgtQ);
	width: 100%;
	height: auto;
	margin: 0rem 0rem 0rem 0rem;
	padding: 0rem 0rem 0rem 0rem;
}

.makeColumns3 {
	columns: 1;
	column-gap: 2rem;
}

/* #ENDREGION */
/* #REGION 📐 CARDS */
.cardHero_C {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"heroVideo_area"
		"heroWords_C_area"
		"heroLinks_C_area";
	gap: 2rem 0rem;
	width: 100%;
}

.card_OneImage_C {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"firstImage_C_area"
		"description_C_area";
	gap: var(--cmnImgGap) var(--cmnImgGap);
	width: 100%;
}

.card_OneImage_CXX {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"firstImage_C_area"
		"description_C_area";
	gap: var(--cmnImgGap) var(--cmnImgGap);
	width: 100%;
}

.card_TwoImages_CM {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"firstImage_C_area secondImage_C_area"
		"description_C_area description_C_area";
	gap: var(--cmnImgGap) var(--cmnImgGap);
	width: 100%;
}

.card_FourImages_CM {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"firstImage_C_area secondImage_C_area"
		"thirdImage_C_area fourthImage_C_area"
		"description_C_area description_C_area";
	gap: var(--cmnImgGap) var(--cmnImgGap);
	width: 100%;
}

/* #ENDREGION */
/* #REGION 📐 HOVER MOUSE OVER ANIMATION */
.button_Effect:hover {
	background-color: hsl(219, 100%, 77.5%);
	animation: zoom-in-zoom-out-buttons 0.85s ease 1;
}

.image_Effect:hover {
	/* ANIMATON ON HOVER */
	animation: zoom-in-zoom-out-images 0.85s ease 1;
}

@keyframes zoom-in-zoom-out-buttons {
	0% {
		scale: 1;
		transform: translate(0rem, 0rem);
		background-color: var(--buttonCol);
	}

	35% {
		scale: 1.125;
		transform: translate(0rem, -0.25rem);
		background-color: hsl(219, 100%, 77.5%);
	}

	100% {
		scale: 1;
		transform: translate(0rem, 0rem);
		background-color: var(--buttonCol);
	}
}

@keyframes zoom-in-zoom-out-darklight-button {
	0% {
		scale: 1;
		transform: translate(0rem, 0rem);
	}

	35% {
		scale: 1.125;
		transform: translate(0rem, -0.25rem);
	}

	100% {
		scale: 1;
		transform: translate(0rem, 0rem);
	}
}

@keyframes zoom-in-zoom-out-images {

	/* KEYFRAMES ZOOM-IN-ZOOM-OUT */
	0% {
		scale: 1;
		transform: translate(0rem, 0rem);
	}

	35% {
		scale: 1.125;
		transform: translate(0rem, -0.25rem);
	}

	100% {
		scale: 1;
		transform: translate(0rem, 0rem);
	}
}

/* #ENDREGION */
/* #REGION 📐 CARDS IMAGES CONTAINERS */
.firstImage_C {
	display: grid;
	place-items: center;
	grid-area: firstImage_C_area;
	border-radius: var(--borRad);
	width: 100%;
}

.secondImage_C {
	grid-area: secondImage_C_area;
	width: 100%;
}

.thirdImage_C {
	grid-area: thirdImage_C_area;
	width: 100%;
}

.fourthImage_C {
	grid-area: fourthImage_C_area;
	width: 100%;
}

/* #ENDREGION */
/* #REGION 📐 CARDS IMAGES ITEMS */
.oneImage {
	display: block;
	border-radius: var(--borRad);
	width: 100%;
}

.imageBrdr {
	border-style: solid;
	border-width: var(--borWdth);
	border-radius: var(--borRad);
	border-color: hsl(0, 0%, 80%);
}

/* #ENDREGION */
/* #REGION 📐 CARDS DESCRIPTION */
.description_C {
	grid-area: description_C_area;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"descriptionEmpCln_C_area"
		"descriptionRule_area"
		"descriptionInfo_C_area";
	align-content: start;
	height: fit-content;
	gap: 0rem;
	margin-top: 1.25rem;
}

.description_CXX {
	grid-area: description_C_area;
	display: grid;
	grid-template-rows: 1fr;
	/* grid-template-areas:
		"descriptionEmpCln_C_area"
		"descriptionRule_area"
		"descriptionInfo_C_area"; */
	align-content: start;
	height: fit-content;
	gap: 0rem;
	/* margin-top: 1.25rem; */
	margin: 0;
	padding: 0;
}

.descriptionEmpCln_C {
	grid-area: descriptionEmpCln_C_area;
}

.descriptionInfo_C {
	grid-area: descriptionInfo_C_area;
}

.descriptionEyebrow_C {
	background-color: var(--dscrptnEyebrowCol);
	display: grid;
	align-items: center;
	border-radius: var(--borRad2);
	border-bottom-left-radius: 0rem;
	border-bottom-right-radius: 0rem;
	width: calc(100% + 2rem);
	height: fit-content;
	margin: -0.75rem 0rem 1rem -1rem;
	padding: 0.79rem 0rem 1rem 1rem;
}

.descriptionEyebrowCopy {
	color: var(--dscrptnEyebrowCopyCol);
	text-transform: uppercase;
	font-family: BarlowSemiBold;
	font-size: 1.25rem;
}

/* #ENDREGION */
/* #REGION 📐 FOOTER */
.footer_C {
	background-color: var(--dscrptnEyebrowCol);
	display: grid;
	place-items: center;
	width: 100%;
	height: auto;
	margin-top: 2rem;
	padding: 2rem 0rem 2rem 0rem;
}

.footerInside_C {
	background-color: var(--dscrptnEyebrowCol);
	color: white;
	width: 94%;
}

/* #ENDREGION */
/* #REGION 📐 FULL SIZE */
.fullSizeTopMargins {
	margin-top: 1rem;
}

/* Grouping all classes that have a max-width of 800px. */
.fullSizeMaxWidth_astellas_ppnt_M,
.fullSizeMaxWidth_castrol_tech_M,
.fullSizeMaxWidth_hyatt_email_M,
.fullSizeMaxWidth_snacked_bag_M,
.fullSizeMaxWidth_snacked_pack_M,
.fullSizeMaxWidth_trisect_marie_M,
.fullSizeMaxWidth_trisect_orville_M {
	max-width: 800px;
}

/* Grouping all classes that have a max-width of 720px. */
.fullSizeMaxWidth_castrol_gtxhm_banners_M,
.fullSizeMaxWidth_castrol_ha_banners_M,
.fullSizeMaxWidth_trisect_cgi_a_M,
.fullSizeMaxWidth_trisect_cgi_b_M {
	max-width: 720px;
}

/* This class has a unique max-width value, so it remains as is. */
.fullSizeMaxWidth_castrol_print_M {
	max-width: 960px;
}

/* #ENDREGION */
.tester6,
.tester7 {
	display: block;
	width: 100%;
	height: 100%;
}

.bborder {
	border-style: solid;
	border-width: 1px;
	border-color: rgb(196, 196, 196);
}

.various_largest {
	width: 100%;
}

@media screen and (min-width: 520px) {
	.heroAllButtons {
		grid-area: heroAllButtons_area;
		display: grid;
		place-items: center;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "resumeButton_C_area linkedinButton_C_area";
		width: 100%;
	}

	.heroWordsLinks_C {
		margin-bottom: 2rem;
	}
}

@media screen and (min-width: 640px) {
	.makeColumns {
		columns: 2;
		column-gap: 2rem;
	}
}

@media screen and (min-width: 800px) {
	.cardHero_C {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"heroVideo_area"
			"heroVideo_area"
			"heroWords_C_area heroLinks_C_area";
		width: 100%;
	}

	.heroWordsLinks_C {
		display: grid;
		grid-template-columns: 1.2fr 0.8fr;
		grid-template-areas: "heroWords_C_area heroLinks_C_area";
		gap: 0rem 1.5rem;
		width: 100%;
		margin-bottom: 2rem;
	}

	.heroWords_C {
		grid-area: heroWords_C_area;
		grid-area: heroWords_C_area;
		width: 100%;
	}

	.heroLinks_C {
		grid-area: heroLinks_C_area;
		grid-area: heroLinks_C_area;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"email_C_area"
			"heroAllButtons_area";
		text-align: center;
		place-items: center;
		width: 100%;
		gap: 0rem 0rem;
	}

	.heroEmail_C {
		grid-area: email_C_area;
		width: 100%;
	}

	.heroAllButtons {
		grid-area: heroAllButtons_area;
		display: grid;
		place-items: center;
		grid-template-columns: 1fr;
		grid-template-areas:
			"resumeButton_C_area"
			"linkedinButton_C_area";
		width: 100%;
	}

	.masonryHolder {
		column-count: 2;
		width: 94%;
		break-inside: avoid;
	}

	.masonryBlocks {
		display: inline-block;
		break-inside: avoid;
		width: auto;
	}
}

@media screen and (min-width: 1000px) {
	.cardHero_C {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"heroVideo_area"
			"heroWords_C_area"
			"heroLinks_C_area";
		max-width: 1000px;
	}

	.various_largest {
		max-width: 1000px;
	}

	.heroWordsLinks_C {
		margin-bottom: 0rem;
	}

	.makeColumns {
		columns: 3;
		column-gap: 2rem;
	}
}

@media screen and (min-width: 1200px) {
	.allContentCards_C_M {
		grid-template-columns: 1fr 1fr 1fr;
		max-width: 1600px;
	}

	.masonryHolder {
		column-count: 3;
		/* width: 94%; */
		max-width: 1600px;
		break-inside: avoid;
	}

	.masonryBlocks {
		display: inline-block;
		break-inside: avoid;
		width: auto;
	}
}