/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $RESET
--------------------------------------------------------|
--------------------------------------------------------|
*/
*, *::before, *::after { box-sizing: border-box; }
::selection { color: inherit; background-color: var(--c-10); text-shadow: none; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
button { background-color: transparent; border: none; margin: 0; padding: 0; text-align: inherit; font: inherit; border-radius: 0; appearance: none; cursor: pointer; }
hr { display: block; height: .2rem; border: 0; border-top: .2rem solid var(--c-10); margin: 4.0rem 0; padding: 0;}
code { line-height: 1.5; }

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $GLOBAL
--------------------------------------------------------|
--------------------------------------------------------|
*/
:root {
	/* Width */
	--w-xs: min(70%, 51.2rem);
	--w-sm: min(70%, 76.8rem);
	--w-md: min(80%, 89.6rem);
	--w-lg: min(90%, 102.4rem);
	--w-xl: min(100%, 140.8rem);
	
	/* Color - Brand */
	--c-pri: #24248f;
	--c-sec: #090924;
	--c-ter: #4545A0;
	--c-pri-a: rgba(36, 36, 143, 0.9);
	
	/* Color - Utilities */
	--c-y: yellow;
	--c-r: red;
	--c-g: green;
	--c-b: #222222;
	--c-w: #F5F5F5;

	/* Color - Light/Dark */
	--c-bg: light-dark(#F5F5F5, #222222);
    --c-fg: light-dark(#222222, #F5F5F5);
	--c-bd: light-dark(rgba(255, 255, 255, .75), rgba(0, 0, 0, .75));
	--c-75: light-dark(rgba(0, 0, 0, .75), rgba(255, 255, 255, .75));
	--c-50: light-dark(rgba(0, 0, 0, .50), rgba(255, 255, 255, .50));
	--c-25: light-dark(rgba(0, 0, 0, .25), rgba(255, 255, 255, .25));
	--c-10: light-dark(rgba(0, 0, 0, .10), rgba(255, 255, 255, .10));
	--c-05: light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05));
}
[data-theme="light"] {
	color-scheme: light;
}
[data-theme="dark"] {
	color-scheme: dark;
}
[data-client="tal"] {
	--c-pri: #8f2424;
	--c-pri-a: rgba(143, 36, 36, 0.9);
	--c-sec: #240909;
	--c-sec-a: rgba(36, 9, 9, 0.9);
	--c-ter: #A04545;
}
[data-client="boy"] {
	--c-pri: #248F62;
	--c-pri-a: rgba(36, 143, 98, 0.9);
	--c-sec: #092419;
	--c-sec-a: rgba(9, 36, 25, 0.9);
	--c-ter: #45A07A;
}
[data-client="mvbs"] {
	--c-pri: #24478f;
	--c-pri-a: rgba(36, 71, 143, 0.9);
	--c-sec: #091224;
	--c-sec-a: rgba(9, 18, 36, 0.9);
	--c-ter: #4563A0;
}
[data-client="tlc"] {
	--c-pri: #62248f;
	--c-pri-a: rgba(98, 36, 143, 0.9);
	--c-sec: #190924;
	--c-sec-a: rgba(25, 9, 36, 0.9);
	--c-ter: #7A45A0;
}
[data-client="vel"] {
	--c-pri: #246b8f;
	--c-pri-a: rgba(36, 107, 143, 0.9);
	--c-sec: #091B24;
	--c-sec-a: rgba(9, 27, 36, 0.9);
	--c-ter: #4581A0;
}
[data-client="bda"] {
	--c-pri: #6b8f24;
	--c-pri-a: rgba(107, 143, 36, 0.9);
	--c-sec: #1B2409;
	--c-sec-a: rgba(27, 36, 9, 0.9);
	--c-ter: #81A045;
}
[data-client="jcc"] {
	--c-pri: #24508F;
	--c-pri-a: rgba(36, 80, 143, 0.9);
	--c-sec: #091424;
	--c-sec-a: rgba(9, 20, 36, 0.9);
	--c-ter: #456AA0;
}
html {
	-webkit-tap-highlight-color: transparent;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	background: var(--c-pri);
	font-family: "Gotham A", "Gotham B", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 10px;
}
	body {
		margin: 0;
		min-height: 100vh;
		overflow: hidden;
		background-color: var(--c-sec);
		color: var(--c-75);
		font-size: 1.6rem;
		line-height: 1;
		transition: background-color .15s ease;
	}
	[data-theme="light"] body {
		background-color: var(--c-bg);
	}
	.texture {
		position: fixed;
		z-index: 900;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		background-color: transparent;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.075' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");	
	}

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $TYPE
--------------------------------------------------------|
--------------------------------------------------------|
*/
h1, h2, h3, h4, h5 {
	margin: 4.8rem 0 2.4rem;
	line-height: 1.25;
	text-wrap: pretty;
	font-family: "Forza SSm A", "Forza SSm B", sans-serif;
	font-style: normal;
	font-weight: 800;
}
h1 { 
	font-size: 4.8rem;
}
h2 {
	font-size: 3.2rem;
}
h3 {
	font-size: 2.4rem;
}
h4 {
	font-size: 1.6rem;
}
h5 {
	font-size: 1.2rem;
}
p {
   line-height: 2;
   margin: 0 0 2.4rem;
}
a {
   color: var(--c-pri);
   text-decoration-color: var(--c-10);
   transition: color .15s linear;
}
a:hover {
   color: var(--c-ter);
}
strong {
   font-weight: 700;
}
/*Type*/
.gotham {
   font-family: "Gotham A", "Gotham B";
   font-style: normal;
   font-style: italic;
   font-weight: 400;
   font-weight: 700;
}
@font-face {
   font-family: 'xoul_xansregular';
   src: url('../../assets/fonts/xoul-xans/xoulxans-webfont.woff2') format('woff2'),
		url('../../assets/fonts/xoul-xans/xoulxans-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $APP
--------------------------------------------------------|
--------------------------------------------------------|
*/
.app {
	position: relative;
	height: 100dvh;
}
	.page {
		position: absolute;
		inset: 0;
		/* view-transition-name: slide-it; */
	}
		.page__inner {
			position: absolute;
			inset: 0;
			display: flex;
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
			-ms-scroll-chaining: none;
			overscroll-behavior: contain;
		}
			.page__content {
				margin: auto;
				width: 100%;
				max-width: 64.0rem;
				line-height: 2;
				margin: auto;
				padding: 16.0rem 2.4rem;
			}
				.page__content p {
					margin: 0;
				}
	.port {
		position: absolute;
		inset: 0;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		-ms-scroll-chaining: none;
		overscroll-behavior: contain;
	}
		.port__inner {
			min-height: 150vh;
			padding-bottom: 11.2rem;
			/* animation: slide-in .3s cubic-bezier(.19,1,.22,1) both; */
		}
		@keyframes slide-in {
			0% {
				transform: translateY(12.8rem);
				/* opacity: 0; */
			}
			100% {
				transform: translateY(0);
				/* opacity: 1; */
			}
		}
			.port__title {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
				.port__title-text {
					font-family: 'xoul_xansregular';
					font-style: normal;
					font-weight: normal;
					font-size: 11.2rem;
					text-transform: uppercase;
					line-height: 1;
					color: var(--c-pri);
					width: 80%;
					text-align: center;
					margin: 20.8rem 0 0;
				}
				.port__title-sub {
					margin-top: 2.4rem;
					color: var(--c-25);
				}

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $VIEW-TRANSITIONS
--------------------------------------------------------|
--------------------------------------------------------|
*/
.pixoulate {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 700;
	display: grid;
	grid-template-columns: repeat(10, max(10vw, 10vh));
	grid-template-rows: repeat(10, max(10vw, 10vh));
	visibility: hidden;
	pointer-events: none;
}
.pixoulate--active {
	visibility: visible;
	pointer-events: auto;
}
	.pixoulate__pix {
		background-color: var(--c-pri);
		opacity: 0;
		width: 100%;
		height: 100%;
	}
	.pixoulate__pix--show {
		opacity: 1;
		transition: opacity 0s ease-out;
	}

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $LOGO
--------------------------------------------------------|
--------------------------------------------------------|
*/
.logo {
	z-index: 100;
	position: fixed;
	top: 0;
	left: 50%;
	height: 8rem;
	padding: 0 2.4rem;
	display: flex;
	align-items: center;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	cursor: pointer;
}
		.logo path {
			fill: var(--c-pri);
			transition: fill .15s ease;
		}
		.logo:hover path {
			fill: var(--c-ter);
		}
		.pix {
			position: relative;
			height: auto;
			width: 11.2rem;
		}
			.pix__01,
			.pix__02,
			.pix__03,
			.pix__04 {
				visibility: hidden;
				animation-delay: 2s;
				animation-duration: 4s;
				animation-iteration-count: infinite;
				animation-direction: alternate;
				animation-timing-function: step-end;
			}
			.pix__01 { visibility: visible; animation-name: slide1; }
			.pix__02 { animation-name: slide2; }
			.pix__03 { animation-name: slide3; }
			.pix__04 { animation-name: slide4; }
			@keyframes slide1 { 0%, 45% { visibility: visible; } 45%, 100% { visibility: hidden; } }
			@keyframes slide2 { 0%, 45% { visibility: hidden; } 45%, 50% { visibility: visible; } 50%, 100% { visibility: hidden; } }
			@keyframes slide3 { 0%, 50% { visibility: hidden; } 50%, 55% { visibility: visible; } 55%, 100% { visibility: hidden; } }
			@keyframes slide4 { 0%, 55% { visibility: hidden; } 55%, 100% { visibility: visible; } }

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $TOGGLE-MODE
--------------------------------------------------------|
--------------------------------------------------------|
*/
.toggle-mode {
   z-index: 9;
   position: fixed;
   top: 0;
   left: 0;
   height: 8rem;
   display: flex;
   align-items: center;
   gap: .8rem;
   padding: 0 4rem;
   cursor: pointer;
}
   .toggle-mode__option {
	   height: 2.4rem;
	   width: auto;
	   transition: fill .15s ease;
   }
   .toggle-mode__option--dark {
	   fill: var(--c-pri);
   }
   .toggle-mode__option--light {
	   fill: var(--c-25);
   }
   [data-theme="dark"] .toggle-mode:hover .toggle-mode__option--light {
	   fill: var(--c-50);
   }
   [data-theme="light"] .toggle-mode__option--dark {
	   fill: var(--c-25);
   }
   [data-theme="light"] .toggle-mode:hover .toggle-mode__option--dark {
	   fill: var(--c-50);
   }
   [data-theme="light"] .toggle-mode__option--light {
	   fill: var(--c-pri);
   }
   
/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $TOGGLE-MENU
--------------------------------------------------------|
--------------------------------------------------------|
*/
.toggle-menu {
   z-index: 101;
   position: fixed;
   top: 0;
   right: 0;
   cursor: pointer;
   transition: opacity .3s ease;
}
.toggle-menu--hide {
	opacity: 0;
}
	.toggle-menu__svg {
		width: 11.2rem;
		height: 8.0rem;
	}
		.toggle-menu__rect {
			fill: var(--c-pri);
			-webkit-transform-origin: center;
			-ms-transform-origin: center;
			transform-origin: center;
			transition: transform .3s ease, opacity .3s ease, fill .15s ease;
		}
		.toggle-menu:hover .toggle-menu__rect {
			fill: var(--c-ter);
		}
		.toggle-menu--open .toggle-menu__rect--top {
			-webkit-transform: rotate(225deg) translateY(8px);
			-ms-transform: rotate(225deg) translateY(8px);
			transform: rotate(225deg) translateY(8px);
		}
		.toggle-menu--open .toggle-menu__rect--mid {
			opacity: 0;
		}
		.toggle-menu--open .toggle-menu__rect--bot {
			-webkit-transform: rotate(-225deg) translateY(-8px);
			-ms-transform: rotate(-225deg) translateY(-8px);
			transform: rotate(-225deg) translateY(-8px);
		}	
.loader {
	pointer-events: none;
	z-index: 800;
	position: fixed;
	top: 0;
	right: 0;
	width: 11.2rem;
	height: 8.0rem;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity .3s ease;
}
.loader--show {
	display: flex;
	opacity: 1;
}
	.loader__icon {
		height: 3.2rem;
		width: 3.2rem;
		fill: var(--c-ter);
		animation: loader-spin .6s linear infinite;
	}
		@keyframes loader-spin {
			0% {
				-webkit-transform: rotate(0deg);
						transform: rotate(0deg);
			}
			100% {
				-webkit-transform: rotate(360deg);
						transform: rotate(360deg);
			}
		}

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $MENU
--------------------------------------------------------|
--------------------------------------------------------|
*/
.menu {
   z-index: 99;
   position: fixed;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--c-sec-a);
   -webkit-backdrop-filter: saturate(180%) blur(1.6rem);
   backdrop-filter: saturate(180%) blur(1.6rem);
   color-scheme: dark;
   opacity: 0;
   transition: left 0s ease 0.3s, opacity 0.3s ease;
}
.menu--open {
   left: 0;
   opacity: 1;
   transition: opacity 0.3s ease;
}
.menu--transitioning {
    transition: none !important;
}
   .menu__close {
	   position: absolute;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100%;
   }
   .menu__copyright {
		position: absolute;
		bottom: 0;
		right: 4.0rem;
		height: 8.0rem;
		display: flex;
		align-items: center;
		font-size: 1.2rem;
		color: var(--c-25);
   }
   .nav {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		transform: translateY(12.8rem);
		transition: transform .0s ease .3s;
   }
   .menu--open .nav {
		transform: translateY(0);
		transition: transform .3s cubic-bezier(.19,1,.22,1);
   }
		/* .nav__item {
			position: relative;
			font-family: 'xoul_xansregular';
			font-style: normal;
			font-weight: normal;
			text-transform: uppercase;
			font-size: 5.6rem;
			color: var(--c-w);
			text-decoration: none;
			white-space: nowrap;
			transition: color 0.3s ease;
			margin-bottom: 2.4rem;
		} */
		.nav__item {
			position: relative;
			font-size: 4.0rem;
			color: var(--c-pri);
			text-decoration: none;
			white-space: nowrap;
			padding-block: 1.2rem;
			transition: color .15s linear, opacity .15s ease;
		}
		.nav:has(.nav__item:hover, .nav__item:focus-within) .nav__item:not(:hover):not(:focus-within) {
			opacity: 0.5;
		}
		.nav__item:hover {
			/* color: var(--c-50); */
		}
		.nav__item:focus-within {
			color: var(--c-ter);
		}
	   .nav__item:last-child {
		   margin-bottom: 0;
	   }

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $WORK
--------------------------------------------------------|
--------------------------------------------------------|
*/
.work {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   user-select: none;
   opacity: 0;
}
.work.swiper-initialized {
    opacity: 1;
}
   .work__wrapper {
	   /* position: absolute;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100%;
	   transform: translate3d(0, 0, 0);
	   will-change: transform; */
   }
	   .work__slide {
		   width: 60%;
	   }
		   .work__link {
			   width: 53.6rem;
			   height: 29.6rem;
			   position: absolute;
			   top: 50%;
			   left: 50%;
			   -webkit-transform: translate(-50%,-50%);
					   transform: translate(-50%,-50%);
				pointer-events: none;
		   }
		   .swiper-slide-active .work__link {
			   pointer-events: auto;
		   }
			   .work__bg {
				   position: absolute;
				   top: 0;
				   left: 0;
				   width: 100%;
				   height: 100%;
				   object-fit: cover;
			   }
			   .work__cap {
				   position: absolute;
				   top: 0;
				   left: 0;
				   height: 100%;
				   width: 30.4rem;
				   margin-left: -15.2rem;
				   display: -webkit-box;
				   display: -ms-flexbox;
				   display: flex;
				   -webkit-box-pack: center;
					   -ms-flex-pack: center;
						   justify-content: center;
				   -webkit-box-align: center;
					   -ms-flex-align: center;
						   align-items: center;
			   }
				   .work__cap-letter {
					   height: 15.2rem;
					   width: auto;
					   transform: translate3d(0, 0, 0);
					   will-change: transform;
				   }
					   .work__cap-letter path,
					   .work__cap-letter polygon {
						   fill: var(--c-pri);
						   transition: fill .15s ease;
					   }
			   .work__url {
				   position: absolute;
				   bottom: -4.8rem;
				   line-height: 4.8rem;
				   left: 0;
				   width: 100%;
				   text-align: center;
				   text-decoration: none;
				   transition: color .15s ease;
			   }
				   .work__url-inner {
					   transform: translate3d(0, 0, 0);
					   will-change: transform;
				   }
					   .work__url-text {
						   color: var(--c-pri);
						   transition: color .15s ease;
					   }
					   .work__url:hover .work__url-text {
						   color: var(--c-ter);
					   }
	/*Scrollbar*/
	.work-scrollbar {
		pointer-events: none;
		position: absolute;
		bottom: 3.8rem;
		left: 11.2rem;
		width: 25.6rem;
		height: .4rem;
		--swiper-scrollbar-border-radius: 0;
		--swiper-scrollbar-top: auto;
		--swiper-scrollbar-bottom: 0;
		--swiper-scrollbar-left: auto;
		--swiper-scrollbar-right: 0;
		--swiper-scrollbar-sides-offset: 1%;
		--swiper-scrollbar-bg-color: var(--c-10);
		--swiper-scrollbar-drag-bg-color: transparent;
		--swiper-scrollbar-size: .4rem;
	}
		.swiper-scrollbar-drag:after {
			content: '';
			position: absolute;
			inset: 0;
			/* border-radius: .8rem; */
			background-color: var(--c-pri);
			transition: background-color .15s ease;
		}
   /*Swiper-Work-Arrows*/
   .work-arrows {
	   z-index: 10;
	   position: absolute;
	   bottom: 0;
	   left: 0;
	   height: 8rem;
	   display: flex;
	   justify-content: space-between;
	   justify-content: center;
	   align-items: center;
   }
   .work-arrows--browser {
		left: 50%;
		transform: translateX(-50%);
   }
	   .work-arrows__arrow {
		   cursor: pointer;
		   outline: none;
		   padding: 2.4rem 4.0rem;
	   }
	   .work-arrows__arrow--prev {
		   padding-right: .4rem;
	   }
	   .work-arrows__arrow--next {
		   padding-left: .4rem;
	   }
	   .work-arrows__arrow.swiper-button-disabled {
		   pointer-events: none;
	   }
		   .work-arrows__icon {
			   width: auto;
			   height: 2.4rem;
			   fill: var(--c-pri);
			   transition: fill .15s ease;
		   }
		   .work-arrows__arrow:hover .work-arrows__icon {
			   fill: var(--c-ter);
		   }
		   .swiper-button-disabled .work-arrows__icon,
		   .swiper-button-disabled:hover .work-arrows__icon {
			   fill: var(--c-10);
			   pointer-events: none;
		   }
@media only screen and (max-width: 768px) {
	.work__slide {
		width: 100%;
	}
		.work__link {
			width: 100%;
			height: auto;
			aspect-ratio: 1 / 1;
		}
			.work__cap {
				width: 100%;
				margin: 0;
			}
			.work__url {
				bottom: 0;
			}
	.work-arrows {
		bottom: 50%;
		transform: translateY(calc(50vw + 7.2rem));
	}
	.work-scrollbar {
		width: auto;
		right: 4.0rem;
		bottom: 50%;
		transform: translateY(calc(50vw + 3.4rem));
	}
}

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $ARROWS
--------------------------------------------------------|
--------------------------------------------------------|
*/
.down {
   z-index: 10;
   position: absolute;
   bottom: 0;
   right: 0;
   height: 8.0rem;
   padding: 0 4.0rem;
   display: flex;
   align-items: center;
   gap: 1.6rem;
   text-decoration: none;
}
   .down__q {
	   font-weight: 400;
	   font-size: 1.6rem;
	   font-style: italic;
	   line-height: 1;
	   margin: 0;
	   pointer-events: none;
	   user-select: none;
   }
   .down__icon {
	   fill: var(--c-pri);
	   height: 2.4rem;
	   width: auto;
	   transition: fill .15s ease;
   }
   .down:hover .down__icon {
	   fill: var(--c-ter);
   }
.back {
	z-index: 10;
	position: absolute;
	top: 0;
	left: 0;
	height: 8.0rem;
	padding: 0 4.0rem;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: .8rem;
	text-decoration: none;
}
	.back__text {
		font-weight: 400;
		font-size: 1.6rem;
		line-height: 1;
		margin: 0;
		transition: color .15s ease;
		pointer-events: none;
		-webkit-user-select: none;
		 -moz-user-select: none;
		 -ms-user-select: none;
		 user-select: none;
	}
	.back:hover .back__text {
		/* color: var(--c-50); */
	}
	.back__icon {
		fill: var(--c-pri);
		height: 2.4rem;
		width: auto;
		transition: fill .15s ease;
	}
	.back:hover .back__icon {
		fill: var(--c-ter);
	}
@media only screen and (max-width: 768px) {
	.down {
		left: 0;
		justify-content: space-between;
	}
}

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $ABOUT-US
--------------------------------------------------------|
--------------------------------------------------------|
*/
.about-us {
	
}
	.about-us p {
		
	}
   
/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $SERVICES
--------------------------------------------------------|
--------------------------------------------------------|
*/
.services {
	display: flex;
	gap: 8.0rem;
	justify-content: center;
}
	.services ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
		.services ul li {
			margin-bottom: 2.4rem;
			line-height: 1.5;
		}
@media only screen and (max-width: 768px) {
	.services {
		gap: 2.4rem;
	}
}

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $BROWSER
--------------------------------------------------------|
--------------------------------------------------------|
*/
.browser-swiper {
	overflow: hidden;
}
	.browser-swiper__wrapper {
		
	}
		.browser-swiper__slide {
			width: 85%;
			padding: 0 1.6rem;
			/* box-sizing: border-box; */
		}
.browser {
	margin: 8.0rem auto;
	background: var(--c-10);
}
	.browser__bar {
		position: relative;
		display: flex;
		align-items: center;
		padding: .8rem 1.6rem;
	}
		.browser__url {
			font-size: 1.0rem;
			margin: 0 0 0 auto;
			letter-spacing: .05em;
			color: var(--c-25);
			background: var(--c-10);
			padding: 0.4rem 1.6rem;
			border-radius: 0.4rem;
		}
		.browser__dot {
			width: .8rem;
			height: .8rem;
			border-radius: 50%;
			background: var(--c-10);
			margin-right: .4rem;
		}
			.browser__img {
				width: 100%;
				height: auto;
			}
.client {
	width: 80%;
	max-width: 60rem;
	margin: 0 auto;
}	
.work-nav {
	padding: 4rem;
	display: flex;
	justify-content: space-around;
}

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $CTA
--------------------------------------------------------|
--------------------------------------------------------|
*/
.cta {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 8.0rem;
}
	.cta__button {
		display: flex;
		align-items: center;
		gap: .8rem;
		color: var(--c-w);
		border: 0.2rem solid var(--c-pri);
		padding: 1.6rem 2.4rem;
		height: 3.2rem;
		border-radius: 2.4rem;
		text-decoration: none;;
		white-space: nowrap;
		align-self: center;
		transition: background-color .15s ease;
	}
	.cta__button:hover {
		background-color: var(--c-pri);
		color: var(--c-w);
	}
		.cta__button-arrow {
			fill: var(--c-pri);
			height: 2.4rem;
			width: auto;
			transition: fill .15s ease;
		}
		.cta__button:hover .cta__button-arrow {
			fill: var(--c-w);
		}

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $RESPONSIVE
--------------------------------------------------------|
--------------------------------------------------------|
*/
@media only screen and (min-height: 713px) and (min-width: 1267px) { html { font-size: 11px; } }
@media only screen and (min-height: 777px) and (min-width: 1382px) { html { font-size: 12px; } }
@media only screen and (min-height: 843px) and (min-width: 1498px) { html { font-size: 13px; } }
@media only screen and (min-height: 907px) and (min-width: 1613px) { html { font-size: 14px; } }
@media only screen and (min-height: 972px) and (min-width: 1728px) { html { font-size: 15px; } }
@media only screen and (min-height: 1037px) and (min-width: 1843px) { html { font-size: 16px; } }
@media only screen and (min-height: 1101px) and (min-width: 1958px) { html { font-size: 17px; } }
@media only screen and (min-height: 1167px) and (min-width: 2074px) { html { font-size: 18px; } }
@media only screen and (min-height: 1231px) and (min-width: 2189px) { html { font-size: 19px; } }
@media only screen and (min-height: 1296px) and (min-width: 2304px) { html { font-size: 20px; } }

/*
--------------------------------------------------------|
--------------------------------------------------------|
--------------------------------------------------------| $PRINT
--------------------------------------------------------|
--------------------------------------------------------|
*/
@media print{blockquote,img,pre,tr{page-break-inside:avoid}*,::after,::before{background:#fff!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]::after{content:" (" attr(href) ")"}abbr[title]::after{content:" (" attr(title) ")"}a[href^="#"]::after,a[href^="javascript:"]::after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}