#pinSection_1{
	display:flex;
	flex-direction:column;
	height:500vh;
	padding:0 var(--grid-xs) var(--grid-xs);
	overflow:hidden;
}

.hero {
	height:100vh;
	padding:var(--navbar-height) var(--grid-md);
}

.hero-container {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
	width:100%;
	height:100%;
}

.hero-container .grow{
	display:flex;
	align-items:center;
	flex:1 1 auto;
}

.hero-container h1 {
	font-size:var(--mb-font-size-display-sm);
	font-weight: var(--mb-font-weight-display);
	line-height: 1.125em;
	text-align:center;
	color:var(--mb-surface);
}

@media(min-width:576px){
	.hero {
		padding:var(--navbar-height) var(--grid-lg);
	}
}

@media(min-width:992px){
	.hero {
		padding:var(--navbar-height) 8vw;
	}
}

.intro{
	width:100%;
}

.intro .intro-container {
	display: flex;
	flex-direction: column;
	align-items:center;
	width:100%;
	height:400vh;
}

.intro .intro-container .text {
	display: flex;
	flex-direction: column;
	align-items:center;
	justify-content: center;
	row-gap:var(--grid-sm);
	height: 120vh;
}

#extra .text{
	height:160vh
}

.intro .intro-container .text h1 {
	font-size: var(--mb-font-size-display-lg);
	font-weight: var(--mb-font-weight-display);
}

.intro .intro-container .text p{
	text-align:center;
	font-size: var(--mb-font-size-lead);
	font-weight: var(--mb-font-weight-lead);
	line-height:1.5;
	color:var(--mb-surface);
	width:80%;
	max-width:30ch
}

.section_t1{
	position:relative;
	display:flex;
	flex-direction: column;
	row-gap:var(--grid-md);
	overflow:hidden;
}

.section_t1 .t1-container{
	position:relative
}

.section_t1 .screen {
	display:flex;
	align-items: center;
	justify-content: center;
	width:100vw;
	height:75vh;
	overflow:hidden;
}

.section_t1 .screen img{
	width: 130%;
}

.section_t1 .details {
	display: flex;
	flex-direction: column;
	align-items:center;
	row-gap:var(--grid-xxl);
	padding:0 var(--grid-md) 25vh;
}

.header_t1{
	display: flex;
	flex-direction:column;
	padding-top:15vh;
}

.header_t1 h2{
	padding: 0 var(--grid-md);
	font-size: var(--mb-font-size-display-sm);
	font-weight: var(--mb-font-weight-display);
	line-height: 1.2em;
	color:var(--mb-on-surface-variant)
}

.header_t1 .text-hor{
	display: flex;
	flex-wrap: nowrap;
	width:100%;
	margin-top:5vh;
	overflow:hidden;
}

.header_t1 .text-hor h1{
	white-space: nowrap;
	font-size: var(--mb-font-size-display-lg);
	font-weight: var(--mb-font-weight-display);
}

@media(min-width:576px){
	.header_t1 h2{
		padding: 0 var(--grid-lg);
	}

	.section_t1 .details {
		padding:0 var(--grid-lg) 25vh;
	}
}

