.cover {
	position: relative;
	min-height: 670px;

	&::after {
		content: '';
		position: absolute;
		bottom: -49px;
		right: calc(50% - 350px);
		transform: translateX(-50%);
		width: 350px;
		height: 90px;
		background-image: url(./images/bump.png);
		background-size: contain;
		background-position: bottom;
		z-index: 4;
	}

	&::before {
		content: '\f063';
		color: var(--prime1);
		font-family: "Font Awesome 7 Free";
		position: absolute;
		bottom: 20px;
		right: calc(50% - 10px);
		transform: translateX(-50%);
		width: 10px;
		height: 10px;
		z-index: 5;
		font-weight: 900;
	}

	& video {
		object-fit: cover;
		object-position: center center;
		width: 100%;
		height: 100%;
	}
}

.cover img#mobileImg {
	display: none;
}

#bgvid {
	width: 100% !important;
	height: 100% !important;
	min-height: 100vh;
	/* Forces mobile safari to maintain viewport height */
	object-fit: cover;
	/* Keeps aspect ratio clean */
	z-index: 1;
	/* Keeps it properly layered */

	/* Forces iOS to trigger hardware rendering on play */
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

#toggle-video {
	position: absolute;
	z-index: 5;
	top: 105px;
	right: 15px;
	background: none;
	border: 0;
	background-color: rgb(from #fff r g b / 0.5);
	border-radius: 5px;
}



