@charset "utf-8";

/* EXTRA START */
/* LOADER START */
:root { --brand: #185FA5;        /* main color: change to your Anybuz color */
	--brand-accent: #1D9E75; /* second color */
  	--loader-bg: #ffffff;
	}
#preloader { position: fixed;
  inset: 0;
  background: var(--loader-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
	}
#preloader.hide { opacity: 0; visibility: hidden; }
.loader-box { width: min(260px, 70vw); text-align: center; }
.loader-logo { font-family: sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 1px;
  margin-bottom: 20px;
  animation: pulses 1.6s ease-in-out infinite;
	}
.loader-logo span { color: var(--brand-accent); }
.loader-img { width: 120px; margin-bottom: 20px; animation: pulses 1.6s ease-in-out infinite; }
.loader-bar { height: 6px;
  background: #e6e6e6;
  border-radius: 3px;
  overflow: hidden;
	}
.loader-fill { width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-accent));
  border-radius: 3px;
  transition: width 0.25s ease;
	}
.loader-percent { margin-top: 10px;
  font-family: sans-serif;
  font-size: 14px;
  color: #5f5e5a;
	}
@keyframes pulses { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .loader-logo, .loader-img { animation: none; }
	#preloader, .loader-fill { transition: none; }
	}
/* manloader */ 
.loader-wrapper { position: relative;
	width: 120px;
	height: 120px;
	}
.juggler { position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}
.head { width: 24px;
	height: 24px;
  	background: #2c3e50;
  	border-radius: 50%;
  	position: absolute;
  	top: -34px;
  	left: -12px;
  	animation: head-drop 6s infinite;
  	transform-origin: center bottom;
	}
.body { width: 16px;
	height: 40px;
  	background: #2c3e50;
  	border-radius: 8px;
  	position: absolute;
  	top: -5px;
  	left: -8px;
	}
.arm { width: 8px;
	height: 32px;
  	background: #2c3e50;
  	border-radius: 4px;
  	position: absolute;
  	top: -2px;
  	transform-origin: 4px 4px;
	}
.right-arm { left: 2px;
 	animation: right-arm-juggle 6s infinite;
	}
.left-arm { left: -10px;
	animation: left-arm-juggle 6s infinite;
	}
.ball { width: 14px;
	height: 14px;
  	border-radius: 50%;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	margin-top: -12px;
  	margin-left: -7px;
	}
.ball-1 { background: #ff4757;
	animation: ball1 6s infinite;
	}
.ball-2 { background: #1e90ff;
	animation: ball2 6s infinite;
	}
.ball-3 { background: #2ed573;
	animation: ball3 6s infinite;
	}
@keyframes head-drop {
	0%, 50% { transform: rotate(0deg) translate(0, 0); }
  	55%, 65% { transform: rotate(8deg) translate(1px, 0); }
  	60%, 70% { transform: rotate(-8deg) translate(-1px, 0); }
  	75% { transform: rotate(0deg) translate(0, 0); }
  	80%, 100% { transform: rotate(-20deg) translate(-2px, 5px); }
	}
@keyframes right-arm-juggle { 0%, 8.33%, 16.66%, 25%, 33.33%, 41.66%, 50% { transform: rotate(-50deg); }
  	4.16%, 12.5%, 20.83%, 29.16%, 37.5%, 45.83% { transform: rotate(-10deg); }
  	55% { transform: rotate(-70deg); }
  	60% { transform: rotate(0deg); }
  	68% { transform: rotate(-80deg); }
  	75%, 100% { transform: rotate(10deg); }
	}
@keyframes left-arm-juggle { 0%, 8.33%, 16.66%, 25%, 33.33%, 41.66%, 50% { transform: rotate(40deg); }
  	4.16%, 12.5%, 20.83%, 29.16%, 37.5%, 45.83% { transform: rotate(10deg); }
  	55% { transform: rotate(60deg); }
  	62% { transform: rotate(-10deg); }
  	70% { transform: rotate(70deg); }
  	75%, 100% { transform: rotate(-10deg); }
	}
