/*---------------------------------------------------------------------
	EXTERNAL
-----------------------------------------------------------------------*/

:root {
	--color-blue-very-dark: #022a51;
	--color-blue-dark: #043b72;
	--color-blue-medium: #2497ef;
	--color-blue-light: #e2f1fc;
	--color-blue-very-light: #f7fbfe;
	--color-tangerine-dark: #ff7915;
	--color-tangerine: #ff974a;
	--color-tangerine-light: #ffe8cb;
	--color-tangerine-very-light: #fef8f3;
	--color-pure-white: #ffffff;
	--color-gray-very-light: #f9fafa;
	--color-gray-medium: #ced4da;
	--color-charcoal: #5e5e5e;
	--btn-border-radius: 25px;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
	src: url(https://cdn.churchtrac.com/fonts/InterVariable.ttf);
}


/*---------------------------------------------------------------------
	DEVELOPMENT
-----------------------------------------------------------------------*/
.outline {
	outline: 2px dashed red;
}

.outline-blue {
	outline: 2px dashed blue;
}

/*---------------------------------------------------------------------
	BASE STYLE
-----------------------------------------------------------------------*/

body {
	font-family: "Inter", sans-serif !important;
	/* font-feature-settings needs to be applied here to work in Chrome */
	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
	/* font-optical-sizing: auto; */
	/* font-weight: normal;
	font-style: normal; */
	overflow-x: hidden !important;
	overflow-y: scroll;
	--btn-default-color: var(--color-blue-dark);
	--btn-default-bg: transparent;
	--btn-primary: var(--color-blue-dark);
	--border-color: rgba(0, 0, 0, 0.15);
}

.container {
	max-width: 1140px;
}

.card-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
	padding: 1rem;
}

.flex-equal {
	flex: 1 1 0;
}

/* DEFINE HEADING STYLES */
h1,
.h1 {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	/* font-style: normal; */
	font-size: 3.5rem;
	color: var(--color-blue-dark);
	/* chrome does not support % values for letter-spacing */
	letter-spacing: -1.4px;
	/* font-feature-settings needs to be applied here to work in Chrome */
	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
	line-height: 3.65rem;
}

.subheading {
	font-family: "Inter", sans-serif;
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0px;
	line-height: 1.65rem;
	color: var(--color-charcoal);
}

h2,
.h2 {
	font-family: "Inter", sans-serif;
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: -1.25px;
	color: var(--color-charcoal);
}

h3,
.h3 {
	font-family: "Inter", sans-serif;
	font-size: 1.5rem;
	font-weight: 300;
	font-style: normal;
	letter-spacing: -0.5px;
}

h4,
.h4 {
	font-family: "Inter", sans-serif;
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 1.75rem;
}

h5,
.h5 {
	font-family: "Inter", sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 1.5rem;
}

h6,
.h6 {
	font-family: "Inter", sans-serif;
	font-size: 1.125rem;
	font-weight: 300;
	letter-spacing: -0.25px;
	line-height: 1.375rem;
}

p,
.p {
	letter-spacing: -0.25px;
	font-weight: 300;
	font-size: 1.1rem;
	line-height: 1.35rem;
}

li {
	font-size: 1.1rem;
}

.lead {
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: 0px;
}

b,
strong,
.bold,
.strong {
	font-weight: 600;
}

.text-charcoal {
	color: var(--color-charcoal);
}

.text-disabled, .text-muted-disabled, .text-secondary-disabled {
	color: var(--color-gray-medium);
}

.border,
.border-secondary {
	border-color: var(--color-gray-medium) !important;
}

/* GENERAL STYLES */
a {
	color: #1271bb;
}

.bold {
	font-weight: bold;
}

.underline {
	text-decoration: underline;
}

.navbar {
	border-bottom: none;
	/* Initially no border */
}

.navbar.scrolled {
	border-bottom: 1px solid #efefef;
}

/* DEFINE BACKGROUND COLORS */
.bg-primary {
	background-color: var(--color-blue-medium) !important;
}

.bg-blue-very-dark {
	background-color: var(--color-blue-very-dark);
}

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

.bg-blue-medium {
	background-color: var(--color-blue-medium);
}

.bg-blue-light {
	background-color: var(--color-blue-light);
}

.bg-blue-very-light {
	background-color: var(--color-blue-very-light);
}

.bg-tangerine {
	background-color: var(--color-tangerine);
	color: white;
}

.bg-tangerine-light {
	background-color: var(--color-tangerine-very-light);
	color: white;
}

.tooltip-inner {
	background-color: var(--color-blue-very-dark);
	color: var(--color-pure-white);
}

.tooltip .arrow::before {
	border-top-color: var(--color-blue-very-dark);
}

.tooltip .arrow::after {
	border-top-color: var(--color-blue-very-dark);
}


