:root {
  --main-blue: #2E434A;
	--light-blue: #CEDADE;
	--beige: #FAF9F5;
	--green: #96DAA7;
  --white: #ffffff;
	--dark: #1C282C;
}

body {
	font-family: 'FunnelSansRegular';
}



/* SCROLLABLE BLOCK */

.tangen-scrollable {
  /* position: relative; */
  height: 477px;
}

.tangen-scrollable-outer {
	position: absolute;
	background-color: var(--main-blue);
  width: 100%;
  height: 477px;
	overflow-y: scroll;
  /* Hides scrollbar for WebKit browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  overscroll-behavior: contain; /* Prevent page scroll when reaching edges */
  scroll-behavior: smooth;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tangen-scrollable-widget {
	padding-block: 0;
	padding-inline: 10px 14px;
}

.tangen-scrollable-outer::-webkit-scrollbar {
  display: none;
}

.tangen-scrollable-outer::after {
  content: '';
  position: sticky;
  display: block;
  bottom: 0;
  left: 0;
  height: 80px;
  width: 100%;
  background: linear-gradient(180deg, rgba(46, 67, 74, 0.1) 0%, #2E434A 100%);
  pointer-events: none;
}

.tangen-scrollable-outer::before {
  content: '';
  position: sticky;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
  background: linear-gradient(
    180deg, 
    rgba(46, 67, 74, 0.8) 0%,    /* opaque at top */
    rgba(46, 67, 74, 0.1) 100%   /* fades to almost transparent at bottom */
  );
  pointer-events: none;
  z-index: 10;
  display: block;
}

.tangen-scrollable-widget h3 {
	color: var(--beige);
	font-weight: 400;
	font-size: 32px;
	padding-bottom: 40px;
	display: flex;
}

.tangen-scrollable-widget p {
	color: var(--white);
}

.tangen-scrollable-item {
	padding-bottom: 40px;
	padding-left: 40px;
	position: relative;
  color: white;
}

.tangen-scrollable-track {
  position: relative;
}

.tangen-scrollable-track:last-of-type .tangen-scrollable-item {
  padding-bottom: 0;
}

.tangen-scrollable-track::before {
  content: '';
  position: absolute;
	top: 9px;
	bottom: -9px;
  left: 16px;
  width: 2px;
  background: linear-gradient(to bottom, #6CF199 0%, #6CF199 100%);
  z-index: 1;
}

.timeline-marker {
	position: absolute;
	left: 6px;
	top: 8px;
	width: 23px;
	height: 23px;
	border: 2px solid var(--green);
	background-color: #2E434A;
	border-radius: 50%;
	z-index: 2;
}
/* END OF SCROLLABLE BLOCK */





@media (min-width: 1023px) {
	.tangen-scrollable-widget {
		padding-inline: 90px;
	}
	
	.tangen-scrollable-item {
		padding-bottom: 100px;
		padding-left: 54px;
	}

	.tangen-scrollable-outer {
		padding-bottom: 0;
	}
}



@font-face {
  font-family: 'FunnelSansRegular';
  src: url('../fonts/FunnelSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FunnelSansMedium';
  src: url('../fonts/FunnelSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FunnelSansSemiBold';
  src: url('../fonts/FunnelSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FunnelSansBold';
  src: url('../fonts/FunnelSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FunnelSansExtraBold';
  src: url('../fonts/FunnelSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

.wp-block-list li { display: list-item; }