@keyframes ball1 { 0%, 25%, 50% { transform: translate(25px, 20px);
	animation-timing-function: ease-out;
    opacity: 1;
	}
	8.33%, 33.33% { transform: translate(0px, -45px);
    animation-timing-function: ease-in;
	}
	16.66%, 41.66% { transform: translate(-25px, 20px);
    animation-timing-function: linear;
	}
  	58.33% { transform: translate(15px, -65px);
    animation-timing-function: ease-in;
	}
  	66.66% { transform: translate(-30px, 30px);
    animation-timing-function: linear;
	}
  	75% { transform: translate(30px, 15px);
    animation-timing-function: ease-in;
	}
  	80% { transform: translate(35px, 60px);
    animation-timing-function: ease-out;
	}
  	85% { transform: translate(40px, 50px);
    animation-timing-function: ease-in;
	}
  	90% { transform: translate(45px, 60px);
    opacity: 1;
	}
  	95%, 100% { transform: translate(45px, 60px);
    opacity: 0;
	}
	}
@keyframes ball2 { 0%, 25%, 50% { transform: translate(-25px, 20px);
    animation-timing-function: linear;
    opacity: 1;
	}
  	8.33%, 33.33% { transform: translate(25px, 20px);
    animation-timing-function: ease-out;
  	}
  	16.66%, 41.66% { transform: translate(0px, -45px);
    animation-timing-function: ease-in;
  	}
  	58.33% { transform: translate(35px, 10px);
    animation-timing-function: ease-out;
  	}
  	66.66% { transform: translate(-10px, -55px);
    animation-timing-function: ease-in;
  	}
  	75% { transform: translate(-35px, 25px);
    animation-timing-function: linear;
  	}
  	83% { transform: translate(-40px, 60px);
    animation-timing-function: ease-out;
  	}
  	88% { transform: translate(-45px, 52px);
    animation-timing-function: ease-in;
  	}
  	93% { transform: translate(-50px, 60px);
    opacity: 1;
  	}
  	98%, 100% { transform: translate(-50px, 60px);
    opacity: 0;
  	}
	}
@keyframes ball3 { 0%, 25%, 50% { transform: translate(0px, -45px);
    animation-timing-function: ease-in;
    opacity: 1;
  	}
  	8.33%, 33.33% { transform: translate(-25px, 20px);
    animation-timing-function: linear;
  	}
  	16.66%, 41.66% { transform: translate(25px, 20px);
    animation-timing-function: ease-out;
  	}
  	58.33% { transform: translate(-15px, 35px);
    animation-timing-function: linear;
  	}
  	66.66% { transform: translate(35px, 0px);
    animation-timing-function: ease-out;
  	}
  	75% { transform: translate(5px, -15px);
    animation-timing-function: ease-in;
  	}
  	81% { transform: translate(10px, 60px);
    animation-timing-function: ease-out;
  	}
  	86% { transform: translate(15px, 55px);
    animation-timing-function: ease-in;
  	}
  	91% { transform: translate(20px, 60px);
    opacity: 1;
  	}
  	96%, 100% { transform: translate(20px, 60px);
    opacity: 0;
  	}
	}
/* LOADER END */
/* EXTRA END */








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

	
/*HEADER START*/
.headtext { margin-top: 50px; }
#header01-1k { background: linear-gradient(45deg, #f2cb07 0%, #cf1748 50%, #147ac8 100%);
  	background-size: 200% 200%;
  	animation: gradient-wave 8s ease alternate infinite;
  	overflow: hidden;
	}
@keyframes gradient-wave {
 	0%, 100% { background-position: 0% 50%; }
  	25% { background-position: 100% 50%; }
  	50% { background-position: 100% 100%; }
  	75% { background-position: 0% 100%; }
	}