/* OVERRIDE DEFAULT BOOTSTRAP STYLES */
.text-success {
	color: var(--color-blue-dark) !important;
}

.text-primary {
	color: var(--color-blue-medium) !important;
}

.text-info {
	color: var(--color-blue-light);
}

.text-tangerine {
	color: var(--color-tangerine);
}

.btn-tangerine {
	background-color: var(--color-tangerine);
	color: white;
}

.btn-tangerine:hover {
	background-color: var(--color-tangerine-dark);
	color: white;
}

.btn-round,
.btn-rounded {
	border-radius: 22.5px;
}

.btn {
	border-radius: var(--btn-border-radius);
	cursor: pointer;
	font-size: 0.9rem;
}

.btn-group {
	width: 100%;
	margin-bottom: 7px;
}

.btn-group .btn.text-white {
	color: white !important;
	border: none !important;
}

.btn-group .btn.text-dark {
	color: #444 !important;
	border: none !important;
}

.btn-group .btn {
	background-color: var(--btn-default-bg);
	color: var(--btn-default-color);
	border: 1px solid var(--btn-default-color);
}

.btn-group .btn.active {
	background-color: var(--color-blue-dark) !important;
	border: 1px solid var(--btn-default-color) !important;
}

.btn-group {
	background-color: var(--color-disabled) !important;
	color: var(--color-gray-400) !important;
	border-color: var(--color-gray-200) !important;
	cursor: default !important;
}

.btn-group i[class*="fa-"]:hover {
	cursor: default !important;
}

.btn-group .btn:hover {
	background-color: var(--color-blue-medium) !important;
	color: var(--color-gray-very-light) !important;
}

.btn-group-sm .btn {
	height: 30px;
	font-size: 0.8rem;
	padding-top: 5px;
}

.btn-group-sm>.btn,
.btn-sm {
	border-radius: var(--btn-border-radius);
}

.btn-group .btn.active {
	color: var(--color-gray-very-light) !important;
}

/* remove bootstrap highlight around selected button */
.btn-group-toggle .btn.focus {
	box-shadow: none;
}

.btn-default {
	background-color: var(--btn-default-bg);
	outline: none;
	color: var(--btn-default-color) !important;
	border: 1px solid var(--btn-default-color);
}

.btn-default:hover {
	color: var(--color-gray-very-light) !important;
	background-color: var(--btn-primary);
	border-color: var(--border-color) !important;
}

.ontop {
	z-index: 10;
}

.behind {
	z-index: -1;
}

.show-after-load {
	display: none;
}

.p-6 {
	padding: 2rem !important;
}

.px-6 {
	padding-left: 2rem !important;
	padding-right: 2rem !important;
}

.py-6 {
	padding-top: 2rem !important;
	padding-bottom: 2rem !important;
}

#post-card.p-5 {
	padding: 1rem !important;
}

.image-background {
	min-height: 400px;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

.image-rounded {
	border-radius: 20px;
}

.pointer {
	cursor: pointer;
}

.rounded {
	border-radius: 1rem !important;
}


/*---------------------------------------------------------------------
					   LANDING PAGE
-----------------------------------------------------------------------*/

/* landing page hero */

/* prevent horizontal scrolling on small screen sizes */
@media (max-width: 576px) {
	.banner-top {
		overflow-x: hidden !important;
	}
}

.banner-top {
	margin-top: 80px;
	margin-bottom: 40px !important;
}

@media (min-width: 992px) {
	.banner-top {
		margin-top: 160px;
	}
}

/* landing page hero image */
.image-dissolve {
	position: relative;
	width: 100%;
	height: 395px;
	z-index: -1;
}

.image-dissolve img {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 100%;
	height: auto;
	opacity: 0;
	/* hide all images initially */
	transition: opacity 1s ease-in-out;
}

.image-dissolve img.active {
	opacity: 1;
}

@media (min-width: 768px) {
	.image-dissolve {
		height: 395px;
	}
}

@media (min-width: 992px) {
	.image-dissolve {
		height: 395px;
	}

	.image-dissolve img {
		left: unset;
		right: -40px;
		transform: unset;
	}
}

@media (max-width: 991px) {

	/* secondary page hero images on smaller screens only */
	.secondary-page-hero-img img {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
		top: -8% !important;
		height: 110% !important;
		opacity: 1;
	}
}

@media (min-width: 992px) {
	.secondary-page-hero-img img {
		height: 110% !important;
		top: -8% !important;
	}
}


/******************************/
/* @michael New Feature Pages */
/******************************/

.dark-border-left {
	border-left: solid 4px #2E2E2E;
}

.section-bg {
	background-color: #F7FBFE;
}

.feature-hero h1 {
	font-weight: 600;
	font-size: clamp(3rem, 7vw, 3.5rem);
}

.feature-hero h2 {
	font-size: 1.75rem;
	font-weight: 600;
}

.text-navy {
	color: #043B72;
}

.feature-body h1 {
	font-size: clamp(3rem, 7vw, 3.5rem);
	/* Main headline */

}

.feature-body .h1 {
	letter-spacing: unset;
	font-weight: 600;
}

.feature-body h2 {
	font-size: clamp(3rem, 7vw, 3.5rem);
	color: #043B72;
	/* Section heading */
}

.feature-body h3 {
	font-size: 1.5rem;
	/* Subsection heading */
}

.feature-body h4 {
	font-size: 1.75rem;
	/* Smaller feature label */
}

.feature-body h5 {
	font-size: 1.25rem;
	/* Supporting label */
}

.feature-hero.banner-top {
	margin-top: 120px;
	margin-bottom: 40px !important;
}

/* add to any <img> you want to be non-draggable */
img.nodrag {
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	/* iOS: disables long-press menu */
}

/* the image shouldn't be clickable at all / replaces what we were doing before i believe... */
img.noclick {
	pointer-events: none;
}

/**** DEVICE IMAGE ANIMATION ****/

:root {
	--intro-dur: 3s;
	--intro-delay: .15s;
	--stagger: .10s;

	/* missing vars */
	--final-y: -50px;
	/* match center phone’s final Y */
	--fan-x: 105%;
	/* how far to slide left/right */
}
/* stage for absolute positioning */
.device-image-stage {
	position: relative;
	min-height: 420px;
}

/* shared */
.iphone {
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .10)) drop-shadow(0 18px 40px rgba(0, 0, 0, .12));
	width: 25%;
	min-width: 200px;
	height: auto;
	display: block;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform, filter;
}

