:root {
	--pink20: #61022A;
	--pink40: #B60554;
	--pink50: #E3066A;
	--electric-blue-95: #EDF4FF;
	--electric-blue-50: #066AFE;
	--vibrant-teal-95: #DEF9F3;
	--teal-50: #0B827C;
	--vibrant-yellow-95: #FBF3E0;
	--yellow-60:#CA8501;
	--indigo-95:#F1F3FB;
	--indigo-50:#5867E8;
	--green-95:#EBF7E6;
	--green-50:#2E844A;

}

/* Animation Keyframes */

@keyframes FadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes cloud_floating {
	0% {
		left: -5%;
		opacity: 0;
	}

	2% {opacity: 1;}

	98% {opacity: 0}

	100% {
		left: 105%;
	}
}

@keyframes balloon_movement {
	0% {
		left: -15%;
	}

	100% {
		left: 59%;
	}
}

@keyframes balloon_floating {
	0% {
		bottom: 0px;
	}

	33% {
		bottom: 10px;
	}

	67% {
		bottom: -7px;
	}

	100% {
		bottom: 0px;
	}
}

@keyframes balloon_swaying {
	0% {
		transform: rotate(-4deg);
	}

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

	100% {
		transform: rotate(-4deg);
	}
}

@keyframes balloon_appear {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

@keyframes cloud_lr {
	0% {
		transform: translateY(0px);
	}

	33% {
		transform: translateY(-10px);
	}

	67% {
		transform: translateY(+7px);
	}

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

@keyframes cloud_ud {
	0% {
		transform: translateX(0px);
	}

	33% {
		transform: translateX(10px);
	}

	67% {
		transform: translateX(-7px);
	}

	100% {
		transform: translateX(0px);
	}
}

#marquee {

	.background__gradient {
		background: var(--pink20);
		background: linear-gradient(180deg, var(--pink20) 0%, var(--pink40) 100%);
	}

	.blade__background.blade__background--below {
		z-index: 0;
	}

	.clouds-animation-container {
		position: absolute;
		overflow: hidden;
		height: 100%;
		width: 100%;
		animation: 7s ease-out FadeIn;
		animation-delay: 0;
		top: 0;
		z-index: -1;
		mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 10%, hsl(0 0% 0% / 1) 90%, hsl(0 0% 0% / 0));

		.cloud-image {
			background: url('https://wp.sfdcdigital.com/en-us/wp-content/uploads/sites/4/2025/03/Cloud-Texture-15.png') 0 0/cover no-repeat;	
		}

		.cloud1 {
			width: 600px;
			height: 458px;
			top: 35px;
			position: absolute;
			animation: 35s linear infinite cloud_floating;
			animation-delay: -30s;
		}

		.cloud2 {
			width: 520px;
			height: 397px;
			transform: scaleX(-1);
			bottom: 0px;
			position: absolute;
			animation: 30s linear infinite cloud_floating;
			animation-delay: -3s;
		}

		.cloud3 {
			width: 600px;
			height: 458px;
			transform: scaleX(-1);
			top: 10px;
			position: absolute;
			animation: 40s linear infinite cloud_floating;
			animation-delay: -12s;
		}

		.cloud4 {
			width: 520px;
			height: 397px;
			bottom: 80px;
			position: absolute;
			animation: 50s linear infinite cloud_floating;
			animation-delay: -31s;
		}
	}

	.balloon-animation {
		width: 180px;
		height: 257px;
		left: 56%;
		position: absolute;
		background: url('https://wp.sfdcdigital.com/en-us/wp-content/uploads/sites/4/2025/03/Hot-Air-Balloon.png') 0 0/cover no-repeat;
		animation: 10s ease-out -6s infinite balloon_floating, 5s ease-out -6s infinite balloon_swaying, 5s ease-out 0s 1 balloon_appear;

			.butterfly1 {
				width: 90px;
				height: 90px;
				left: 67%;
				bottom: -25px;
				position: absolute;
				background: url('https://wp.sfdcdigital.com/en-us/wp-content/uploads/sites/4/2025/03/FOTF-PR-Insects-Butterfly-01-Ani-compress.gif?resize=90,90') 0 0/cover no-repeat;
			}

			.butterfly2 {
				width: 40px;
				height: 40px;
				left: 0%;
				bottom: 78px;
				position: absolute;
				background: url('https://wp.sfdcdigital.com/en-us/wp-content/uploads/sites/4/2025/03/FOTF-PR-Insects-Butterfly-11-Ani-compress.gif?resize=40,40') 0 0/cover no-repeat;
			}
	}

}

