@charset "utf-8";










/* LARGE DEVICE------------------------------------------------ */
@media only screen and (min-width : 1200px)
{

/* HEADER START */
.fx-rotator { position: relative;
	color: transparent;
  	clip-path: inset(0 -2em);
	}
.fx-rotator::before { content: "POST";
	position: absolute;
  	inset: 0;
  	animation: fx-rotator-word 8s infinite,
    fx-rotator-slide 2s cubic-bezier(.7, 0, .3, 1) infinite;
	margin-top: 1px;
	}
@keyframes fx-rotator-word {
  	0%, 24.99% { content: "POST";
	font-size: 1.1em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #ff3b3b;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;}
  	25%, 49.99% { content: "LOGO";
	font-size: 1.1em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #fff047;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;}
  	50%, 74.99% { content: "GRAPHICS";
	font-size: 1.1em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #47c2ff;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;  }
  	75%, 100% { content: "MOCKUPS";
	font-size: 1.1em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #30f38e;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;}
	}
@keyframes fx-rotator-slide {
  	0% { transform: translateY(100%); opacity: 0; }
  	18%, 82% { transform: translateY(0); opacity: 1; }
  	100% { transform: translateY(100%); opacity: 0; }
	}
@property --gf-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
	}
.fx-gradientframe::before { -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  	mask-composite: exclude;
  	animation: fx-gradientframe-spin 5.5s linear infinite;
	}
.fx-gradientframe::after {  content: '';
	position: absolute;
  	inset: -10px;
  	background: conic-gradient(
    from var(--gf-angle),
    #ff4fd83d,
    #4ff8ff3d,
    transparent 62% );
  	filter: blur(12px);
  	animation: fx-gradientframe-spin 5.5s linear infinite;
  	opacity: .9;
	}
@keyframes fx-gradientframe-spin { to { --gf-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .fx-gradientframe::before,
 	.fx-gradientframe::after { animation: none; }
	}
/* HEADER END */
	
/* SERVICE START */
.designhead { margin-top: 30px; }
	
.fx-decoder { color: tomato; }
.fx-decoder::after { content: "▓#@%&*!"; 
 	animation: fx-decoder 4s steps(1) infinite;
	}
@keyframes fx-decoder { 0%   { content: "▓#@%&*!"; color: yellow; }
	8%   { content: "DESI#%!▒"; color:cadetblue; }
  	16%  { content: "D$#@*!"; color:blueviolet; }
  	24%  { content: "DESIG#"; color:springgreen; }
  	32%  { content: "DESIG@"; color: yellow;}
  	39%  { content: "#@%&*!"; color: red; }
  	47%  { content: "▒DESI#%"; }
	47%, 90% { content: "DESIGN"; color: #e0dfdc;
    background-color: #333;
	padding: 5px;
    text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 
    	0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 
      	0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);}
	}
	
.offerbox{ padding: 10px;
	margin-bottom: 50px;
	border: 13px ridge #992020;}
/* SERVICE END */
	
/* PORFTOLIO START */
:root { --ink: currentColor; --ink-2: black; --ink-3: #4FF8FF; }
.fx-scanner strong { position: relative;
	font-size: 65px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 25%,  black) 0 40%, var(--ink) 50%,
	color-mix(in srgb, var(--ink) 25%,  #780F10) 60% 100% ) 0 0 / 300% 100%;
  	-webkit-background-clip: text;
  	background-clip: text;
  	color: transparent;
  	animation: fx-scan-glow 3.0s ease-in-out infinite alternate;
	}
.fx-scanner strong::after { content: "";
	position: absolute;
  	top: -6px;
  	bottom: -6px;
  	left: 0;
  	width: 3px;
  	background: var(--ink-2);
  	box-shadow: 0 0 14px var(--ink-2);
  	animation: fx-scan-bar 3.0s ease-in-out infinite alternate;
	}
@keyframes fx-scan-glow { 0%   { background-position: 100% 0; }
	100% { background-position: 0% 0; }
	}
@keyframes fx-scan-bar { 0%   { left: 0; transform: translateX(0); }
	100% { left: 100%; transform: translateX(-100%); }
	}
.porftoliobox { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; }
/* PORFTOLIO END */
	
.fx-neon { color: white;
  	animation: fx-neon 3.2s linear infinite;
	}
@keyframes fx-neon { 0%, 18%, 21%, 24%, 100% {
    opacity: 5;
    text-shadow: 0 0 4px #FF4FD8, 0 0 11px #FF4FD8, 0 0 24px #FF4FD8, 0 0 48px #FF4FD8; }
  	19%, 22%, 62% { opacity: .5;
    text-shadow: none; }
  	63%, 64.5% { opacity: .60;
    text-shadow: 0 0 4px white; }
	}
/* PRICING END */


	
}





/* MEDIUM DEVICE------------------------------------------------ */
@media only screen and (min-width : 991px) and (max-width : 1199px) 
{
	
/* HEADER START */
.fx-rotator { position: relative;
	color: transparent;
  	clip-path: inset(0 -2em);
	padding: 3px;
	}
.fx-rotator::before { content: "POST";
	position: absolute;
  	inset: 0;
  	animation: fx-rotator-word 8s infinite,
    fx-rotator-slide 2s cubic-bezier(.7, 0, .3, 1) infinite;
	}
@keyframes fx-rotator-word {
  	0%, 24.99% { content: "POST";
	font-size: 1.3em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #ff3b3b;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;}
  	25%, 49.99% { content: "LOGO";
	font-size: 1.3em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #fff047;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;}
  	50%, 74.99% { content: "GRAPHICS";
	font-size: 1.3em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #47c2ff;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;  }
  	75%, 100% { content: "MOCKUPS";
	font-size: 1.3em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #30f38e;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;}
	}
@keyframes fx-rotator-slide {
  	0% { transform: translateY(100%); opacity: 0; }
  	18%, 82% { transform: translateY(0); opacity: 1; }
  	100% { transform: translateY(100%); opacity: 0; }
	}
@property --gf-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
	}
.fx-gradientframe::before { -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  	mask-composite: exclude;
  	animation: fx-gradientframe-spin 5.5s linear infinite;
	}
.fx-gradientframe::after {  content: '';
	position: absolute;
  	inset: -10px;
  	background: conic-gradient(
    from var(--gf-angle),
    #ff4fd83d,
    #4ff8ff3d,
    transparent 62% );
  	filter: blur(12px);
  	animation: fx-gradientframe-spin 5.5s linear infinite;
  	opacity: .9;
	}
@keyframes fx-gradientframe-spin { to { --gf-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .fx-gradientframe::before,
 	.fx-gradientframe::after { animation: none; }
	}
/* HEADER END */
	
/* SERVICE START */
.designhead { margin-top: 30px; }
	
.fx-decoder { color: tomato;
	font-size: 45px;}
.fx-decoder::after { content: "▓#@%&*!"; 
 	animation: fx-decoder 4s steps(1) infinite;
	}
@keyframes fx-decoder { 0%   { content: "▓#@%&*!"; color: yellow; }
	8%   { content: "DESI#%!▒"; color:cadetblue; }
  	16%  { content: "D$#@*!"; color:blueviolet; }
  	24%  { content: "DESIG#"; color:springgreen; }
  	32%  { content: "DESIG@"; color: yellow;}
  	39%  { content: "#@%&*!"; color: red; }
  	47%  { content: "▒DESI#%"; }
	47%, 90% { content: "DESIGN"; color: #e0dfdc;
    background-color: #333;
	padding: 5px;
    text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 
    	0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 
      	0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);}
	}
	
.offerbox{ padding: 10px;
	margin-bottom: 50px;
	border: 13px ridge #992020;}
/* SERVICE END */

/* PORFTOLIO START */
:root { --ink: currentColor; --ink-2: black; --ink-3: #4FF8FF; }
.fx-scanner strong { position: relative;
	font-size: 55px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 25%,  black) 0 40%, var(--ink) 50%,
	color-mix(in srgb, var(--ink) 25%,  #780F10) 60% 100% ) 0 0 / 300% 100%;
  	-webkit-background-clip: text;
  	background-clip: text;
  	color: transparent;
  	animation: fx-scan-glow 3.0s ease-in-out infinite alternate;
	}
.fx-scanner strong::after { content: "";
	position: absolute;
  	top: -6px;
  	bottom: -6px;
  	left: 0;
  	width: 3px;
  	background: var(--ink-2);
  	box-shadow: 0 0 14px var(--ink-2);
  	animation: fx-scan-bar 3.0s ease-in-out infinite alternate;
	}
@keyframes fx-scan-glow { 0%   { background-position: 100% 0; }
	100% { background-position: 0% 0; }
	}
@keyframes fx-scan-bar { 0%   { left: 0; transform: translateX(0); }
	100% { left: 100%; transform: translateX(-100%); }
	}
.porftoliobox { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; }
/* PORFTOLIO END */
	
/* PRICING START */
.fx-neon { color: white;
  	animation: fx-neon 3.2s linear infinite;
	font-size: 40px;
	}
@keyframes fx-neon { 0%, 18%, 21%, 24%, 100% {
    opacity: 5;
    text-shadow: 0 0 4px #FF4FD8, 0 0 11px #FF4FD8, 0 0 24px #FF4FD8, 0 0 48px #FF4FD8; }
  	19%, 22%, 62% { opacity: .5;
    text-shadow: none; }
  	63%, 64.5% { opacity: .60;
    text-shadow: 0 0 4px white; }
	}
/* PRICING END */

	
}





/* SMALL DEVICE------------------------------------------------ */
@media only screen and (min-width : 768px) and (max-width : 990px) 

{

/* HEADER START */
.headtext { font-size: 46px; }
.fx-rotator { position: relative;
	color: transparent;
  	clip-path: inset(0 -2em);
	padding: 3px;
	}
.fx-rotator::before { content: "POST";
	position: absolute;
  	inset: 0;
	margin-top: 5px;
  	animation: fx-rotator-word 8s infinite,
    fx-rotator-slide 2s cubic-bezier(.7, 0, .3, 1) infinite;
	}
@keyframes fx-rotator-word {
  	0%, 24.99% { content: "POST";
	font-size: 1em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #ff3b3b;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;}
  	25%, 49.99% { content: "LOGO";
	font-size: 1em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #fff047;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;}
  	50%, 74.99% { content: "GRAPHICS";
	font-size: 1em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #47c2ff;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;  }
  	75%, 100% { content: "MOCKUPS";
	font-size: 1em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #30f38e;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;}
	}
@keyframes fx-rotator-slide {
  	0% { transform: translateY(100%); opacity: 0; }
  	18%, 82% { transform: translateY(0); opacity: 1; }
  	100% { transform: translateY(-100%); opacity: 0; }
	}
@property --gf-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
	}
.fx-gradientframe::before { -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  	mask-composite: exclude;
  	animation: fx-gradientframe-spin 5.5s linear infinite;
	}
.fx-gradientframe::after {  content: '';
	position: absolute;
  	inset: -10px;
  	background: conic-gradient(
    from var(--gf-angle),
    #ff4fd83d,
    #4ff8ff3d,
    transparent 62% );
  	filter: blur(12px);
  	animation: fx-gradientframe-spin 5.5s linear infinite;
  	opacity: .9;
	}
@keyframes fx-gradientframe-spin { to { --gf-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .fx-gradientframe::before,
 	.fx-gradientframe::after { animation: none; }
	}
/* HEADER END */
	
/* SERVICE START */
.designhead { margin-top: 30px; }
	
.fx-decoder { color: tomato;
	font-size: 45px;}
.fx-decoder::after { content: "▓#@%&*!"; 
 	animation: fx-decoder 4s steps(1) infinite;
	}
@keyframes fx-decoder { 0%   { content: "▓#@%&*!"; color: yellow; }
	8%   { content: "DESI#%!▒"; color:cadetblue; }
  	16%  { content: "D$#@*!"; color:blueviolet; }
  	24%  { content: "DESIG#"; color:springgreen; }
  	32%  { content: "DESIG@"; color: yellow;}
  	39%  { content: "#@%&*!"; color: red; }
  	47%  { content: "▒DESI#%"; }
	47%, 90% { content: "DESIGN"; color: #e0dfdc;
    background-color: #333;
	padding: 5px;
    text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 
    	0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 
      	0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);}
	}
	
.offerbox{ padding: 10px;
	margin-bottom: 50px;
	border: 13px ridge #992020;}
/* SERVICE END */
	
/* PORFTOLIO START */
:root { --ink: currentColor; --ink-2: black; --ink-3: #4FF8FF; }
.fx-scanner strong { position: relative;
	font-size: 45px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 25%,  black) 0 40%, var(--ink) 50%,
	color-mix(in srgb, var(--ink) 25%,  #780F10) 60% 100% ) 0 0 / 300% 100%;
  	-webkit-background-clip: text;
  	background-clip: text;
  	color: transparent;
  	animation: fx-scan-glow 3.0s ease-in-out infinite alternate;
	}
.fx-scanner strong::after { content: "";
	position: absolute;
  	top: -6px;
  	bottom: -6px;
  	left: 0;
  	width: 3px;
  	background: var(--ink-2);
  	box-shadow: 0 0 14px var(--ink-2);
  	animation: fx-scan-bar 3.0s ease-in-out infinite alternate;
	}
@keyframes fx-scan-glow { 0%   { background-position: 100% 0; }
	100% { background-position: 0% 0; }
	}
@keyframes fx-scan-bar { 0%   { left: 0; transform: translateX(0); }
	100% { left: 100%; transform: translateX(-100%); }
	}
.porftoliobox { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; }
/* PORFTOLIO END */
	
/* PRICING START */
.fx-neon { color: white;
  	animation: fx-neon 3.2s linear infinite;
	font-size: 40px;
	}
@keyframes fx-neon { 0%, 18%, 21%, 24%, 100% {
    opacity: 5;
    text-shadow: 0 0 4px #FF4FD8, 0 0 11px #FF4FD8, 0 0 24px #FF4FD8, 0 0 48px #FF4FD8; }
  	19%, 22%, 62% { opacity: .5;
    text-shadow: none; }
  	63%, 64.5% { opacity: .60;
    text-shadow: 0 0 4px white; }
	}
/* PRICING END */
	

	
}





/* EXTRA SMALL DEVICE------------------------------------------------ */
@media only screen and (max-width : 767px) 
{

/* HEADER START */
.headtext { font-size: 35px; }
.fx-rotator { position: relative;
	color: transparent;
  	clip-path: inset(0 -2em);
	padding: 8px;
	}
.fx-rotator::before { content: "POST";
	position: absolute;
  	inset: 0;
	margin-top: 5px;
  	animation: fx-rotator-word 8s infinite,
    fx-rotator-slide 2s cubic-bezier(.7, 0, .3, 1) infinite;
	}
@keyframes fx-rotator-word {
  	0%, 24.99% { content: "POST";
	font-size: 1.3em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #ff3b3b;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;}
  	25%, 49.99% { content: "LOGO";
	font-size: 1.3em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #fff047;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;}
  	50%, 74.99% { content: "GRAPHICS";
	font-size: 1.3em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #47c2ff;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;  }
  	75%, 100% { content: "MOCKUPS";
	font-size: 1.3em;
	font-weight: 400;
  	text-transform: uppercase;
  	color: #30f38e;
  	text-shadow: 1px 1px 0px #2b0a0a, 2px 2px 0px #2b0a0a, 3px 3px 0px #2b0a0a, 4px 4px 0px #2b0a0a, 5px 5px 0px #2b0a0a, 6px 6px 0px #2b0a0a,
		7px 7px 0px #2b0a0a, 8px 8px 0px #2b0a0a, 9px 9px 0px #2b0a0a, 10px 10px 0px #2b0a0a, 12px 12px 8px #2b0a0a80;}
	}
@keyframes fx-rotator-slide {
  	0% { transform: translateY(100%); opacity: 0; }
  	18%, 82% { transform: translateY(0); opacity: 1; }
  	100% { transform: translateY(100%); opacity: 0; }
	}
@property --gf-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
	}
.fx-gradientframe::before { -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  	mask-composite: exclude;
  	animation: fx-gradientframe-spin 5.5s linear infinite;
	}
.fx-gradientframe::after {  content: '';
	position: absolute;
  	inset: -10px;
  	background: conic-gradient(
    from var(--gf-angle),
    #ff4fd83d,
    #4ff8ff3d,
    transparent 62% );
  	filter: blur(12px);
  	animation: fx-gradientframe-spin 5.5s linear infinite;
  	opacity: .9;
	}
@keyframes fx-gradientframe-spin { to { --gf-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .fx-gradientframe::before,
 	.fx-gradientframe::after { animation: none; }
	}
/* HEADER END */
	
/* SERVICE START */
.designhead { margin-top: 30px; }
	
.fx-decoder { color: tomato;
	font-size: 40px;}
.fx-decoder::after { content: "▓#@%&*!"; 
 	animation: fx-decoder 4s steps(1) infinite;
	}
@keyframes fx-decoder { 0%   { content: "▓#@%&*!"; color: yellow; }
	8%   { content: "DESI#%!▒"; color:cadetblue; }
  	16%  { content: "D$#@*!"; color:blueviolet; }
  	24%  { content: "DESIG#"; color:springgreen; }
  	32%  { content: "DESIG@"; color: yellow;}
  	39%  { content: "#@%&*!"; color: red; }
  	47%  { content: "▒DESI#%"; }
	47%, 90% { content: "DESIGN"; color: #e0dfdc;
    background-color: #333;
	padding: 5px;
    text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 
    	0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 
      	0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);}
	}
	
.offerbox{ padding: 10px;
	margin-bottom: 50px;
	border: 13px ridge #992020;}
/* SERVICE END */

/* PORFTOLIO START */
:root { --ink: currentColor; --ink-2: black; --ink-3: #4FF8FF; }
.fx-scanner strong { position: relative;
	font-size: 40px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 25%,  black) 0 40%, var(--ink) 50%,
	color-mix(in srgb, var(--ink) 25%,  #780F10) 60% 100% ) 0 0 / 300% 100%;
  	-webkit-background-clip: text;
  	background-clip: text;
  	color: transparent;
  	animation: fx-scan-glow 3.0s ease-in-out infinite alternate;
	}
.fx-scanner strong::after { content: "";
	position: absolute;
  	top: -6px;
  	bottom: -6px;
  	left: 0;
  	width: 3px;
  	background: var(--ink-2);
  	box-shadow: 0 0 14px var(--ink-2);
  	animation: fx-scan-bar 3.0s ease-in-out infinite alternate;
	}
@keyframes fx-scan-glow { 0%   { background-position: 100% 0; }
	100% { background-position: 0% 0; }
	}
@keyframes fx-scan-bar { 0%   { left: 0; transform: translateX(0); }
	100% { left: 100%; transform: translateX(-100%); }
	}
.porftoliobox { box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; }
/* PORFTOLIO END */
	
/* PRICING START */
.fx-neon { color: white;
  	animation: fx-neon 3.2s linear infinite;
	font-size: 40px;
	}
@keyframes fx-neon { 0%, 18%, 21%, 24%, 100% {
    opacity: 5;
    text-shadow: 0 0 4px #FF4FD8, 0 0 11px #FF4FD8, 0 0 24px #FF4FD8, 0 0 48px #FF4FD8; }
  	19%, 22%, 62% { opacity: .5;
    text-shadow: none; }
  	63%, 64.5% { opacity: .60;
    text-shadow: 0 0 4px white; }
	}
/* PRICING END */
	
}