/* center phone (your existing animation) */
.iphone--center {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	/* stays centered */
	animation: introTilt var(--intro-dur) cubic-bezier(.2, .2, .2, 1) var(--intro-delay) 1 both;
	margin-bottom: -80px;
}

/* side phones: start centered and invisible, then fan out */
/* make transforms resilient if vars ever go missing */
.iphone--left,
.iphone--right {
	position: absolute;
	max-height: 544px;
	z-index: 1;
	left: 50%;
	top: 0;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, var(--final-y, -50px));
	animation-duration: 1.4s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(.2, .7, .2, 1);
	animation-delay: calc(var(--intro-dur) + var(--intro-delay) - 0.75s);
}

.iphone--left  { animation-name: slideLeft; }
.iphone--right { animation-name: slideRight;
                 animation-delay: calc(var(--intro-dur) + var(--intro-delay) + var(--stagger)); }

/* no rotate or scale, horizontal only */
@keyframes slideLeft {
	0% {
		opacity: 0;
		transform: translate(-50%, var(--final-y, -50px));
	}

	10% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translate(calc(-50% - var(--fan-x, 100%)), var(--final-y, -50px));
	}
}

@keyframes slideRight {
	0% {
		opacity: 0;
		transform: translate(-50%, var(--final-y, -50px));
	}

	10% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translate(calc(-50% + var(--fan-x, 100%)), var(--final-y, -50px));
	}
}

