/* =====================================================================================

Project Name:   TRIUM
Project URI:    https://trium.com.tr
Author:         Retro Medya
Author URI:     https://retromedya.com
License:        The design and development rights of this website belong to Retro Medya.
                Unauthorized copying, distribution, or resale is strictly prohibited.
Version:        1.0

===================================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");

:root {
	--font-family: "Arial", sans-serif;
	--font-family-normal: "Roboto Flex", sans-serif;
	--display-1: clamp(64px, 8vw, 144px);
	--display-2: clamp(48px, 6vw, 112px);
	--display-3: clamp(36px, 4vw, 84px);
	--h1: clamp(40px, 3.5vw, 72px);
	--h2: clamp(32px, 3vw, 60px);
	--h3: clamp(28px, 2.5vw, 48px);
	--h4: clamp(24px, 2vw, 36px);
	--h5: clamp(20px, 1.7vw, 28px);
	--h6: clamp(18px, 1.5vw, 24px);
	--body-xxl: clamp(24px, 2vw, 40px);
	--body-xl: clamp(20px, 1.8vw, 32px);
	--body-l: clamp(18px, 1.5vw, 28px);
	--body-m: clamp(16px, 1.2vw, 24px);
	--body-s: clamp(14px, 1vw, 20px);
	--body-xs: clamp(12px, 0.8vw, 18px);
	--blockquote-1: clamp(20px, 2vw, 32px);
	--blockquote-2: clamp(18px, 1.8vw, 28px);
	--button-l: clamp(18px, 1.8vw, 28px);
	--button-m: clamp(16px, 1.5vw, 24px);
	--button-s: clamp(14px, 1.2vw, 20px);
	--button-xs: clamp(12px, 1vw, 16px);
	--color-black: #1e2024;
	--color-black-2: #181818;
	--color-primary: #ef7427;
	--color-light: #fff;
	--color-1: #d7dbdf;
	--color-2: rgba(241,241,241,20%);
	--color-3: #4f5659;
	--color-4: #efd8c9;
	--color-5: #e9ecf2;
}

::selection {
	color: var(--color-light);
	background-color: var(--color-primary);
}

.button-l {
	font-size: var(--button-l);
	line-height: 112%;
}

.button-m {
	font-size: var(--button-m);
	line-height: 30px;
}

h1, h2, .menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li a, h3, h4, .menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a, .menu .site-nav .nav-list .container .menu-contact .menu-contact-email a, h5, h6, .display-1, .display-2, .display-3, .h1, .h2, .h3, .h4, .h5, .h6, .button-xs {
	font-family: var(--font-family);
	font-weight: 700;
}

.display-1, .display-2 {
	line-height: 116%;
}

.display-3 {
	line-height: 125%;
	font-size: var(--display-3);
}

.display-1 {
	font-size: var(--display-1);
}

.display-2 {
	font-size: var(--display-2);
}

h1, .h1 {
	font-size: var(--h1);
	line-height: 1.25;
}

h2, .menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li a, h3, h4, .menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a, .menu .site-nav .nav-list .container .menu-contact .menu-contact-email a, h5, h6, .h2, .h3, .h4, .h5, .h6 {
	line-height: 129%;
}

h2, .h2 {
	font-size: var(--h2);
}

.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li a, h3, .h3 {
	font-size: var(--h3);
}

.h4 {
	font-size: var(--h4);
	font-weight: 700;
}

.work-2 .grid-item .item-data .item-title {
	font-size: var(--h5);
	font-weight: 700;
}

.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a, .menu .site-nav .nav-list .container .menu-contact .menu-contact-email a, h5, .h5 {
	font-size: var(--h5);
}

h6, .h6 {
	font-size: var(--h6);
}

.body-xxl {
	font-size: var(--body-xxl);
	line-height: 140%;
}

.body-xl {
	font-size: var(--body-xl);
	line-height: 166%;
}

.body-l {
	font-size: var(--body-l);
	line-height: 200%;
}

.body-m {
	line-height: 165%;
	font-size: var(--body-m);
}

.body-s {
	font-size: var(--body-s);
	line-height: 165%;
}

.menu .site-nav .nav-list .container .menu-contact .menu-contact-email .question, .body-xs {
	font-size: var(--body-xs);
	line-height: 24px;
}

.button-s {
	font-size: var(--button-s);
	line-height: 28px;
}

.button-xs {
	font-size: var(--button-xs);
	line-height: 24px;
}

.blockquote-1 {
	font-size: var(--blockquote-1);
	line-height: 178%;
}

.bg-color-primary {
	background-color: var(--color-primary);
}

.bg-color-black {
	background-color: var(--color-black);
}

.bg-color-black-2 {
	background-color: var(--color-black-2);
}

.bg-color-1 {
	background-color: var(--color-1);
}

.bg-color-5 {
	background-color: var(--color-5);
}

.color-primary {
	color: var(--color-primary);
}

.color-black {
	color: var(--color-black);
}

.color-light {
	color: var(--color-light);
}

.color-1 {
	color: var(--color-1);
}

.color-2 {
	color: var(--color-2);
}

.color-3 {
	color: var(--color-3);
}

.color-4 {
	color: var(--color-4);
}

.color-5 {
	color: var(--color-5);
}

.text-gradient {
	background: linear-gradient( to left, transparent 48%, var(--color-light) 90% );
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(0,0,0,0);
	background-size: 200% 100%;
	background-position: 0% 0%;
	transition: background-size 0.4s linear;
}

.text-gradient:hover {
	background-size: 500% 100%;
}

.text-gradient-to-bottom {
	background: linear-gradient( to bottom, var(--color-light) 0%, var(--color-black) 80% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: rgba(0,0,0,0);
}

.ani-ls {
	transition: letter-spacing 0.3s cubic-bezier(0.78,0.28,0,0.76);
}

.ani-ls:hover {
	letter-spacing: 5px;
}

html {
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	scroll-behavior: smooth;
}

html, body {
	font-size: var(--body-xs);
	background-color: var(--color-black);
	color: var(--color-light);
	min-height: 100vh;
	overflow-x: hidden !important;
}

body {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-kerning: none;
	font-family: var(--font-family-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: auto;
	text-rendering: optimizeLegibility;
	touch-action: manipulation;
}

body:not(.loaded) {
	opacity: 0;
}

body:not(.loaded) .cursor, body:not(.loaded) .cursor-follower {
	opacity: 0;
}

h1, .h1, h2, h3, h4, h5, h6, span, p, q, button, a, ul, li {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

h4 span {
	font-size: inherit;
}

h5 span {
	font-size: inherit;
}

span {
	display: inline-block;
}

button {
	text-align: center;
	background-color: rgba(0,0,0,0);
	color: inherit;
	border: none;
	cursor: pointer;
	text-decoration: none;
}

i {
	aspect-ratio: 1/1;
	height: auto;
}

a {
	line-height: 1.15;
	color: inherit;
	text-decoration: none;
}

img {
	height: auto;
	text-align: center;
}

input, textarea {
	padding: 0px 0px;
	border: none;
	background-color: unset;
	color: var(--color-4-85);
	line-height: 1.15;
	outline: none;
}

figure {
	margin: 0;
}

svg {
	will-change: transform, opacity;
}

.con {
	margin: auto;
	border-radius: 50px;
	position: relative;
	overflow: hidden;
	width: calc(100% - 20px);
	padding: 80px 10px;
}

.con-10 {
	margin: auto;
	position: relative;
	overflow: hidden;
	width: calc(100% - 20px);
	overflow: visible;
}

.mt-section {
	margin-top: 80px;
}

.mb-section {
	margin-bottom: 80px;
}

.my-section {
	margin-top: 80px;
	margin-bottom: 80px;
}

.pt-section {
	padding-top: 80px;
}

.pb-section {
	padding-bottom: 80px;
}

.py-section {
	padding-top: 80px;
	padding-bottom: 80px;
}

.pt-cust-large {
	padding-top: 180px;
}

.cover-1 {
	position: relative;
}

.cover-1::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-black);
	opacity: 0.1;
	border-radius: inherit;
	transition: opacity 0.35s linear;
	z-index: 100;
}

.cover-2 {
	position: relative;
}

.cover-2::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-black);
	opacity: 0.2;
	border-radius: inherit;
	transition: opacity 0.35s linear;
	z-index: 100;
}

.cover-3 {
	position: relative;
}

.cover-3::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-black);
	opacity: 0.3;
	border-radius: inherit;
	transition: opacity 0.35s linear;
	z-index: 100;
}

.cover-4 {
	position: relative;
}

.cover-4::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-black);
	opacity: 0.4;
	border-radius: inherit;
	transition: opacity 0.35s linear;
	z-index: 100;
}

.cover-5 {
	position: relative;
}

.cover-5::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-black);
	opacity: 0.5;
	border-radius: inherit;
	transition: opacity 0.35s linear;
	z-index: 100;
}

.cover-6 {
	position: relative;
}

.cover-6::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-black);
	opacity: 0.6;
	border-radius: inherit;
	transition: opacity 0.35s linear;
	z-index: 100;
}

.cover-7 {
	position: relative;
}

.cover-7::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-black);
	opacity: 0.7;
	border-radius: inherit;
	transition: opacity 0.35s linear;
	z-index: 100;
}

.cover-8 {
	position: relative;
}

.cover-8::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-black);
	opacity: 0.8;
	border-radius: inherit;
	transition: opacity 0.35s linear;
	z-index: 100;
}

.cover-9 {
	position: relative;
}

.cover-9::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-black);
	opacity: 0.9;
	border-radius: inherit;
	transition: opacity 0.35s linear;
	z-index: 100;
}

.opacity-0 {
	opacity: 0;
}

.opacity-1 {
	opacity: 0.1;
}

.opacity-2 {
	opacity: 0.2;
}

.opacity-3 {
	opacity: 0.3;
}

.opacity-4 {
	opacity: 0.4;
}

.opacity-5 {
	opacity: 0.5;
}

.opacity-6 {
	opacity: 0.6;
}

.opacity-7 {
	opacity: 0.7;
}

.opacity-8 {
	opacity: 0.8;
}

.opacity-9 {
	opacity: 0.9;
}

.opacity-10 {
	opacity: 1;
}

.z-index-1 {
	z-index: 1000;
}

.z-index-2 {
	z-index: 2000;
}

.z-index-3 {
	z-index: 3000;
}

.z-index-4 {
	z-index: 4000;
}

.z-index-5 {
	z-index: 5000;
}

.z-index-6 {
	z-index: 6000;
}

.z-index-7 {
	z-index: 7000;
}

.z-index-8 {
	z-index: 8000;
}

.z-index-9 {
	z-index: 9000;
}

.z-index-10 {
	z-index: 10000;
}

.z-index-11 {
	z-index: 11000;
}

.z-index-12 {
	z-index: 12000;
}

.z-index-13 {
	z-index: 13000;
}

.z-index-14 {
	z-index: 14000;
}

.z-index-15 {
	z-index: 15000;
}

.z-index-16 {
	z-index: 16000;
}

.z-index-17 {
	z-index: 17000;
}

.z-index-18 {
	z-index: 18000;
}

.z-index-19 {
	z-index: 19000;
}

.z-index-20 {
	z-index: 20000;
}

.ls-0 {
	letter-spacing: calc(0px / 10) !important;
}

.ls-1 {
	letter-spacing: calc(1px / 10) !important;
}

.ls-2 {
	letter-spacing: calc(2px / 10) !important;
}

.ls-3 {
	letter-spacing: calc(3px / 10) !important;
}

.ls-4 {
	letter-spacing: calc(4px / 10) !important;
}

.ls-5 {
	letter-spacing: calc(5px / 10) !important;
}

.ls-6 {
	letter-spacing: calc(6px / 10) !important;
}

.ls-7 {
	letter-spacing: calc(7px / 10) !important;
}

.ls-8 {
	letter-spacing: calc(8px / 10) !important;
}

.ls-9 {
	letter-spacing: calc(9px / 10) !important;
}

.ls-10 {
	letter-spacing: calc(10px / 10) !important;
}

.ls-11 {
	letter-spacing: calc(11px / 10) !important;
}

.ls-12 {
	letter-spacing: calc(12px / 10) !important;
}

.ls-13 {
	letter-spacing: calc(13px / 10) !important;
}

.ls-14 {
	letter-spacing: calc(14px / 10) !important;
}

.ls-15 {
	letter-spacing: calc(15px / 10) !important;
}

.ls-16 {
	letter-spacing: calc(16px / 10) !important;
}

.ls-17 {
	letter-spacing: calc(17px / 10) !important;
}

.ls-18 {
	letter-spacing: calc(18px / 10) !important;
}

.ls-19 {
	letter-spacing: calc(19px / 10) !important;
}

.ls-20 {
	letter-spacing: calc(20px / 10) !important;
}

.ls-21 {
	letter-spacing: calc(21px / 10) !important;
}

.ls-22 {
	letter-spacing: calc(22px / 10) !important;
}

.ls-23 {
	letter-spacing: calc(23px / 10) !important;
}

.ls-24 {
	letter-spacing: calc(24px / 10) !important;
}

.ls-25 {
	letter-spacing: calc(25px / 10) !important;
}

.ls-26 {
	letter-spacing: calc(26px / 10) !important;
}

.ls-27 {
	letter-spacing: calc(27px / 10) !important;
}

.ls-28 {
	letter-spacing: calc(28px / 10) !important;
}

.ls-29 {
	letter-spacing: calc(29px / 10) !important;
}

.ls-30 {
	letter-spacing: calc(30px / 10) !important;
}

.ls-31 {
	letter-spacing: calc(31px / 10) !important;
}

.ls-32 {
	letter-spacing: calc(32px / 10) !important;
}

.ls-33 {
	letter-spacing: calc(33px / 10) !important;
}

.ls-34 {
	letter-spacing: calc(34px / 10) !important;
}

.ls-35 {
	letter-spacing: calc(35px / 10) !important;
}

.ls-36 {
	letter-spacing: calc(36px / 10) !important;
}

.ls-37 {
	letter-spacing: calc(37px / 10) !important;
}

.ls-38 {
	letter-spacing: calc(38px / 10) !important;
}

.ls-39 {
	letter-spacing: calc(39px / 10) !important;
}

.ls-40 {
	letter-spacing: calc(40px / 10) !important;
}

.ls-41 {
	letter-spacing: calc(41px / 10) !important;
}

.ls-42 {
	letter-spacing: calc(42px / 10) !important;
}

.ls-43 {
	letter-spacing: calc(43px / 10) !important;
}

.ls-44 {
	letter-spacing: calc(44px / 10) !important;
}

.ls-45 {
	letter-spacing: calc(45px / 10) !important;
}

.ls-46 {
	letter-spacing: calc(46px / 10) !important;
}

.ls-47 {
	letter-spacing: calc(47px / 10) !important;
}

.ls-48 {
	letter-spacing: calc(48px / 10) !important;
}

.ls-49 {
	letter-spacing: calc(49px / 10) !important;
}

.ls-50 {
	letter-spacing: calc(50px / 10) !important;
}

.ls-51 {
	letter-spacing: calc(51px / 10) !important;
}

.ls-52 {
	letter-spacing: calc(52px / 10) !important;
}

.ls-53 {
	letter-spacing: calc(53px / 10) !important;
}

.ls-54 {
	letter-spacing: calc(54px / 10) !important;
}

.ls-55 {
	letter-spacing: calc(55px / 10) !important;
}

.ls-56 {
	letter-spacing: calc(56px / 10) !important;
}

.ls-57 {
	letter-spacing: calc(57px / 10) !important;
}

.ls-58 {
	letter-spacing: calc(58px / 10) !important;
}

.ls-59 {
	letter-spacing: calc(59px / 10) !important;
}

.ls-60 {
	letter-spacing: calc(60px / 10) !important;
}

.ls-61 {
	letter-spacing: calc(61px / 10) !important;
}

.ls-62 {
	letter-spacing: calc(62px / 10) !important;
}

.ls-63 {
	letter-spacing: calc(63px / 10) !important;
}

.ls-64 {
	letter-spacing: calc(64px / 10) !important;
}

.ls-65 {
	letter-spacing: calc(65px / 10) !important;
}

.ls-66 {
	letter-spacing: calc(66px / 10) !important;
}

.ls-67 {
	letter-spacing: calc(67px / 10) !important;
}

.ls-68 {
	letter-spacing: calc(68px / 10) !important;
}

.ls-69 {
	letter-spacing: calc(69px / 10) !important;
}

.ls-70 {
	letter-spacing: calc(70px / 10) !important;
}

.ls-71 {
	letter-spacing: calc(71px / 10) !important;
}

.ls-72 {
	letter-spacing: calc(72px / 10) !important;
}

.ls-73 {
	letter-spacing: calc(73px / 10) !important;
}

.ls-74 {
	letter-spacing: calc(74px / 10) !important;
}

.ls-75 {
	letter-spacing: calc(75px / 10) !important;
}

.ls-5px {
	letter-spacing: 5px !important;
}

.whitespace {
	width: 0.2em;
}

.scroll-marquee {
	display: flex;
	flex-wrap: nowrap;
	position: absolute;
	bottom: -32px;
	left: 0;
	width: 100%;
}

.scroll-marquee .scroll-marquee-contain-text {
	display: flex;
	flex-wrap: nowrap;
}

.scroll-marquee span {
	font-size: 80px;
	margin: 0 0.25em;
	white-space: nowrap;
	text-transform: uppercase;
	opacity: 0.08;
}

.user-no-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.cursor-pointer {
	cursor: pointer;
}

.cursor, .cursor-follower {
	position: fixed;
	border-radius: 100%;
	display: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	pointer-events: none;
	transform: translate(-50%,-50%);
	z-index: 9999999;
}

.cursor {
	background-color: var(--color-light);
	width: 8px;
	height: 8px;
	transition: top 0.1s linear, left 0.1s linear;
}

.cursor-follower {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	line-height: 16px;
	font-family: var(--font-family);
	text-transform: uppercase;
	white-space: nowrap;
	border: 2px solid var(--color-light);
	color: var(--color-light);
	transition: width 0.2s ease, height 0.2s ease, border 0.1s ease;
}

.cursor-follower::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
	background-color: rgba(0,0,0,0);
	z-index: -1;
	border-radius: 50%;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.15s linear, background 0.15s linear;
}

.cursor-tooltip {
	width: 100px;
	height: 100px;
	border: 2px solid rgba(0,0,0,0);
}

.cursor-tooltip::before {
	background-color: rgba(0,0,0,0.4);
	opacity: 1;
}

[data-follow-mouse] {
	transition: transform 0.15s ease;
}

[data-link-hover-scale] {
	position: relative;
	transition: opacity 0.5s cubic-bezier(0.65,0,0.35,1);
	overflow: hidden;
	color: rgba(0,0,0,0) !important;
}

[data-link-hover-scale]::before, [data-link-hover-scale]::after {
	content: attr(data-link-hover-scale);
	position: absolute;
	white-space: nowrap;
	left: 0;
	transition: transform 0.5s cubic-bezier(0.65,0,0.35,1), opacity 0.5s cubic-bezier(0.65,0,0.35,1);
	font-size: inherit;
	color: var(--color-5);
}

[data-link-hover-scale]::before {
	top: 50%;
	transform: translateY(-50%) scale(1);
	opacity: 1;
}

[data-link-hover-scale]::after {
	top: 50%;
	transform: translateY(0%) scale(0.8);
	opacity: 0;
	color: var(--color-primary);
	font-weight: 500;
	font-size: inherit;
}

[data-link-hover-scale]:hover::before {
	opacity: 0;
	transform: translateY(-100%) scale(0.8);
}

[data-link-hover-scale]:hover::after {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

.animate-fill-text {
	z-index: 100;
}

.animate-fill-text div {
	background: linear-gradient( to right, rgb(255,255,255) 50%, rgba(0,0,0,0.2) 50% );
	background-size: 200% 100%;
	background-position-x: 100%;
	color: rgba(0,0,0,0);
	background-clip: text;
	-webkit-background-clip: text;
	width: -moz-fit-content;
	width: fit-content;
	margin: auto;
}

.animate-fill-text.no-fill-last div:last-of-type span:last-of-type {
	background: unset;
	color: var(--color-primary);
}

.simple-hover img {
	transition: transform 0.35s ease-in-out;
}

.simple-hover:hover img {
	transform: scale(1.05);
}

.modern-scroll {
	scrollbar-color: unset !important;
}

.modern-scroll ::-webkit-scrollbar, .modern-scroll ::-webkit-scrollbar-thumb, .modern-scroll ::-webkit-scrollbar-track {
	width: 5px;
	border: none;
	background: rgba(0,0,0,0);
}

.modern-scroll ::-webkit-scrollbar-button, .modern-scroll ::-webkit-scrollbar-track-piece, .modern-scroll ::-webkit-scrollbar-corner, .modern-scroll ::-webkit-resizer {
	display: none;
}

.modern-scroll ::-webkit-scrollbar-thumb {
	background-color: var(--color-light);
}

.modern-scroll ::-webkit-scrollbar-track {
	background-image: linear-gradient( to right, transparent 40%, var(--color-2), transparent 60% );
	background-repeat: repeat-y;
	background-size: contain;
	margin-top: 50px;
	margin-bottom: 50px;
}

#triumWrapper {
	width: 100%;
}

#triumWrapper .scrollbar-track {
	background: var(--color-1);
	width: 12px;
	z-index: 99999;
}

#triumWrapper .scrollbar-track .scrollbar-thumb {
	background: var(--color-primary);
	width: 12px;
	opacity: 1;
	border-radius: 0;
}

#triumWrapper .page-content {
	position: relative;
}

#triumWrapper .scroll-content {
	overflow-x: hidden;
}

.have-scroll {
	position: relative;
	display: flex;
	scrollbar-width: none;
}

.have-scroll .scroll-modern {
	position: sticky;
	height: 60%;
	width: 5px;
	background-image: linear-gradient( to right, transparent 40%, var(--color-2), transparent 60% );
	background-repeat: repeat-y;
	background-size: contain;
	z-index: 100;
	top: 20%;
	left: 100%;
}

.have-scroll .scroll-modern .scroll-thumb {
	width: 5px;
	position: absolute;
	background-color: var(--color-light);
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.have-scroll .scroll-modern .scroll-thumb:hover {
	background-color: var(--color-primary);
}

.have-scroll .scroll-modern .scroll-thumb:active {
	background-color: var(--color-primary);
}

.scrollbar-track-x {
	display: none !important;
}

.preloader .preloader-svg line {
	opacity: 0;
	transition-property: x1, x2, y1, y2;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

.menu {
	height: 130px;
	width: 100%;
	background-color: rgba(0,0,0,0);
	position: fixed;
	left: 0;
	top: 0;
	transition: height 0.4s linear, background-color 0.4s linear, top 0.4s linear;
	z-index: 19999;
}

.menu .site-nav .logo {
	width: 100%;
	height: 40px;
	display: flex;
	z-index: 779;
}

.menu .site-nav .logo .link-logo {
	width: inherit;
	overflow: hidden;
	display: inline-block;
	position: relative;
}

.menu .site-nav .logo .link-logo img {
	height: 40px;
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(0%,-50%) scale(1);
	transition: transform 0.5s cubic-bezier(0.65,0,0.35,1), opacity 0.5s cubic-bezier(0.65,0,0.35,1);
}

.menu .site-nav .logo .link-logo img:first-of-type {
	opacity: 1;
	transform: translate(0%,-50%) scale(1);
}

.menu .site-nav .logo .link-logo img:last-of-type {
	display: none;
	opacity: 0;
	transform: translate(0%,200%) scale(0.8);
}

.menu .site-nav .nav-links {
	height: 30px;
	position: relative;
	z-index: 777;
}

.menu .site-nav .nav-links .nav-toggle {
	color: var(--color-light);
	transition: left 0.3s ease;
	z-index: 1;
}

.menu .site-nav .nav-links .nav-toggle .toggle-name {
	overflow: hidden;
	width: 60px;
	height: 100%;
	transition: margin 0.5s cubic-bezier(0.65,0,0.35,1);
	font-weight: 300;
}

.menu .site-nav .nav-links .nav-toggle .toggle-name .menu-text, .menu .site-nav .nav-links .nav-toggle .toggle-name .open-text, .menu .site-nav .nav-links .nav-toggle .toggle-name .close-text {
	line-height: 1;
	position: absolute;
	left: 0;
	top: 50%;
	transition: transform 0.5s cubic-bezier(0.65,0,0.35,1), opacity 0.5s cubic-bezier(0.65,0,0.35,1);
}

.menu .site-nav .nav-links .nav-toggle .toggle-name .menu-text {
	opacity: 1;
	transform: translate(0%,-50%) scale(1);
}

.menu .site-nav .nav-links .nav-toggle .toggle-name .open-text {
	opacity: 0;
	transform: translate(0%,150%) scale(0.8);
}

.menu .site-nav .nav-links .nav-toggle .toggle-name .close-text {
	opacity: 0;
	transform: translate(0%,-150%) scale(0.8);
}

.menu .site-nav .nav-links .nav-toggle .toggle-mark {
	position: relative;
	width: 16px;
	height: 15px;
	border: 1px solid rgba(0,0,0,0);
	border-radius: 24px;
	transition: width 0.2s ease, height 0.2s ease, border 0.2s ease, top 0.2s ease;
	top: calc(50% - 9px);
}

.menu .site-nav .nav-links .nav-toggle .toggle-mark::before, .menu .site-nav .nav-links .nav-toggle .toggle-mark::after {
	content: "";
	position: absolute;
	background-color: var(--color-light);
	border-radius: 10px;
	width: 16px;
	height: 2px;
	transform: translate(-50%,-50%);
	transition: top 0.2s ease, transform 0.2s ease;
}

.menu .site-nav .nav-links .nav-toggle .toggle-mark::before {
	top: 0%;
}

.menu .site-nav .nav-links .nav-toggle .toggle-mark::after {
	top: 100%;
}

.menu .site-nav .nav-links.open .nav-toggle .toggle-mark {
	width: 64px;
	height: 48px;
	border: 1px solid var(--color-light);
	top: calc(50% - 24px);
	transition: width 0.2s 0.2s ease, height 0.2s 0.2s ease, top 0.2s 0.2s ease, border 0.2s 0.2s ease;
}

.menu .site-nav .nav-links.open .nav-toggle .toggle-mark::before {
	top: 50%;
	transform: translate(-50%,-50%) rotate(45deg);
}

.menu .site-nav .nav-links.open .nav-toggle .toggle-mark::after {
	top: 50%;
	transform: translate(-50%,-50%) rotate(-45deg);
}

.menu .site-nav .nav-links.open:hover .toggle-name .menu-text {
	opacity: 0;
	transform: translate(0%,150%) scale(0.8);
}

.menu .site-nav .nav-links.open:hover .toggle-name .close-text {
	opacity: 1;
	transform: translate(0%,-50%) scale(1);
}

.menu .site-nav .nav-links:not(.open):hover .toggle-name .menu-text {
	opacity: 0;
	transform: translate(0%,-150%) scale(0.8);
}

.menu .site-nav .nav-links:not(.open):hover .toggle-name .open-text {
	opacity: 1;
	transform: translate(0%,-50%) scale(1);
}

.menu .site-nav .nav-list {
	display: none;
	z-index: 1;
}

.menu .site-nav .nav-list .container .menu-links {
	padding-top: 130px;
}

.menu .site-nav .nav-list .container .menu-links .social-links {
	order: 1;
	border-width: 1px 0;
	border-style: solid none;
	border-color: rgba(255,255,255,0.1) rgba(0,0,0,0);
}

.menu .site-nav .nav-list .container .menu-links .social-links ul li {
	transition: all 0.25s linear;
}

.menu .site-nav .nav-list .container .menu-links .social-links ul li .social-link {
	display: inline-block;
	transition: color 0.35s ease, transform 0.35s ease;
}

.menu .site-nav .nav-list .container .menu-links .social-links ul li .social-link:hover, .menu .site-nav .nav-list .container .menu-links .social-links ul li .social-link:focus {
	color: var(--color-primary);
	transform: translateX(8px);
}

.menu .site-nav .nav-list .container .menu-links .social-links ul li .social-link:focus {
	outline: 2px solid var(--color-black-2);
}

.menu .site-nav .nav-list .container .menu-links .links {
	height: 75%;
	overflow-y: auto;
	overflow-x: hidden;
	order: 0;
}

.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv {
	height: 100%;
	margin: auto;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li {
	display: flex;
	width: -moz-fit-content;
	width: fit-content;
	block-size: -moz-fit-content;
	block-size: fit-content;
	align-items: center;
	margin-bottom: 20px;
	transition: all 0.2s linear;
}

.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li a {
	transition: all 0.25s linear;
	color: var(--color-3);
}

.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li:hover a {
	color: var(--color-light);
}

.menu .site-nav .nav-list .container .menu-contact .menu-contact-email .question {
	margin-bottom: 10px;
	color: var(--color-5);
	opacity: 0.4;
}

.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone {
	display: flex;
	justify-content: center;
	align-items: end;
}

.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a {
	display: inline-flex;
	align-items: center;
	transition: color 0.3s ease, transform 0.2s ease, letter-spacing 0.3s cubic-bezier(0.78,0.28,0,0.76);
}

.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a:hover {
	color: var(--color-primary);
	transform: translateX(5px);
	letter-spacing: 1.5px;
}

.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a:hover span {
	color: var(--color-light);
}

.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a:focus {
	outline: 3px solid var(--color-primary);
	letter-spacing: 1.5px;
}

.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a span {
	color: var(--color-primary);
	transition: color 0.3s ease;
}

.parallax-image {
	z-index: 1;
	overflow: hidden;
	top: 0;
	left: 0;
}

.parallax-image .cover-image, .parallax-image img {
	position: absolute;
	top: -20%;
	left: 0;
	width: 100%;
	height: 120%;
	padding: 0;
	will-change: scroll-position;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
	transform: scale(1);
}

.circle-link {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	display: block;
	position: relative;
	letter-spacing: 6.5px;
	transition: background-color 0.6s ease, transform 0.6s ease;
}

.circle-link:hover {
	transform: scale(1.1);
}

.circle-link:hover .circle-inner > svg {
	animation: rotate360 12s linear infinite;
}

.circle-link:hover .circle-inner .slot .mouse-scroll, .circle-link:hover .circle-inner .slot svg {
	transform: scale(1.15);
}

.circle-link .circle-inner {
	padding: 5px;
	border-radius: 50%;
	position: absolute;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	transition: background 0.6s ease, transform 0.6s ease, color 0.6s ease;
}

.circle-link .circle-inner::before, .circle-link .circle-inner::after {
	content: "";
	background: linear-gradient(to top,transparent 45%,transparent 80%) padding-box;
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	border-radius: 50%;
	transition: background 0.7s ease, border 0.7s ease, color 0.7s ease;
}

.circle-link .circle-inner::before {
	width: 112%;
	height: 112%;
	background: linear-gradient(to top,currentColor 45%,transparent 80%) padding-box;
}

.circle-link .circle-inner::after {
	width: 100%;
	height: 100%;
	border: 1px dashed var(--color-black);
	z-index: -1;
}

.circle-link .circle-inner > svg {
	display: none;
}

.circle-link .circle-inner svg {
	transform: rotate(-15deg);
	transition: transform 0.5s ease;
}

.circle-link .circle-inner svg path {
	fill: rgba(0,0,0,0);
}

.circle-link .circle-inner svg textPath {
	word-spacing: 1px;
	font-weight: 400;
	font-size: 8px;
	transition: fill 0.5s ease;
}

.circle-link .circle-inner .slot {
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s ease;
}

.circle-link .circle-inner .slot svg {
	height: 50%;
	width: 50%;
	transition: transform 0.3s ease, fill 0.3s ease;
}

.circle-link.transparent-half-on-dark:hover {
	background-color: var(--color-primary);
}

.circle-link.transparent-half-on-dark:hover .circle-inner::before {
	background: linear-gradient( to top, var(--color-primary) 45%, transparent 80% ) padding-box;
	transition: background 0.5s ease;
}

.circle-link.transparent-half-on-dark:hover .circle-inner .slot .mouse-scroll {
	background-color: var(--color-5);
}

.circle-link.transparent-half-on-dark:hover .circle-inner .slot .mouse-scroll::after {
	background-color: var(--color-primary);
}

.circle-link.transparent-half-on-dark .circle-inner {
	background-color: rgba(0,0,0,0);
	color: var(--color-black);
}

.circle-link.transparent-half-on-dark .circle-inner::after {
	border: 1px dashed var(--color-5);
}

.circle-link.transparent-half-on-dark .circle-inner svg textPath {
	fill: var(--color-5);
}

.circle-link.transparent-half-on-light:hover {
	background-color: var(--color-primary);
}

.circle-link.transparent-half-on-light:hover .circle-inner::before {
	background: linear-gradient( to top, var(--color-primary) 45%, transparent 80% ) padding-box;
}

.circle-link.transparent-half-on-light:hover .circle-inner::after {
	border: 1px dashed var(--color-5);
}

.circle-link.transparent-half-on-light:hover .circle-inner svg textPath {
	fill: var(--color-5);
}

.circle-link.transparent-half-on-light:hover .circle-inner .slot .mouse-scroll {
	background-color: var(--color-5);
}

.circle-link.transparent-half-on-light:hover .circle-inner .slot .mouse-scroll::after {
	background-color: var(--color-primary);
}

.circle-link.transparent-half-on-light:hover .circle-inner .slot svg path {
	fill: var(--color-5);
}

.circle-link.transparent-half-on-light .circle-inner::after {
	border: 1px dashed var(--color-black);
}

.circle-link.transparent-half-on-light .circle-inner svg textPath {
	fill: var(--color-black);
}

.circle-link.transparent-half-on-light .circle-inner .slot svg path {
	fill: var(--color-primary);
}

.circle-link.transparent-on-dark .circle-inner {
	background-color: rgba(0,0,0,0);
	color: var(--color-black);
}

.circle-link.transparent-on-dark .circle-inner::before {
	background: linear-gradient(to top,transparent 45%,transparent 80%) padding-box;
}

.circle-link.transparent-on-dark .circle-inner::after {
	border: 1px dashed var(--color-5);
}

.circle-link.transparent-on-dark .circle-inner svg textPath {
	fill: var(--color-5);
}

.circle-link.circle-primary {
	background-color: var(--color-primary);
}

.circle-link.circle-primary:hover {
	background-color: var(--color-black);
}

.circle-link.circle-primary:hover .circle-inner::before {
	background: linear-gradient(to top, var(--color-black) 45%, transparent 80%) padding-box;
}

.circle-link.circle-primary:hover .circle-inner::after {
	border: 1px dashed var(--color-5);
}

.circle-link.circle-primary:hover .circle-inner svg textPath {
	fill: var(--color-5);
	font-weight: 500;
}

.circle-link.circle-primary:hover .circle-inner .slot .mouse-scroll {
	background-color: var(--color-primary);
}

.circle-link.circle-primary:hover .circle-inner .slot .mouse-scroll::after {
	background-color: var(--color-black);
}

.circle-link.circle-primary:hover .circle-inner .slot svg path {
	fill: var(--color-primary);
}

.circle-link.circle-primary .circle-inner {
	background-color: rgba(0,0,0,0);
	color: var(--color-black);
}

.circle-link.circle-primary .circle-inner::before {
	background: linear-gradient( to top, var(--color-primary) 45%, transparent 80% ) padding-box;
}

.circle-link.circle-primary .circle-inner::after {
	border: 1px dashed var(--color-5);
}

.circle-link.circle-primary .circle-inner svg textPath {
	fill: var(--color-5);
}

.circle-link.circle-primary .circle-inner .slot .mouse-scroll {
	background-color: var(--color-5);
}

.circle-link.circle-primary .circle-inner .slot .mouse-scroll::after {
	background-color: var(--color-primary);
}

.circle-link.circle-primary .circle-inner .slot svg path {
	fill: var(--color-5);
}

.circle-link.primary-half-on-light:hover {
	background-color: var(--color-black);
}

.circle-link.primary-half-on-light:hover .circle-inner::before {
	background: linear-gradient(to top, var(--color-black) 45%, transparent 80%) padding-box;
}

.circle-link.primary-half-on-light:hover .circle-inner::after {
	border: 1.5px dashed var(--color-primary);
}

.circle-link.primary-half-on-light:hover .circle-inner svg textPath {
	fill: var(--color-primary);
	font-weight: 500;
}

.circle-link.primary-half-on-light:hover .circle-inner .slot .mouse-scroll {
	background-color: var(--color-primary);
}

.circle-link.primary-half-on-light:hover .circle-inner .slot .mouse-scroll::after {
	background-color: var(--color-5);
}

.circle-link.primary-half-on-light:hover .circle-inner .slot svg path {
	fill: var(--color-primary);
}

.circle-link.primary-half-on-light .circle-inner::after {
	border: 1px dashed var(--color-5);
}

.circle-link.primary-half-on-light .circle-inner svg textPath {
	fill: var(--color-5);
}

.circle-link.primary-half-on-light .circle-inner .slot svg path {
	fill: var(--color-5);
}

.circle-link.circle-light {
	background-color: var(--color-5);
}

.circle-link.circle-light:hover {
	background-color: var(--color-black);
}

.circle-link.circle-light:hover .circle-inner::before {
	background: linear-gradient(to top,transparent 45%,transparent 80%) padding-box;
}

.circle-link.circle-light:hover .circle-inner::after {
	border: 1.5px dashed var(--color-5);
}

.circle-link.circle-light:hover .circle-inner svg textPath {
	fill: var(--color-5);
	font-weight: 500;
}

.circle-link.circle-light:hover .circle-inner .slot .mouse-scroll {
	background-color: var(--color-primary);
}

.circle-link.circle-light:hover .circle-inner .slot .mouse-scroll::after {
	background-color: var(--color-5);
}

.circle-link.circle-light:hover .circle-inner .slot svg path {
	fill: var(--color-primary);
}

.circle-link.circle-light .circle-inner::before {
	background: linear-gradient(to top,transparent 45%,transparent 80%) padding-box;
}

.circle-link.circle-light .circle-inner::after {
	border: 1px dashed var(--color-black);
	z-index: 1;
}

.circle-link.circle-light .circle-inner svg textPath {
	fill: var(--color-black);
}

.circle-link.circle-light .circle-inner .slot svg path {
	fill: var(--color-primary);
}

.mouse-scroll {
	background-color: var(--color-primary);
	width: 30px;
	height: 50px;
	border-radius: 50px;
	transition: transform 0.3s ease, background 0.3s ease;
}

.mouse-scroll::after {
	content: "";
	background-color: var(--color-black);
	width: 3px;
	height: 10px;
	transform: translate(-50%,-50%);
	top: 30%;
	left: 50%;
	border-radius: 50px;
	position: absolute;
	z-index: 1;
	transition: transform 0.3s ease, background 0.3s ease;
}

.link-one {
	width: -moz-fit-content;
	width: fit-content;
	block-size: -moz-fit-content;
	block-size: fit-content;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: -moz-fit-content;
	height: fit-content;
	position: relative;
	cursor: pointer;
	font-weight: 100;
}

.link-one::after {
	content: "";
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: -16px;
	left: 0;
	background-color: currentColor;
	transition: width 0.3s ease-in-out;
}

.link-one:hover::after {
	width: 100%;
}

.link-one:hover img, .link-one:hover svg {
	margin-top: 3px;
	transform: rotate(15deg);
	transition: transform 0.3s ease-in-out, margin-top 0.3s ease-in-out;
}

.link-one a, .link-one button, .link-one input {
	padding-right: 10px;
	font-weight: 500;
	flex-shrink: 0;
}

.link-one img, .link-one svg {
	transition: all 0.2s linear;
	margin-top: -5px;
	width: 12px;
	height: 12px;
}

.link-one svg path {
	fill: currentColor;
}

.link-one.icon-primary img, .link-one.icon-primary svg {
	transition: transform 0.2s linear;
	margin-top: -5px;
}

.link-one.icon-primary svg path {
	fill: var(--color-primary);
}

.normal-link {
	width: -moz-fit-content;
	width: fit-content;
	block-size: -moz-fit-content;
	block-size: fit-content;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: -moz-fit-content;
	height: fit-content;
	position: relative;
	cursor: pointer;
	padding-bottom: 5px;
}

.normal-link::after {
	content: "";
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0px;
	left: 0;
	background-color: currentColor;
	transition: all 0.3s ease;
}

.normal-link:hover::after {
	width: calc(100% + 16px);
}

.normal-link:hover img, .normal-link:hover svg {
	top: 14px;
	right: -22px;
	opacity: 1;
}

.normal-link a, .normal-link button, .normal-link input {
	margin-right: 10px;
	font-weight: 500;
}

.normal-link img, .normal-link svg {
	width: 12px;
	height: 12px;
	position: absolute;
	transition: all 0.3s ease;
	transform: translate(-50%,-50%);
	top: 20px;
	right: -7px;
	opacity: 0;
	z-index: -1;
}

.normal-link svg path {
	fill: currentColor;
}

.normal-link.icon-primary svg path {
	fill: var(--color-primary);
}

.next-section .data {
	padding: 120px 0px;
	border-width: 1px 0 1px 0;
	border-style: solid;
	border-color: var(--color-2);
}

.works-pin .pin-works .single-item .contain-title h2, .services .services-accordion .accordion-group .accordion-content .number, .display-1, .display-2, .display-3, .h1, .h2, .h3, .h4, .h5, .h6, .button-xs {
	font-family: var(--font-family);
	font-weight: 700;
}

.works-pin .pin-works .single-item .contain-title h2, .h1 {
	font-size: var(--h1);
	line-height: 1.25;
}

.work-2 .grid-item .item-data .item-title, .services .services-accordion .accordion-group .accordion-content .number, .h2, .h3, .h4, .h5, .h6 {
	line-height: 129%;
}

.h2 {
	font-size: var(--h2);
}

.h3 {
	font-size: var(--h3);
}

.h4 {
	font-size: var(--h4);
}

.h5 {
	font-size: var(--h5);
}

.services .services-accordion .accordion-group .accordion-content .number, .h6 {
	font-size: var(--h6);
}

.services .services-accordion .accordion-group .accordion-content .data p, .body-l {
	font-size: var(--body-l);
	line-height: 200%;
}

.body-xs {
	font-size: var(--body-xs);
	line-height: 24px;
}

.header-2 .container-image .mask-container .mask {
	width: 20vw;
	height: 20vw;
	z-index: 0;
	filter: blur(30px) drop-shadow(0 0 10px var(--color-primary));
	transition: transform 0.2s linear;
}

.header-2 .contain-image svg {
	width: 98px;
	height: 98px;
}

.header-2 .contain-image .have-image .corner-box {
	height: 350px;
	border-radius: 60px 0 60px 0;
}

.header-2 .contain-image .have-image .corner-box .corner__rt {
	width: 40%;
	height: 55px;
	position: absolute;
	top: 0;
	right: 0;
	background-color: currentColor;
	border-radius: 0 0 0 60px;
	z-index: 100;
}

.header-2 .contain-image .have-image .corner-box .corner__rt::before, .header-2 .contain-image .have-image .corner-box .corner__rt::after {
	content: "";
	width: 45px;
	height: 160px;
	position: absolute;
	border-top-right-radius: 111px;
	box-shadow: 0 -60px 0 0 currentColor;
}

.header-2 .contain-image .have-image .corner-box .corner__rt::before {
	top: 0px;
	left: -32px;
}

.header-2 .contain-image .have-image .corner-box .corner__rt::after {
	top: 100%;
	right: 0px;
}

.header-2 .contain-image .have-image .corner-box .corner__lb {
	width: 55%;
	height: 55px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: currentColor;
	border-radius: 0 60px 0 0;
	z-index: 100;
}

.header-2 .contain-image .have-image .corner-box .corner__lb::before, .header-2 .contain-image .have-image .corner-box .corner__lb::after {
	content: "";
	width: 65px;
	height: 105px;
	position: absolute;
	box-shadow: 0 50px 0 0 currentColor;
	border-bottom-left-radius: 52px;
}

.header-2 .contain-image .have-image .corner-box .corner__lb::before {
	bottom: 100%;
	left: 0;
}

.header-2 .contain-image .have-image .corner-box .corner__lb::after {
	height: 79px;
	left: 94%;
	bottom: 0;
}

.box-image {
	border-radius: 40px;
}

.contain-liquid {
	width: 100%;
	display: flex;
	justify-content: center;
}

.contain-liquid .liquid {
	position: relative;
	width: 300px;
	height: 300px;
	filter: url(#liquid);
}

.contain-liquid .liquid span {
	position: absolute;
	top: 0;
	left: 0;
	width: 15%;
	height: 15%;
	display: block;
	box-shadow: 0 0 18px #ef7427;
	background: #ef7427;
	animation-delay: calc(0.2s * var(--i));
	border-radius: 5%;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
}

.contain-liquid .liquid span:nth-of-type(2) {
	animation: animate-2 5s ease infinite;
}

.contain-liquid .liquid span:nth-of-type(3) {
	animation: animate-3 5s ease infinite;
}

.contain-liquid .liquid span:nth-of-type(4) {
	animation: animate-4 5s ease infinite;
}

.contain-liquid .liquid svg {
	width: 0;
	height: 0;
}

#liquid_svg {
	width: 0;
	height: 0;
	visibility: hidden;
	position: fixed;
	z-index: -1;
	top: -1px;
	left: -1px;
}

.animate-horizontal-scroll .scrolling-wrapper {
	-webkit-overflow-scrolling: touch;
	row-gap: 30px;
	gap: 20px 20px;
	scroll-snap-type: x mandatory;
	transition: padding 0.5s linear;
}

.animate-horizontal-scroll .scrolling-wrapper .item {
	scroll-snap-align: start;
	border-radius: 40px;
	width: 100%;
}

.animate-horizontal-scroll .scrolling-wrapper .item img {
	transition: transform 0.3s ease-in-out;
}

.animate-horizontal-scroll .scrolling-wrapper .item:hover img {
	transform: scale(1.05);
}

.animate-horizontal-scroll .scrolling-wrapper .item.discover {
	padding: 80px 40px;
}

.services {
	counter-reset: item;
}

.services .services-accordion {
	background-color: var(--color-5);
	transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.services .services-accordion .accordion-group {
	width: 100%;
	left: 0;
	overflow: hidden;
	transition: all 0.3s linear;
	cursor: pointer;
	margin-bottom: 30px;
	display: inline-flex;
	flex-shrink: 1;
	border-bottom: 1px solid var(--color-black);
	color: var(--color-light);
}

.services .services-accordion .accordion-group:last-of-type {
	margin-bottom: 0px;
}

.services .services-accordion .accordion-group .accordion-content {
	width: 100%;
	transition: margin 0.25s 0.5s linear, height 0.25s linear;
}

.services .services-accordion .accordion-group .accordion-content .number {
	margin-bottom: 20px;
	color: var(--color-black);
}

.services .services-accordion .accordion-group .accordion-content .number::before {
	counter-increment: item;
	content: counter(item,decimal-leading-zero) ".";
	color: inherit;
}

.services .services-accordion .accordion-group .accordion-content .data {
	display: flex;
	flex-flow: column;
	position: relative;
}

.services .services-accordion .accordion-group .accordion-content .data .accordion-menu {
	width: -moz-fit-content;
	width: fit-content;
	block-size: -moz-fit-content;
	block-size: fit-content;
	font-family: var(--font-family);
	font-size: var(--display-3);
	font-weight: 700;
	text-align: left;
	line-height: 1;
	color: var(--color-black);
	cursor: pointer;
	transition: color 0.6s linear, z-index 0s linear;
	z-index: 1;
}

.services .services-accordion .accordion-group .accordion-content .data p, .services .services-accordion .accordion-group .accordion-content .data .service-image {
	width: 100%;
	transition: height 0.4s linear;
}

.services .services-accordion .accordion-group .accordion-content .data p {
	margin-bottom: 30px;
	color: var(--color-black);
}

.services .services-accordion .accordion-group .accordion-content .data .ac-body {
	padding-bottom: 40px;
}

.services .services-accordion .accordion-group .accordion-content .data .service-image {
	overflow: hidden;
	border-radius: 70px;
	height: 350px;
	right: 0;
	bottom: 0;
	z-index: 2;
}

.services .services-accordion .accordion-group .accordion-content .data .service-image img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.services .services-accordion .accordion-group .accordion-content:not(.open) .number {
	color: var(--color-black);
}

.services .services-accordion .accordion-group .accordion-content.open .number {
	color: var(--color-light);
}

.services .services-accordion .accordion-group .accordion-content.open .data .accordion-menu {
	color: var(--color-black);
}

.services .services-accordion .accordion-group .accordion-content.open .data .accordion-menu:hover {
	z-index: 10;
	color: var(--color-black);
}

.services-toggle .services-accordion {
	background-color: var(--color-primary);
}

.services-toggle .services-accordion .accordion-group .accordion-content.open .data .accordion-menu {
	position: relative;
	color: var(--color-light);
}

.services-toggle .services-accordion .accordion-group .accordion-content.open .data .accordion-menu:hover {
	z-index: 10;
	color: var(--color-black);
}

.services-toggle .services-accordion .accordion-group .accordion-content.open .data p {
	color: var(--color-light);
}

.works-pin .pin-works {
	width: calc(100% - 100px);
	margin: auto;
}

.works-pin .pin-works .single-item {
	width: 100%;
	height: 65vh;
	display: flex;
	border-radius: 40px;
	overflow: hidden;
	position: relative;
}

.works-pin .pin-works .single-item .contain-image {
	width: 100%;
}

.works-pin .pin-works .single-item .contain-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.works-pin .pin-works .single-item .contain-title {
	width: 80%;
	height: 100%;
	margin: auto 10%;
	display: flex;
	align-items: center;
	position: absolute;
}

.works-pin .pin-works .single-item .contain-title h2 {
	-webkit-text-stroke: 1px;
	z-index: 100;
}

.next-page {
	width: calc(100% - 20px);
	border-radius: 40px;
	margin: 0 auto;
	padding: 80px 30px;
	position: relative;
	overflow: hidden;
}

.footer-marquee .marquee-content a, .footer-marquee .marquee-content span {
	font-family: var(--font-family);
	position: relative;
	font-size: var(--display-2);
	font-weight: 700;
	line-height: 1;
	background: linear-gradient(to right, var(--color-light), transparent);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: rgba(0,0,0,0);
	display: flex;
	justify-content: center;
	align-items: center;
}

.main-footer .footer-logo:hover img {
	transform: scale(0.95);
}

.main-footer .footer-logo img {
	transition: transform 0.35s linear;
}

.main-footer .marquee {
	left: 50px;
}

.main-footer .copyright .contain-text p:first-of-type a::before {
	color: var(--color-primary);
}

.main-footer .copyright .to-top p a::before {
	color: var(--color-light) !important;
}

.main-footer .copyright .to-top .scroll-to-top {
	margin-top: 10px;
	background-color: rgba(0,0,0,0);
	width: 66px;
	height: 90px;
	border-radius: 38px;
	border: 1px solid var(--color-5);
	position: relative;
	transition: background 0.15s linear, border 0.1s linear;
}

.main-footer .copyright .to-top .scroll-to-top span {
	width: 20px;
	display: block;
	position: absolute;
	transform: translate(-50%,-50%);
	top: calc(50% - 1px);
	left: 50%;
}

.main-footer .copyright .to-top .scroll-to-top span::before, .main-footer .copyright .to-top .scroll-to-top span::after {
	content: "";
	position: absolute;
	width: 15px;
	height: 3px;
	background-color: var(--color-light);
	top: 50%;
	transition: background 0.6s ease;
}

.main-footer .copyright .to-top .scroll-to-top span::before {
	border-radius: 5px 0px 0px 5px;
	transform: rotate(-45deg);
	left: -3px;
}

.main-footer .copyright .to-top .scroll-to-top span::after {
	border-radius: 0px 5px 5px 0px;
	transform: rotate(45deg);
	left: 6px;
}

.main-footer .copyright .to-top .scroll-to-top:hover {
	background-color: var(--color-5);
	border: 0px solid rgba(0,0,0,0);
}

.main-footer .copyright .to-top .scroll-to-top:hover span::before, .main-footer .copyright .to-top .scroll-to-top:hover span::after {
	background-color: var(--color-black);
	border-color: rgba(0,0,0,0);
}

.contact form .field {
	border-bottom: 1px solid var(--color-2);
}

.contact form .field input::-moz-placeholder, .contact form .field textarea::-moz-placeholder {
	-moz-transition: opacity 0.25s ease;
	transition: opacity 0.25s ease;
}

.contact form .field input::placeholder, .contact form .field textarea::placeholder {
	transition: opacity 0.25s ease;
}

.contact form .field input:focus::-moz-placeholder, .contact form .field textarea:focus::-moz-placeholder {
	opacity: 0.2;
}

.contact form .field input:focus::placeholder, .contact form .field textarea:focus::placeholder {
	opacity: 0.2;
}

.contact form .agree-check .agree:hover input ~ .checkmark {
	background-color: var(--color-2);
}

.contact form .agree-check .agree input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.contact form .agree-check .agree input:checked ~ .checkmark {
	background-color: var(--color-primary);
}

.contact form .agree-check .agree input:checked ~ .checkmark:after {
	display: block;
}

.contact form .agree-check .agree .checkmark {
	background-color: var(--color-5);
	border-radius: 5px;
	overflow: hidden;
	position: absolute;
	transform: translate(0%,-50%);
	top: 50%;
	left: 0%;
	height: 25px;
	width: 25px;
	transition: all 0.2s linear;
}

.contact form .agree-check .agree .checkmark:after {
	content: "";
	position: absolute;
	display: none;
	left: 10px;
	top: 6px;
	width: 5px;
	height: 10px;
	border: solid var(--color-light);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: all 0.3s linear;
}

.work-2 .grid-item .item-data .tags, .body-m {
	line-height: 165%;
	font-size: var(--body-m);
}

.have-filter-masonry .filter-buttons {
	background-color: var(--color-black);
	padding-bottom: 30px;
	margin-bottom: 120px;
	justify-content: center;
	flex-flow: column;
}

.work-2 .con-10 {
	border-radius: 0;
}

.work-2 .filter-masonry {
	width: calc(100% + 60px);
}

.work-2 .grid-item {
	width: 100%;
	padding: 30px;
	overflow: hidden;
	display: flex;
	flex-flow: column;
}

.work-2 .grid-item:hover .image-link img {
	transform: scale(1.05);
}

.work-2 .grid-item .image-link {
	margin-bottom: 40px;
	width: 100%;
	display: flex;
	overflow: hidden;
	border-radius: 80px;
}

.work-2 .grid-item .image-link img {
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	transition: transform 500ms ease-out;
	transform: scale(1.03);
}

.work-2 .grid-item .item-data {
	padding-bottom: 50px;
}

.work-2 .grid-item .item-data .item-title, .work-2 .grid-item .item-data .tags {
	text-align: center;
}

.work-2 .grid-item .item-data .item-title {
	display: block;
	block-size: -moz-fit-content;
	block-size: fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin-bottom: 15px;
}

.work-2 .grid-item .item-data .tags {
	display: flex;
	justify-content: center;
}

.work-2 .grid-item .item-data .tags a {
	margin-right: 30px;
	opacity: 0.5;
	transition: opacity 0.6s ease;
}

.work-2 .grid-item .item-data .tags a:last-of-type {
	margin-right: 0px;
}

.work-2 .grid-item .item-data .tags a:hover {
	opacity: 1;
}

.filter-buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	border-bottom: 1px solid var(--color-2);
}

.filter-buttons button {
	width: -moz-fit-content;
	width: fit-content;
	block-size: -moz-fit-content;
	block-size: fit-content;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: -moz-fit-content;
	height: fit-content;
	padding-bottom: 8px;
	position: relative;
	cursor: pointer;
	margin-right: 0px;
	margin-bottom: 20px;
	opacity: 0.5;
	color: var(--color-light);
	transition: all 0.2s ease-in-out;
}

.filter-buttons button::after {
	content: "";
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--color-light);
}

.filter-buttons button:hover, .filter-buttons button.active {
	opacity: 1;
}

.filter-buttons button:hover::after, .filter-buttons button.active::after {
	width: calc(100% + 15px);
}

.filter-buttons button:hover img, .filter-buttons button:hover svg, .filter-buttons button.active img, .filter-buttons button.active svg {
	transform: translate(20px,-3px);
	opacity: 1;
	transition: all 0.2s ease-in-out;
}

.filter-buttons button span {
	font-weight: 500;
}

.filter-buttons button img, .filter-buttons button svg {
	width: 12px;
	height: 12px;
	transition: all 0.2s ease-in-out;
	margin-top: 0px;
	margin-left: 5px;
	transform: translate(0px,0px);
	opacity: 0;
	z-index: -1;
	position: absolute;
}

.have-filter-masonry .filter-masonry {
	position: relative;
	width: 100%;
}

.have-filter-masonry .filter-masonry .grid-item {
	transition: opacity 0.2s linear, transform 0.3s linear, left 0.5s linear, top 0.5s linear;
	width: 100%;
}

.have-filter-masonry .filter-masonry .grid-item.active {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.2s linear, transform 0.3s linear, left 0.5s linear, top 0.5s linear;
}

.have-filter-masonry .filter-masonry .grid-item.hidden {
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.4s ease-out, transform 0.4s ease-out, left 0s ease-out, top 0s ease-out;
}

.contain-marquee {
	width: 100vw;
	position: relative;
	overflow-x: clip;
}

.contain-marquee .marquee-1, .contain-marquee .marquee-2 {
	width: 100%;
	left: 0;
	display: flex;
	overflow: hidden;
	position: relative;
	text-wrap: nowrap;
}

.contain-marquee .marquee-1 span, .contain-marquee .marquee-2 span {
	font-family: var(--font-family);
	position: relative;
	font-size: var(--h1);
	font-weight: 400;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 130px;
}

.contain-marquee .marquee-1 span::after, .contain-marquee .marquee-2 span::after {
	content: "-";
	position: absolute;
	left: calc(100% + 50px);
	color: rgba(0,0,0,0);
	-webkit-text-stroke: 1px;
	-webkit-text-stroke-color: var(--color-light);
}

.contain-marquee .marquee-1 .marquee-content, .contain-marquee .marquee-2 .marquee-content {
	display: flex;
	position: relative;
}

.contain-marquee .marquee-1 {
	border-top: 1px solid var(--color-3);
	border-bottom: 1px solid var(--color-3);
	padding: clamp(30px,2vw,70px) 0;
	position: absolute;
}

.contain-marquee .marquee-1 .marquee-content span {
	background: linear-gradient( to right, var(--color-light) 50%, var(--color-black) 100% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: rgba(0,0,0,0);
	font-size: var(--h3);
}

.contain-marquee .marquee-1 .marquee-content span:nth-of-type(2n) {
	background: linear-gradient( to right, var(--color-primary) 50%, var(--color-black) 100% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: rgba(0,0,0,0);
}

.contain-marquee .marquee-2 {
	width: 120vw;
	left: -10vw;
	background-color: var(--color-primary);
	padding: clamp(30px,2vw,50px) 0;
	transform: rotate(-15deg);
	top: -80px;
	z-index: 1;
	position: absolute;
}

.contain-marquee .marquee-2 .marquee-content span {
	-webkit-text-fill-color: var(--color-light);
	color: var(--color-light);
}

.contain-marquee .marquee-2 .marquee-content span:nth-of-type(2n) {
	background: linear-gradient( to right, var(--color-primary) -20%, var(--color-black) 100% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: rgba(0,0,0,0);
}

.contain-marquee .marquee-2 .marquee-content span:nth-of-type(2n)::after {
	-webkit-text-fill-color: rgba(0,0,0,0);
}

.contain-marquee .marquee-error {
	width: calc(100% - 20px);
	bottom: 45px;
	border: 1px solid var(--color-3);
	border-radius: 50px;
	transform: translateX(-50%);
	left: 50%;
}

@keyframes animate-2 {
	0% {
		top: 50%;
		left: 50%;
	}

	25%, 40% {
		top: 34%;
		left: 33%;
	}

	50%, 60% {
		top: 32%;
		left: 32%;
	}

	80% {
		top: 68%;
		left: 32%;
	}

	100% {
		top: 50%;
		left: 50%;
	}
}

@keyframes animate-3 {
	0% {
		top: 50%;
		left: 50%;
	}

	25%, 40% {
		top: 34%;
		left: 67%;
	}

	50%, 60% {
		top: 32%;
		left: 68%;
	}

	80% {
		top: 32%;
		left: 32%;
	}

	100% {
		top: 50%;
		left: 50%;
	}
}

@keyframes animate-4 {
	0% {
		top: 50%;
		left: 50%;
	}

	25%, 40% {
		top: 66%;
		left: 67%;
	}

	50%, 60% {
		top: 68%;
		left: 68%;
	}

	80% {
		top: 32%;
		left: 68%;
	}

	100% {
		top: 50%;
		left: 50%;
	}
}

@keyframes rotate360 {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@media only screen and (min-width: 481px) {
	.con {
		padding-left: 50px;
		padding-right: 50px;
	}
}

@media only screen and (min-width: 769px) {
	.body-l {
		line-height: 167%;
	}

	.con {
		width: calc(100% - 15px);
		padding: 100px 0px;
	}

	.con-10 {
		width: calc(100% - 15px);
	}

	.mt-section {
		margin-top: 100px;
	}

	.mb-section {
		margin-bottom: 100px;
	}

	.my-section {
		margin-top: 100px;
		margin-bottom: 100px;
	}

	.pt-section {
		padding-top: 100px;
	}

	.pb-section {
		padding-bottom: 100px;
	}

	.py-section {
		padding-top: 100px;
		padding-bottom: 100px;
	}

	.parallax-image-large-screen {
		z-index: 1;
		overflow: hidden;
		top: 0;
		left: 0;
	}

	.parallax-image-large-screen .cover-image, .parallax-image-large-screen img {
		position: absolute;
		top: -20%;
		left: 0;
		width: 100%;
		height: 120% !important;
		padding: 0;
		will-change: scroll-position;
		-o-object-fit: cover;
		object-fit: cover;
		-o-object-position: center;
		object-position: center;
		transform: scale(1);
	}

	.circle-link .circle-inner .slot svg {
		height: 60%;
		width: 60%;
	}

	.services .services-accordion .accordion-group .accordion-content .data p, .body-l {
		line-height: 167%;
	}

	.header-2 .contain-image svg {
		width: 148px;
		height: 148px;
	}

	.header-2 .contain-image .have-image .corner-box {
		height: 550px;
	}

	.header-2 .contain-image .have-image .corner-box .corner__rt::before, .header-2 .contain-image .have-image .corner-box .corner__rt::after {
		width: 60px;
	}

	.header-2 .contain-image .have-image .corner-box .corner__rt::before {
		left: -53px;
	}

	.header-2 .contain-image .have-image .corner-box .corner__rt {
		height: 80px;
	}

	.header-2 .contain-image .have-image .corner-box .corner__lb::after {
		height: 105px;
		left: 100%;
	}

	.header-2 .contain-image .have-image .corner-box .corner__lb {
		height: 100px;
	}

	.animate-horizontal-scroll .scrolling-wrapper {
		gap: 20px 20px;
	}

	.animate-horizontal-scroll .scrolling-wrapper .item {
		width: calc(50% - 10px);
		border-radius: 80px;
	}

	.services .services-accordion .accordion-group {
		width: 100%;
	}

	.services .services-accordion .accordion-group .accordion-content {
		display: flex;
		width: auto;
	}

	.services .services-accordion .accordion-group .accordion-content .number {
		width: 100px;
		height: 100px;
		margin-bottom: 0px;
		padding-top: 10px;
		padding-right: 30px;
		display: flex;
		justify-content: center;
		flex-shrink: 0;
	}

	.services .services-accordion .accordion-group .accordion-content .data p {
		max-width: 85%;
	}

	.services .services-accordion .accordion-group .accordion-content .data .service-image {
		height: 480px;
	}

	.services .services-accordion .accordion-group .accordion-content:not(.open) .number {
		background: linear-gradient( to right, var(--color-black-2) 25%, transparent 75% );
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: rgba(0,0,0,0);
	}

	.services .services-accordion .accordion-group .accordion-content:not(.open) .data .accordion-menu {
		background: linear-gradient( to right, var(--color-black) 0%, var(--color-primary) 105% );
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: rgba(0,0,0,0);
	}

	.works-pin .pin-works {
		width: calc(100% - 200px);
	}

	.footer-marquee .marquee-content::after {
		content: "";
		background-color: var(--color-black-2);
		width: 100%;
		height: 39%;
		position: absolute;
		left: 0;
		bottom: 0;
		border-top: 1px solid rgba(233,236,242,0.1);
		z-index: 100;
	}

	.main-footer .copyright .to-top .scroll-to-top {
		margin-top: 0px;
	}

	.have-filter-masonry .filter-buttons {
		flex-flow: row;
	}

	.work-2 .grid-item {
		width: 50%;
	}

	.work-2 .grid-item:last-of-type, .work-2 .grid-item:nth-last-child(2) {
		margin-bottom: 0px;
		padding-bottom: 0;
	}

	.work-2 .grid-item .item-data .item-title {
		margin-bottom: 15px;
	}

	.filter-buttons {
		justify-content: flex-end;
		flex-flow: row;
	}

	.filter-buttons button {
		padding-bottom: 16px;
		margin-right: 60px;
	}

	.filter-buttons button:last-of-type {
		margin-right: 0;
	}

	.filter-buttons button:hover::after, .filter-buttons button.active::after {
		width: calc(100% + 25px);
	}

	.filter-buttons button:hover img, .filter-buttons button:hover svg, .filter-buttons button.active img, .filter-buttons button.active svg {
		transform: translate(30px,-5px);
	}

	.filter-buttons button img, .filter-buttons button svg {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}
}

@media only screen and (min-width: 1281px) {
	h1, .h1 {
		line-height: 116%;
	}

	.con {
		border-radius: 100px;
		width: calc(100% - 80px);
		padding: 150px 0px;
		border-radius: 150px;
	}

	.con-10 {
		width: calc(100% - 80px);
	}

	.mt-section {
		margin-top: 140px;
	}

	.mb-section {
		margin-bottom: 140px;
	}

	.my-section {
		margin-top: 140px;
		margin-bottom: 140px;
	}

	.pt-section {
		padding-top: 140px;
	}

	.pb-section {
		padding-bottom: 140px;
	}

	.py-section {
		padding-top: 140px;
		padding-bottom: 140px;
	}

	.cursor, .cursor-follower {
		display: block;
	}

	.modern-scroll ::-webkit-scrollbar-track {
		margin-top: 70px;
		margin-bottom: 70px;
	}

	.menu .site-nav .logo .link-logo img:last-of-type {
		display: block;
	}

	.menu .site-nav .logo .link-logo:hover img:first-of-type {
		opacity: 0;
		transform: translate(0%,-100%) scale(0.8);
	}

	.menu .site-nav .logo .link-logo:hover img:last-of-type {
		opacity: 1;
		transform: translate(0%,-50%) scale(1);
	}

	.menu .site-nav .nav-links .nav-toggle .toggle-name {
		width: 90px;
	}

	.menu .site-nav .nav-list .container .menu-links .social-links {
		border: unset;
		order: 0;
	}

	.menu .site-nav .nav-list .container .menu-links .links {
		height: 85%;
		margin-bottom: 0;
		height: 100%;
		order: 1;
	}

	.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv {
		align-items: flex-start;
	}

	.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone {
		justify-content: flex-start;
	}

	.circle-link {
		width: 200px;
		height: 200px;
	}

	.circle-link .circle-inner .slot svg {
		height: 70%;
		width: 70%;
	}

	.mouse-scroll {
		width: 45px;
		height: 70px;
	}

	.mouse-scroll::after {
		width: 5px;
		height: 15px;
	}

	.link-one img, .link-one svg {
		width: 16px;
		height: 16px;
	}

	.normal-link:hover::after {
		width: calc(100% + 35px);
	}

	.normal-link:hover img, .normal-link:hover svg {
		top: 25px;
		right: -50px;
	}

	.normal-link img, .normal-link svg {
		width: 24px;
		height: 24px;
		top: 40px;
		right: -20px;
	}

	.works-pin .pin-works .single-item .contain-title h2, .h1 {
		line-height: 116%;
	}

	.header-2 .contain-image svg {
		width: 208px;
		height: 208px;
	}

	.header-2 .contain-image .have-image .corner-box {
		height: 752px;
	}

	.header-2 .contain-image .have-image .corner-box .corner__rt::before {
		left: -60px;
	}

	.header-2 .contain-image .have-image .corner-box .corner__rt {
		height: 105px;
	}

	.header-2 .contain-image .have-image .corner-box .corner__lb::after {
		height: 105px;
		left: 100%;
	}

	.header-2 .contain-image .have-image .corner-box .corner__lb {
		height: 150px;
	}

	.box-image {
		border-radius: 80px;
	}

	.animate-horizontal-scroll .scrolling-wrapper {
		gap: 30px 30px;
	}

	.animate-horizontal-scroll .scrolling-wrapper .item {
		width: 410px;
		height: -moz-fit-content;
		height: fit-content;
		block-size: -moz-fit-content;
		block-size: fit-content;
	}

	.services .services-accordion .accordion-group {
		margin-bottom: 80px;
	}

	.services .services-accordion .accordion-group .accordion-content .number {
		padding-top: 20px;
	}

	.services .services-accordion .accordion-group .accordion-content .data p, .services .services-accordion .accordion-group .accordion-content .data .service-image {
		width: 50%;
	}

	.services .services-accordion .accordion-group .accordion-content .data p {
		margin-bottom: 60px;
		padding-right: 30px;
	}

	.services .services-accordion .accordion-group .accordion-content .data .ac-body {
		padding-bottom: 0;
	}

	.services .services-accordion .accordion-group .accordion-content .data .service-image {
		height: 100%;
		position: absolute;
	}

	.services .services-accordion .accordion-group .accordion-content .data .service-image img {
		position: absolute;
	}

	.services .services-accordion .accordion-group .accordion-content.open .number {
		background: linear-gradient( to right, var(--color-black) 25%, transparent 75% );
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: rgba(0,0,0,0);
	}

	.services-toggle .services-accordion .accordion-group .accordion-content.open .number {
		background: linear-gradient( to right, var(--color-light) 25%, transparent 75% );
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: rgba(0,0,0,0);
	}

	.works-pin .pin-works {
		width: 100%;
	}

	.works-pin .pin-works .single-item {
		height: 65vh;
		border-radius: 80px;
	}

	.next-page {
		width: 1200px;
		padding: 120px 80px;
		border-radius: 100px;
	}

	.have-filter-masonry .filter-buttons {
		padding-right: 25px;
		justify-content: flex-end;
	}

	.work-2 .grid-item .item-data .item-title, .work-2 .grid-item .item-data .tags {
		text-align: start;
	}

	.work-2 .grid-item .item-data .tags {
		justify-content: flex-start;
	}
}

@media only screen and (min-width: 1367px) {
	.con {
		width: calc(100% - 120px);
		padding: 200px 100px;
	}

	.con-10 {
		width: calc(100% - 120px);
	}

	.container {
		max-width: 1366px;
	}

	.mt-section {
		margin-top: 200px;
	}

	.mb-section {
		margin-bottom: 200px;
	}

	.my-section {
		margin-top: 200px;
		margin-bottom: 200px;
	}

	.pt-cust-large {
		padding-top: 230px;
	}

	.modern-scroll ::-webkit-scrollbar-track {
		margin-top: 150px;
		margin-bottom: 190px;
	}

	.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li {
		margin-bottom: 30px;
	}

	.link-one a, .link-one button, .link-one input {
		padding-right: 20px;
	}

	.link-one img, .link-one svg {
		width: 21px;
		height: 21px;
	}

	.normal-link:hover img, .normal-link:hover svg {
		right: -50px;
	}

	.services .services-accordion .accordion-group {
		margin-bottom: 100px;
	}

	.services .services-accordion .accordion-group .accordion-content {
		padding-left: 30px;
		padding-right: 30px;
	}

	.next-page {
		width: 1500px;
		padding: 180px 105px;
		border-radius: 150px;
	}

	.main-footer .copyright .to-top .scroll-to-top {
		width: 76px;
		height: 100px;
	}
}

@media only screen and (min-width: 1700px) {
	.services .services-accordion .accordion-group {
		width: 116%;
	}
}

@media only screen and (min-width: 1800px) {
	.services .services-accordion .accordion-group .accordion-content.open {
		margin-bottom: 50px;
	}
}

@media only screen and (min-width: 769px) {
	.contain-marquee .marquee-2 {
		top: -120px;
	}
}

@media only screen and (min-width: 1281px) {
	.contain-marquee .marquee-2 {
		top: -260px;
	}
}

@media only screen and (min-width: 1281px) {
	.contain-marquee .marquee-error {
		border-radius: 100px;
	}
}

@media only screen and (min-width: 769px) {
	.contain-marquee .marquee-error .con {
		width: calc(100% - 15px);
	}
}

@media only screen and (min-width: 1281px) {
	.contain-marquee .marquee-error {
		width: calc(100% - 80px);
		border-radius: 150px;
	}
}

tbody, td, tfoot, th, thead, tr {
	color: var(--color-1) !important;
	border-color: var(--color-1) !important;
	background: none !important;
}