.fade-slider { position: relative;
	width: 100%;
    height: 450px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid white;
	border-radius: 0px 40px 0px 40px;
	-webkit-box-shadow: 8px 9px 33px -9px rgba(0,0,0,1);
	-moz-box-shadow: 8px 9px 33px -9px rgba(0,0,0,1);
	box-shadow: 8px 9px 33px -9px rgba(0,0,0,1);
	background: linear-gradient(45deg, #f2cb07 0%, #cf1748 50%, #147ac8 100%); /* Prevents white flashing between images */
	}
.fade-slider img { position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images scale cleanly without stretching */
    opacity: 0;
    animation: fiveImageFade 20s infinite ease-in-out;
    }
.fade-slider img:nth-child(1) { animation-delay: 0s; }
.fade-slider img:nth-child(2) { animation-delay: 4s; }
.fade-slider img:nth-child(3) { animation-delay: 8s; }
.fade-slider img:nth-child(4) { animation-delay: 12s; }
.fade-slider img:nth-child(5) { animation-delay: 16s; }
@keyframes fiveImageFade {
	0% { opacity: 0; }
    5% { opacity: 1; /* Fully fades in over 1 second */ }
    20% { opacity: 1; /* Stays fully visible for 3 seconds */ }
    25% { opacity: 0; /* Smoothly fades out over 1 second */ }
    100% { opacity: 0; /* Remains hidden until the loop restarts */ }
	}
/*HEADER END*/
	
/*OUR SERVICES START*/
.cateh4 > span { text-transform: uppercase;
	font-weight: bold;
  	animation: glow 3s ease-in-out infinite;
	font-size: 65px;
	}
@keyframes glow { 0%, 100%
	{	color: white;
		text-shadow: 0 0 10px red,
		0 0 50px #0652DD, 0 0 100px yellow;
	}
    	10%, 90% { color:mediumaquamarine;
		text-shadow: none;
		}
	}
.cateh4  > span:nth-child(1) {	animation-delay: 0s;	}
.cateh4  > span:nth-child(2) {	animation-delay: 0.350s;}
.cateh4  > span:nth-child(3) {	animation-delay: 0.50s;	}
.cateh4  > span:nth-child(4) {	animation-delay: 0.75s;	}
.cateh4  > span:nth-child(5) {	animation-delay: 1s;	}
.cateh4  > span:nth-child(6) {	animation-delay: 1.25s;	}
.cateh4  > span:nth-child(7) {	animation-delay: 1.50s;	}
.cateh4  > span:nth-child(8) {	animation-delay: 0s;	}
/*OUR SERVICES END*/
	
/*RECENT PROJECT START*/
.projecthead { margin-top: 50px;
	margin-bottom: 20px;
	}
: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%, #D32225) 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%); }
	}
	
.recentprojectwrapper { height: 350px;}
.recentprojectcarousel	{ width: 100%;
	height: 350px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid white;
	border-radius: 0px 40px 0px 40px;
	background: black; /* Prevents white flashing between images */
	}
.recentprojectcarousel img { 
    top: 0;
    left: 0;
	width: 100%;
	height: 350px;
    *object-fit: cover; /*Ensures images scale cleanly without stretching */
    }
.recentproject { position: relative;
	width: 100%;
    height: 350px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid white;
	border-radius: 0px 40px 0px 40px;
	background: black; /* Prevents white flashing between images */
	}
.recentproject img { position: absolute;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
    /*object-fit: cover; Ensures images scale cleanly without stretching */
    opacity: 0;
    animation: recentprojectfiveImage 15s infinite ease-in-out;
    }
.recentproject img:nth-child(1) { animation-delay: 0s; }
.recentproject img:nth-child(2) { animation-delay: 3s; }
.recentproject img:nth-child(3) { animation-delay: 6s; }
.recentproject img:nth-child(4) { animation-delay: 9s; }
.recentproject img:nth-child(5) { animation-delay: 12s; }
@keyframes recentprojectfiveImage {
	0% { opacity: 0; }
    5% { opacity: 1; /* Fully fades in over 1 second */ }
    20% { opacity: 1; /* Stays fully visible for 3 seconds */ }
    25% { opacity: 0; /* Smoothly fades out over 1 second */ }
    100% { opacity: 0; /* Remains hidden until the loop restarts */ }
	}
/*RECENT PROJECT END*/	
	
/*OUR CLIENT START*/
.fx-negative { position: relative;
	background: white;
  	padding: 20px;
	}