/* keyframes */
@keyframes introTilt {
	0% {
		transform: translateY(18px) rotateX(30deg) rotateY(-8deg) rotateZ(0) scale(1);
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	60% {
		transform: translateY(-80px) rotateX(0) rotateY(0) rotateZ(0) scale(1.09);
	}

	100% {
		transform: translateY(-50px) rotateX(0) rotateY(0) rotateZ(0) scale(1);
	}
}


/* Screenshot Device Image Styling */

.scroll-animation {
	opacity: 0;
	transform: translateZ(0);
	transition: transform .6s ease, opacity .6s ease;
	will-change: transform, opacity;
}

.scroll-animation.from-left {
	transform: translateX(-24px);
}

.scroll-animation.from-top {
	transform: translateY(-24px);
}

.scroll-animation.from-bottom {
	transform: translateY(24px);
}

.scroll-animation.from-right {
	transform: translateX(24px);
}

/* when your ScrollAnimator adds .show-element */
.scroll-animation.show-element {
	opacity: 1;
	transform: none;
}
  
.laptop-ss {
	width: clamp(360px, 52vw, 620px) !important;
}

.phone-ss {
	width: clamp(110px, 13vw, 170px) !important;
}

.tablet-ss {
	width: clamp(150px, 17vw, 240px) !important;
}

/* keep them tidy on narrow screens */
@media (max-width: 768px) {
	.laptop-ss {
		width: clamp(440px, 80vw, 600px) !important;
	}

	.phone-ss {
		width: clamp(110px, 28vw, 160px) !important;
	}

	.tablet-ss {
		width: clamp(150px, 34vw, 220px) !important;
	} 
}

/* Apple-ish shadows (edge-aware for transparent PNGs) */
.device-ss {
	filter:
		drop-shadow(0 2px 4px rgba(0, 0, 0, .10)) drop-shadow(0 12px 24px rgba(0, 0, 0, .12)) drop-shadow(0 32px 64px rgba(0, 0, 0, .14));
	border-radius: 12px;
	/* harmless for screenshots; ignored by transparent PNG edges */
}


/**** END ANIMATION STYLING ****/

.gap-4 {
	gap: 0.45rem;
	/* 4px */
}

.gap-3 {
	gap: 0.75rem;
	/* 8px */
}

.gap-2 {
	gap: 1.5rem;
	/* 16px */
}

.gap-1 {
	gap: 2rem;
	/* 24px */
}

.column-gap {
	column-gap: 4rem;
	/* 36px */
}

.row-gap {
	row-gap: 1rem;
	/* 24px */
}

/* ---------- Vars ---------- */
.img-snap-carousel {
	position: relative;
	--carousel-gutter: 16px;
	/* space between cards */
}

/* Keep captions from being hidden by the buttons */
.img-snap-carousel .scroller {
	padding-bottom: 3rem;
}

/* ---------- SCROLLER: keep scroll, bleed to right, allow last card ---------- */
.img-snap-carousel .scroller {
	overflow-x: auto;
	/* ← keep this so JS can scroll */
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--carousel-gutter);
	scroll-padding-right: var(--carousel-gutter);
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* hide webkit scrollbar */
.img-snap-carousel .scroller::-webkit-scrollbar {
	display: none;
}

/* NEW: add real runway on the right so the last card can fully enter */
.img-snap-carousel .scroller::after {
	content: "";
	flex: 0 0 calc(max((100vw - 1110px)/2, 0px) + var(--carousel-gutter));
}

/* Make the scroller a flex row so the ::after spacer works */
.img-snap-carousel .scroller {
	display: flex;
}

.img-snap-carousel .spacer {
	/* 1110 = your max container */
	flex: 0 0 max(calc((100vw - 1110px) / 2 - 1.5rem), 0px); 
}

/* cards */
.img-snap-carousel .image-container {
	flex: 0 0 auto;
	scroll-snap-align: start;
	margin-right: var(--carousel-gutter);
}

.img-snap-carousel .image-container:last-child {
	margin-right: 0!important;
}

.img-snap-carousel .image-container:first-child {
	margin-left: 1.5rem !important;
}

/* nav (yours) */
.img-snap-carousel .carousel-nav {
	margin: 0px auto;
	max-width: 1140px;
	justify-content: center;
	position: relative;
	display: flex;
	gap: 20px;
	z-index: 10;
}

.img-snap-carousel .btn-nav {
	font-size: 1.2rem;
	background: lightgray;
	width: 50px;
	height: 50px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.img-snap-carousel .btn-nav:hover {
	background: #f8f9fa;
}

/*************************/

/*
.header {
	display: flex;
	flex-direction: column;
	color: #343a40!important;
	padding-top: 0rem!important;
	padding-bottom: 1rem!important;
	margin-bottom: 1rem!important;
	overflow-x: hidden;
}

.header > div:first-of-type {
	text-align: center;
	width:100%;
	align-self: flex-start!important;
	flex-grow: 1!important;
}

.header > div:last-of-type {
	text-align: center!important;
	align-self: center!important;
	max-width:500px!important;
	padding: 0 10px;
}

.header > div:last-of-type img {
	width:100%;
	max-width: 500px;
}
*/

footer a {
	color: white;
}

footer a:hover {
	color: white !important;
}

.responsive-alignment {
	text-align: center;
	width: 100%;
}

.hero-img {
	width: 500px !important;
	height: auto;
	max-width: 90%;
	overflow-x: hidden !important;
}


/* hover expansion button */
/*
.btn-hover-expand {
	border-radius: 25px;
	padding: 9px;
	display: flex;
	align-items: center;
	width: 2.2rem;
	height: 2.2rem;
	transition: padding 0.3s ease, width 0.3s ease;
	overflow: hidden;
}

.btn-hover-expand:hover {
	width: 250px;
}

.btn-hover-expand span:last-child {
	opacity: 0;
	transform: translateX(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	white-space: nowrap;
}

.btn-hover-expand:hover span:last-child {
	opacity: 1;
	transform: translateX(0);
}
*/

/*---------------------------------------------------------------------
	INFINITE SCROLLING CSS
-----------------------------------------------------------------------*/

/* infinite horizontal scroll css */

.horizontal-scroller-content img {
	height: 75px;
	width: auto;
}

/* outer container for scrolling logos */
.horizontal-scroller {
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
	mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

/* outer container and inner container */
.horizontal-scroller .horizontal-scroller-content {
	will-change: transform;
	width: max-content;
	flex-wrap: nowrap;
	animation: scroll 90s linear infinite;
	animation-direction: normal;
	/* delay seems to be needed for safari */
	animation-delay: 0.25s;
	/* Optional: explicit direction */
	padding-block: 0 1rem;
	display: flex;
	gap: 1rem;
	align-items: center;
}

@keyframes scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-50% - 0.5rem));
	}
}

