/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.noise-bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.noise-bg.is-ready:before {
	-webkit-animation: noise 1s steps(2) infinite;
	animation: noise 1s steps(2) infinite;
}
.noise-bg:before {
	content: "";
	top: -10rem;
	left: -10rem;
	width: calc(100% + 20rem);
	height: calc(100% + 20rem);
	z-index: 9999;
	background-image: url(https://mediadepottest1.com/light/wp-content/uploads/2025/04/noise.png);
	opacity: .85;
}
.noise-bg, .noise-bg:before {
	position: fixed;
	pointer-events: none;
}
.part-grid {
	pointer-events: none;
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 1;
	width: 100%;
}
.--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0px, 1fr));
}
.--grid {
	grid-template-columns: repeat(4, minmax(0px, 1fr));
}
.--ui-x {
	margin-left: auto;
	margin-right: auto;
	max-width: 1344px;
}
.part-grid_fill, .part-grid_fill div {
	position: relative;
	height: 100%;
}

.part-grid_fill::after, .part-grid_fill div::before {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	z-index: -1;
	display: block;
	width: 1px;
	transform-origin: center top;
	--un-bg-opacity: 1;
	background-color: rgba(214, 213, 210, 0.08);
	content: "";
	transform: scaleY(1);
	animation: 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards running part-grid;
}
.part-grid_fill::after {
	left: auto;
	right: -1px;
	animation-delay: 0.2s;
}


.custom-cursor .circle-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translateZ(0);
  visibility: hidden;
  border-radius: 50%;
}

.custom-cursor .circle-cursor-inner {
    margin-left: calc(0.5rem / 2 * (-1));
  margin-top: calc(0.5rem / 2 * (-1));
  width: 0.5rem;
  height: 0.5rem;
  z-index: 10000001;
  background-color: #fc6f10;
}

.custom-cursor .circle-cursor-inner.cursor-link-hover {
  margin-left: calc(6rem / 2 * (-1));
  margin-top: calc(6rem / 2 * (-1));
  width: 6rem;
  height: 6rem;
  background-color: #fc6f10;
  opacity: .1;
}

.custom-cursor .circle-cursor-outer {
  margin-left: calc(2rem / 2 * (-1));
  margin-top: calc(2rem / 2 * (-1));
  width: 2rem;
  height: 2rem;
  border:1px solid #fc6f10;
  z-index: 10000000;
  opacity: .5;
  transition: all .1s ease-out;
}

.custom-cursor .cursor-link.circle-cursor-inner {
  background: transparent !important;
}

.custom-cursor .cursor-link.circle-cursor-inner.cursor-link-hover {
  opacity: 1;
}

.custom-cursor .cursor-link.circle-cursor-inner svg {
  fill: var(--clb-color-white);
}

.custom-cursor .cursor-link.circle-cursor-outer.cursor-link-hover,
.custom-cursor .circle-cursor-outer.cursor-link-hover {
  margin-left: calc(4rem / 2 * (-1));
  margin-top: calc(4rem / 2 * (-1));
  width: 4rem;
  height: 4rem;
  opacity:0;
  border: #fc6f10 1px solid;
}

.custom-cursor a[data-cursor-class] {
  cursor: none;
}


/*
 * Preload
 */