.fx-negative::after { content: "";
	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	width: 35%;
  	background: white;
  	mix-blend-mode:difference;
  	animation: fx-negative 2.4s ease-in-out infinite alternate;
	-webkit-box-shadow: 0px 20px 0px -10px #FFFFFF, 0px -20px 0px -10px #FFFFFF, 20px 0px 0px -10px #FFFFFF, -20px 0px 0px -10px #FFFFFF, 0px 0px 0px 10px #FF0000,
	5px 5px 15px 5px rgba(0,0,0,0);
	box-shadow: 0px 20px 0px -10px #FFFFFF, 0px -20px 0px -10px #FFFFFF, 20px 0px 0px -10px #FFFFFF, -20px 0px 0px -10px #FFFFFF, 0px 0px 0px 10px #FF0000, 5px 5px 
	15px 5px rgba(0,0,0,0);
	}
@keyframes fx-negative { 0%   { left: 0;    transform: translateX(0); }
	100% { left: 100%; transform: translateX(-100%); }
	}
	
.clientimage { width: 200px;
	height: 200px;
	padding: 10px;}
.clientimage img {-webkit-box-shadow: inset -1px 3px 8px 5px white, 2px 5px 16px 0px white, 5px 5px 15px 5px rgba(0,0,0,0); 
	box-shadow: inset -1px 3px 8px 5px white, 2px 5px 16px 0px white, 5px 5px 15px 5px rgba(0,0,0,0);
	padding: 10px;}
/*OUR CLIENT END*/
	

	
}





/* MEDIUM DEVICE------------------------------------------------ */
@media only screen and (min-width : 991px) and (max-width : 1199px) 
{

	
/*HEADER START*/
.headtext { margin-top: 50px; }
#header01-1k { background: linear-gradient(45deg, #f2cb07 0%, #cf1748 50%, #147ac8 100%);
  	background-size: 200% 200%;
  	animation: gradient-wave 8s ease alternate infinite;
  	overflow: hidden;
	}
@keyframes gradient-wave {
 	0%, 100% { background-position: 0% 50%; }
  	25% { background-position: 100% 50%; }
  	50% { background-position: 100% 100%; }
  	75% { background-position: 0% 100%; }
	}
	
.fade-slider { position: relative;
	width: 100%;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid white;
	border-radius: 0px 40px 0px 40px;
	-webkit-box-shadow: 8px 9px 33px -9px rgba(0,0,0,1);
	-moz-box-shadow: 8px 9px 33px -9px rgba(0,0,0,1);
	box-shadow: 8px 9px 33px -9px rgba(0,0,0,1);
	background: linear-gradient(45deg, #f2cb07 0%, #cf1748 50%, #147ac8 100%); /* Prevents white flashing between images */
	}
.fade-slider img { position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images scale cleanly without stretching */
    opacity: 0;
    animation: fiveImageFade 20s infinite ease-in-out;
    }
.fade-slider img:nth-child(1) { animation-delay: 0s; }
.fade-slider img:nth-child(2) { animation-delay: 4s; }
.fade-slider img:nth-child(3) { animation-delay: 8s; }
.fade-slider img:nth-child(4) { animation-delay: 12s; }
.fade-slider img:nth-child(5) { animation-delay: 16s; }
@keyframes fiveImageFade {
	0% { opacity: 0; }
    5% { opacity: 1; /* Fully fades in over 1 second */ }
    20% { opacity: 1; /* Stays fully visible for 3 seconds */ }
    25% { opacity: 0; /* Smoothly fades out over 1 second */ }
    100% { opacity: 0; /* Remains hidden until the loop restarts */ }
	}
/*HEADER END*/
	
/*OUR SERVICES START*/
.cateh4 > span { text-transform: uppercase;
	font-weight: bold;
  	animation: glow 3s ease-in-out infinite;
	font-size: 50px;
	}
@keyframes glow { 0%, 100%
	{	color: white;
		text-shadow: 0 0 10px red,
		0 0 50px #0652DD, 0 0 100px yellow;
	}
    	10%, 90% { color:mediumaquamarine;
		text-shadow: none;
		}
	}
.cateh4  > span:nth-child(1) {	animation-delay: 0s;	}
.cateh4  > span:nth-child(2) {	animation-delay: 0.350s;}
.cateh4  > span:nth-child(3) {	animation-delay: 0.50s;	}
.cateh4  > span:nth-child(4) {	animation-delay: 0.75s;	}
.cateh4  > span:nth-child(5) {	animation-delay: 1s;	}
.cateh4  > span:nth-child(6) {	animation-delay: 1.25s;	}
.cateh4  > span:nth-child(7) {	animation-delay: 1.50s;	}
.cateh4  > span:nth-child(8) {	animation-delay: 0s;	}
/*OUR SERVICES END*/
	
/*RECENT PROJECT START*/
.projecthead { margin-top: 50px;
	margin-bottom: 20px;}
: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%, #D32225) 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%); }
	}	
	