/* infinite vertical scroll css for quote section */
.infinite-vertical-scroll-container {
	height: 60vh;
	overflow: hidden;
	position: relative;
	-webkit-mask: linear-gradient(180deg, transparent, white 20%, white 80%, transparent);
	mask: linear-gradient(180deg, transparent, white 20%, white 80%, transparent);
}

.vertical-scroller {
	display: flex;
	flex-direction: column;
	animation: scroll-vertical 60s linear infinite;
	animation-delay: 0.25s;
	height: 100%;
}

.vertical-scroller:nth-child(2) {
	animation: scroll-vertical-reverse 60s linear infinite;
	animation-delay: 0.25s;
}

@keyframes scroll-vertical {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-50%);
		/* scroll content upwards */
	}
}

@keyframes scroll-vertical-reverse {
	0% {
		transform: translateY(-50%);
	}

	100% {
		transform: translateY(0);
	}
}

/* landing testimony section */
.testimony-card {
	border-radius: 15px;
}

.testimony-card .fa-star {
	color: #FFD700;
}

.testimony-card .quote-image {
	left: -20px;
	width: 80px;
	height: 80px;
	transform: scale(0.5);
	border-radius: 50%;
	border: 2px solid var(--color-blue-dark);
	object-fit: cover;
	overflow: hidden;
	box-sizing: border-box;
}

/* note: for lg+ screens, use .width-* class for .header > div.first-of-type and last-of-type widths */
@media (min-width: 992px) {

	.p-6 {
		padding: 4rem !important;
	}

	#post-card.p-5 {
		padding: 3rem !important;
	}

	.header {
		flex-direction: row;
		overflow-x: visible !important;
	}

	.header>div:first-of-type {
		text-align: left;
		width: auto;
		align-self: center !important;
	}

	.header>div:last-of-type {
		max-width: 320px;
	}

	.responsive-alignment {
		text-align: left;
		width: auto;
	}

	.width-30 {
		width: 30%;
	}

	.width-33 {
		width: 33%;
	}

	.width-40 {
		width: 40%;
	}

	.width-45 {
		width: 45%;
	}

	.width-50 {
		width: 50%;
	}

	.width-55 {
		width: 55%;
	}

	.width-60 {
		width: 60%;
	}

	.width-66 {
		width: 66%;
	}

	.width-70 {
		width: 70%;
	}

}

.feature {
	display: none;
}

.feature.active {
	display: inline;
}

.feature .h3 {
	border-bottom: 1px solid #777;
}


#trial-div {
	background: linear-gradient(to right bottom, var(--color-blue-medium), rgba(4, 59, 114, 0.55)), url(/images/landing/other/10.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right 0px bottom 0px;
}

#ministry {
	background: var(--color-blue-medium);
	min-height: 300px;
}

#apps {
	background: var(--color-blue-very-dark);
	min-height: 300px;
}

@media (min-width: 768px) {
	#trial-div {
		background-position: center center;
	}

	#ministry {
		background: url(/images/landing/homepage/3-bluebg-man@2x.png);
	}
}

/***************************************************/
/* HEXAGON ANIMATION */
/***************************************************/
@keyframes hex1 {
	0% {
		transform: rotate(0deg);
	}

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

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

.hex-animate {
	z-index: -1;
	animation-name: hex1;
	animation-duration: 40s;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}


/***************************************************/
/* LOGIN SCREEN */
/***************************************************/

body.login {
	height: 100%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 40px;
}

body.login .form-signin {
	width: 100%;
	max-width: 360px;
	padding: 15px;
	margin: auto;
	border-radius: 15px;
}

body.login .form-signin .checkbox {
	font-weight: 400;
}

body.login .form-signin .form-control {
	position: relative;
	box-sizing: border-box;
	height: auto;
	padding: 10px;
	font-size: 16px;
}

body.login .form-signin .form-control:focus {
	z-index: 2;
}

body.login .form-signin input[type="email"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

body.login .form-signin input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/*---------------------------------------------------------------------
						OVERLAYS/BACKGROUNDS
-----------------------------------------------------------------------*/

.features .icon {
	width: 100%;
}

.features .left-column,
.features .right-column {
	width: 50%;
}


/*---------------------------------------------------------------------
	PRICING RANGE SLIDER
-----------------------------------------------------------------------*/

#tier-btn-group, #payment-frequency-btn-group {
	background-color: white!important;
}

#tier-btn-group .btn {
	line-height: 0.6;
}

