/*
Theme Name: varaghak Theme
Theme URI: https://varaghak.ir
Author: Erfan Soltany Nasab (soltanyesn)
Author URI: https://varaghak.ir
Description: A custom WordPress theme developed by Erfan Soltany Nasab (soltanyesn), designed for flexibility, performance, and clean structure.
Version: 0.1
Text Domain: varaghak-theme
*/
@font-face {
	font-family: fonts;
	font-style: normal;
	font-weight: 400;
	src: url('access/fonts/Vazirmatn-Regular.woff2') format('woff2')
}
@font-face {
	font-family: fonts;
	font-style: normal;
	font-weight: 500;
	src: url('access/fonts/Vazirmatn-Bold.woff2') format('woff2')
}
@font-face {
	font-family: fonts;
	font-style: normal;
	font-weight: 600;
	src: url('access/fonts/Vazirmatn-Black.woff2') format('woff2')
}
@font-face {
	font-family: fonts;
	font-style: normal;
	font-weight: 700;
	src: url('access/fonts/Sahel-Bold.woff2') format('woff2')
}
@font-face {
	font-family: fonts;
	font-style: normal;
	font-weight: 800;
	src: url('access/fonts/Mahoor-ExtraBold.woff2') format('woff2')
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
:root {
	--clr-1: #2f3192;
	--max-width: 1340px;
    --box-shadow-black: inset 0 0 0 1px rgb(77 89 123 / 38%), inset 2px 3px 0 -2px rgb(73 72 96 / 90%), inset -2px -2px 0 -2px rgb(111 138 213 / 65%), inset -3px -9px 2px -7px rgb(17 18 19 / 45%), inset -1px -1px 4px rgb(14 11 30 / 19%), 0 0px 8px rgb(172 163 214 / 9%), 0 0px 17px rgb(84 58 238 / 13%);
    --box-shadow-white: inset 0 0 0 1px rgb(255 255 255 / 42%), inset 2px 2px 0 -1px rgb(247 247 247 / 90%), inset -2px -2px 0 -1px rgb(226 226 238 / 55%), inset -2px -7px 2px -6px rgb(141 138 154 / 50%), inset -1px 2px 4px -1px rgb(136 135 135 / 13%), 0px 0px 9px rgba(0, 0, 0, 0.11);
}
::selection {
	color: #fff;
	background: #000
}
html {
	font-size: clamp(12px, 2vw, 16px);
	background-color: #fff;
	scrollbar-width: none;
	transition: 0.3s;
}
html.black-page {
	background-color: #1d1e20
}
body {
	background-color: #fff
}
a {
	text-decoration: none!important
}
ul,li {
	list-style: none;
}
#root * {
	font-family: fonts,serif!important;
}
.wrapper {
	max-width: var(--max-width);
	width: calc(100% - 24px);
	margin: 0 auto;
}
.primary-header {
	background-color: #ffffff;
	transition: 0.3s;
	position: sticky;
	overflow: hidden;
	z-index: 10000;
	top: 0;



	&.back-black {
		background-color: #1d1e20;
		background-image: linear-gradient(to bottom, #1d1e20, transparent 90%);
		backdrop-filter: blur(0);

		&.intro-header {
			background-color: transparent;
		}
		& .logo-box img {
			filter: brightness(10);
		}
		& .logo-box span {
			color: var(--clr-var, #fff);
		}
		& .cta-btn {
			background-color: #31313b;
			color: #b6b0b0;
			&:hover {
				color: #fff;
			}
            box-shadow: var(--box-shadow-black);
		}

	}
	& .header-box {
		height: 76px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}
	& .logo-box {
		display: flex;
		align-items: center;
		position: relative;

		& img {
			width: auto;
			height: 52px;
			transition: 0.1s;
		}
		&:hover img {
			opacity: 0;
		}
		& div {
			position: absolute;
			inset: 20%;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
			direction: ltr;
			opacity: 0;
			transition: 0.2s;
		}
		&:hover div {
			opacity: 1;
			box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.85);
		}
		& span {
			color: var(--clr-var, #31313b);
			font-size: 1.2rem;
			font-weight: 600;
		}
	}

	& .cta-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160px;
		height: 52px;
		background-color: #e8e8e8;
		border-radius: 1rem;
		font-size: 1rem;
		color: var(--clr-1);
        box-shadow: var(--box-shadow-white);
		will-change: transform;

		& span {
			display: inline-block;
			will-change: transform;
			pointer-events: none;
		}
	}

}
.back-black-wrapper {
	background-color: #1d1e20;
	position: relative;
	isolation: isolate;
}
.back-yellow-wrapper {
	background-color: #e7b719;
	position: relative;
	isolation: isolate;
}
.intro-wrapper {
	margin-top: -116px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 200px 0;

	&::before {
		position: absolute;
		content: '';
		inset: 0;
		background-image: linear-gradient(to right, rgba(0,0,0,0.1)50% , transparent 50%);
		background-size: 4px;
		z-index: -1000;
	}
	& h1,
	& h2 {
		color: #d7cdcd;
		font-size: 4rem;
		max-width: 700px;
		text-align: center;
		text-wrap: balance;
		line-height: 1.3;
		font-weight: 600;

		& span {
			color: #e7b719;
		}
	}
	& p {
		color: #d7cdcd;
		font-size: 1rem;
		text-align: center;
		max-width: 700px;
		margin-top: 2rem;
		line-height: 2;
	}
	& .lines {
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: absolute;
		inset: 0;
		z-index: -1;
		& .line {
			width: 1px;
			height: 100%;
			background-color: #2c2b2b;
			position: relative;

			&::before {
				position: absolute;
				content: '';
				width: 1px;
				height: 80px;
				filter: blur(2px);
				background-color: #e7b719;
				opacity: 0.5;
				top: -120px;
				animation: lineHorizontal var(--time) linear infinite;
			}

		}
	}
	& bdi {
		position: absolute;
		bottom: 52px;
		font-size: 0.8rem;
		font-weight: 500;
		color: #b6b0b0;
	}
}
.ticker {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
	height: 40px;
	margin-top: auto;
	display: flex;
	align-items: center;
	border-top: 1px solid #2c2b2b;;

	& .ticker-track {
		display: flex;
		white-space: nowrap;
		width: max-content;
		animation: marquee 12s linear infinite;
		will-change: transform;

		&  span {
			color: #e7b719;
			font-size: 0.8rem;
			font-weight: 400;
			font-family: sans-serif;
			padding-left: 40px;
		}
	}
}
.mini-info {
	display: flex;
	align-items: center;
	justify-content: space-between;

	& p {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		padding: 3rem 0;
		line-height: 1;
		transition: 0.3s;
		opacity: 0.6;

		&:hover,
		&.active {
			opacity: 1;
		}
		& strong {
			font-size: 3rem;
			font-weight: 800;
		}

		& span {
			font-size: 0.9rem;
			font-weight: 400;
		}
	}
}
.mini-info_bg {
	position: absolute;
	inset: 0px;
	overflow: hidden;
	z-index: -1;

	& > div {
		position: absolute;
		opacity: 0;
		inset: 0px;
		transition: opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1);
		&.active {
			opacity: 1;
		}
	}
	& .pre-dawn {
		background: 
			radial-gradient(100% 100% at 50% 105%,
				rgb(72, 111, 253) 0px,
				rgb(127, 129, 243) 10%,
				rgb(196, 137, 255) 20%,
				rgb(218, 192, 255) 34%,
				rgb(234, 220, 255) 44%,
				rgba(249, 246, 255, 0) 58%,
				rgba(248, 250, 253, 0) 100%)
			;
		background-color: #e9daff
	}
	& .sunrise {
		background: 
			radial-gradient(1020% 100% at 50% 105%,
				rgb(203, 131, 255) 0px,
				rgb(255, 144, 185) 15%,
				rgb(255, 201, 119) 30%,
				rgba(255, 215, 155, 0.575) 38%,
				rgba(255, 241, 220, 0.281) 50%,
				rgba(255, 255, 255, 0.253) 63%,
				rgba(252, 253, 254, 0) 77%,
				rgba(248, 250, 253, 0) 98%)
			;
		background-color: #f4cba5
	}
	& .daytime {
		background: 
			radial-gradient(100% 105% at 50% 105%,
				rgb(0, 113, 193) 1%,
				rgb(96, 168, 226) 15%,
				rgba(180, 216, 255, 0.644) 35%,
				rgba(217, 235, 255, 0.295) 45%,
				rgba(248, 250, 253, 0) 60%)
			;
		background-color: #89d1db
	}
	& .sunset {
		background: 
			radial-gradient(105% 100% at 50% 100%,
				rgb(255, 165, 119) 0px,
				rgb(255, 144, 161) 15%,
				rgb(221, 173, 255) 30%,
				rgb(236, 216, 255) 45%,
				rgba(245, 234, 255, 0.295) 55%,
				rgba(248, 250, 253, 0) 88%)
			;
		background-color: #e0cfec
	}
}
#waves-wrapper {
	position: relative;
	& svg {
		overflow: hidden;
		width: 100%;
		height: 40px;
		left: 0;
		bottom: 0;
		position: absolute;

		& use {
			-webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
			animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;

			&:nth-child(1) {
				-webkit-animation-delay: -2s;
				animation-delay: -2s;
				-webkit-animation-duration: 7s;
				animation-duration: 7s
			}

			&:nth-child(2) {
				-webkit-animation-delay: -3s;
				animation-delay: -3s;
				-webkit-animation-duration: 10s;
				animation-duration: 10s
			}

			&:nth-child(3) {
				-webkit-animation-delay: -4s;
				animation-delay: -4s;
				-webkit-animation-duration: 13s;
				animation-duration: 13s
			}

			&:nth-child(4) {
				-webkit-animation-delay: -5s;
				animation-delay: -5s;
				-webkit-animation-duration: 20s;
				animation-duration: 20s
			}

		}

	}
}
.costomer-wrapper {
	padding: 5rem 0;
	display: flex;
	flex-direction: column;
	gap: 2rem;

	& header {
		display: flex;
		align-items: center;
		justify-content: space-between;

		& h2 {
			font-size: 1.4rem;
			font-weight: 500;
			color: #565668;
		}

		& a {

			display: flex;
			align-items: center;
			justify-content: center;
			gap: 1rem;
			padding: 8px 1.2rem 8px 8px;
			border-radius: 1rem;
			background-color: #e8e8e8;
            box-shadow: var(--box-shadow-white);

			& div {
				display: flex;
				flex-direction: column;
				height: 1.5rem;
				overflow: hidden;

				& span {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 1.7rem;
					color: var(--clr-1);
					font-weight: 400;
					font-size: 1rem;
					transition: 0.3s;
				}

			}

			& bdi {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 1.7rem;
				aspect-ratio: 1;
				border-radius: 50em;
				background-color: #fff;
				position: relative;
				isolation: isolate;
                box-shadow: var(--box-shadow-white);
                transition: 1s;

				&::before {
					position: absolute;
					content: '';
					inset: 4px;
					background-color: #1d1e20;
					border-radius: 50em;
					opacity: 0;
					z-index: -1;
					transition: 0.3s;
				}

				& svg {
					width: 1.2rem;
					aspect-ratio: 1;
					color: var(--clr-1);
					transition: 0.3s;
				}
			}

			&:hover {
				& span {
					transform: translateY(-100%);
				}

				& bdi {
                    box-shadow: var(--box-shadow-black);
                    
					&::before {
						inset: -2px;
						opacity: 1;
					}

					& svg {
						color: #fff;
					}
				}

			}
		}

	}

	& .hidden-svg {
		position: absolute;
		display: block;
		pointer-events: none;
	}

	& > section {
		display: flex;
		justify-content: space-between;
		gap: 2rem;
		margin-top: 2rem;

		& article {
			width: 25%;
		}
		& a {
			width: 100%;
			border-radius: 1rem;
			display: flex;
			flex-direction: column;

			& div {
				filter: drop-shadow(0 0 1px #948f8f);
				position: relative;

				&::before {
					position: absolute;
					content: '';
					bottom: 12px;
					right: 50%;
					transform: translateX(50%);
					width: 32px;
					aspect-ratio: 1;
					background-image: url(access/img/mini-logo.webp);
					filter: drop-shadow(0 0 1px #fff);
					background-size: contain;
					z-index: 100;
					opacity: 0;
					transition: 0.3s;
				}

				&:after {
					position: absolute;
					content: '';
					inset: 30% 28px;
					opacity: 0.5;
					background-color: var(--clr-1);
					z-index: -1;
					filter: blur(12px);
					transition: 0.3s;
				}
			}

			& figure {
				-webkit-clip-path: url(#serviceCardCurve);
				clip-path: url(#serviceCardCurve);
				position: relative;
				display: flex;
				transform-style: preserve-3d;
				perspective: 18vw;
				background-color: var(--clr-1);

				& img {
					width: 100%;
					height: 100%;
					aspect-ratio: 1 / 1;
					-o-object-fit: cover;
					object-fit: cover;
					object-position: top;
					transition: 0.5s;
				}


			}

			& h3 {
				font-size: 1.2rem;
				font-weight: 500;
				color: #3d3c44;
				padding: 1rem;
			}

			& p {
				font-size: 1rem;
				color: #3d3c44;
				font-weight: 400;
				padding: 0 1rem;
				text-align: justify;
			}

			&:hover {

				& div {

					&::after {
						opacity: 1;
						inset: 30% 20px;
					}

					&::before {
						opacity: 1;
					}

					& img {
						object-position: bottom;
						transition: 2s;
					}   

				}

			}

		}

		@media (max-width: 768px) {
			flex-direction: column;
			& article {
				width: 100%;
			}
			& a {
				flex-direction: row;

				& img {
					width: 150px !important;
				}

			}
		}
		@media (max-width: 425px) {
			& a {
				& img {
					width: 100px !important;
				}
			}
		}

	}
}
.road-map {
	padding: 80px 0;
	margin-top: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	isolation: isolate;

	&::before {
		position: absolute;
		content: '';
		height: 100%;
		aspect-ratio: 1;
		border-radius: 50em;
		z-index: -1;
		border: 1px dashed color-mix(in srgb, var(--clr-1) 20%, #fff );
	}
	&::after {
		position: absolute;
		content: '';
		height: 50%;
		aspect-ratio: 1;
		border-radius: 50em;
		z-index: -1;
		border: 1px dashed color-mix(in srgb, var(--clr-1) 20%, #fff );
	}

	.container {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		isolation: isolate;

		&::before {
			position: absolute;
			content: '';
			width: calc(100% - 240px);
			right: 50%;
			transform: translateX(50%);
			z-index: -1;
			border: 1px dashed color-mix(in srgb, var(--clr-1) 20%, #fff);
		}

		& .brand-col ,
		& .brand-col {
			display: flex;
			align-items: center;
			gap: 2rem;

			& > section {
				display: flex;
				flex-direction: column;
				gap: 2rem;

				& span {
					background-color: #e5e5e5;
					color: rgba(0, 0, 0, 0.7);
					padding: 4px 1rem;
					border-radius: 50em;
					width: max-content;
                    box-shadow: var(--box-shadow-white);
				}
			}

			& > div {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 2rem;

				& section {
					position: relative;
					width: 390px;
					gap: 1rem;
					aspect-ratio: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					& span {
						background-color: #1d1e20;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 1rem;
						color: #fff;
						border-radius: 50em;
						padding: 4px 1rem;
						font-size: 1.2rem;
						font-weight: 500;
                        box-shadow: var(--box-shadow-black);
						transition: color 0.3s;
                        position: relative;

                        &::before {
                            position: absolute;
                            content: '';
                            top: 50%;
                            left: -2rem;
                            transform: translateY(-50%);
                            width: 2rem;
                            height: 2rem;
                            border-radius: 50em;
                            z-index: -1;
                            opacity: 0;
                            filter: blur(10px);
                            background-color: var(--clr-item);
                            transition: 0.3s;
                        }
                        
						& svg {
							width: 1rem;
							aspect-ratio: 1;
							color: var(--clr-item);
						}

						&:hover {
							color: var(--clr-item);

                            &::before {
                                opacity: 0.5;
                                left: 0;
                            }
						}
					}

				}

				& p {
					justify-content: center;
				}
			}

			& p {
				font-size: 1rem;
				font-weight: 500;
				color: #1d1e20;
				display: flex;
				align-items: center;
				gap: 1rem;
				width: 120px;

				& span {
					width: 8px;
					aspect-ratio: 1;
					background-color: var(--clr-1);
					border-radius: 50em;
				}
			}
		}

	}
}
.post-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 2rem 0;
	margin-top: 3rem;
	gap: 3rem;

	& header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 2rem;
		width: 100%;

		& a {
			color: var(--clr-1);
			background-color: rgb(232, 232, 232);
			font-size: 16px;
			white-space: nowrap;
			display: flex;
			align-items: center;
			gap: 0.5rem;
			padding: 8px 8px 8px 1rem ;
			border-radius: 1rem;
            box-shadow: var(--box-shadow-white);


			& p {
				display: flex;
				flex-direction: column;
				height: 25px;
				overflow: hidden;

				& bdi {
					display: flex;
					align-items: center;
					justify-content: center;
					transition: 0.3s;
				}
			}

			& span {

				display: flex;
				align-items: center;
				justify-content: center;
				width: 1.7rem;
				aspect-ratio: 1;
				background-color: #fff;
				border-radius: 50em;
				position: relative;
				isolation: isolate;
                box-shadow: var(--box-shadow-white);
                transition: 1s;

				&::before {
					position: absolute;
					content: '';
					inset: 8px;
					opacity: 0;
					background-color: #000;
					border-radius: 50em;
					z-index: -1;
					transition: 0.3s;
				}

				& svg {
					width: 1.2rem;
					aspect-ratio: 1;
					stroke-width: 3;
					stroke: var(--clr-1);
				}

			}

			&:hover {
				& bdi {
					transform: translateY(-100%);
				}

                & span {
                    box-shadow: var(--box-shadow-black);
                }
                
				& span::before {
					inset: -2px;
					opacity: 1;
				}

				& svg {
					stroke: #fff;
					stroke-width: 2;
				}
			}
		}

		& > p {
			max-width: 800px;
			font-size: 1.5rem;
			font-weight: 400;
			color: #31313b;
			text-align: justify;

			&::before {
				content: '';
				display: block;
				width: 100px;
				height: 12px;
				float: right;
			}
		}

	}

	& section {
		display: flex;
		align-items: stretch;
		justify-content: center;
		width: 100%;
		gap: 1rem;

		& a {
			background-color: color-mix(in srgb, var(--clr-1) 20%, #000);
			border-radius: 1rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 2rem;
			flex: 1;

			& .post-card__visual {
				max-width: 350px;
				width: 100%;
				color: var(--clr-1 );
			}

			& .post-card__content {
				width: 100%;
			}

			& h3 {
				font-size: 1.5rem;
				font-weight: 400;
				color: #fff;
				text-wrap: balance;
			}

			& span {
				color: #0fad3e;
				background-color: #0fad3e1e;
				padding: 4px 1rem;
				border-radius: 1rem;
				margin-top: 1rem;
				display: inline-flex;
			}
		}
	}
}
.home-seo-section {

	max-width: 920px;
	margin: 0 auto;
	color: #2c2b2b;
	text-align: justify;
	line-height: 1.5;

	& .home-seo-collapsible {
		overflow: hidden;
		transition: 0.5s;

		& h3 {
			margin-top: 2rem;
		}

		& p {
			font-size: 1rem;
			font-weight: 400;
			margin: 1rem 0;
		}

		& strong {
			font-weight: 500;
		}

		& li {
			display: inline-block;
			padding-right: 2rem;
		}
	}
	& .home-seo-header {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin-bottom: 1rem;
	}
	& .home-seo-toggle-container {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	& .home-seo-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		width: 100%;
		height: 44px;
		border: none;
		outline: none;
		font-size: 1rem;
		font-weight: 600;
		background-color: #fff;

		& svg {
			width: 1rem;
			aspect-ratio: 1;
		}
	}
	& .home-seo-cta-content {
		margin-top: 2rem;
	}
	& .home-seo-cta-actions {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		max-width: 350px;
		margin: 0 auto;

		& a {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 1rem;
			border-radius: 1rem;
			background-color: var(--clr-item);
		}
	}
	& .home-seo-faq-list {
		display: flex;
		flex-direction: column;
		margin: 2rem 0;
		gap: 1rem;

		& hr {
			border: none;
			height: 1px;
			width: 100%;
			background-image: linear-gradient(to right, rgba(0,0,0,0.1)50%, transparent 50%);
			background-size: 8px 1px;
		}

		& summary {
			list-style: none;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 1.1rem;
			font-weight: 500;

			& span {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				width: 24px;
				aspect-ratio: 1;

				&::before {
					--min-size: 1px;
					position: absolute;
					content: '';
					inset: 0;
					background-color: var(--clr-1);
					clip-path: polygon(0 calc(50% - var(--min-size)), calc(50% - var(--min-size)) calc(50% - var(--min-size)), calc(50% - var(--min-size)) 0, calc(50% + var(--min-size)) 0, calc(50% + var(--min-size)) calc(50% - var(--min-size)), 100% calc(50% - var(--min-size)), 100% calc(50% + var(--min-size)), calc(50% + var(--min-size)) calc(50% + var(--min-size)), calc(50% + var(--min-size)) 100%, calc(50% - var(--min-size)) 100%, calc(50% - var(--min-size)) calc(50% + var(--min-size)), 0 calc(50% + var(--min-size)));
					transition: 0.3s;
				}

			}

		}

		& details[open] {
			& summary {
				& span {
					&::before {
						clip-path: polygon( 0 calc(50% - var(--min-size)), calc(50% - var(--min-size)) calc(50% - var(--min-size)), calc(50% - var(--min-size)) calc(50% - var(--min-size)), calc(50% + var(--min-size)) calc(50% - var(--min-size)), calc(50% + var(--min-size)) calc(50% - var(--min-size)), 100% calc(50% - var(--min-size)), 100% calc(50% + var(--min-size)), calc(50% + var(--min-size)) calc(50% + var(--min-size)), calc(50% + var(--min-size)) calc(50% + var(--min-size)), calc(50% - var(--min-size)) calc(50% + var(--min-size)), calc(50% - var(--min-size)) calc(50% + var(--min-size)), 0 calc(50% + var(--min-size)) );
						background-color: #1d1e20;
					}
				}
			}
		}
	}



	& .is-expanded {
		& .home-seo-toggle svg {
			transform: rotate(180deg);
		}
		& .home-seo-toggle {
			background-color: transparent;
		}
		& .home-seo-collapsible {
			padding-bottom: 50px;
			overflow: visible;
		}
	}
}
.primary-footer {   
	position: relative;
	isolation: isolate;
	padding: 1rem 0;

	& .social-media {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 2rem;
		gap: 1rem 2rem;

		& h2 {
			width: 100%;
			position: relative;
			font-size: 1.2rem;
			font-weight: 400;
			color: #fff;
			display: flex;
			align-items: center;
			gap: 1rem;

			&::before {
				content: '';
				display: block;
				width: 8px;
				aspect-ratio: 1;
				background-color: #e7b719;
				border-radius: 50em;
			}
		}

		& a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 4rem;
			aspect-ratio: 1;
			background-color: rgba(217, 235, 255, 0.1);
			border-radius: 50em;

			& svg {
				aspect-ratio: 1;
				color: #fff;
			}
		}
	}

	& .service {
		display: flex;
		flex-direction: column;
		padding: 1rem 0;
		box-shadow: 0 -1px 0 0 #fff;

		&:nth-last-child(2) {
			box-shadow: 0 -1px 0 0 #fff, 0 1px 0 0 #fff;
		}
		& button {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: transparent;
			border: none;
			outline: none;

			& h2 {
				color: #fff;
				font-size: 1.2rem;
				font-weight: 500;
				position: relative;
			}

			& span {
				width: 44px;
				height: 44px;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				isolation: isolate;

				&::before {
					--min-size: 1px;
					position: absolute;
					content: '';
					inset: 8px;
					background-color: #fff;
					display: block;
					clip-path: polygon(0 calc(50% - var(--min-size)), calc(50% - var(--min-size)) calc(50% - var(--min-size)), calc(50% - var(--min-size)) 0, calc(50% + var(--min-size)) 0, calc(50% + var(--min-size)) calc(50% - var(--min-size)), 100% calc(50% - var(--min-size)), 100% calc(50% + var(--min-size)), calc(50% + var(--min-size)) calc(50% + var(--min-size)), calc(50% + var(--min-size)) 100%, calc(50% - var(--min-size)) 100%, calc(50% - var(--min-size)) calc(50% + var(--min-size)), 0 calc(50% + var(--min-size)));
					transition: 0.3s;
				}

				&::after {
					position: absolute;
					content: '';
					border-radius: 50em;
					inset: 45%;
					background-color: #fff;
					opacity: 0;
					z-index: -1;
					transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
				}
			}

			&:hover {
				& span {
					&::before {
						background-color: #1d1e20;
						inset: 12px;
					}
					&::after {
						inset: 0;
						opacity: 1;
					}
				}
			}

		}


		&.is-open {
			& span{
				&::before {
					clip-path: polygon(0 calc(50% - var(--min-size)), calc(50% - var(--min-size)) calc(50% - var(--min-size)), calc(50% - var(--min-size)) calc(50% - var(--min-size)), calc(50% + var(--min-size)) calc(50% - var(--min-size)), calc(50% + var(--min-size)) calc(50% - var(--min-size)), 100% calc(50% - var(--min-size)), 100% calc(50% + var(--min-size)), calc(50% + var(--min-size)) calc(50% + var(--min-size)), calc(50% + var(--min-size)) calc(50% + var(--min-size)), calc(50% - var(--min-size)) calc(50% + var(--min-size)), calc(50% - var(--min-size)) calc(50% + var(--min-size)), 0 calc(50% + var(--min-size)));
					background-color: #1d1e20;
				}
			}

		}

		& nav {
			display: flex;
			flex-direction: column;
			gap: 1rem;

			& h3 {
				color: #fff;
				font-weight: 400;
				font-size: 1rem;
				padding: 1rem 0;
			}

			& ul {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
				gap: 1rem;

				& a {
					color: #fff;
					opacity: 0.5;
					font-size: 1rem;
					font-weight: 400;
					position: relative;
					transition: 0.2s;

					&::before {
						position: absolute;
						content: '';
						bottom: 0;
						right: 0;
						width: 0;
						height: 1px;
						background-color: #fff;
						transition: 0.2s;
					}

					&:hover {
						opacity: 1;

						&::before {
							width: 100%;
						}
					}
				}
			}
		}
	}

	& .bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 3rem 0 1rem;
		gap: 1rem;

		& p,
		& a {
			font-size: 1rem;
			font-weight: 400;
			color: #fff;
		}

		& p {
			margin-left: auto;
		}
		& a {
			display: flex;
			flex-direction: column;
			height: 25px;
			overflow: hidden;
			position: relative;

			&::before {
				position: absolute;
				content: '';
				bottom: 0;
				right: 0;
				width: 0;
				height: 1px;
				transition: 0.3s;
				background-color: #fff;
			}

			& span {
				height: 25px;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: 0.3s;
			}

			&:hover {
				&::before {
					width: 100%;
				}
				& span {
					transform: translateY(-100%);
				}
			}
		}
	}
}
.about-page {
	& h1 {
		font-size: 5rem;
		text-align: center;
		padding-top: 2rem;
		font-weight: 600;
	}

	& h2 {
		font-size: 1.8rem;
		margin-bottom: 1rem;
	}

	& > p {
		max-width: 820px;
		margin: 2rem auto;
		text-align: center;
	}

	& .few-fact {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		margin: 0 auto;

		& p {
			font-size: 0.9rem;
			font-weight: 400;
			color: #31313b;
			line-height: 1.5;
			max-width: 650px;
		}

		& div {
			display: flex;
			align-items: center;
			gap: 1rem;
		}

		& strong {
			font-size: 6rem;
			font-weight: 800;
			color: var(--clr-1);
		}

		& span {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			line-height: 1;
			color: #31313b;
			font-weight: 500;
		}

		& bdi {
			font-size: 3rem;
			font-weight: 400;
		}
	}

	& .fact-var {
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-top: 1px dashed color-mix(in srgb, var(--clr-1) 20%, #fff);
		margin-top: 1rem;

		& p {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 1rem;
			padding: 4rem 0;
			color: #2c2b2b;
			font-weight: 500;
			font-size: 1rem;
			position: relative;

			&::before {
				position: absolute;
				content: '';
				top: -4px;
				border-radius: 50em;
				width: 8px;
				aspect-ratio: 1;
				background-color: #e7b719;
				z-index: 2;
			}

			&::after {
				position: absolute;
				content: '';
				top: 0;
				z-index: 1;
				width: 0;
				height: 50px;
				border-left: 1px dashed color-mix(in srgb, var(--clr-1) 20%, #fff);
			}

			& bdi {
				font-size: 2rem;
				font-weight: 600;
				color: var(--clr-1);
			}
		}
	}

	& .values-wrapper {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 2rem 0;

		& section {
			display: flex;
			flex-wrap: wrap;
			overflow: hidden;

			& div {
				width: calc(100% / 3);
				display: flex;
				flex-direction: column;
				gap: 2rem;
				padding: 2rem;
				box-shadow: 0 0 0 1px rgb(212, 210, 210);

				& h3 {
					font-size: 1.2rem;
					color: var(--clr-1);
					font-weight: 500;
				}
			}
		}

	}

	& .reviews-wrapper {
		display: grid;
		grid-template-columns: 0.9fr 1.1fr;
		gap: 3rem;
		align-items: start;
		padding: 1rem 0 4rem 0;

		& > section:first-child {
			display: flex;
			flex-direction: column;

			& article {
				background-color: #e8e8e8;
				padding: 1rem;
				border-radius: 1rem;
				margin-bottom: 0.5rem;

				&[data-active="true"] {
					& button {
						color: var(--clr-1);
					}

					& button i {
						transform: rotate(45deg);
					}

					& p {
						padding: 1rem 0 0.5rem;
					}
				}

				& > div {
					height: 0;
					overflow: hidden;
				}

				& > div > p {
					margin: 0;
					font-size: 0.9rem;
					line-height: 1.8;
					color: #31313b;
				}

				& > div > ul {
					padding: 0 1rem 0 0;
					list-style: none;
				}

				& > div > ul li {
					position: relative;
					font-size: 0.9rem;
					line-height: 1.9;
					color: #31313b;
					padding-right: 1rem;
				}

				& > div > ul li::before {
					content: "";
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 0;
					width: 6px;
					height: 6px;
					border-radius: 50%;
					background-color: #31313b;
				}
			}

			& button {
				width: 100%;
				border: 0;
				background: transparent;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 1rem;
				text-align: right;
				color: #2c2b2b;
				transition: 0.3s ease;

				& span {
					font-size: 1rem;
					font-weight: 500;
				}

				& i {
					width: 2rem;
					aspect-ratio: 1;
					border-radius: 50%;
					position: relative;
					flex-shrink: 0;
					transition: 0.3s ease;
				}

				& i::before,
					& i::after {
						position: absolute;
						content: '';
						inset: 50% auto auto 50%;
						width: 0.8rem;
						height: 2px;
						background-color: #2c2b2b;
						transform: translate(-50%, -50%);
						transition: 0.3s ease;
				}

				& i::after {
					transform: translate(-50%, -50%) rotate(90deg);
				}
			}

			& article > div {
				height: 0;
				overflow: hidden;
			}

			& p {
				margin: 0;
				font-size: 0.9rem;
				line-height: 1.8;
				color: #31313b;
				transition: padding 0.35s ease;
			}
		}

		& > section:last-child {
			position: sticky;
			top: 7rem;

			& > div {
				min-height: 360px;
				position: relative;
				overflow: hidden;
			}

			& article {
				position: absolute;
				inset: 0;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				gap: 1rem;
				padding: 3rem 0;
				opacity: 0;
				visibility: hidden;
				transform: translateY(1.5rem);

				& > div {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					gap: 1rem;
				}

				& img {
					width: 72px;
					height: 72px;
					object-fit: cover;
				}

				&[data-active="true"] {
					opacity: 1;
					visibility: visible;
					transform: translateY(0);
				}

				& h3 {
					font-size: 1.2rem;
					font-weight: 600;
					color: #2c2b2b;
				}

				& small {
					font-size: 0.85rem;
					color: #2c2b2b;
					font-weight: 500;
				}

				& p {
					max-width: 620px;
					font-size: 1.5rem;
					line-height: 2;
					color: #31313b;
					text-wrap: balance;
				}
			}

			& header {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				gap: 0.5rem;
				margin-bottom: 1rem;

				& > button {
					background-color: transparent;
					border: none;
					outline: none;
					font-size: 0.8rem;
					font-weight: 400;
					color: #2c2b2b;
					padding: 0.7rem 1.2rem;
				}

				& p {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 0.4rem;
					margin: 0;
					color: #2c2b2b;
					font-weight: 400;
				}

				& span {
					color: #2c2b2b;
				}
			}
		}
	}

	& .client-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		padding: 2rem 0 5rem 0;

		& section {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
			width: 100%;
		}
		& button {
			background-color: transparent;
			border: none;
			outline: none;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 1rem;

			& img {
				max-width: 202px;
				width: 100%;
				height: auto;
				display: block;
			}
		}
	}
}
.contact-page {
	padding-block: 50px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;

	&[hidden] {
		display: none;
	}

	& .form {
		color: #2c2b2b;
		background-color: #fff;
		width: 520px;
		min-height: 650px;
		padding: 2rem;
		border-radius: 1rem;
	}

	& h1 {
		font-size: 1.8rem;
		font-weight: 500;
		max-width: 350px;
		margin-bottom: 2rem;
	}

	& form {
		&[data-current="2"] {
			& fieldset[data-step="1"] {
				display: none;
			}

			& fieldset[data-step="2"] {
				display: flex;
			}
		}

		&:not([data-current="2"]) {
			& fieldset[data-step="2"] {
				display: none;
			}
		}
	}

	& progress {
		appearance: none;
		width: 100%;
		height: 4px;
		margin: 1rem 0 2rem 0;
		border: none;
		border-radius: 50em;
		overflow: hidden;
		background-color: color-mix(in srgb, var(--clr-1) 20%, #fff);
	}

	& progress::-webkit-progress-bar {
		background-color: color-mix(in srgb, var(--clr-1) 20%, #fff);
	}

	& progress::-webkit-progress-value {
		background-color: var(--clr-1);
		transition: 0.3s;
	}

	& progress::-moz-progress-bar {
		background-color: var(--clr-1);
	}

	& fieldset {
		border: 0;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	& label {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 72px;

		&:focus-within input {
			border-bottom-color: var(--clr-1);
		}

		& > span {
			color: #746d6d;
			font-weight: 400;
			font-size: 1.2rem;
		}
	}

	& input {
		background-color: transparent;
		border: none;
		outline: none;
		border-bottom: 1px solid color-mix(in srgb, var(--clr-1) 20%, #fff);
		height: 62px;
		font-size: 1.3rem;
		font-weight: 500;
		color: #1d1e20;
		transition: 0.3s;
	}

	& textarea {
		border-radius: 1rem;
		border: 1px solid #e8e8e8;
		outline: none;
		background-color: transparent;
		padding: 2rem 1rem;
		font-size: 1.2rem;
		font-weight: 500;
		resize: vertical;
	}

	& footer {
		display: flex;
		gap: 1rem;
	}

	& fieldset > button,
	& footer button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160px;
		margin: 0 auto;
		background-color: #e8e8e8;
		color: var(--clr-1);
		font-size: 1rem;
		border: none;
		outline: none;
		padding: 1rem;
		border-radius: 1rem;
	}

	& footer button:first-child {
		background-color: #fff8e1;
		color: #e7b719;
	}

	& #budgetSelect {
		position: relative;
		margin-top: 1rem;

		&[open] {
			& ul {
				opacity: 1;
				visibility: visible;
				transform: translateY(0);
				pointer-events: auto;
			}

			& i {
				transform: rotate(180deg);
			}
		}

		&[data-invalid="true"] {
			& > button {
				border-color: #e63946;
			}
		}

		& > button {
			width: 100%;
			height: 58px;
			border-radius: 1rem;
			border: 1px solid #e8e8e8;
			background-color: #fff;
			color: #31313b;
			padding: 0 1rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 1rem;
			transition: 0.3s;
		}

		& > button:hover,
			& > button:focus {
				border-color: var(--clr-1);
		}

		& button span {
			color: #31313b;
			font-size: 1rem;
			font-weight: 500;
			text-align: right;
		}

		& i {
			display: flex;
			width: 32px;
			aspect-ratio: 1;
			background-image: url(access/img/icon/arrow.svg);
			background-size: 16px;
			background-position: center;
			background-repeat: no-repeat;
			filter: invert(1);
			opacity: 0.8;
			transition: 0.3s;
		}

		& ul {
			position: absolute;
			bottom: calc(100% + 10px);
			right: 0;
			width: 100%;
			background-color: #fff;
			border: 1px solid #e8e8e8;
			border-radius: 1rem;
			padding: 0.5rem;
			margin: 0;
			list-style: none;
			z-index: 20;
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transform: translateY(-8px);
			transition: 0.3s;
		}

		& li {
			display: flex;
			flex-direction: column;
			padding: 0.9rem 1rem;
			border-radius: 0.8rem;
			transition: 0.3s;
		}

		& li:hover,
			& li[aria-selected="true"] {
				background-color: color-mix(in srgb, var(--clr-1) 10%, #fff);
		}

		& strong {
			color: #1d1e20;
			font-size: 1rem;
			font-weight: 700;
		}

		& small {
			color: #746d6d;
			font-size: 0.9rem;
			font-weight: 400;
		}
	}

	& .comment {
		width: calc(100% - 520px);
	}

	& output {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-20px);
		color: #fff;
		padding: 1rem 1.5rem;
		border-radius: 1rem;
		font-size: 1rem;
		font-weight: 500;
		opacity: 0;
		pointer-events: none;
		z-index: 9999;
		transition: 0.3s ease;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);

		&[open] {
			opacity: 1;
			transform: translateX(-50%) translateY(0);
		}

		&[data-type="success"] {
			background-color: #1f9d55;
		}

		&[data-type="error"] {
			background-color: #e63946;
		}
	}
}
.slider {
	width: calc(100% - 600px);

	& .brand-container {
		position: relative;
		height:541px;
		overflow: hidden;
		mask-image: linear-gradient(
			to right,
			rgba(0,0,0,0),
			rgba(0,0,0,1) 10%,
			rgba(0,0,0,1) 90%,
			rgba(0,0,0,0)
		);

		& .brand-wrapper {
			position: absolute;
			width: 405px;
			height: auto;
			left: max( calc(405px * 7), 100%);
			--time: 40s;
			animation: scrolerBrands var(--time) linear infinite;
			animation-delay: calc(var(--time) / 7  * (7 - var(--item))  * -1);

			& img {
				display: block;
				width: 100%;
				height: auto;
				border-radius: 1rem;
			}
		}
	}
}
.contact-success {
	background-color: #1d1e20;
	padding: 2rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	animation: successFade 0.4s ease forwards;

	&[hidden] {
		display: none;
	}

	& > article {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		gap: 1.5rem;
		color: #fff;
	}

	& img {
		width: 120px;
		height: 120px;
		object-fit: cover;
		border-radius: 50em;
	}

	& h2 {
		font-size: 1.7rem;
		font-weight: 700;
		line-height: 1.5;
		margin: 0 0 0.5rem;
	}

	& p {
		color: #e4e5ee;
		font-size: 1.1rem;
		line-height: 1.9;
		margin: 0;
	}

	& ol {
		list-style: none;
		counter-reset: steps;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		padding: 0;
		margin: 1.5rem 0;
	}

	& li {
		counter-increment: steps;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 1rem;
		padding: 1rem;
		border-radius: 1rem;
		background-color: #31313b;

		&::before {
			content: counter(steps);
			width: 32px;
			height: 32px;
			border-radius: 50em;
			color: color-mix(in srgb, var(--clr-1) 20%, #fff);
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			padding-top: 2px;
		}
	}

	& li article {
		width: calc(100% - 120px);
	}

	& strong {
		display: block;
		color: #8a8a91;
		font-weight: 400;
		font-size: 0.9rem;
	}

	& a {
		background-color: #b6b0b0;
		color: #31313b;
		padding: 0.7rem 1rem;
		border-radius: 0.8rem;
		font-size: 0.9rem;
		font-weight: 500;
		white-space: nowrap;
	}

	& button {
		width: 100%;
		border: none;
		outline: none;
		background-color: #31313b;
		color: #b6b0b0;
		padding: 1rem;
		border-radius: 1rem;
		font-size: 1rem;
		font-weight: 700;
	}
}
.portfolio-page {
	--portfolio-accent: var(--clr-1, #6c5ce7);
	--portfolio-text: #1d1e20;
	--portfolio-muted: #777;
	--portfolio-border: #dedede;
	--portfolio-soft: #f7f7f8;
	--portfolio-card: #fff;

	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 2rem;
	align-items: center;
	justify-content: center;
	padding: 5rem 1rem 2rem;
	direction: rtl;

	& h1,
	& h2 {
		font-size: 3rem;
		font-weight: 600;
		color: var(--portfolio-text);
		max-width: 650px;
		text-wrap: balance;
		text-align: center;
		line-height: 1.5;
		margin: 0;
	}

	& > p {
		max-width: 760px;
		margin: -0.75rem 0 1rem;
		color: var(--portfolio-muted);
		font-size: 1rem;
		line-height: 2;
		text-align: center;
	}

	& .tabs {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap: 1rem;
		flex-wrap: wrap;
		width: 100%;
		padding-bottom: 3rem;
		position: relative;
		z-index: 20;

		& details {
			position: relative;
			min-width: 13rem;

			&[open] summary {
				border-color: color-mix(in srgb, var(--portfolio-accent) 60%, #fff);

				&::before {
					inset: 0 -24px -100px -24px;
					border-radius: 0;
				}

				& svg {
					transform: rotate(180deg);
				}
			}
		}

		& summary {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
			min-height: 3.25rem;
			padding: 0 1.25rem;
			border: 1px solid var(--portfolio-border);
			border-radius: 100vw;
			background: #fff;
			color: var(--portfolio-text);
			font-size: 1rem;
			font-weight: 500;
			list-style: none;
			transition: 0.25s ease;
			position: relative;
			overflow: hidden;
			isolation: isolate;
			user-select: none;

			&::before {
				position: absolute;
				content: '';
				inset: 100% 0 -100px 0;
				border-radius: 100% 100% 0 0;
				background-color: color-mix(in srgb, var(--portfolio-accent) 10%, #fff);
				z-index: -1;
				transition: 0.3s;
			}

			&::-webkit-details-marker {
				display: none;
			}

			&:hover {
				border-color: color-mix(in srgb, var(--portfolio-accent) 35%, #fff);
			}

			&:focus-visible {
				outline: 3px solid color-mix(in srgb, var(--portfolio-accent) 25%, transparent);
				outline-offset: 4px;
			}

			& svg {
				width: 1.25rem;
				height: 1.25rem;
				transition: 0.25s ease;
				flex: 0 0 auto;

				& path {
					fill: none;
					stroke: currentColor;
					stroke-width: 2;
					stroke-linecap: round;
					stroke-linejoin: round;
				}
			}
		}

		& form {
			position: absolute;
			top: calc(100% + 0.75rem);
			right: 0;
			z-index: 10;
			display: grid;
			gap: 0.25rem;
			width: max-content;
			min-width: 18rem;
			max-height: 22rem;
			overflow: auto;
			padding: 0.75rem;
			border: 1px solid #ededed;
			border-radius: 1.25rem;
			background: #fff;
		}

		& label {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			padding: 0.75rem;
			border-radius: 0.875rem;
			color: var(--portfolio-text);
			font-size: 0.95rem;
			line-height: 1.7;
			transition: 0.2s ease;

			&:hover {
				background: #f5f5f5;
			}

			&:has(input:checked) {
				background: color-mix(in srgb, var(--portfolio-accent) 9%, #fff);
			}
		}

		& input {
			appearance: none;
			width: 1.125rem;
			height: 1.125rem;
			flex: 0 0 auto;
			border: 1px solid #cfcfcf;
			border-radius: 0.35rem;
			display: grid;
			place-items: center;
			transition: 0.2s ease;

			&::before {
				content: "";
				width: 0.55rem;
				height: 0.55rem;
				border-radius: 0.2rem;
				background: var(--portfolio-text);
				transform: scale(0);
				transition: 0.15s ease;
			}

			&:checked {
				border-color: var(--portfolio-text);
				background: #fff;

				&::before {
					transform: scale(1);
				}
			}

			&:focus-visible {
				outline: 3px solid color-mix(in srgb, var(--portfolio-accent) 25%, transparent);
				outline-offset: 3px;
			}
		}

		& span {
			flex: 1;
			white-space: nowrap;
		}

		& small {
			color: var(--portfolio-muted);
			font-size: 0.85rem;
			direction: ltr;
		}

		& .reset-filters {
			min-height: 3.25rem;
			padding: 0 1.25rem;
			border: 1px solid #ededed;
			border-radius: 100vw;
			background: var(--portfolio-soft);
			color: var(--portfolio-text);
			font-family: inherit;
			font-size: 0.95rem;
			font-weight: 500;
			transition: 0.25s ease;

			&:hover {
				background: var(--portfolio-text);
				color: #fff;
				border-color: var(--portfolio-text);
			}

			&:focus-visible {
				outline: 3px solid color-mix(in srgb, var(--portfolio-accent) 25%, transparent);
				outline-offset: 4px;
			}
		}
	}

	& .list {
		width: 100%;
		position: relative;
		z-index: 1;

		& .portfolio-list {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			width: 100%;
			padding: 0;
			margin: 0;
			list-style: none;
		}

		& .portfolio-card {
			display: flex;
			width: 100%;
			transition: opacity 0.25s ease, transform 0.25s ease;

			&.is-hidden {
				display: none;
			}

			& article {
				display: flex;
				width: 100%;
			}

			& a {
				display: flex;
				width: 100%;
				padding: 1rem;
				background-color: color-mix(in srgb, var(--clr-1) 5%, #fff);
				border-radius: 1rem;
				overflow: hidden;
				transition: 0.3s ease;

				&:hover {
					border-color: color-mix(in srgb, var(--portfolio-accent) 35%, #fff);

					& img {
						transform: scale(1.01);
					}

					& h3 {
						color: color-mix(in srgb, var(--portfolio-accent) 70%, var(--portfolio-text));
					}
				}

				&:focus-visible {
					outline: 3px solid color-mix(in srgb, var(--portfolio-accent) 25%, transparent);
					outline-offset: 5px;
				}
			}

			& figure {
				width: 100%;
				max-width: 300px;
				aspect-ratio: 3/2;
				overflow: hidden;
				border-radius: 1rem;
			}

			& img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: top;
				transition: 0.45s ease;
			}

			& .portfolio-content {
				display: flex;
				flex-direction: column;
				gap: 0.75rem;
				flex: 1;
				padding: 1.25rem;
			}

			& h3 {
				color: var(--portfolio-text);
				font-size: 1.2rem;
				font-weight: 500;
				line-height: 1.2;
				transition: 0.25s ease;
			}

			& p {
				margin: 0;
				color: #606166;
				font-size: 0.95rem;
				line-height: 2;
			}

			& .portfolio-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 0.5rem;
				padding: 0;
				margin: auto 0 0;
				list-style: none;

				& li {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					min-height: 2rem;
					padding: 0.25rem 0.7rem;
					border-radius: 100vw;
					background: #fff;
					box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
					color: #4b4c50;
					font-size: 0.8rem;
					font-weight: 500;
					line-height: 1.6;
					white-space: nowrap;
				}
			}
		}

		& .empty-message {
			width: 100%;
			margin: 2rem 0 0;
			padding: 1.25rem;
			background: #fafafa;
			color: var(--portfolio-muted);
			font-size: 1rem;
			line-height: 2;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			text-align: center;

			& strong {
				font-size: 1.2rem;
				color: #1d1e20;
			}

			&[hidden] {
				display: none;
			}
		}
	}

	@media (max-width: 1024px) {
		& .list {
			& .portfolio-list {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}
	}

	@media (max-width: 768px) {
		padding-top: 3rem;

		& .tabs {
			justify-content: stretch;
			padding-bottom: 2rem;

			& details {
				width: 100%;
				min-width: 0;
			}

			& summary {
				width: 100%;
			}

			& form {
				position: static;
				width: 100%;
				min-width: 0;
				margin-top: 0.75rem;
				box-shadow: none;
			}

			& .reset-filters {
				width: 100%;
			}
		}

		& .list {
			& .portfolio-list {
				grid-template-columns: 1fr;
			}
		}
	}

	@media (max-width: 480px) {
		gap: 1.5rem;
		padding-inline: 0.75rem;

		& .tabs {
			gap: 0.75rem;

			& summary,
			& .reset-filters {
				min-height: 3rem;
				padding-inline: 1rem;
				font-size: 0.95rem;
			}

			& form {
				border-radius: 1rem;
			}

			& label {
				font-size: 0.9rem;
			}
		}

		& .list {
			& .portfolio-card {
				& a {
					border-radius: 1.25rem;
				}

				& .portfolio-content {
					padding: 1rem;
				}

				& h3 {
					font-size: 1.05rem;
				}

				& p {
					font-size: 0.9rem;
				}
			}
		}
	}
}
.portfolio-article {
	display: flex;
	flex-direction: column;
	padding: 5rem 0;

	& .view-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& h1 {
			font-size: 2rem;
			font-weight: 500;
			margin-bottom: 2rem;
			color: #1d1e20;
		}

		& p {
			max-width: 720px;
			text-align: justify;
			text-align-last: center;
			line-height: 2;
			font-weight: 400;
			color: #1d1e20;
		}

		& section {
			display: flex;
			align-items: center;
			width: calc(100% - 4rem);
			height: 70vh;
			border-radius: 1rem;
			box-shadow: 0 0 0 4px #ebe5e5;
			position: relative;
			margin: 4rem 0;

			& button {
				position: absolute;
				z-index: 2;
				top: -4px;
				right: 3rem;
				border: none;
				outline: none;
				background-color: #fff;
				color: #1d1e20;
				padding: 0.5rem 2rem;
				border-radius: 0 0 1.2rem 1.2rem;

				&::after ,
				&::before {
					position: absolute;
					content: '';
					width: 2rem;
					aspect-ratio: 1;
					border-radius: 50em;
					background-color: transparent;
					top: 0;
					transform: translateX(-100%);
					pointer-events: none;
				}
				&::before {
					left: 0;
					transform: translateX(-100%);
					box-shadow: 1rem -1rem 0 0 #fff;
				}
				&::after {
					right: 0;
					transform: translateX(100%);
					box-shadow: -1rem -1rem 0 0 #fff;
				}

			}

			& figure {
				width: 100%;
				border-radius: 1rem;
				overflow: hidden;
				height: 100%;

				& img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: top;
					transition: 1s;
				}
			}

			&:hover {
				& figure {
					& img {
						transition: 5s;
						object-position: bottom;
					}
				}
			}

		}

	}

	& .info-wrapper {
		margin: 3rem 0 5rem;

		& header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			& div {
				display: flex;
				align-items: center;
				gap: 1.2rem;

				& span {
					position: relative;
					font-size: 1rem;
					font-weight: 500;
					color: var(--clr-1);
					display: flex;
					align-items: center;
					gap: 0.5rem;

					&::before {
						content: '';
						width: 8px;
						aspect-ratio: 1;
						border-radius: 50em;
						background-color: #e7b719;
						display: block;
					}
				}
			}

			& bdi {
				font-size: 1.4rem;
				font-weight: 500;
				color: #1d1e20;
			}
		}

		& section {
			display: flex;
			flex-direction: column;
			width: 100%;
			overflow: hidden;
			margin-top: 3rem;

			& div {
				display: flex;
				align-items: stretch;
				justify-content: space-between;

				& span {
					width: 50%;
					padding: 1rem;
					box-shadow: 0 0 0 1px #dddada;
					text-align: justify;
				}
			}
		}
	}

	& .banner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;

		& a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;

			& img {
				display: block;
				width: 100%;
				height: auto;
				border-radius: 2rem;
			}
		}
	}

	& .button {

		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2rem;
		margin: 4rem 0 0 0;

		& .cta-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 160px;
			height: 52px;
			background-color: #e8e8e8;
			border-radius: 1rem;
			font-size: 1rem;
			color: var(--clr-1);
			will-change: transform;
		}
	}

}
.error-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 1rem;
	padding: 100px 0;
	min-height: 30vh;
	color: #fff;

	& h1 {
		font-size: 4rem;
		font-weight: 700;
		text-align: center;
		color: #e7b719;
	}

	& p {
		font-size: 1rem;
		font-weight: 400;
	}

	& a {
		font-size: 1rem;
		background-color: #31313b;
		color: #b6b0b0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160px;
		height: 52px;
		border-radius: 1rem;
		font-size: 1rem;
		will-change: transform;
	}

}

.services-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 2rem;
	margin: 4rem auto;

	& header {
		width: 100%;

		& h2 {
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 2rem;
			color: #111114;
			font-weight: 500;
		}

	}

	& > div {
		display: flex;
		gap: 1rem;
		width: 100%;
		background-color: #e8e8e8;
		padding: 2rem 2rem 1rem 2rem;
		border-radius: 1.5rem;

		& article {
			width: 100%;

			& > a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 0 1rem 0;
				border-bottom: 1px solid rgba(0, 0, 0, 0.3);

				& h3 {
					font-size: 1.4rem;
					font-weight: 600;
					color: #111114;
					display: flex;
					flex-direction: column;
					height: 2rem;
					overflow: hidden;

					& span {
						height: 2rem;
					}

				}

				& > span {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					width: 3rem;
					aspect-ratio: 1;
					border-radius: 50em;
					box-shadow: var(--box-shadow-white);
					overflow: hidden;
					position: relative;
					margin-right: auto;
                    transition: 1s;
					isolation: isolate;

					&::before {
						position: absolute;
						content: '';
						z-index: -1;
						background-color: color-mix(in srgb, var(--clr-1) 10%, #000);
						inset: 2.5rem;
						opacity: 0;
						border-radius: 50em;
						transition: 0.5s;
					}

					& svg {
						width: 3rem;
						aspect-ratio: 1;
						padding: 0.75rem;
						color: rgba(0, 0, 0, 0.8);

						&:first-child {
							position: absolute;
							top: 0;
							left: 0;
						}
						&:last-child {
							position: absolute;
							top: 1.6rem;
							left: 1.6rem;
						}
					}

				}

				& img {
					width: 3rem;
					aspect-ratio: 1;
					display: block;
				}

				&:hover {
					& h3 {
						& span {
							transition: 0.3s;
							transform: translateY(-100%);
						}
					}

					& > span {
                        box-shadow: var(--box-shadow-black);
						&::before {
							inset: 0;
							opacity: 1;
						}
					}
					& svg {
						transition: 0.3s;
						color: #fff;

						&:first-child {
							top: -1.6rem;
							left: -1.6rem;
						}

						&:last-child {
							top: 0;
							left: 0;
						}
					}
				}
			}

			& ul {
				& li {
					&:last-child {
						& a {
							border-bottom: none;
						}
					}

					& a {
						display: flex;
						justify-content: space-between;
						padding: 1rem 0;
						border-bottom: 1px solid rgba(0, 0, 0, 0.3);


						& h4 {
							display: flex;
							flex-direction: column;
							height: 24px;
							overflow: hidden;

							& span {
								display: flex;
								height: 24px;
								font-size: 16px;
								font-weight: 500;
								color: #1d1e20;
							}
						}

						&:hover {
							& h4 {
								& span {
									transition: 0.3s;
									transform: translateY(-100%);
								}
							}
						}
					}

				}
			}

		}

	}

	& aside {
		width: 100%;
		background-color: color-mix(in srgb, var(--clr-1) 20%, #000);
		border-radius: 1.5rem;
		padding: 1rem 2rem 1rem 1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;

		& p {
			color: #fff;
			font-size: 1.4rem;
		}

		& a {
			color: color-mix(in srgb, var(--clr-1) 20%, #000);
			background-color: #e7b719;
			padding: 0.8rem 1.2rem;
			border-radius: 1rem;
            box-shadow: inset 0 0 0 1px rgb(237 234 105 / 42%), inset 2px 2px 0 -1px rgb(255 237 185 / 90%), inset -2px -2px 0 -1px rgb(155 115 32 / 55%), inset -2px -7px 2px -6px rgb(153 136 75 / 50%), inset -1px 2px 4px -1px rgb(146 123 79 / 13%), 0px 0px 9px rgb(230 210 86 / 11%);
		}

	}
}
.mobile-nav-liquid-filter {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

@keyframes successFade {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(25%);
	}
}
@keyframes lineHorizontal {
	0% {top: -120px;}
	10%,100% {top: 100%;}
}
@keyframes scrolerBrands {
	to {left: -405px;}
}
@keyframes colorHeart {
	to {
		filter: hue-rotate(360deg);
	}
}
@keyframes move-forever {
	0% {
		-webkit-transform: translate3d(-90px, 0, 0);
		transform: translate3d(-90px, 0, 0)
	}

	100% {
		-webkit-transform: translate3d(85px, 0, 0);
		transform: translate3d(85px, 0, 0)
	}
}





/**************** mobile ****************/
@media (min-width: 1921px) {
}
@media (max-width: 1440px) {
}
@media (max-width: 1232px) {
}
@media (min-width: 1025px) {
	* {
		cursor: none;
	}
	.mobile-nav {
		display: none;
	}
	.cursor-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		transform: translate(-50%, -50%);
		width: 24px;
		height: 24px;
		mix-blend-mode: difference;
		z-index: 10939033;

		&::before {
			position: absolute;
			inset: 0 calc(50% - 1px);
			content: '';
			background-color: #fff;
		}
		&::after {
			position: absolute;
			inset: calc(50% - 1px) 0;
			content: '';
			background-color: #fff;
		}
		&.link::before {
            inset: -2px;
            border-radius: 50em;
            box-shadow: var(--box-shadow-black);
        }
		&.link::after {
            opacity: 0;
			inset: calc(50% - 8px);
			border-radius: 50em;
		}
		&.logo::before,
		&.logo::after {
			inset: 50%;
		}
		&.ticker {
			width: 120px;
			height: 32px;
		}
		&.ticker::after {
			opacity: 0;
		}
		&.ticker::before {
			inset: 2px;
		}
		&.heart::after,
		&.service::after,
		&.sun::after {
			opacity: 0;
		}
		&.heart::before,
		&.service::before,
		&.sun::before {
			background-color: transparent;
			background-image: url(access/img/icon/sun.svg);
			background-position: center center;
			background-size: cover;
			inset: 2px;
		}
		&.satisfaction::before {
			background-image: url(access/img/icon/satisfaction.svg);
		}
		&.team::before {
			background-image: url(access/img/icon/team.svg);
		}
		&.services::before {
			background-image: url(access/img/icon/services.svg);
		}
		&.projects::before {
			background-image: url(access/img/icon/projects.svg);
		}
		&.service::before {
			background-image: url(access/img/icon/arrow.svg);
		}
		&.heart::before {
			background-image: url(access/img/icon/heart.svg);
			animation: colorHeart 3s linear infinite;
		}
		&.servicerevers::before {
			transform: rotate(180deg) ;
		}
		&.text::after {
			width: 0;
		}
	}
	.header-box {
		& nav ul {
			display: flex;
			align-items: center;
			gap: 2rem;
			& a {
				display: flex;
				align-items: center;
				gap: 0.5rem;
				font-size: 1rem;
				font-weight: 400;
				color: #31313b;
				transition: 0.3s;
				border: none;
				outline: none;
				background-color: transparent;

				&:hover {
					color: var(--clr-1);
					& svg {
						fill: #e7b719;
					}
				}
				& svg {
					aspect-ratio: 1;
					stroke: #fff;
					fill: currentColor;
					transition: 0.3s;
				}


			}
		}
	} 
	.back-black {
		& .header-box nav a:hover {
			opacity: 1;
		}
		& .header-box nav a {
			color: #fff !important;
			opacity: 0.5;
		}
		& .header-box svg {
			stroke: #1d1e20
		}
		& .header-box nav a:hover svg {
			fill: #fff;
		}
		& .logo-box:hover div {
			opacity: 1;
			box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.85);
		}
	}
}
@media (max-width: 1024px) {
	.mobile-nav {
		--active-offset: 0%;
		position: fixed;
		z-index: 1000;
		left: 50%;
		bottom: max(12px, env(safe-area-inset-bottom));
		transform: translateX(-50%);
		direction: rtl;
		isolation: isolate;
		display: flex;
		align-items: center;
		width: calc(100% - 24px);
		max-width: 390px;
		height: 72px;
		padding: 8px;
		border: 0;
		border-radius: 50em;
		background: linear-gradient(180deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.2) 5px);
		background-clip: padding-box;
		-webkit-backdrop-filter:
			blur(12px)
			saturate(180%);
		backdrop-filter:
			url("#switcher")
			blur(5px)
			saturate(180%);
		box-shadow:
			inset 0 0 0 1px rgba(255, 255, 255, 0.38),
			inset 2px 3px 0 -2px rgba(255, 255, 255, 0.9),
			inset -2px -2px 0 -2px rgba(255, 255, 255, 0.65),
			inset -3px -9px 2px -7px rgba(255, 255, 255, 0.45),
			inset -1px -1px 4px rgba(0, 0, 0, 0.08),
			0 3px 8px rgba(0, 0, 0, 0.09),
			0 18px 40px rgba(0, 0, 0, 0.13);

		&::after {
			content: "";
			position: absolute;
			z-index: -2;
			inset: 0;
			border-radius: inherit;
			pointer-events: none;
			background:
				linear-gradient(
					115deg,
					rgba(255, 255, 255, 0.22),
					rgba(201, 189, 189, 0.36)
				);
		}

		&::before {
			position: absolute;
			content: "";
			z-index: -1;
			top: 6px;
			right: 8px;
			bottom: 6px;
			width: calc((100% - 16px) / 4);
			border-radius: 999px;
			pointer-events: none;
			opacity: 0;
			visibility: hidden;
			background-color: rgba(255, 255, 255, 0.5);
			-webkit-backdrop-filter: blur(10px) saturate(180%);
			backdrop-filter: blur(10px) saturate(180%);
			box-shadow:
				inset 0 0 0 1px rgba(255, 255, 255, 0.42),
				inset 2px 2px 0 -1px rgba(255, 255, 255, 0.9),
				inset -2px -2px 0 -1px rgba(255, 255, 255, 0.55),
				inset -2px -7px 2px -6px rgba(255, 255, 255, 0.5),
				inset -1px 2px 4px -1px rgba(0, 0, 0, 0.13),
				0 5px 12px rgba(0, 0, 0, 0.11);
			transform:
				translateX(var(--active-offset))
				scale(1);
			transition:
				transform 460ms cubic-bezier(0.75, -0.15, 0.25, 1.15),
				opacity 180ms ease,
				visibility 180ms ease,
				background-color 300ms ease,
				box-shadow 300ms ease;
		}

		&.has-active-item::before {
			opacity: 1;
			visibility: visible;
		}

		&.is-changing::before {
			animation: liquid-pop 460ms ease;
		}

		& > a {
			position: relative;
			z-index: 1;
			display: flex;
			flex: 1 1 25%;
			align-items: center;
			justify-content: center;
			gap: 5px;
			min-width: 0;
			height: 100%;
			padding: 0 4px;
			border-radius: 50em;
			color: #111114;
			font-size: 11.5px;
			font-weight: 600;
			line-height: 1;
			white-space: nowrap;
			text-decoration: none;

			-webkit-tap-highlight-color: transparent;

			transition:
				color 180ms ease,
				transform 180ms ease;

			&:hover {
				color: rgba(15, 15, 18, 0.9);
			}

			&:active {
				transform: scale(0.93);
			}

			& svg {
				display: none;
				flex: 0 0 auto;
				width: 20px;
				height: 20px;
				fill: currentColor;
				stroke: #d0cbcc;
				stroke-width: 1.8;
				stroke-linecap: round;
				stroke-linejoin: round;
				opacity: 0;
				transition:
					opacity 180ms ease,
					transform 220ms cubic-bezier(0.5, 0, 0, 1);
			}

			&.line svg {
				display: block;
				opacity: 1;
				transform: scale(1.08);
			}

			& span {
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			&:focus-visible {
				outline: 2px solid rgba(0, 82, 245, 0.85);
				outline-offset: -4px;
			}
		}
	}

	@keyframes liquid-pop {
		0% {
			scale: 1 1;
		}

		45% {
			scale: 1.15 0.93;
		}

		75% {
			scale: 0.98 1.03;
		}

		100% {
			scale: 1 1;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.mobile-nav {
			&::before,
			& > a,
			& > a svg {
				animation: none !important;
				transition: none !important;
			}
		}
	}

	@supports not (
		(backdrop-filter: blur(1px)) or
		(-webkit-backdrop-filter: blur(1px))
	) {
		.mobile-nav {
			background: rgba(245, 245, 248, 0.96);

			&::before {
				background: rgba(255, 255, 255, 0.94);
			}
		}
	}
	.primary-header {
		overflow: visible;
		backdrop-filter: none;

		& .cta-btn {
			height: 42px;
		}
		& .header-box {
			& nav {
				display: none;
			}
		}

	}
	.reviews-wrapper {
		grid-template-columns: 1fr;
		gap: 2rem;

		& > section:last-child {
			position: static;

			& > div {
				min-height: 300px;
			}

			& article {
				padding: 1.5rem;

				& h3 {
					font-size: 1.7rem;
				}
			}
		}
	}
	.road-map {
		padding: 10px 0;
		margin-top: 1rem;

		.container {
			flex-direction: column-reverse;
			gap: 2rem;
			padding: 1rem 2rem;

			&::before {
				display: none;
			}

			& .brand-col, & .brand-col {
				flex-direction: column-reverse;
				& > section {
					flex-direction: row;
					gap: 1rem;
					& span {
						margin: 0 !important;
					}
				}

				& > div {
					& p {
						display: none;
					}
					& section {
						width: 100%;
						aspect-ratio: auto;
						& span {
							margin: 0 !important;
							flex: 1 1 auto;
						}
					}
				}

				& p {
					width: auto;

					& span {
						order: -1;
					}
				}

			}
		}

		&::after {
			width: 70%;
		}
		&::before {
			width: 100%;
			height: 100%;
			aspect-ratio: auto;
			border-radius: 2rem;
		}

	}
	.costomer-wrapper {
		padding: 2rem 0;

		& section {
			grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
			& img {
				width: 100%;
			}
		}
	}
}
@media (max-width: 768px) {
	.contact-success {
		flex-direction: column;
		& > * {
			width: 100%;
		}
	}
	.post-wrapper {
		& section,
		& header {
			flex-direction: column;
		}
	}
	.services-wrapper {
		& > div {
			gap: 1rem;
			flex-direction: column;
		}
	}
}
@media (max-width: 592px) {
	.reviews-wrapper {
		padding: 2rem 0;

		& > section:first-child {
			& button {
				padding: 1.2rem 0;

				& span {
					font-size: 1rem;
				}

				& i {
					width: 1.8rem;
				}
			}
		}

		& > section:last-child {
			& > div {
				min-height: 280px;
				border-radius: 1rem;
			}

			& article {
				padding: 1.2rem;

				& h3 {
					font-size: 1.4rem;
				}

				& p {
					font-size: 0.85rem;
				}
			}

			& header {
				& > button {
					padding: 0.6rem 0.9rem;
				}
			}
		}
	}
	.primary-footer {
		& .bottom {
			align-items: flex-start;
			flex-direction: column;

			& p, & a {
				font-size: 16px
			}

		}
	}
}
@media (max-width: 425px) {
}