.recentprojectwrapper { height: 300px; }
.recentprojectcarousel	{ width: 100%;
	height: 350px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid white;
	border-radius: 0px 40px 0px 40px;
	background: black; /* Prevents white flashing between images */
	}
.recentprojectcarousel img { 
    top: 0;
    left: 0;
	width: 100%;
	height: 350px;
    *object-fit: cover; /*Ensures images scale cleanly without stretching */
    }
.recentproject { position: relative;
	width: 100%;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid white;
	border-radius: 0px 40px 0px 40px;
	background: black; /* Prevents white flashing between images */
	}
.recentproject img { position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images scale cleanly without stretching */
    opacity: 0;
    animation: recentprojectfiveImage 15s infinite ease-in-out;
    }
.recentproject img:nth-child(1) { animation-delay: 0s; }
.recentproject img:nth-child(2) { animation-delay: 3s; }
.recentproject img:nth-child(3) { animation-delay: 6s; }
.recentproject img:nth-child(4) { animation-delay: 9s; }
.recentproject img:nth-child(5) { animation-delay: 12s; }
@keyframes recentprojectfiveImage {
	0% { opacity: 0; }
    5% { opacity: 1; /* Fully fades in over 1 second */ }
    20% { opacity: 1; /* Stays fully visible for 3 seconds */ }
    25% { opacity: 0; /* Smoothly fades out over 1 second */ }
    100% { opacity: 0; /* Remains hidden until the loop restarts */ }
	}
/*RECENT PROJECT END*/	
	
/*OUR CLIENT START*/
.fx-negative { position: relative;
	background: white;
  	padding: 20px;
	}
.fx-negative::after { content: "";
	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	width: 35%;
  	background: white;
  	mix-blend-mode:difference;
  	animation: fx-negative 2.4s ease-in-out infinite alternate;
	-webkit-box-shadow: 0px 20px 0px -10px #FFFFFF, 0px -20px 0px -10px #FFFFFF, 20px 0px 0px -10px #FFFFFF, -20px 0px 0px -10px #FFFFFF, 0px 0px 0px 10px #FF0000,
	5px 5px 15px 5px rgba(0,0,0,0);
	box-shadow: 0px 20px 0px -10px #FFFFFF, 0px -20px 0px -10px #FFFFFF, 20px 0px 0px -10px #FFFFFF, -20px 0px 0px -10px #FFFFFF, 0px 0px 0px 10px #FF0000, 5px 5px 
	15px 5px rgba(0,0,0,0);
	}
@keyframes fx-negative { 0%   { left: 0;    transform: translateX(0); }
	100% { left: 100%; transform: translateX(-100%); }
	}
	
.clientimage { width: 180px;
	height: 180px;
	padding: 8px;}
.clientimage img {-webkit-box-shadow: inset -1px 3px 8px 5px white, 2px 5px 16px 0px white, 5px 5px 15px 5px rgba(0,0,0,0); 
	box-shadow: inset -1px 3px 8px 5px white, 2px 5px 16px 0px white, 5px 5px 15px 5px rgba(0,0,0,0);
	padding: 10px;}
/*OUR CLIENT END*/
	
}





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

	
/*HEADER START*/
.headimage {height: 350px;}
#header01-1k { background: linear-gradient(45deg, #f2cb07 0%, #cf1748 50%, #147ac8 100%);
  	background-size: 200% 200%;
  	animation: gradient-wave 8s ease alternate infinite;
  	overflow: hidden;
	margin-top: -100px;
	}
@keyframes gradient-wave {
 	0%, 100% { background-position: 0% 50%; }
  	25% { background-position: 100% 50%; }
  	50% { background-position: 100% 100%; }
  	75% { background-position: 0% 100%; }
	}
		