#tier-btn-group span {
	font-size: 0.75rem;
}

.range-wrap {
	position: relative;
	margin: 0 auto;
}

.range {
	width: 100%;
	height: 10px;
	/* Adjust height of the track */
	background: linear-gradient(to right, var(--color-blue-dark) 0%, var(--color-blue-dark) 0%, var(--color-blue-medium)0%, var(--color-blue-medium)100%);
	/* Default gradient */
	border-radius: 5px;
	outline: none;
	opacity: 0.9;
	transition: opacity .2s;
	-webkit-appearance: none;
	/* Ensure Webkit browsers apply custom styling */
	appearance: none;
	/* Ensure the slider is custom styled */
}

/* Style for the thumb for Webkit-based browsers (Safari, Chrome, etc.) */
.range::-webkit-slider-thumb {
	-webkit-appearance: none;
	/* Reset default appearance */
	appearance: none;
	/* Reset default appearance */
	width: 20px;
	height: 20px;
	background: var(--color-blue-medium);
	border-radius: 50%;
	border: 3px solid white;
	cursor: pointer;
	transition: background 0.3s;
	position: relative;
	/* Ensure it's positioned correctly */
}

/* Style for Firefox (older versions of Firefox that use the "::-moz" prefix) */
.range::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: var(--color-blue-medium);
	border-radius: 50%;
	border: 3px solid white;
	cursor: pointer;
	transition: background 0.3s;
}

/* Style for Edge */
.range::-ms-thumb {
	width: 20px;
	height: 20px;
	background: var(--color-blue-medium);
	border-radius: 50%;
	border: 3px solid white;
	cursor: pointer;
	transition: background 0.3s;
}

.bubble {
	background: var(--color-blue-medium);
	color: white;
	padding: 4px 12px;
	position: absolute;
	border-radius: 4px;
	left: 50%;
	top: -35px;
	/* Position the bubble above the slider */
	transform: translateX(-50%);
	white-space: nowrap;
	/* Prevent text wrapping */
}

/* bubble's arrow */
.bubble::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	background: var(--color-blue-medium);
	top: 100%;
	left: 50%;
}


/*---------------------------------------------------------------------
						 PRICING CARDS
-----------------------------------------------------------------------*/
.pricing1 .card {
	transition: 0.1s;
}

.pricing1 .card:hover {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-webkit-font-smoothing: antialiased;
}

.pricing1 .badge {
	top: -13px;
	position: absolute;
	left: 0;
	right: 0;
	width: 100px;
	margin: 0 auto;
}

.pricing1 .title {
	margin-top: 20px;
	font-weight: 500;
	margin-bottom: 5px;
}

.pricing1 .subtitle {
	font-size: 14px;
}

.pricing1 .pricing {
	margin: 0px 0;
}

.pricing1 .pricing sup {
	font-size: 18px;
	top: -20px;
}

.pricing1 .pricing .display-5 {
	color: #041934;
}

.pricing1 .pricing .yearly {
	display: none;
}

.pricing1 .list-inline {
	margin-top: 30px;
}

.pricing1 .list-inline li {
	padding: 8px 0;
	display: block;
}

.pricing1 .bottom-btn {
	position: relative;
	bottom: 0px;
}

/* round the top of the pricing page cards */
.rounded-pricing {
	border-top-left-radius: inherit !important;
	border-top-right-radius: inherit !important;
}

/*---------------------------------------------------------------------
  ABOUT US | OUR STORY
-----------------------------------------------------------------------*/

#unique-carousel .carousel-item {
	transition: none;
}

@media (min-width: 768px) {

	/* show 3 items */
	#unique-carousel .carousel-inner .active,
	#unique-carousel .carousel-inner .active+.carousel-item,
	#unique-carousel .carousel-inner .active+.carousel-item+.carousel-item {
		display: block;
	}

	#unique-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
	#unique-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item,
	#unique-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item {
		transition: none;
		margin-right: initial;
	}

	#unique-carousel .carousel-inner .carousel-item-next,
	#unique-carousel .carousel-inner .carousel-item-prev {
		position: relative;
		transform: translate3d(0, 0, 0);
	}

	#unique-carousel .carousel-inner .active.carousel-item+.carousel-item+.carousel-item+.carousel-item {
		position: absolute;
		top: 0;
		right: -33.3333%;
		z-index: -1;
		display: block;
		visibility: visible;
	}

	/* left or forward direction */
	#unique-carousel .active.carousel-item-left+.carousel-item-next.carousel-item-left,
	#unique-carousel .carousel-item-next.carousel-item-left+.carousel-item,
	#unique-carousel .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item,
	#unique-carousel .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item {
		position: relative;
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}

	/* farthest right hidden item must be abso position for animations */
	#unique-carousel .carousel-inner .carousel-item-prev.carousel-item-right {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		display: block;
		visibility: visible;
	}

	/* right or prev direction */
	#unique-carousel .active.carousel-item-right+.carousel-item-prev.carousel-item-right,
	#unique-carousel .carousel-item-prev.carousel-item-right+.carousel-item,
	#unique-carousel .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item,
	#unique-carousel .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item {
		position: relative;
		transform: translate3d(100%, 0, 0);
		visibility: visible;
		display: block;
		visibility: visible;
	}

}