#flowing-gradient {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}

#intro-headline {

	h2 {
		color: var(--pink50);
	}
}

#guide-navigation {

	ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 20px 16px;

		/* Remove standard styles */
		padding-inline-start: 0px;
	    list-style-type: none;
	    margin-block-start: 0;
	    margin-block-end: 0;

		li {
			display: block;

			a {
				padding: 20px 40px;
				border-radius: 30px;
				font-weight: bold;
				box-sizing: border-box;
				display: block;
			}

			&.nav-knowledge {

				a {
					color: var(--electric-blue-50);
					text-decoration: none;
					background: var(--electric-blue-95);

					&:hover {
						outline: 1px solid var(--electric-blue-50);
					}
				}
			}

			&.nav-usecases {

				a {
					color: var(--teal-50);
					text-decoration: none;
					background: var(--vibrant-teal-95);

					&:hover {
						outline: 1px solid var(--teal-50);
					}
				}
			}

			&.nav-channels {

				a {
					color: var(--yellow-60);
					text-decoration: none;
					background: var(--vibrant-yellow-95);

					&:hover {
						outline: 1px solid var(--yellow-60);
					}
				}
			}

			&.nav-handoff {

				a {
					color: var(--indigo-50);
					text-decoration: none;
					background: var(--indigo-95);

					&:hover {
						outline: 1px solid var(--indigo-50);
					}
				}
			}

			&.nav-metrics {

				a {
					color: var(--green-50);
					text-decoration: none;
					background: var(--green-95);

					&:hover {
						outline: 1px solid var(--green-50);
					}
				}
			}
		}
	}
}

#knowledge {


	header {
		background: var(--electric-blue-95);
		margin-bottom: 24px;
		border-radius: 50px;


		h2 {
			margin-bottom: 0px;
			color: var(--electric-blue-50);
			padding: 20px 0;
		}
	}
}

#knowledge-clean h3, #knowledge-unify h3, #knowledge-ground h3, #knowledge-monitor h3 {
	color: var(--electric-blue-50);
}

#use-cases-create h3, #use-cases-implement h3, #use-cases-test h3  {
	color: var(--teal-50);
}

#channels-goals h3, #channels-map h3, #channels-determine h3 {
	color: var(--yellow-60);
}

#handoff-gather h3, #handoff-use h3, #handoff-use h3, #handoff-focus h3 {
	color: var(--indigo-50);
}

#roi-calculator-cta-module h2 {
	color: var(--indigo-50);
}

#knowledge-image {

	article {
		position: relative;
	
		img {


			&.cloud1 {
				position: absolute;
				max-width: 100%;
				z-index: -1;
				left: 15%;
				bottom: 50px;
				width: 40%;
			}

			&.cloud2 {
				position: absolute;
				max-width: 100%;
				z-index: -1;
				left: 55%;
				top: 93px;
				width: 35%;
			}
		}
	}

}

#use-cases {


	header {
		background: var(--vibrant-teal-95);
		margin-bottom: 24px;
		border-radius: 50px;


		h2 {
			margin-bottom: 0px;
			color: var(--teal-50);
			padding: 20px 0;
		}
	}
}

#use-cases-image-1 {

	article {
		position: relative;
	
		img {


			&.cloud1 {
				position: absolute;
				max-width: 100%;
				z-index: -1;
				left: 18%;
				top: 2px;
				width: 40%;
			}

			&.cloud2 {
				position: absolute;
				max-width: 100%;
				z-index: -1;
				left: 55%;
				bottom: 35px;
				width: 25%;
			}
		}
	}

}

#use-cases-image-2 {

	article {
		position: relative;
	
		img {


			&.cloud1 {
				position: absolute;
				max-width: 100%;
				z-index: -1;
				left: 17%;
				top: 118px;
				width: 40%;
			}

			&.cloud2 {
				position: absolute;
				max-width: 100%;
				z-index: -1;
				left: 45%;
				top: 37px;
				width: 35%;
			}
		}
	}

}

#channels {


	header {
		background: var(--vibrant-yellow-95);
		margin-bottom: 24px;
		border-radius: 50px;


		h2 {
			margin-bottom: 0px;
			color: var(--yellow-60);
			padding: 20px 0;
		}
	}
}

#channels-image {

	article {
		position: relative;
	
		img {


			&.cloud1 {
				position: absolute;
				max-width: 100%;
				z-index: -1;
				left: 13%;
				top: 95px;
				width: 40%;
			}

			&.cloud2 {
				position: absolute;
				max-width: 100%;
				z-index: -1;
				left: 57%;
				top: 51px;
				width: 30%;
			}
		}
	}

}

