.hero{
	display:flex;
	flex-direction:column;
	height:100vh;
	padding:var(--navbar-height) var(--grid-sm);
	z-index: 6;
}

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

.hero-container 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);
	max-width:20ch;
}

.hero .lava-mask-container {
	height: 100vh;
	padding-bottom:var(--grid-xs)
}

.hero .lava-mask{
	height:100%;
	border-radius: var(--mb-border-radius-xxl);
	-webkit-border-radius: var(--mb-border-radius-xxl);
	-moz-border-radius: var(--mb-border-radius-xxl);
	-ms-border-radius: var(--mb-border-radius-xxl);
	-o-border-radius: var(--mb-border-radius-xxl);
	outline:100vh solid var(--mb-background);
}

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

#pinSection2{
	overflow:hidden;
}

.heading-mobile {
	top:140vh;
}

.section-bg {
	position:absolute;
	display:flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height:100%;
	top:-100%;
	left:0;
	opacity:0.4;
}

.section_1, .section_2, .section_3{
	position:relative;
	padding:15vh 0;
	overflow:hidden;
}

.section_1, .section_2{
	border-bottom-left-radius:var(--mb-border-radius-xxl);
	border-bottom-right-radius:var(--mb-border-radius-xxl);
}

.section_2, .section_3 {
	margin-top: calc(0px - var(--mb-border-radius-xxl) - 0.2rem)
}

.s-container{
	display: flex;
	flex-direction: column;
	align-items:center;
	padding:0 var(--grid-sm);
	row-gap:10vh;
	transform:translateZ(100px);
	-webkit-transform:translateZ(100px);
	-moz-transform:translateZ(100px);
	-ms-transform:translateZ(100px);
	-o-transform:translateZ(100px);
}

.s-container .s_header {
	display: flex;
	flex-direction: column;
	align-items:center;
	width:100%;
}

.s-container .s_header h2{
	font-size: var(--mb-font-size-headline-lg);
	font-weight: var(--mb-font-weight-headline);
	color: var(--mb-on-surface-variant);
	line-height: 1.1em;
	text-align:center;
}

.s-container .details{
	display: flex;
	flex-direction: column;
	align-items: center;
	width:100%;
}

.service-box-bg-lg{
	display:none;
}

.service-box {
	position:relative;
	display:flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--grid-lg);
	width:100%;
	max-width: 44rem;
	padding:var(--grid-xl) var(--grid-sm);
	border-radius:var(--mb-border-radius-xl);
	-webkit-border-radius:var(--mb-border-radius-xl);
	-moz-border-radius:var(--mb-border-radius-xl);
	-ms-border-radius:var(--mb-border-radius-xl);
	-o-border-radius:var(--mb-border-radius-xl);
	box-shadow:var(--mb-elevation-3-shadow)
}

.service-box.sb1,
.service-box.sb2{
	margin-bottom:10vh
}

.service-box .sb_head{
	display:flex;
	flex-direction:column;
	align-items:center;
	row-gap:var(--grid-lg);
	width:100%;
}

.service-box .sb_head p{
	font-size: var(--mb-font-size-body-lg);
	font-weight: var(--mb-font-weight-lead);
	width:75%;
	color:var(--mb-surface);
	text-align:center
}

.service-box .sb_head h3{
	font-size: var(--mb-font-size-title-md);
	font-weight: var(--mb-font-weight-title);
	line-height: 1.2em;
	text-align: center;
	color:var(--mb-surface);
	width:100%;
	max-width:26ch;
}

.service-box .list-primary{
	max-width:30rem;
}

.service-box .list-primary li{
	box-shadow:     
	12px 12px 24px -3px rgba(var(--mb-elevation-dark-shadow-color), 0.12),
	-12px -12px 24px -3px rgba(var(--mb-elevation-light-shadow-color), 0.25);
}

.service-box.sb1{
	background-color:var(--mb-primary);
}

.service-box.sb1 .list-primary li{
	--mb-elevation-light-shadow-color: var(--mb-primary-container-rgb);
}

.service-box.sb2 {
	background-color:var(--mb-tertiary);
}

.service-box.sb2 .list-primary li{
	--mb-elevation-light-shadow-color: var(--mb-tertiary-container-rgb);
}

.service-box.sb3{
	background-color:var(--mb-secondary);
}

.service-box.sb2 .list-primary li{
	--mb-elevation-light-shadow-color: var(--mb-secondary-container-rgb);
}

