.caveat {
		font-family: 'Caveat', 'Noto Sans HK', sans-serif;
	}

	.row.bg-fish {
		position: relative;
		overflow: hidden;
		margin-bottom: 3em;
	}

	.row.bg-fish:after {
		content: '';
		background: url('../img/common/fishline@3x.png') no-repeat;
		background-size: contain;
		background-position: bottom center;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.row.bg-music {
		position: relative;
		overflow: hidden;
		margin-bottom: 3em;
	}

	.row.bg-music:before {
		content: '';
		background: url('../img/common/musicline@3x.png') no-repeat;
		background-size: contain;
		background-position: bottom center;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	@media (max-width: 640px) {

		.row.bg-fish {
			padding-bottom: 3em;
		}

		.row.bg-music {
			padding-bottom: 3em;
		}
	}

	a.polaroid img {
		transition: .5s all;
	}

	a.polaroid:hover img {
		transform: scale(1.05) rotate(5deg);
	}

	a.video img {
		transition: .5s all;
	}

	a.video:hover img {
		transform: scale(1.1);
	}

	a.music {
		padding-left: 3em;
		color: var(--gray-dark);
		font-weight: bold;
		position: relative;
	}

	a.music:hover {
		color: var(--primary);
	}

	a.music::before {
		content: '';
		background: url(../img/common/musicnote3@3x.png) no-repeat;
		background-size: contain;
		position: absolute;
		width: 20px;
		height: 20px;
		left: 0;
	}

	a:hover.music::before {
		content: '';
		background: url(../img/common/musicnote2@3x.png) no-repeat;
		background-size: contain;
		position: absolute;
		width: 20px;
		height: 20px;
		left: 0;
	}

	.modal-backdrop.show {
		background: #000;
		opacity: 0.8; /* Set your desired opacity value */
	}

	.modal.show .modal-dialog {
		width: 100%;
		max-width: 1430px;
	}	
	
	.modal.show .modal-dialog .modal-content {
		max-width: 1430px;
		min-height: calc(1430px * 9 / 16);
		background: transparent;
		box-shadow: none;
	}

	.modal.show .modal-dialog .modal-content .modal-header {
		display: flex;
	    justify-content: end;
	}

	.modal.show .modal-dialog .modal-content .modal-body {
		padding: 1em;
		border-radius: none;
	}

	.modal-header .btn-close {
		background: url('../img/common/close@3x.png') no-repeat center center;
		background-size: 3em 3em;
		width: 3em;
		height: 3em;
		margin: 1em;
	}

	.journey-services .swiper-button-container {
		position: relative;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-bottom: 1.5em;
	}

	.journey-services .swiper-button-next, .journey-services .swiper-button-prev {
		top: 50%;
	}
	
	.journey-services .swiper-button-prev svg, .journey-services .swiper-button-next svg {
		display: none;
	}

	.journey-services .swiper-button-prev:before {
		content: '';
		background: url('../img/common/arrow_left@3x.png') no-repeat;
		background-size: contain;
		width: 30px;
		height: 30px;
		display: inline-block;
	}

	.journey-services .swiper-button-prev:hover:before {
		content: '';
		background: url('../img/common/arrow_left_hover@3x.png') no-repeat;
		background-size: contain;
		width: 30px;
		height: 30px;
		display: inline-block;
	}

	.journey-services .swiper-button-next:before {
		content: '';
		background: url('../img/common/arrow_right@3x.png') no-repeat;
		background-size: contain;
		width: 30px;
		height: 30px;
		display: inline-block;
	}

	.journey-services .swiper-button-next:hover:before {
		content: '';
		background: url('../img/common/arrow_right_hover@3x.png') no-repeat;
		background-size: contain;
		width: 30px;
		height: 30px;
		display: inline-block;
	}

	.progress-wrap::before {
		position: absolute;
		font-family: 'caveat', 'Noto Sans HK', sans-serif;
		content: '';
		text-align: center;
		font-size: 20px;
		opacity: 0;
		color: var(--primary);
		left: 0;
		top: 0;
		height: 96px;
		width: 96px;
		cursor: pointer;
		display: block;
		z-index: 2;
		-webkit-transition: all 200ms linear;
		transition: all 200ms linear;
		background: url('../img/common/backtotop_hover@3x.png') no-repeat bottom center;
		background-size: contain;
	}	

	.progress-wrap::after {
		position: absolute;
		font-family: 'caveat', 'Noto Sans HK', sans-serif;
		content: '';
		text-align: center;
		font-size: 20px;
		color: var(--gray-dark);
		left: 0;
		top: 0;
		height: 96px;
		width: 96px;
		cursor: pointer;
		display: block;
		z-index: 1;
		-webkit-transition: all 200ms linear;
		transition: all 200ms linear;
		background: url('../img/common/backtotop@3x.png') no-repeat bottom center;
		background-size: contain;	
	}
	@media (max-width: 1199px) {

		.progress-wrap::before {
			position: absolute;
			font-family: 'caveat', 'Noto Sans HK', sans-serif;
			content: '';
			text-align: center;
			font-size: 20px;
			opacity: 0;
			color: var(--primary);
			left: 0;
			top: 0;
			height: 60px;
			width: 60px;
			cursor: pointer;
			display: block;
			z-index: 2;
			-webkit-transition: all 200ms linear;
			transition: all 200ms linear;
			background: url('../img/common/backtotop_hover@3x.png') no-repeat bottom center;
			background-size: contain;
		}	

		.progress-wrap::after {
			position: absolute;
			font-family: 'caveat', 'Noto Sans HK', sans-serif;
			content: '';
			text-align: center;
			font-size: 20px;
			color: var(--gray-dark);
			left: 0;
			top: 0;
			height: 60px;
			width: 60px;
			cursor: pointer;
			display: block;
			z-index: 1;
			-webkit-transition: all 200ms linear;
			transition: all 200ms linear;
			background: url('../img/common/backtotop_hover@3x.png') no-repeat bottom center;
			background-size: contain;	
		}
		
	}


	@media (max-width: 640px) {

		.progress-wrap::before {
			position: absolute;
			font-family: 'caveat', 'Noto Sans HK', sans-serif;
			content: '';
			text-align: center;
			font-size: 20px;
			opacity: 0;
			color: var(--primary);
			left: 0;
			top: 0;
			height: 60px;
			width: 60px;
			cursor: pointer;
			display: block;
			z-index: 2;
			-webkit-transition: all 200ms linear;
			transition: all 200ms linear;
			background: url('../img/common/backtotop_hover@3x.png') no-repeat bottom center;
			background-size: contain;
		}	

		.progress-wrap::after {
			position: absolute;
			font-family: 'caveat', 'Noto Sans HK', sans-serif;
			content: '';
			text-align: center;
			font-size: 20px;
			color: var(--gray-dark);
			left: 0;
			top: 0;
			height: 60px;
			width: 60px;
			cursor: pointer;
			display: block;
			z-index: 1;
			-webkit-transition: all 200ms linear;
			transition: all 200ms linear;
			background: url('../img/common/backtotop_hover@3x.png') no-repeat bottom center;
			background-size: contain;	
		}
		
	}


	.footer-top {
		position: relative;
		width: 100%;
		height: 50px;
		display: block;
	}

	.footer-top:before {
		content: '';
		background: url('../img/common/footerbar@3x.png') no-repeat bottom center;
		background-size: 100%;
		width: 100%;
		height: 100%;
		position: absolute;
		display: block;
	}

	@media (max-width: 1199px) {
		.footer-top:before {
			background-size: 150%;
		}
	}

	@media (max-width: 640px) {
		.footer-top:before {
			background-size: 200%;
		}
	}

	.footer {
		background-color: #2f4f59 !important;
	}

	.footer .color-white a {
		color: #fff !important;
		text-decoration: none;
	}

	.footer .color-white a:hover {
		color:  var(--primary) !important;
	}
	
	.footer ul {
		list-style: none;
		padding: 0;
		display: block;
	}

	.footer ul li {
		display: inline-block;
		padding: 1em 1.5em;
	}

	.footer ul li a img {
		max-height: 50px;
		width: auto;
		transition: .5s all;
	}

	.footer ul li a:hover img {
		transform: scale(1.2);
	}

	@media (max-width: 1199px) {
		
		.footer ul {
			display: flex;
			justify-content: center;
		}

		.footer ul li {
			padding: 0.5em 0.5em;
		}

		.footer ul li a img {
			max-height: 40px;
			width: auto;
		}
	}

	.corporate-hero-back-img-8 {
		background: none;
	}
	.section.over-hide.full-height.full-height-xl .video-wrapper {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;
		z-index: -1;
		position: absolute;
		padding-bottom: unset;
		padding-top: unset;
		height: unset;
		border-radius: 0;
	}
	.section.over-hide.full-height.full-height-xl .video-wrapper:before {
		content: '';
		width: 100%;
		height: 100%;
		z-index: 100;
		position: absolute;
		background: rgba(0, 0, 0, 0.50);
	}		
	.section.over-hide.full-height.full-height-xl .video-wrapper::after {
		content: '';
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		position: absolute;
		background-image: url(../img/common/bannergraphic@3x.png);
		background-position: bottom center;
		background-repeat: no-repeat;
		background-size: contain;
	}	

	@media (max-width: 1199px) {
		.section.over-hide.full-height.full-height-xl .video-wrapper::after {
			background-size: 125%;	
		}
	}

	@media (max-width: 640px) {
		.section.over-hide.full-height.full-height-xl .video-wrapper::after {
			background-size: 150%;	
		}
	}

	@media (max-width: 480px) {
		.section.over-hide.full-height.full-height-xl .video-wrapper::after {
			background-size: 200%;	
		}
	}

	.section.over-hide.full-height.full-height-xl .video-wrapper video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.section.over-hide.full-height.full-height-xl .video-wrapper > video {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.section.over-hide.full-height.full-height-xl .video-wrapper .gif {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-attachment: fixed !important;
		background-position: center !important;
		background-size: cover !important;
	}

	.services-wrap-3 .uil {
		width: 50px;
		height: 50px;
		display: inline-block;
	}

	.services-wrap-3 .uil:before {
		background-position: top center;
		width: 50px;
		height: 50px;
		display: inline-block;
	}

	.uil-custom-icon1:before {
		content: ' ';
		background: url('../img/1.svg') no-repeat;
	}

	.services-wrap-3.light-version:hover .uil-custom-icon1:before {
		background: url('../img/1r.svg') no-repeat;

	}

	.uil-custom-icon2:before {
		content: ' ';
		background: url('../img/2.svg') no-repeat;
	}

	.services-wrap-3.light-version:hover .uil-custom-icon2:before {
		background: url('../img/2r.svg') no-repeat;

	}

	.uil-custom-icon3:before {
		content: ' ';
		background: url('../img/3.svg') no-repeat;
	}

	.services-wrap-3.light-version:hover .uil-custom-icon3:before {
		background: url('../img/3r.svg') no-repeat;

	}

	.uil-custom-icon4:before {
		content: ' ';
		background: url('../img/4.svg') no-repeat;
	}

	.services-wrap-3.light-version:hover .uil-custom-icon4:before {
		background: url('../img/4r.svg') no-repeat;

	}	

	.services-wrap-3.process-scroll::after {
		background: url('../img/mainarrow.svg') no-repeat;
		width: 35px;
		height: 21px;
		display: inline-block;
		content: ' ';
		right: -36px;
	}

	.uil-custom-design-icon1:before {
		content: ' ';
		background: url('../img/uiux.svg') no-repeat;
		background-size: 50px;
	}

	.services-wrap-3.light-version:hover .uil-custom-design-icon1:before {
		background: url('../img/uiuxr.svg') no-repeat;
		background-size: 50px;
	}

	.uil-custom-design-icon2:before {
		content: ' ';
		background: url('../img/research.svg') no-repeat;
	}

	.services-wrap-3.light-version:hover .uil-custom-design-icon2:before {
		background: url('../img/researchr.svg') no-repeat;

	}

	.uil-custom-design-icon3:before {
		content: ' ';
		background: url('../img/graphic.svg') no-repeat;
	}

	.services-wrap-3.light-version:hover .uil-custom-design-icon3:before {
		background: url('../img/graphicr.svg') no-repeat;

	}

	.uil-custom-design-icon4:before {
		content: ' ';
		background: url('../img/video.svg') no-repeat;
	}

	.services-wrap-3.light-version:hover .uil-custom-design-icon4:before {
		background: url('../img/videor.svg') no-repeat;

	}

	.uil-custom-design-icon5:before {
		content: ' ';
		background: url('../img/mgt.svg') no-repeat;
	}

	.services-wrap-3.light-version:hover .uil-custom-design-icon5:before {
		background: url('../img/mgtr.svg') no-repeat;

	}

	.uil-custom-design-icon6:before {
		content: ' ';
		background: url('../img/branding.svg') no-repeat;
	}

	.services-wrap-3.light-version:hover .uil-custom-design-icon6:before {
		background: url('../img/brandingr.svg') no-repeat;

	}


	.services-wrap-3 p.height-4 {
		height: 6em;
	}
	
	.services-wrap-3 h6.height-3 {
		height: 3em;
	}
	

	.display-1 {
		font-size: 80px;
	}

	h5 {
		font-size: 18px;
	}
	
	p {
		font-size: 14px;
	}

	li {
		font-size: 14px;
	}

	.padding-top-bottom-40 {
		padding-top: 40px;
		padding-bottom: 40px;
	}


	.home-display-5 {

		font-size: 75px;
	}


	h2.display-8 {
		font-size: 45px;
		font-weight: bold;
	}

	.lead {
		font-size: 16px;
		font-weight: normal;
	}

	.footer i {
		color: #fff;
	}

	/* .img-wrap img.lazyload {
		width: auto;
		height: auto;
	} */

	@media (min-aspect-ratio: 16/9) {
		/* .section.over-hide.full-height.full-height-xl .video-wrapper > video {
			height: 300%;
			top: -100%;
		} */
	}

	@media (max-width: 1024px) {
		.counter-big-num {
			top: 60px;
		}
	}
	@media (max-width: 768px) { 
		.hero-bottom-section {
			bottom: 120px;
		}
		.services-wrap-3 p.height-4 {
			height: 8em;
		}
		.footer .text-center {
			text-align: left!important;
		}
	}

	@media (max-width: 767px) {
		.services-wrap-3 p.height-4 {
			height: 4em;
		}
		.services-wrap-3.process {
			min-height: 9em;
		}
		.services-wrap-3.process2 {
			min-height: 9em;
		}
		.services-wrap-3.process-scroll::after {
			transform: rotate(90deg);
			right: calc(50% - 16px);
			top: calc(100% + 35px);
		}
		.counter-big-num {
			top: 30px;
		}
	}

	@media (max-width: 424px) {
		.display-6 {
			font-size: 30px;
		}
		.hero-bottom-section {
			bottom: 100px;
		}
		.counter-big-num {
			top: 50px;
		}
		/* .footer .text-center .col-auto {
			margin: auto!important;
		} */
		.footer a {
			display: block;
		}
		.btn {
			padding: 0 20px;
		}
		.progress-bar-wrapper p {
			font-size: 12px;
		}
	}