.disable-ajaxload .preloader-wrap {
		display:none;
	}
	
	.preloader-wrap {
		width: 100%;
		height:100%;
		position: fixed;
		top: 0; 
		bottom: 0;
		background: #eb5a1c;
		z-index : 1800;
		text-align:center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction:column;
	}
	
	.preloader-wrap .outer {
		padding: 0px;
		box-sizing:border-box;
	}
	
	.preloader-wrap .inner {
		vertical-align:middle;
		box-sizing:border-box;
	}
	
	.percentage-wrapper {
		position:relative;
		display:block;
		text-align:center;
		width:100%;
		height: auto;
		z-index:10;
		box-sizing:border-box;
		padding:60px 0;
		overflow:hidden;
		mask-image: linear-gradient(180deg, transparent 5%, #000 15%, #000 85%, transparent 95%);
  		-webkit-mask-image: linear-gradient(180deg, transparent 5%, #000 15%, #000 85%, transparent 95%);
	}
	
	.percentage {
		font-size: calc(1rem + 12vw);
  		line-height: calc(1rem + 11vw);
		font-weight: 600;
		width:auto;
		height: calc(1rem + 11vw);
		color:#fff;		
		display: flex;
		justify-content: center;
		overflow:hidden;		
	}
	
	.percentage .number {
		display:block;
		text-align:center;
	}
	
	.percentage .number:first-child {
		display:block;
		text-align:right;
	}
	
	.percentage .number span {
		display:block;
	}
	
	.percentage-first {
		height: calc(1rem + 1.6vw);
		font-size: calc(1rem + 1vw);
		line-height: calc(1rem + 1.6vw);
		font-weight: 600;
		color:rgba(255,255,255,1);
		margin-top:10px;
		overflow:hidden;
	}
	
	.percentage-first span {
		position:relative;
		display:block;
		transform: translateY(100%);
		-webkit-transform: translateY(100%);
	}
	
	.percentage-last {
		position:absolute;
		width:100%;
		height: 100%;
		font-size: calc(1rem + 4vw);
		line-height: inherit;
		font-weight: 600;
		color:rgba(255,255,255,1);
		text-align:center;
		margin-top:10px;
		overflow:hidden;
		top:0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.percentage-last span {
		position:relative;
		display:block;
		transform: translateY(200%);
		-webkit-transform: translateY(200%);
		opacity: 0;	
	}
	
	.trackbar {
		width: 100%;
		height: auto;
		margin: 0 auto;
		display: flex;
		position: relative;
		padding: 0 80px;
		box-sizing:border-box;
		opacity: 1;		
	}
	
	.loadbar {
		width: 300px;
		height: 50px;
		left: 0;
		right:0;
		margin: 0 auto;
		overflow: hidden;
		z-index:0;
		transform-origin:  center center;
		display: flex;
		justify-content: space-between;
	}
	
	.loadbar-inner {
		width: 100%;
		height: 100%;
		background: #000;
		position: absolute;
		top: 0px;
		left: auto;
		right: auto;
		overflow: hidden;
		z-index:20;
		clip-path: circle(0%);
	}
	
	.hold-progress-bar {
		width: 0%;
		height: 0px;
		background: rgba(0,0,0,1);
		position: absolute;
		top: 0px;
		left: 0;
		right:0;
		overflow: hidden;
	}
	
	.preloader-intro {
		position:relative;
		display:block;
		color:#fff;
		overflow:hidden;		
		float:left;
		z-index:10;	
		opacity:1;
		mix-blend-mode: difference;
	}
	
	.preloader-intro span {
		position: relative;
		display:block;
		font-weight:500;
		position: relative;
		font-size: 30px;
		line-height: 50px;
	}
	

@keyframes part-grid{
	
}

@keyframes noise {
	
	0% {
		transform: translate3d(0, 9rem, 0);
	}
	10% {
    	transform: translate3d(-1rem, -4rem, 0);
	}
	20% {
    	transform: translate3d(-8rem, 2rem, 0);
	}
	30% {
    	transform: translate3d(9rem, -9rem, 0);
	}
	40% {
		transform: translate3d(-2rem, 7rem, 0);
	}
	50% {
		transform: translate3d(-9rem, -4rem, 0);
	}
	60% {
		transform: translate3d(2rem, 6rem, 0);
	}
	70% {
		transform: translate3d(7rem, -8rem, 0);
	}
	80% {
		transform: translate3d(-9rem, 1rem, 0);
	}
	90% {
		transform: translate3d(6rem, -5rem, 0);
	}
	100% {
		transform: translate3d(-7rem, 0, 0);
	}
	
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}