/*---------------------------------------------------------------------
	BLOG
-----------------------------------------------------------------------*/

.card-columns {
	column-count: 1;
}

@media (min-width: 768px) {
	.card-columns {
		column-count: 2;
	}
}

@media (min-width: 1200px) {
	.card-columns {
		column-count: 3;
	}
}

.blog-pagination li.page-item {
	min-width: 50px;
}

.blog-pagination .page-item .page-link {
	border: none;
	border-radius: 50px !important;
	margin: 3px;
}

.blog-post h3,
.blog-post .h3 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.blog-post h4,
.blog-post .h4 {
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.blog-post img {
	text-align: center;
	margin: 30px auto;
}

.blog-post blockquote {
	margin: 1.5em 0;
	padding: 1em;
	border: 2px solid #e5e5e5;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
	color: #2c3e50;
}

/* used in blog post content */
.blog-post .aligncenter {
	display: block;
	margin: 0 auto 1.5em;
}

.blog-post img {
	max-width: 100%;
	height: auto;
}

.blockquote-custom-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -25px;
	left: 50px;
}

/*---------------------------------------------------------------------
	FAQs
-----------------------------------------------------------------------*/

.faq .fa-plus-circle {
	transition: transform 0.3s ease;
}

.faq.active .fa-plus-circle {
	/* rotate icon */
	transform: rotate(225deg);
}

/*---------------------------------------------------------------------
	VERTICAL SCROLL ANIMATION
-----------------------------------------------------------------------*/

.scroll-animation {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	will-change: opacity, transform;
}

.scroll-animation.show-element {
	opacity: 1;
	transform: translateY(0);
}

/* optional delay classes */
.delay-200 {
	transition-delay: 0.2s;
}

.delay-400 {
	transition-delay: 0.4s;
}

.delay-600 {
	transition-delay: 0.6s;
}

/*---------------------------------------------------------------------
	FEATURES CARD SCROLL
-----------------------------------------------------------------------*/

.card-scroll-container {
	width: 100%;
	position: relative;
	display: inline-block;
}

.card-scroll-arrow {
	font-size: 1.2rem;
	background-color: lightgray;
	width: 40px;
	height: 38px;
}

.card-scroll-wrapper {
	display: flex;
	transition: transform 0.5s ease-in-out;
	will-change: transform;
	scroll-behavior: smooth;
	/* smooth scrolling */
	-ms-overflow-style: none;
	/* hide scrollbar for Internet Explorer and Edge */
	scrollbar-width: none;
	/* hide scrollbar for Firefox */
}

.card-scroll-wrapper::-webkit-scrollbar {
	display: none;
	/* hide scrollbar for Chrome, Safari, and other WebKit browsers */
}

.card-scroll-wrapper.scrolling {
	transition: transform 0.5s ease-in-out;
}


.card-scroll {
	flex: 0 0 100%;
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.card-scroll:hover {
	transform: scale(1.02);
}

.card-scroll-features-btn:hover {
	background-color: var(--color-blue-medium);
}

.card-body img {
	max-width: 500px;
}

i.fal.fa-plus-circle {
	font-weight: 300;
	/* light icon */
	transition: all 0.3s ease;
}

i.fal.fa-plus-circle:hover {
	font-weight: 900;
	/* solid icon */
}

@media (min-width: 471px) {

	.card-scroll {
		margin-left: 1rem;
	}

}

@media (min-width: 768px) {
	.card-scroll-wrapper {
		padding-right: 0;
		/* ensure no padding on the right */
		margin-right: -50px;
		/* negative margin to let cards bleed off the right edge */
		margin-left: -50px;
		/* move the left of the div to the edge */
	}
}

/*---------------------------------------------------------------------
	PHRASES
-----------------------------------------------------------------------*/

.phrase-wrapped-text {
	font-size: 2rem;
}

.phrases {
	position: relative;
	width: auto;
	white-space: nowrap;
	height: 65px;
}

.phrase {
	width: 100%;
	position: absolute;
	left: 0;
	opacity: 0;
	background-color: transparent;
	font-size: 2rem;
}

.phrase.visible {
	opacity: 1;
}

.phrase.fade-in {
	animation: fadein 0.25s linear;
}

@keyframes fadein {
	from {
		opacity: 0;
		transform: rotateX(-90deg);
		top: 0.5em;
	}

	to {
		opacity: 1;
		transform: rotateX(0deg);
		top: 0;
	}
}

.phrase.fade-out {
	animation: fadeout 0.25s linear;
}

@keyframes fadeout {
	from {
		opacity: 1;
		transform: rotateX(0deg);
		top: 0;
	}

	to {
		opacity: 0;
		transform: rotateX(90deg);
		top: -0.5em;
	}
}

@media (min-width: 460px) {

	.phrase-wrapped-text,
	.phrase {
		font-size: 2.5rem;
	}
}

@media (min-width: 576px) {

	.phrase-wrapped-text,
	.phrase {
		font-size: 3.5rem;
	}
}

/*---------------------------------------------------------------------
	FEATURE COMPARISON TABLE
-----------------------------------------------------------------------*/

/* fade effect at the bottom */
.fade-gradient {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 250px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-blue-light));
	pointer-events: none;
}