#handoff {


	header {
		background: var(--indigo-95);
		margin-bottom: 24px;
		border-radius: 50px;


		h2 {
			margin-bottom: 0px;
			color: var(--indigo-50);
			padding: 20px 0;
		}
	}
}

#handoff-image {

	article {
		position: relative;
	
		img {


			&.cloud1 {
				position: absolute;
				max-width: 100%;
				z-index: -1;
				left: 23%;
				top: 18px;
				width: 25%;
			}

			&.cloud2 {
				position: absolute;
				max-width: 100%;
				z-index: -1;
				left: 53%;
				top: 200px;
				width: 30%;
			}
		}
	}

}

#metrics {


	header {
		background: var(--green-95);
		margin-bottom: 24px;
		border-radius: 50px;


		h2 {
			margin-bottom: 0px;
			color: var(--green-50);
			padding: 20px 0;
		}
	}
}

#metrics-image {

	article {
		position: relative;
	
		img {


			&.cloud1 {
				position: absolute;
				max-width: 100%;
				z-index: -1;
				left: 25%;
				top: 70px;
				width: 40%;
			}

			&.cloud2 {
				position: absolute;
				max-width: 100%;
				z-index: -1;
				left: 52%;
				top: 0px;
				width: 25%;
			}
		}
	}

}

#resources-knowledge {


	.card__image__wrapper {
		display: none;
	}

	.card__content__wrapper {
		justify-content: start;

		h3.card__headline {
			font-size: 20px;
		}
	}

}

.back-to-top {

	.container {

		.blade__description {
			text-align: right;

			svg {
				width: 25px;
				height: 25px;
				margin-left: 10px;
				fill: var(--indigo-50);
			}
		}
	}

	
}

/* Media Queries */

@media (min-width: 1024px) {
	#marquee .container .grid .image__wrapper {grid-column: 7 / span 6;}
	#marquee .container .grid .content__wrapper {grid-column: 1 / span 6;}
}

@media (max-width: 767px) {
	#marquee .balloon-animation {
		display: none;
	}

	#guide-navigation ul li {
		width: 100%;
		text-align: center;
	}

	#knowledge header h2, #use-cases h2, #channels h2, #handoff h2, #metrics h2 {
		text-align: center;
	}

	#knowledge-image article .cloud-container-left img.cloud1 {
		left: 0px;
		width: 75%;
	}

	#knowledge-image article .cloud-container-right img.cloud2 {
		left: 35%;
		width: 65%;
	}

	#use-cases-image-1 article .cloud-container-left img.cloud1 {
		left: -13%;
		top: -2px;
		width: 75%;
	}

	#use-cases-image-1 article .cloud-container-right img.cloud2 {
		left: 57%;
		bottom: 30px;
		width: 50%;
	}

	#use-cases-image-2 article .cloud-container-left img.cloud1 {
		left: -7%;
		top: 45px;
		width: 65%;
	}

	#use-cases-image-2 article .cloud-container-right img.cloud2 {
		left: 39%;
		top: 81px;
		width: 75%;
	}

	#channels-image article .cloud-container-left img.cloud1 {
		left: -7%;
		top: 93px;
		width: 65%;
	}

	#channels-image article .cloud-container-right img.cloud2 {
		left: 60%;
		top: 25px;
		width: 75%;
	}

	#handoff-image article .cloud-container-left img.cloud1 {
		left: -7%;
		top: 93px;
		width: 65%;
	}

	#handoff-image article .cloud-container-right img.cloud2 {
		left: 60%;
		top: 25px;
		width: 75%;
	}

	#metrics-image article .cloud-container-left img.cloud1 {
		left: -16%;
		top: 22px;
		width: 65%;
	}

	#metrics-image article .cloud-container-right img.cloud2 {
		left: 49%;
		top: 0px;
		width: 55%;
	}

}


/* Animation Helpers */

.cloud-container-left.fade-in-animation {
	animation: 4s ease-out 1 FadeIn, 5s ease-out infinite alternate cloud_ud;
}

.cloud-container-left.fade-in-animation .cloud1 {
	animation: 5s ease-out infinite alternate cloud_lr;
}

.cloud-container-right.fade-in-animation {
	animation: 4s ease-out 1 FadeIn, 5s ease-out infinite alternate-reverse cloud_ud;
}

.cloud-container-right.fade-in-animation .cloud2 {
	animation: 5s ease-out 1 FadeIn, 5s ease-out infinite alternate-reverse cloud_lr;
}

.cloud-container-left, .cloud-container-right {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: -1;
}