.fade-slider { position: relative;
	width: 80%;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid white;
	border-radius: 0px 40px 0px 40px;
	-webkit-box-shadow: 8px 9px 33px -9px rgba(0,0,0,1);
	-moz-box-shadow: 8px 9px 33px -9px rgba(0,0,0,1);
	box-shadow: 8px 9px 33px -9px rgba(0,0,0,1);
	background: linear-gradient(45deg, #f2cb07 0%, #cf1748 50%, #147ac8 100%); /* Prevents white flashing between images */
	}
.fade-slider img { position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images scale cleanly without stretching */
    opacity: 0;
    animation: fiveImageFade 20s infinite ease-in-out;
    }
.fade-slider img:nth-child(1) { animation-delay: 0s; }
.fade-slider img:nth-child(2) { animation-delay: 4s; }
.fade-slider img:nth-child(3) { animation-delay: 8s; }
.fade-slider img:nth-child(4) { animation-delay: 12s; }
.fade-slider img:nth-child(5) { animation-delay: 16s; }
@keyframes fiveImageFade {
	0% { opacity: 0; }
    5% { opacity: 1; /* Fully fades in over 1 second */ }
    20% { opacity: 1; /* Stays fully visible for 3 seconds */ }
    25% { opacity: 0; /* Smoothly fades out over 1 second */ }
    100% { opacity: 0; /* Remains hidden until the loop restarts */ }
	}
/*HEADER END*/
	
/*OUR SERVICES START*/
.cateh4 > span { text-transform: uppercase;
	font-weight: bold;
  	animation: glow 3s ease-in-out infinite;
	font-size: 55px;
	}
@keyframes glow { 0%, 100%
	{	color: white;
		text-shadow: 0 0 10px red,
		0 0 50px #0652DD, 0 0 100px yellow;
	}
    	10%, 90% { color:mediumaquamarine;
		text-shadow: none;
		}
	}
.cateh4  > span:nth-child(1) {	animation-delay: 0s;	}
.cateh4  > span:nth-child(2) {	animation-delay: 0.350s;}
.cateh4  > span:nth-child(3) {	animation-delay: 0.50s;	}
.cateh4  > span:nth-child(4) {	animation-delay: 0.75s;	}
.cateh4  > span:nth-child(5) {	animation-delay: 1s;	}
.cateh4  > span:nth-child(6) {	animation-delay: 1.25s;	}
.cateh4  > span:nth-child(7) {	animation-delay: 1.50s;	}
.cateh4  > span:nth-child(8) {	animation-delay: 0s;	}
/*OUR SERVICES END*/
	
/*RECENT PROJECT START*/
.projecthead { margin-top: 50px;
	margin-bottom: 20px;}
: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%, #D32225) 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%); }
	}
	
.recentprojectwrapper { height: 400px; }
.recentprojectcarousel	{ width: 100%;
	height: 330px;
    margin: 0 auto;
	margin-top: 30px;
    overflow: hidden;
    border: 5px solid white;
	border-radius: 0px 40px 0px 40px;
	background: black; /* Prevents white flashing between images */
	}
.recentprojectcarousel img { 
    top: 0;
    left: 0;
	width: 100%;
	height: 330px;
    *object-fit: cover; /*Ensures images scale cleanly without stretching */
    }
.recentproject { position: relative;
	width: 100%;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid white;
	border-radius: 0px 40px 0px 40px;
	background: black; /* Prevents white flashing between images */
	}
.recentproject img { position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images scale cleanly without stretching */
    opacity: 0;
    animation: recentprojectfiveImage 15s infinite ease-in-out;
    }
.recentproject img:nth-child(1) { animation-delay: 0s; }
.recentproject img:nth-child(2) { animation-delay: 3s; }
.recentproject img:nth-child(3) { animation-delay: 6s; }
.recentproject img:nth-child(4) { animation-delay: 9s; }
.recentproject img:nth-child(5) { animation-delay: 12s; }
@keyframes recentprojectfiveImage {
	0% { opacity: 0; }
    5% { opacity: 1; /* Fully fades in over 1 second */ }
    20% { opacity: 1; /* Stays fully visible for 3 seconds */ }
    25% { opacity: 0; /* Smoothly fades out over 1 second */ }
    100% { opacity: 0; /* Remains hidden until the loop restarts */ }
	}