@media (max-width: 768px) {
	.table {
		font-size: 14px;
	}
}

/*---------------------------------------------------------------------
	BENEFIT CARDS
-----------------------------------------------------------------------*/

/* .benefit-card:hover .card-title {
	opacity: 0;
}

.benefit-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.8);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 0;
	border-radius: 1rem;
}

.benefit-card:hover::before {
	opacity: 1;
}

.benefit-card .benefit-overlay-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #000;
	font-size: 1.2rem;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.benefit-card:hover .benefit-overlay-text {
	opacity: 1;
} */

.benefit-card {
	border-radius: 1rem;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 1rem;
	border: none;
	/* border: 1px solid var(--color-blue-dark); */
}

/*---------------------------------------------------------------------
	BADGES
-----------------------------------------------------------------------*/

.badge-squared {
	border-radius: 10px;
}

.badge-rounded {
	border-radius: 50px;
}

.badge-container {
	align-content: flex-start;
	align-items: flex-start;
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	height: min-content;
	justify-content: flex-start;
	overflow: visible;
	padding: 0;
	position: relative;
	width: 100%;
}

.badge-squared,
.badge-rounded {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	background-color: var(--color-blue-very-light);
	border: 1px solid var(--color-gray-medium);
}

.badge-squared.small,
.badge-rounded.small {
	padding: 4px 12px;
}

.badge-text {
	color: var(--color-charcoal);
	flex-grow: 1;
	white-space: nowrap;
}

.highlight {
	border-radius: 5px;
	padding: 0.5rem !important;
	min-width: 90vw;
}

@media (min-width: 576px) {
	.highlight {
		min-width: 500px;
	}
}

/*---------------------------------------------------------------------
	CARD GRID
-----------------------------------------------------------------------*/
.card-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 2rem;
	margin-top: 2rem;
}

@media (min-width: 576px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.card-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* leader roles section of landing page hover effect */
#leader-roles .card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	filter: brightness(100%);
	z-index: 0;
	transition: filter 0.3s ease;
	border-radius: 1rem;
}

#leader-roles .card:hover::before {
	filter: brightness(70%);
	/* darken the background, behind the card title and text */
}

#leader-roles .card .card-title {
	transform: translateY(0);
	transition: transform 0.1s ease;
	position: relative;
}

#leader-roles .card .card-text {
	visibility: hidden;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.1s ease, transform 0.1s ease;
}

#leader-roles .card:hover .card-title {
	transform: translateY(-10px);
	top: 0;
}

#leader-roles .card:hover .card-text {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

#service-highlights .col-6 {
	padding: 1rem;
}

/* support highlight section landing page */
#service-highlights .card,
#service-highlights .card .card-img-top {
	height: 100%;
}

#benefits {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	padding-top: 1.5rem;
}

@media (min-width: 768px) {
	#benefits {
		grid-template-columns: repeat(2, 1fr);
		/* 2 cards per row */
	}
}

@media (min-width: 1200px) {
	#benefits {
		grid-template-columns: repeat(4, 1fr);
		/* 4 cards per row */
	}
}



/* support article pages */
.kb-post h3,
.kb-post .h3,
#post-card h3,
#post-card .h3 {
	font-weight: bold;
	margin-top: 2.5rem;
	color: var(--color-charcoal);
}

@media (max-width: 575px) {

	.kb-post h1,
	.kb-post .h2,
	#post-card h1,
	#post-card .h2 {
		font-size: 2rem !important;
		line-height: 2.25rem;
	}
}

.kb-post div {
	margin-bottom: 0.4rem !important;
}