/* --- VARIABLES (Light Theme) --- */
:root {
	--pt-bg: #f8fafc; /* Light Gray Background */
	--pt-text: #1e293b; /* Dark Slate Text */
	--pt-text-muted: #64748b;
	--pt-accent: #2563eb; /* Royal Blue */
	--pt-card-bg: #ffffff;
	--pt-border: #e2e8f0;
	--pt-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	--pt-shadow-hover: 0 20px 25px -5px rgba(37, 99, 235, 0.15); /* Blue tinted shadow */
}

/* --- SECTION LAYOUT --- */
.partners-section {
	background-color: var(--pt-bg);
	padding: 50px 20px;
	position: relative;
	overflow: hidden;
}

.partners-container {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

/* --- ANIMATED GRID BACKGROUND --- */
.partners-grid-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(circle at center, black, transparent 80%);
	animation: gridPan 60s linear infinite;
	z-index: 1;
	pointer-events: none;
}

@keyframes gridPan {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(40px);
	}
}

/* --- TYPOGRAPHY --- */
.partner-header {
	text-align: center;
	margin-bottom: 30px;
}

.cyber-heading {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--pt-text);
	letter-spacing: -0.5px;
	margin-bottom: 15px;
	position: relative;
	display: inline-block;
}

.cyber-line {
	width: 80px;
	height: 4px;
	background: linear-gradient(90deg, #60a5fa, var(--pt-accent));
	margin: 0 auto;
	border-radius: 2px;
}

.partner-desc {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 30px auto;
	color: var(--pt-text-muted);
	font-size: 1.1rem;
	line-height: 1.7;
}

/* --- MARQUEE ANIMATION --- */
.marquee-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 40px 0;
	/* Fades the edges for a smooth look */
	mask-image: linear-gradient(
		to right,
		transparent,
		black 10%,
		black 90%,
		transparent
	);
}

.marquee-track {
	display: flex;
	gap: 30px;
	width: max-content;
	/* Ensure smooth hardware accelerated animation */
	will-change: transform;
	animation: scrollLeft 35s linear infinite;
}

/* Reverse direction for the second row */
.marquee-track.reverse {
	animation: scrollRight 35s linear infinite;
}

/* Pause on hover for accessibility */
.marquee-wrapper:hover .marquee-track {
	animation-play-state: paused;
}

@keyframes scrollLeft {
	to {
		transform: translateX(-50%);
	}
}

@keyframes scrollRight {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0);
	}
}

/* --- LOGO CARDS --- */
.logo-card {
	width: 240px;
	height: 110px;
	background: var(--pt-card-bg);
	border: 1px solid var(--pt-border);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-shadow: var(--pt-shadow);
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
}

.logo-card img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(100%); /* Start Black & White */
	opacity: 0.6;
	transition: all 0.3s ease;
}

/* Hover Effects: Lift & Color */
.logo-card:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: var(--pt-shadow-hover);
	border-color: var(--pt-accent);
}

.logo-card:hover img {
	filter: grayscale(0%); /* Full Color on Hover */
	opacity: 1;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
	.cyber-heading {
		font-size: 1.8rem;
	}
	.logo-card {
		width: 180px;
		height: 90px;
	}
	.partner-desc {
		font-size: 1rem;
		padding: 0 15px;
	}
}

/* correction  */
.why-choose-us .partner-desc {
	color: var(--pt-border);
}
/* Marquee Fade Effect */
.marquee-fade {
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	height: 100%;
	pointer-events: none;
	z-index: 10;
	background: linear-gradient(to left, var(--pt-bg), transparent);
}

.marquee-wrapper {
	position: relative;
}