@media(min-width:992px){
	.section_1, .section_2, .section_3{
		min-height:100vh;
	}

	.section_2, .section_3{
		padding-top:25vh
	}

	.s-container{
		padding:0;
		row-gap:15vh;
	}

	.s-container .s_header h2{
		color: transparent;
		background-image: linear-gradient(to right, var(--mb-primary), var(--mb-secondary) 50%, var(--mb-on-surface-variant) 50.1%);
		-webkit-background-clip: text;
		background-clip: text;
		background-size: 200%;
	}

	.service-box-bg-lg{
		position:absolute;
		display:block;
		content:'';
		width:52vw;
		background-color: #5e53d1; /*Need to hard code colors for gsap animation to work*/
		box-shadow:var(--mb-elevation-4-shadow)
	}

	.service-box {
		flex-direction: row;
		align-items: flex-start;
		row-gap: 0;
		max-width: 100%;
		padding:0;
		border-radius:none;
		-webkit-border-radius:none;
		-moz-border-radius:none;
		-ms-border-radius:none;
		-o-border-radius:none;
		box-shadow:none;
	}

	.service-box .list-primary{
		width:48vw;
		max-width:100%;
		padding: 0 6vw;
		margin-top:30vh;
	}

	.service-box .list-primary li{
		max-width:40em;
	}

	.service-box.sb1,
	.service-box.sb2{
		margin-bottom:0
	}

	.service-box.sb1, .service-box.sb2, .service-box.sb3{
		background-color:transparent
	}

	.service-box .sb_head{
		align-items:flex-start;
		justify-content:center;
		width:52vw;
		height:40vh;
		padding:var(--grid-xl) 6vw;
		overflow:hidden; 
	}

	.service-box.sb1 .list-primary li,
	.service-box.sb2 .list-primary li,
	.service-box.sb2 .list-primary li{
		box-shadow:var(--mb-elevation-3-shadow);
	}

	.service-box .sb_head p, 
	.service-box .sb_head h3{
		text-align: left;
	}
}

/*----section 1 & 3----*/

.section_1 .s-container .details .list-primary, 
.section_3 .s-container .details .list-primary{
	max-width:none
}

.section_1 .s-container .details .list-primary li,
.section_3 .s-container .details .list-primary li{
	max-width:26rem;
}

/*----section 2 & 3----*/
.record{
	position:relative;
	display: flex;
	flex-direction:column;
	width:66%;
	max-width: 30rem;
	aspect-ratio:4 / 5;
	margin-top:15vh;
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 619 960'%3e%3cpath fill='rgba%28255, 255, 255, 1%29' d='m575.15,762.03H43.8c-24.15,0-43.8-19.65-43.8-43.8V43.8C0,19.65,19.65,0,43.8,0h531.36c24.15,0,43.8,19.65,43.8,43.8v674.44c0,24.15-19.65,43.8-43.8,43.8ZM43.8,20.57c-12.81,0-23.22,10.42-23.22,23.22v674.44c0,12.81,10.42,23.22,23.22,23.22h531.36c12.81,0,23.22-10.42,23.22-23.22V43.8c0-12.8-10.42-23.22-23.22-23.22H43.8Zm103.02,118.13h-25.75v-25.75c0-4.42-3.59-8.01-8.01-8.01s-8.01,3.59-8.01,8.01v25.75h-25.75c-4.42,0-8.01,3.59-8.01,8.01s3.59,8.01,8.01,8.01h25.75v25.75c0,4.42,3.59,8.01,8.01,8.01s8.01-3.59,8.01-8.01v-25.75h25.75c4.42,0,8.01-3.59,8.01-8.01s-3.59-8.01-8.01-8.01Zm306.17,155.75v-11.41c0-5.37-4.35-9.72-9.72-9.72H81c-5.37,0-9.72,4.35-9.72,9.72v11.41c0,5.37,4.35,9.72,9.72,9.72h362.26c5.37,0,9.72-4.35,9.72-9.72Zm86.6,184.91v-1.53c0-5.19-4.21-9.39-9.39-9.39H80.67c-5.19,0-9.39,4.21-9.39,9.39v1.53c0,5.19,4.21,9.39,9.39,9.39h449.52c5.19,0,9.39-4.21,9.39-9.39Zm0,79.43v-1.53c0-5.19-4.21-9.39-9.39-9.39H80.67c-5.19,0-9.39,4.21-9.39,9.39v1.53c0,5.19,4.21,9.39,9.39,9.39h449.52c5.19,0,9.39-4.21,9.39-9.39Zm0,79.43v-1.53c0-5.19-4.21-9.39-9.39-9.39H80.67c-5.19,0-9.39,4.21-9.39,9.39v1.53c0,5.19,4.21,9.39,9.39,9.39h449.52c5.19,0,9.39-4.21,9.39-9.39Z'/%3e%3c/svg%3e");
	background-repeat:no-repeat;
	background-size:cover;
}