.seamless {
	margin-top:-0.6rem;
	padding-top:-0.6rem;
	background-image: linear-gradient(to bottom, var(--mb-background), #edebe8)
}

.seamless .ziggy-container{
	top:-20%;
	height:110%;
	margin-top:-20%;
	opacity:0.6;
	-webkit-mask-image:linear-gradient(to bottom, black 80%, transparent);
	mask-image:linear-gradient(to bottom, black 80%, transparent)
}

.faster{
	margin-top:-2px;
	background-image: linear-gradient(to bottom, #edebe8, var(--mb-surface-variant))
}

.faster .ziggy-container {
	top:20%
}

.faster .ziggy-container .ziggy{
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform-origin: center;
}

@media (min-width:992px){
	.section_t1 .t1-container{
		display:grid;
		grid-template-rows: auto;
		column-gap:2vw;
		padding-bottom:8vh
	}

	.header_t1 h2{
		padding: 0 12vw;
	}

	.section_t1 .screen {
		grid-area: screen;
		width:54vw;
		height:auto;
	}

	.section_t1 .details {
		grid-area:details; 
		padding:0;
	}

	.header_t1{
		grid-area:header;
		padding:35vh 0;
	}

	.seamless .t1-container{
		grid-template-columns: 54vw 1fr;
		grid-template-areas:
		"header header"
		"screen details";
	}

	.seamless .ziggy-container{
		justify-content:flex-end;
		padding:0 var(--grid-sm);
	}

	.seamless .ziggy-container .ziggy{
		width:60vw;
		background-size: 40%;
	}
	
	.seamless .details{
		padding:0 12vw 0 0
	}

	.seamless .screen{
		margin-top: -10vh;
	}

	.faster .t1-container{
		grid-template-columns: 1fr 54vw;
		grid-template-areas:
		"header header"
		"details screen";
	}
	
	.faster .ziggy-container .ziggy{
		background-size: 26vw;
	}

	.faster .details{
		padding:0 0 0 12vw
	}

	.faster .screen{
		margin-top:-15vh
	}
}

.section_t2 .t2-container{
	display:flex;
	flex-direction:column;
	row-gap:var(--grid-xl);
	padding:var(--grid-lg) var(--grid-md) 15vh;
}

.team .lava-mask-container{
	position:relative;
	height:75vh;
	padding-top:var(--grid-xs)
}

.team .lava-mask-container .lava-mask{
	display:flex;
	justify-content:center;
	align-items: center;
	height:98%;
	outline-color: var(--mb-surface-variant);
}

.team .lava-mask-container .lava-mask h1{
	font-size: var(--mb-font-size-display-sm);
	font-weight: var(--mb-font-weight-display);
	line-height: 1.2em;
	text-align:center;
	color:var(--mb-surface);
}

.team {
	margin-top:-2px;
}

.team .team-pics{
	position:relative;
	width:100%;
	height:80vh;
	padding-top:5vh
}

.team .team-pics .team-pic{
	--mb-elevation-light-shadow-color: var(--mb-primary-container-rgb) !important;
	position:absolute;
	overflow:hidden;
	border-radius:var(--mb-border-radius-lg);
	-webkit-border-radius:var(--mb-border-radius-lg);
	-moz-border-radius:var(--mb-border-radius-lg);
	-ms-border-radius:var(--mb-border-radius-lg);
	-o-border-radius:var(--mb-border-radius-lg);
	box-shadow: -22px -22px 40px -4px rgba(var(--mb-elevation-light-shadow-color), 0.1), 
	22px 22px 40px -4px rgba(var(--mb-elevation-dark-shadow-color), 0.1);
}

.team .team-pics .team-pic img{
	width:100%;
	transform:scale(1.4);
	-webkit-transform:scale(1.4);
	-moz-transform:scale(1.4);
	-ms-transform:scale(1.4);
	-o-transform:scale(1.4);
	transform-origin:center;
	transition:transform 1.2s ease-out;
	-webkit-transition:transform 1.2s ease-out;
	-moz-transition:transform 1.2s ease-out;
	-ms-transition:transform 1.2s ease-out;
	-o-transition:transform 1.2s ease-out;
}

.team .team-pics .team-pic.is-inview img{
	transform:scale(1);
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transition:transform 1.2s ease-out;
	-webkit-transition:transform 1.2s ease-out;
	-moz-transition:transform 1.2s ease-out;
	-ms-transition:transform 1.2s ease-out;
	-o-transition:transform 1.2s ease-out;
}

.team .team-pics .team-pic1{
	width:40%;
}

.team .team-pics .team-pic2{
	width:80%;
	top:36%;
	right:0;
}

.team .details {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap:var(--grid-xxl);
	padding:5vh 0 8vh
}

.widgets {
	display:flex;
	flex-direction: column;
	align-items:center;
	row-gap:var(--grid-xl);
	padding:var(--grid-lg)
}

.widgets .stat{
	position:relative;
	display:flex;
	align-items: center;
	justify-content:space-between;
	width:100%;
	max-width:34rem;
	min-height:10rem;
	overflow:hidden;
	column-gap:var(--grid-md);
	padding:var(--grid-md);
	border-radius:var(--mb-border-radius-lg);
	-webkit-border-radius:var(--mb-border-radius-lg);
	-moz-border-radius:var(--mb-border-radius-lg);
	-ms-border-radius:var(--mb-border-radius-lg);
	-o-border-radius:var(--mb-border-radius-lg);
}

.widgets .stat1, .widgets .stat3{
	border:1px solid var(--mb-outline)
}

.widgets .stat2{
	background-color:var(--mb-on-secondary-container);
}

.widgets .stat2 .stat-container{
	position:absolute;
	display: block;
	content:'';
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-image:url(../img/fern.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size: 200%;
	opacity:0.8;
	z-index:0;
	transition:all 1.2s ease-out;
	-webkit-transition:all 1.2s ease-out;
	-moz-transition:all 1.2s ease-out;
	-ms-transition:all 1.2s ease-out;
	-o-transition:all 1.2s ease-out;
}

.widgets .stat2 .stat-container.is-inview{
	background-size: 160%;
	transition:all 1.2s ease-out;
	-webkit-transition:all 1.2s ease-out;
	-moz-transition:all 1.2s ease-out;
	-ms-transition:all 1.2s ease-out;
	-o-transition:all 1.2s ease-out;
}

.widgets .stat .stat-icon {
	display: block;
	width:33%;
	height:100%;
	flex-shrink: 0;
}

.widgets .stat .numbers{
	display: flex;
	flex-direction:column;
	justify-content:center;
	height:100%;
}

.widgets .stat .numbers h1{
	letter-spacing: var(--mb-letter-spacing-headings);
	font-size: var(--mb-font-size-headline-lg);
	font-weight: var(--mb-font-weight-display);
	line-height:0.8;
	margin:0 0 0.2em;
}

.widgets .stat1 .numbers h1{
	color:var(--mb-tertiary);
}

.widgets .stat2 .numbers h1{
	color:var(--mb-surface);
}

.widgets .stat3 .numbers h1{
	color:var(--mb-primary);
}

.widgets .stat .numbers p{
	margin:0;
	font-size:var(--mb-font-size-body-md);
}

.widgets .stat1 .numbers p, .widgets .stat3 .numbers p{
	color:var(--mb-on-surface-variant)
}

.widgets .stat2 .numbers p{
	color:var(--mb-surface)
}

.widgets .stat2 .numbers{
	position:absolute;
	width:100%;
}

@media(min-width:768px){
	.section_t2 .t2-container{
		padding:var(--grid-lg) var(--grid-xl) 15vh;
	}

	.team .team-pics{
		height:100vh;
	}

	.widgets {
		row-gap:8vh;
	}

	.widgets .stat1{
		align-self:flex-end
	}

	.widgets .stat3{
		align-self:flex-start
	}
}

@media(min-width:992px){
	.section_t2 .t2-container{
		display:grid;
		grid-template-columns: 1fr 54%;
		row-gap:0;
		column-gap:var(--grid-xl);
		row-gap:10vh;
		grid-template-areas: "details team-pics"
		"widgets widgets";
		padding:var(--grid-xl) 6vw 25vh 12vw;
	}

	.team .team-pics{
		grid-area: team-pics;
		height:75vh;
		padding-top:0;
	}

	.team .details{
		grid-area: details;
		padding-left:0
	}

	.team .widgets{
		grid-area:widgets;
	}
}

@media(min-width:1200px){
	.section_t2 .t2-container{
		padding:var(--grid-xl) 12vw 25vh;
	}
}

.services{
	position:relative;
	display:flex;
	flex-direction: column;
	justify-content:center;
	padding-bottom:15vh
}

.services .serv-container {
	display:flex;
	flex-direction: column;
	align-items: center;
	padding:var(--grid-md);
	row-gap:var(--grid-xxl)
}

.services .serv-header {
	left:0;
	width:100%;
	text-align:center;
}

.services .serv-header h1 {
	font-size: var(--mb-font-size-display-lg);
	font-weight: var(--mb-font-weight-display);
}

.services .serv-body{
	transform:translateZ(1px);
	-webkit-transform:translateZ(1px);
	-moz-transform:translateZ(1px);
	-ms-transform:translateZ(1px);
	-o-transform:translateZ(1px);
	margin-bottom:15vh
}

.services .serv-container .serv-card {
	display:grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: 3.6rem auto;
	grid-template-areas: 
	"icon title"
	". list";
	gap:var(--grid-md);
}

.services .serv-container .serv-card h2{
	margin:0;
	font-size: var(--mb-font-size-title-lg);
	font-weight: var(--mb-font-weight-title);
	line-height:1.2;
	color:var(--mb-on-surface-variant)
}

.services .serv-container .serv-card ul{
	grid-area:list;
	display:flex;
	flex-direction: column;
	row-gap: 0.8em;
	padding:0 0 var(--grid-sm);
}

.services .serv-container .serv-card li{
	position: relative;
	list-style:none;
	padding:0
}

.services .serv-container .serv-card li p{
	margin: 0;
	font-size: var(--mb-font-size-body-md);
	font-weight: var(--mb-font-weight-body-md);
	line-height:1.6;
	color:var(--mb-on-surface-variant);
}

@media(min-width:768px){
	.services .serv-container {
		padding:var(--grid-lg);
	}

	.services .serv-container .serv-card h2{
		line-height:1
	}
}

@media(min-width:992px){
	.services .serv-container {
		padding:var(--grid-md) 12vw 0 6vw;
	}

	.services .serv-header {
		display:flex;
		flex-direction:column;
		text-align:left;
	}

	.services .serv-header .btn-cta {
		align-self: flex-start;
		max-width:30vw;
	}

	.services .serv-body{
		display:flex;
		justify-content: flex-end;
		width:48vw;
		align-self:flex-end;
	}
}