.gradient {
	content: '';
	position: absolute;
	height: 100%;
	right: 0;
	top: 0;
	width: 65%;
	background: linear-gradient(to left, rgb(from #fff r g b/ 0.65) 5%, rgb(from #fff r g b / 0));
	z-index: 1;
}

.stamp {
	z-index: 2;
	position: absolute;
	top: 150px;
	right: 9%;
	width: 400px;
}

.cover-slick .notices {
	padding: 2rem;
	position: relative;
	top: 470px;
	right: 9%;
	/* background-color: rgb(from var(--prime5) r g b / 0.92); */
	background: var(--blue-gradient);
	width: min(100%, 760px);
	height: 260px;
	color: #fff;
	border-radius: 25px;
	z-index: 3;

	& a {
		display: flex;
		flex-direction: column;
		height: 100%;
		color: inherit;

		&:hover {
			text-decoration: none;
		}
	}

	& .date {
		font-weight: 500;
		font-size: calc(0.24vw + 1rem);
	}

	& h2 {
		font-weight: 600;
		font-size: calc(0.7vw + 1rem);

		&::after {
			content: '';
			position: relative;
			display: block;
			width: 70px;
			height: 2px;
			background-color: var(--prime3);
			right: 0;
			bottom: -1rem;
		}
	}

	& .bit {
		display: inline-block;
		font-weight: 300;
		margin-top: 1.6rem;
		font-size: calc(0.2vw + 1rem);
	}

	& .btn-white {
		margin-top: 1.82rem;
		background-color: #fff;
		border-radius: 100vw;
		display: flex;
		justify-content: center;
		text-align: center;
		padding: 0.25rem 1.5rem;
		max-width: fit-content;
		color: var(--prime5);
		font-size: calc(0.2vw + 1rem);
		font-weight: 600;
		border: 2px solid transparent;
		transition: all 0.2s ease;

		&:hover {
			transform: scale(1.02);
			background-color: oklch(from var(--prime5) calc(l + 0.1) c h);
			color: #fff;
			border: 2px solid #fff;
		}
	}

	& .arrows {
		height: 40px;
		position: relative;
		width: 100px;
		background-color: oklch(from var(--prime5) calc(l + 0.1) c h);
		border-radius: 0 15px 0 15px;
		margin-right: auto;
		display: flex;
		gap: 3px;
		justify-content: center;
		left: -1.3rem;
		top: -1.5rem;
		padding: 0.65rem 0.25rem;
	}

	& .single {
		font-weight: 700;
		font-size: 1.2rem;
		line-height: 1;
	}

	& .batch {
		font-weight: 300;
		letter-spacing: 3px;
		opacity: 0.65;
	}

	& .arrows button {
		background: none;
		border: 0;
		color: #fff;
		cursor: pointer;
		padding: 0 0.5rem;
		line-height: 1;
		font-size: 1rem;

		& em {
			font-size: 10px;
		}

		&::before {
			font-weight: 400;
		}
	}
}

.action-btn.top {
	left: 5%;
	top: 120px;
}

.action-btn.site {
	display: none;
}


@media (min-width: 992px) {
	.cover {
		height: 100vh;
	}
}



.cover-slick {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
}

.cover-slick div {
	height: 100%;
	background-size: cover;
	background-position: center;
}



.cover .toggle-slick {
	position: absolute;

	top: 105px;
	right: 15px;
	background: none;
	border: 0;
}

@media (max-width:991px) {
	.cover .toggle-slick {
		top: 25px;
	}
}


.service-menu {
	background-color: #fff;
	position: absolute;
	left: 5%;
	top: 120px;
	width: min(100%, 390px);
	height: 645px;
	border-radius: 30px;
	box-shadow: 0 7px 10px rgba(0, 0, 0, 0.3);
	background: var(--blue-gradient);
	padding: 10px;
	padding: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	transform-origin: top left;
	transition: transform 0.24s ease, opacity 0.4s ease;
	z-index: 5;


	&.minimized {
		transform: scale(0);
		opacity: 0;
		pointer-events: none;
	}

	& .wrapper {
		height: 100%;
		border-radius: 23px 23px 0 0;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		align-items: center;
		background-color: #fff;
		flex: 0.7;
		position: relative;
		scroll-snap-align: start;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			height: 15%;
			width: 100%;
			background: linear-gradient(to top, #fff, rgb(from #fff r g b / 0));
		}

		&::before {
			content: '\f102';
			color: #fff;
			position: absolute;
			bottom: -42px;
			margin: auto;
			font-weight: 900;
			font-family: "Font Awesome 7 Free";
			z-index: 1;
		}
	}

	& .head {
		padding: 2rem 1rem 1rem;
		width: 100%;
		color: var(--prime6);
		line-height: 1;
		position: relative;

		& .close {
			position: absolute;
			left: 1rem;
			top: 1rem;
			color: inherit;
		}

		& p {
			font-size: calc(0.2vw + 16px);
			font-weight: 300;
			margin-bottom: 0.5rem;
		}

		& strong {
			font-weight: 700;
			font-size: calc(1vw + 16px);
		}
	}

	& .controls {
		position: absolute;
		top: 5rem;
		right: 0;
		display: flex;
		flex-direction: column;
		height: 100px;
		gap: 1rem;
		align-items: center;

		& span {
			display: inline-block;
			width: 9px;
			height: 9px;
			background-color: var(--prime2);
			border-radius: 100vw;

			&:hover {
				background-color: var(--prime3);
			}
		}
	}



	& .gridded {
		position: relative;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
		place-items: center;
		width: 95%;
		height: 290px;
		overflow-y: auto;
		overflow-x: visible;
		padding-bottom: 2.85rem;
		scroll-behavior: smooth;
		scroll-snap-type: y mandatory;
		/* Hide scrollbar for IE, Edge, and Firefox */
		-ms-overflow-style: none !important;
		scrollbar-width: none !important;

		&::-webkit-scrollbar {
			display: none !important;
			width: 0 !important;
			height: 0 !important;
			background: transparent !important;
		}

		& strong {
			font-size: calc(0.12vw + 1rem);
		}

		& img {
			width: 58px;
			margin-bottom: 0.15rem;
			transition: all 0.2s ease;
		}

		& a:hover img {
			transform: scale(1.15);
		}
	}

	.masked {
		cursor: pointer;
		z-index: 5;
		height: 70px;
		width: 100%;
		position: relative;
		background-color: #fff;
		-webkit-mask-image: url(./images/mask.png);
		mask-image: url(./images/mask.png);
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: top;
		mask-repeat: no-repeat;
		mask-position: top;

		mask-mode: luminance;
	}

	& .marq {
		position: relative;
	}

	& .news-marquee.custom {
		overflow: hidden;
		height: 75px;

		& ul {
			padding-inline: 2rem;
			list-style-type: none;
		}

		& li {
			margin-block: 1.25rem;
			text-align: right;
		}

		& a {
			font-size: calc(0.35vw + 1rem);
			color: #fff;
		}
	}

	& .topline {
		z-index: 6;
		position: relative;
		display: flex;
		justify-content: center;
		font-weight: 700;
		font-size: calc(0.2vw + 1rem);
		top: -0.8rem;

		& a {
			columns: inherit;
			color: #fff;
		}
	}

	& .news-toggle {
		position: absolute;
		left: 2rem;

		width: 30px;
		height: 30px;
		border: 2px solid #fff;
		border-radius: 100vw;
		background: transparent;
		color: #fff;
		background: none;
		font-size: 1rem;
		display: grid;
		place-content: center;

		& i {
			font-size: 14px;
		}
	}
}


.service-menu.active-news {

	& .wrapper {
		flex: 1;
	}

	& .gridded {
		height: auto;
		flex: 1;
	}

	& .marq {
		display: none;
	}

}

.services .wrap {
	display: flex;
	flex-wrap: wrap;
}

.services a {
	text-align: center;
	display: block;
	background: #fff;
	margin: 1rem;
	padding: 1rem;
}

.services a .icon img {
	display: block;
	margin: 0 auto;
	margin-bottom: .75rem;
	height: 100px;
}



@media (max-width:1650px) {
	.service-menu {
		left: 2%;
		top: 100px;
		height: 570px;
		width: min(100%, 340px);

		& .gridded {
			height: 250px;

			& img {
				width: 50px
			}
		}


	}
}

/**/




/* Articles */

.articles {
	margin-top: 5rem;
	padding: 2rem;

	& a:hover {
		text-decoration: none;
	}

	& a:hover h3 {
		color: var(--prime1);
	}

	& a:hover .full-btn {
		text-decoration: none;
		transform: scale(1.1);
	}
}

.articles h2 {
	text-align: center;
	font-weight: 400;
	margin-bottom: 1.5rem;
	font-size: calc(2.2vw + 1rem);
	color: var(--prime2);
}



.article h3 {
	font-size: calc(1.1vw + 1rem);
	color: var(--prime2);
	line-height: 1;
	text-decoration: none;
}

.articles .griddy {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	margin-block: 5rem;

	& img {
		border-radius: 22px 22px 0 0;
	}
}

.articles .article {
	border-radius: 30px;
	padding: 10px;
	padding-bottom: 1rem;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: #000;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
	position: relative;
	height: 100%;
}

.article img {
	display: block;
	width: 100%;
}

.article .info {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 1;
}

.article h3 {
	min-height: 115px;
	font-weight: 700;
}




.full-btn {
	font-size: calc(0.2vw + 16px);
	font-weight: 600;
	margin-top: auto;
	width: fit-content;
	color: #fff;
	border-radius: 100vw;
	padding: 0.25rem 1.2rem;
	background-color: var(--prime2);
	transition: all 0.2s ease;

	& span {
		display: inline-block;
	}


}

.outline-btn {
	display: inline-block;
	font-size: calc(0.2vw + 16px);
	margin: 2rem auto;
	width: fit-content;
	color: #fff;
	font-weight: 700;
	border-radius: 100vw;
	padding: 0.35rem 2rem;
	border: 2px solid var(--prime2);
	color: var(--prime2);

	&:hover {
		transform: scale(1.1);
		text-decoration: none;
	}
}

@media (max-width:1200px) {
	.articles .griddy {
		margin-block: 1rem;
		gap: 0.75rem;
	}
}

@media (max-width:991px) {
	.articles .griddy {
		display: flex;
		flex-direction: column;
	}

	.articles .article {
		& p {
			display: none;
		}

		& h3 {
			min-height: unset;
		}

		& .info {
			padding: 0.75rem 0.25rem;
		}
	}
}

/* News * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.news {
	padding: 1rem;
	background: #fff;
}

.news .content {
	position: relative;
}

.news .buttons {
	position: absolute;
	top: 1.9rem;
	left: 1.9rem;
}

.news a {
	color: #000;
	display: block;
}

@media (min-width: 768px) {
	.news a {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.news h2 {
	background: #111;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	position: absolute;
	top: 0;
	right: 0;
	padding: .219rem .75rem;
	margin: 0;
	border-radius: 2rem;
	z-index: 5;
}

.news h2 a {
	color: inherit;
}



@media (min-width: 992px) {
	.bn-news {
		padding-right: 100px;
	}
}

.bn-news ul li a {
	font-size: 1.2rem;
	line-height: 1.2rem;
	padding: .36rem 0;
	color: inherit;
}

.bn-news ul li a:hover {
	color: #000;
}

.bn-effect-scroll .bn-news ul li {
	padding: 0 1rem;
}

.news .date {
	font-weight: bold;
}

.news .date:after {
	content: ' | ';
	margin: 0 10px;
}



.bn-controls {
	left: 0;
	right: auto;
}

.bn-controls button {
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #111;
	color: #fff;
	padding: 0;
	margin-right: 5px;
}

.bn-arrow {
	top: -1px;
}

.bn-pause::before,
.bn-pause::after {
	background-color: #fff;
}

.bn-play::after {
	border-left-color: #fff;
}

.bn-controls button:hover {
	background-color: #111;
	color: #fff;
	box-shadow: 0 0 5px rgb(255 255 0 / 90%);
}



.promote {
	position: relative;
	padding-block: 15rem;

	& .grid {
		display: grid;
		grid-template-columns: 1.1fr 0.9fr;
		height: 540px;
		gap: 2%;

		& .img {
			display: block;
			height: 100%;
			background-size: cover;
			background-position: center;
			border-radius: 30px;
			width: min(100%, 870px);
		}

		& h2 a {
			color: var(--prime2);
			font-size: calc(1.95vw + 16px);
			font-weight: 700;
		}

		& .full-btn {
			display: inline-block;

			& a {
				color: #fff;
			}

			&:hover {
				text-decoration: none;
				transform: scale(1.1);
			}
		}

		& .info {
			display: flex;
			align-items: center;
		}

		& .text {
			font-size: calc(0.5vw + 1rem);
			color: oklch(from var(--prime3) calc(l - 0.1) c h);
			margin: 1.2rem auto 2.5rem;
		}
	}
}

.slick-dots {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	list-style-type: none;
	position: relative;
	padding-inline: 0.25rem;
	margin-top: -1rem;
	z-index: 1;
	gap: 1rem;
}

.slick-dots li button {
	position: relative;
	line-height: 0;
	display: block;
	width: 15px;
	height: 15px;
	padding: 5px;
	margin: 0 0.15rem;
	cursor: pointer;
	color: transparent;
	border: 1px solid var(--prime3);
	outline: none;
	background: rgb(from var(--prime2) r g b / 0.05);
	font-size: 0;
	border-radius: 50%;
}

.slick-dots li.slick-active button {
	background-color: var(--prime3);
}

.deco {
	position: absolute;
	width: 100%;
	z-index: -1;
	background-size: contain;
	background-repeat: no-repeat;

	&.right {
		top: -100px;
		right: 0;
		background-position: right;
		background-image: url(images/deco1.png);
		height: 540px;
	}

	&.left {
		left: 0;
		bottom: -140px;
		background-position: left;
		background-image: url('images/deco2.png?v=1');
		height: 525px;
	}
}

.statistics {
	position: relative;
	margin-bottom: 8rem;
	margin-top: -3rem;

	& .outline-btn {
		margin-right: 27%;
		position: relative;
		display: flex;
		align-self: center;
		width: 255px;
		border: 0.15rem solid oklch(from var(--prime2) calc(l + 0.15) c h);
		padding: 0.5rem 6.25rem 0.5rem 0.5rem;

		& img {
			position: absolute;
			width: 59px;
			height: auto;
			top: -26px;
			right: 2rem;
			background: #fff;
			background-color: #fff;
			padding: 5px;
		}

		& span {
			display: inline-block;
		}

		&:hover {
			transform: scale(1.1);
		}
	}

	& .stats {
		top: -20rem;
		position: absolute;
		background: var(--blue-gradient);
		display: flex;
		flex-direction: column;
		padding: 70px 1.52rem;
		border-radius: 40px;
		color: #fff;
		align-items: center;
		width: min(100%, 275px);

		& span {
			text-align: center;
			display: block;
			line-height: 1.1;
			font-size: calc(0.75vw + 1rem);
			font-weight: 300;
		}

		& span:first-child {
			font-size: calc(1.95vw + 1rem);
			font-weight: 700;
		}

		& .wrap {
			width: 100%;
		}

		& .hr {
			height: 1px;
			width: 100%;
			margin-block: 2rem;
			background-color: #fff;
		}
	}
}



@media (min-width:1600px) {
	.container {
		width: min(100%, 1710px);
		max-width: unset;
	}
}



@media (max-width: 991px) {
	.news h2 {
		display: none;
	}

	.gradient {
		width: 100%;
		background: linear-gradient(to left, rgb(from #fff r g b / 0.65) 5%, color(srgb 1 1 1 / 0.56));
	}


	.stamp {
		top: 55px;
		right: 9%;
		width: 200px;
	}

	.service-menu {
		top: 65px;
		left: 0;
		display: none;

		& strong {
			min-height: 40px;
		}

		& .gridded {
			& img {
				width: 35px;
			}
		}
	}

	.cover-slick .notices {
		padding: 1rem 1.5rem;
		width: min(87%, 320px);
		top: 200px;
		height: 180px;

		& .btn-white {
			margin-top: auto;
			padding: 0.2rem 1rem;
			font-size: 15px;
		}

		& .bit {
			display: none;
		}

		& .arrows {
			height: 37px;
			width: 90px;
			gap: 1px;
			left: -0.9rem;
			top: -1.9rem;
		}
	}

	.cover {
		min-height: 475px;
		/* padding: 15px;
		padding-top: 125px; */
		/* header height + padding */
	}

	.cover video {
		height: 480px;
	}

	.cover video#bgvid {
		display: none;
	}

	#toggle-video {
		display: none;
	}

	.cover img#mobileImg {
		display: block;
		inset: 0;
		position: absolute;
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: center;
	}

	.promote {
		padding-top: 4rem;
		padding-bottom: 10rem;

		& .grid {
			gap: 0;
			height: unset;
			grid-template-columns: 1fr;

			& .info {
				margin-top: 1.1rem;
			}

			& .text {
				color: var(--prime2);
			}

			& h2 a {
				font-size: calc(2.4vw + 1rem);
			}

			& .img {
				aspect-ratio: 3 / 2;
				width: 100%;
				height: auto;
				object-fit: cover;
			}
		}

		& .slick-promote {
			height: auto;
			min-height: fit-content;
		}
	}

	.deco {
		&.left {
			bottom: 60px;
			height: 230px;
		}

		&.right {
			top: -130px;
			height: 270px;
		}
	}

	.statistics {
		margin-bottom: 4rem;
		margin-top: -7rem;

		& .row {
			flex-direction: column;
		}

		& .stats {
			margin-inline: auto;
			position: relative;
			top: -10px;
			padding: 40px 1.52rem;
			width: min(100%, 180px);
			border-radius: 25px;
		}

		& .outline-btn {
			margin-inline: auto;
		}
	}


}