/*----section 1----*/
.section_1{
	z-index: 5
}

.section-bg .database{
	display:flex;
	flex-direction: column-reverse;
	align-items: center;
	justify-content:center;
	width: 100%;
	height: 100%;
}

.section-bg .database{
	row-gap:1rem
}

.section-bg .database span{
	display: block;
	content:'';
	width:70%;
	max-width:22rem;
	aspect-ratio: 3 / 1;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 160'%3e%3cpath fill='white' d='m428.77,0H51.23C23.05,0,0,23.05,0,51.23v55.59c0,28.17,23.05,51.23,51.23,51.23h377.55c28.17,0,51.23-23.05,51.23-51.23v-55.59c0-28.17-23.05-51.23-51.23-51.23ZM73.38,100.07c-13.05,0-23.62-10.51-23.62-23.48s10.58-23.48,23.62-23.48,23.62,10.51,23.62,23.48-10.58,23.48-23.62,23.48Zm356.62-23.48c0,12.91-10.57,23.48-23.48,23.48h-236.03c-12.92,0-23.48-10.57-23.48-23.48h0c0-12.91,10.57-23.48,23.48-23.48h236.03c12.92,0,23.48,10.57,23.48,23.48h0Z'/%3e%3c/svg%3e");
	background-repeat:no-repeat;
	background-size:cover;
}

.section_1 .s-container .details .list-primary li:first-child{
	align-self:flex-end
}

.section_1 .s-container .details .list-primary li:nth-child(2){
	align-self:center
}

@media(min-width:992px){
	.section_1 .section-bg{
		top:-115%;
	}

	.section_1 .details{
		padding: 0 12vw;
	}

	.section_1 .service-box{
		height:80vh;
	}
}

/*----section 2----*/
.section_2{
	z-index: 4
}

@media(min-width:992px){
	.section_2{
		padding-bottom:10vh;
	}

	.section_2 .section-bg {
		top:-86%;
	}
	
	.section_2 .record{
		position:absolute;
	}

	.section_2 .record1{
		top: 1%;
		right:15%;
	}

	.section_2 .record2{
		top: 7%;
		left:10%;
		width:25%;
	}

	.section_2 .service-box-bg-lg{
		top:40vh;
		right:0;
		height:40vh;
		border-top-left-radius: var(--mb-border-radius-xxl);
	}

	.section_2 .service-box {
		flex-direction: row-reverse;
	}

	.section_2 .service-box.sb1{
		margin-top:15vh;
	}

	.section_2 .service-box.sb1,	
	.section_2 .service-box.sb2{
		height:100vh;
	}
}

/*----section 3----*/
.section_3{
	z-index: 3
}

.section_3 .s-container .s_header{
	z-index:0
}

.section_3 .s-container .details{
	z-index:1
}

.section_3 .s-container .details .list-primary li:nth-child(2){
	align-self:center
}

.section_3 .s-container .details .list-primary li:last-child{
	align-self:flex-end
}

.section_3 .details2{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width:100%;
}

.section_3 .section-bg .record{
	margin-top: -150%;
	height:200%;
	aspect-ratio: initial;
	background-repeat: repeat-y;
	background-size:80%;
	background-position: top center;
}


@media(min-width:992px){
	.section_3 .section-bg .record{
		align-self: flex-start;
		width:25%;
		margin-left:10vw;
		background-position: top left;
		background-size: 100%;
	}

	.section_3 .service-box-bg-lg{
		top:20vh;
		left:0;
		height:50vh;
		border-top-right-radius: var(--mb-border-radius-xxl);
		border-bottom-left-radius: var(--mb-border-radius-xxl);
	}

	.section_3 .service-box{
		margin-top:25vh;
	}

	.section_3 .service-box .sb_head{
		border-top-right-radius: var(--mb-border-radius-xxl);
	}

	.section_3 .details{
		padding: 0 12vw;
	}
}

#footer{
	z-index:100
}