/* ==========================================================================
   Components
   ========================================================================== */


/* ==========================================================================
   Buttons
   ========================================================================== */


.btn {

	display: inline-flex;

	align-items:center;

	justify-content:center;

	gap:10px;

	padding:14px 28px;

	border-radius:var(--radius-full);

	font-size:var(--fs-sm);

	font-weight:var(--fw-semibold);

	transition:var(--transition-base);

	position:relative;

	overflow:hidden;

}


.btn-primary {

	background:var(--color-primary);

	color:var(--color-white);

}


.btn-primary:hover {

	background:var(--color-primary-hover);

	transform:translateY(-3px);

}


.btn-outline {

	border:1px solid var(--color-border);

	color:var(--color-text);

}


.btn-outline:hover {

	border-color:var(--color-primary);

	color:var(--color-primary);

}


/* ==========================================================================
   Cards
   ========================================================================== */


.card {

	background:var(--color-white);

	border-radius:var(--radius-lg);

	border:1px solid var(--color-border);

	padding:var(--space-5);

	transition:var(--transition-base);

}


.card:hover {

	transform:translateY(-10px);

	box-shadow:var(--shadow-lg);

}


/* ==========================================================================
   Project Card
   ========================================================================== */


.project-card {

	position:relative;

	overflow:hidden;

	border-radius:var(--radius-lg);

}


.project-card img {

	width:100%;

	height:auto;

	transition:transform .8s ease;

}


.project-card:hover img {

	transform:scale(1.05);

}


.project-card-content {

	padding:var(--space-4);

}


/* ==========================================================================
   Service Card
   ========================================================================== */


.service-card {

	padding:var(--space-5);

	border-radius:var(--radius-lg);

	border:1px solid var(--color-border);

	background:var(--color-white);

}


.service-card h3 {

	margin-bottom:var(--space-2);

}


/* ==========================================================================
   Tags
   ========================================================================== */


.tag {

	display:inline-flex;

	align-items:center;

	padding:8px 16px;

	border-radius:var(--radius-full);

	background:#EEF5EF;

	color:var(--color-primary);

	font-size:var(--fs-sm);

}


/* ==========================================================================
   Marquee
   ========================================================================== */


.marquee {

	display:flex;

	overflow:hidden;

	white-space:nowrap;

}


.marquee-track {

	display:flex;

	gap:40px;

	animation:marquee 20s linear infinite;

}



/* ==========================================================================
   Preloader
   ========================================================================== */


/* .preloader {

	position:fixed;

	inset:0;

	background:var(--color-background);

	z-index:var(--z-preloader);

	display:flex;

	align-items:center;

	justify-content:center;

}


.preloader-progress {

	width:200px;

	height:2px;

	background:var(--color-border);

	margin-top:30px;

}


.preloader-progress-bar {

	height:100%;

	width:0;

	background:var(--color-primary);

}

/* ==========================================================================
   Preloader Hidden State
   ========================================================================== */


/*.preloader {

	opacity: 1;

	visibility: visible;

	transition:
		opacity 0.7s ease,
		visibility 0.7s ease;

}


.preloader--hidden {

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

} */