/*---------------------------------------------------------------------
	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(/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;
}

/* 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;
}

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

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

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

.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;
	}
}

/*
.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
-----------------------------------------------------------------------*/

.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 {
	transition: transform 0.3s ease;
}

.faq.active .fa-plus { /* 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;
}