/*RECENT PROJECT END*/	
	
/*OUR CLIENT START*/
.fx-negative { position: relative;
	background: white;
  	padding: 20px;
	font-size: 40px;
	}
.fx-negative::after { content: "";
	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	width: 35%;
  	background: white;
  	mix-blend-mode:difference;
  	animation: fx-negative 2.4s ease-in-out infinite alternate;
	-webkit-box-shadow: 0px 20px 0px -10px #FFFFFF, 0px -20px 0px -10px #FFFFFF, 20px 0px 0px -10px #FFFFFF, -20px 0px 0px -10px #FFFFFF, 0px 0px 0px 10px #FF0000,
	5px 5px 15px 5px rgba(0,0,0,0);
	box-shadow: 0px 20px 0px -10px #FFFFFF, 0px -20px 0px -10px #FFFFFF, 20px 0px 0px -10px #FFFFFF, -20px 0px 0px -10px #FFFFFF, 0px 0px 0px 10px #FF0000, 5px 5px 
	15px 5px rgba(0,0,0,0);
	}
@keyframes fx-negative { 0%   { left: 0;    transform: translateX(0); }
	100% { left: 100%; transform: translateX(-100%); }
	}
	
.clientimage { width: 180px;
	height: 180px;
	padding: 8px;}
.clientimage img {-webkit-box-shadow: inset -1px 3px 8px 5px white, 2px 5px 16px 0px white, 5px 5px 15px 5px rgba(0,0,0,0); 
	box-shadow: inset -1px 3px 8px 5px white, 2px 5px 16px 0px white, 5px 5px 15px 5px rgba(0,0,0,0);
	padding: 10px;}
.clientimagehead { margin-top: -30px;
	margin-bottom: -40px;}
/*OUR CLIENT END*/
	
}





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

	
/*HEADER START*/
.headimage {height: 250px;}
#header01-1k { background: linear-gradient(45deg, #f2cb07 0%, #cf1748 50%, #147ac8 100%);
  	background-size: 200% 200%;
  	animation: gradient-wave 8s ease alternate infinite;
  	overflow: hidden;
	margin-top: -120px;
	}
@keyframes gradient-wave {
 	0%, 100% { background-position: 0% 50%; }
  	25% { background-position: 100% 50%; }
  	50% { background-position: 100% 100%; }
  	75% { background-position: 0% 100%; }
	}
		
.fade-slider { position: relative;
	width: 80%;
    height: 250px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid white;
	border-radius: 0px 40px 0px 40px;
	-webkit-box-shadow: 8px 9px 33px -9px rgba(0,0,0,1);
	-moz-box-shadow: 8px 9px 33px -9px rgba(0,0,0,1);
	box-shadow: 8px 9px 33px -9px rgba(0,0,0,1);
	background: linear-gradient(45deg, #f2cb07 0%, #cf1748 50%, #147ac8 100%); /* Prevents white flashing between images */
	}
.fade-slider img { position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images scale cleanly without stretching */
    opacity: 0;
    animation: fiveImageFade 20s infinite ease-in-out;
    }
.fade-slider img:nth-child(1) { animation-delay: 0s; }
.fade-slider img:nth-child(2) { animation-delay: 4s; }
.fade-slider img:nth-child(3) { animation-delay: 8s; }
.fade-slider img:nth-child(4) { animation-delay: 12s; }
.fade-slider img:nth-child(5) { animation-delay: 16s; }
@keyframes fiveImageFade {
	0% { opacity: 0; }
    5% { opacity: 1; /* Fully fades in over 1 second */ }
    20% { opacity: 1; /* Stays fully visible for 3 seconds */ }
    25% { opacity: 0; /* Smoothly fades out over 1 second */ }
    100% { opacity: 0; /* Remains hidden until the loop restarts */ }
	}
/*HEADER END*/
	
/*OUR SERVICES START*/
.cateh4 > span { text-transform: uppercase;
	font-weight: bold;
  	animation: glow 3s ease-in-out infinite;
	font-size: 55px;
	}
@keyframes glow { 0%, 100%
	{	color: white;
		text-shadow: 0 0 10px red,
		0 0 50px #0652DD, 0 0 100px yellow;
	}
    	10%, 90% { color:mediumaquamarine;
		text-shadow: none;
		}
	}
.cateh4  > span:nth-child(1) {	animation-delay: 0s;	}
.cateh4  > span:nth-child(2) {	animation-delay: 0.350s;}
.cateh4  > span:nth-child(3) {	animation-delay: 0.50s;	}
.cateh4  > span:nth-child(4) {	animation-delay: 0.75s;	}
.cateh4  > span:nth-child(5) {	animation-delay: 1s;	}
.cateh4  > span:nth-child(6) {	animation-delay: 1.25s;	}
.cateh4  > span:nth-child(7) {	animation-delay: 1.50s;	}
.cateh4  > span:nth-child(8) {	animation-delay: 0s;	}
/*OUR SERVICES END*/
	
/*RECENT PROJECT START*/
.projecthead { margin-top: 30px;
	margin-bottom: 0px;}
: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%, #D32225) 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%); }
	}
	
.recentprojectwrapper { height: 350px; }
.recentprojectcarousel	{ width: 100%;
	height: 350px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid white;
	border-radius: 0px 40px 0px 40px;
	background: black; /* Prevents white flashing between images */
	}
.recentprojectcarousel img { 
    top: 0;
    left: 0;
	width: 100%;
	height: 350px;
    *object-fit: cover; /*Ensures images scale cleanly without stretching */
    }
.recentproject { position: relative;
	width: 100%;
    height: 350px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid white;
	border-radius: 0px 40px 0px 40px;
	background: black; /* Prevents white flashing between images */
	}
.recentproject img { position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images scale cleanly without stretching */
    opacity: 0;
    animation: recentprojectfiveImage 15s infinite ease-in-out;
    }
.recentproject img:nth-child(1) { animation-delay: 0s; }
.recentproject img:nth-child(2) { animation-delay: 3s; }
.recentproject img:nth-child(3) { animation-delay: 6s; }
.recentproject img:nth-child(4) { animation-delay: 9s; }
.recentproject img:nth-child(5) { animation-delay: 12s; }
@keyframes recentprojectfiveImage {
	0% { opacity: 0; }
    5% { opacity: 1; /* Fully fades in over 1 second */ }
    20% { opacity: 1; /* Stays fully visible for 3 seconds */ }
    25% { opacity: 0; /* Smoothly fades out over 1 second */ }
    100% { opacity: 0; /* Remains hidden until the loop restarts */ }
	}
/*RECENT PROJECT END*/
	
/*OUR CLIENT START*/
.fx-negative { position: relative;
	background: white;
  	padding: 0px;
	font-size: 35px;
	margin-top: 0px;
	}
.fx-negative::after { content: "";
	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	width: 25%;
  	background: white;
  	mix-blend-mode:difference;
  	animation: fx-negative 2.4s ease-in-out infinite alternate;
	-webkit-box-shadow: 0px 20px 0px -10px #FFFFFF, 0px -20px 0px -10px #FFFFFF, 20px 0px 0px -10px #FFFFFF, -20px 0px 0px -10px #FFFFFF, 0px 0px 0px 10px #FF0000,
	5px 5px 15px 5px rgba(0,0,0,0);
	box-shadow: 0px 20px 0px -10px #FFFFFF, 0px -20px 0px -10px #FFFFFF, 20px 0px 0px -10px #FFFFFF, -20px 0px 0px -10px #FFFFFF, 0px 0px 0px 10px #FF0000, 5px 5px 
	15px 5px rgba(0,0,0,0);
	}
@keyframes fx-negative { 0% { left: 0; transform: translateX(0); }
	100% { left: 100%; transform: translateX(-100%); }
	}
	
.clientimage { width: 150px;
	height: 150px;
	padding: 8px;}
.clientimage img {-webkit-box-shadow: inset -1px 3px 8px 5px white, 2px 5px 16px 0px white, 5px 5px 15px 5px rgba(0,0,0,0); 
	box-shadow: inset -1px 3px 8px 5px white, 2px 5px 16px 0px white, 5px 5px 15px 5px rgba(0,0,0,0);
	padding: 10px;}
.clientimagehead { margin-top: -30px;
	margin-bottom: -80px;}
/*OUR CLIENT END*/
	
}