/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */


/* * MVM Health CF7 Multi-Step Form Styles
 * -- LIGHT THEME (White Background) --
 */

/* Main container - remove dark bg */
.mvm-form-container {
  padding: 10px; /* Add a little padding if needed */
}

/* Hide fieldset borders */
.mvm-form-container fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* Form heading */
.mvm-form-container h2 {
  color: #111827; /* Dark text */
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 25px;
}

/* General label styling */
.mvm-form-container label {
  color: #374151; /* Dark grey text */
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin-bottom: 15px;
}

/* Spaced labels for radio/checkbox groups */
.mvm-form-container label.cf7-label-spaced {
  margin-bottom: 10px;
}

/* Input and Textarea styling */
.mvm-form-container .wpcf7-form-control:not(.wpcf7-submit, .wpcf7-checkbox, .wpcf7-radio) {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #d1d5db; /* Light grey border */
  border-radius: 6px;
  background-color: #ffffff;
  color: #111827;
  font-size: 16px;
  box-sizing: border-box; 
}

/* Focus style from your screenshot (thicker black border) */
.mvm-form-container .wpcf7-form-control:not(.wpcf7-submit):focus {
  border: 2px solid #111827;
  padding: 11px 14px; /* Adjust padding for border */
}

.mvm-form-container textarea {
  height: 120px;
  resize: vertical;
}

/* Row and column layout */
.mvm-form-container .cf7-row {
  display: flex;
  flex-wrap: wrap; 
  gap: 20px;
  margin-bottom: 15px;
}

.mvm-form-container .cf7-half {
  flex: 1;
  min-width: 250px;
}

.mvm-form-container .cf7-half label {
  margin-bottom: 0; 
}

/* Checkbox and Radio styling */
.mvm-form-container .wpcf7-list-item {
  display: inline-block;
  margin: 0 15px 10px 0;
}
.mvm-form-container .wpcf7-list-item label {
  display: inline;
  color: #374151; /* Dark text */
  font-weight: 400;
}

/* "I can't find my plan" link */
.mvm-form-container #show-other-insurance {
  float: right;
  color: #e11d48; /* Your primary brand color */
  font-size: 13px;
  text-decoration: underline;
  font-weight: 500;
}
.mvm-form-container #show-other-insurance:hover {
  color: #9f1239; /* Your primary-dark color */
}

/* --- NEW Button Styling --- */
.mvm-form-container .cf7-button-wrapper,
.mvm-form-container .cf7-button-wrapper-full {
  display: flex;
  justify-content: flex-start; /* Aligns single 'Next' button to the left */
  margin-top: 20px;
  gap: 15px;
}

/* Align 'Prev' and 'Submit' on step 2 */
.mvm-form-container .cf7-button-wrapper-full {
  justify-content: space-between; 
}

.mvm-form-container #cf7-next-btn,
.mvm-form-container #cf7-prev-btn,
.mvm-form-container .wpcf7-submit {
  padding: 10px 35px;
  border: 2px solid #e11d48; /* Brand color border */
  border-radius: 6px; /* Rectangular button */
  font-size: 16px;
  font-weight: bold;
  background-color: #ffffff; /* White background */
  color: #e11d48; /* Brand color text */
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover/Focus state for all buttons */
.mvm-form-container #cf7-next-btn:hover,
.mvm-form-container #cf7-prev-btn:hover,
.mvm-form-container .wpcf7-submit:hover {
  background-color: #e11d48; /* Brand color background */
  color: #ffffff; /* White text */
}

/* Policy Text */
.mvm-form-container .cf7-policy-text {
  color: #6b7280; /* Light text */
  font-size: 13px;
  text-align: center;
  margin-top: 20px;
}
.mvm-form-container .cf7-policy-text a {
  color: #e11d48;
  text-decoration: none;
}
.mvm-form-container .cf7-policy-text a:hover {
  text-decoration: underline;
}

/* Hide reCAPTCHA badge (if you are using v3) */
.grecaptcha-badge { 
  visibility: hidden;
}


	.mvm-health-widget * { margin:0; padding:0; box-sizing:border-box; padding-block:100; }
	.mvm-health-widget {
		width:100%; height:600px; overflow:hidden;
		display:grid; grid-template-columns:1fr 1fr;
		box-shadow:0 4px 8px rgba(0,0,0,0.1);
		background-image:url('/wp-content/uploads/2025/09/Gemini_Generated_Image_70tlfl70tlfl70tl.png');
		background-position:center; background-size:cover; background-repeat:no-repeat;
		font-family: 'Montserrat', sans-serif;
	}
	.mvm-health-widget .left, .mvm-health-widget .right { flex:1; transition:all 0.5s ease; color:#fff; }
	.mvm-health-widget:hover .left { flex:2; } 
	.mvm-health-widget:hover .right { flex:1; }

	/* Hidden initially */
	.top-angle, .bottom-angle, .person, .text-content { opacity:0; }

	/* Animate In */
	.animate .top-angle { animation: slideInFromRight 1s forwards; }
	.animate .bottom-angle { animation: slideInFromLeft 1s forwards; }
	.animate .person { animation: slideInPersonFromRight 1s forwards; }
	.animate .text-content { animation: slideInFromRight 1s forwards; }

	/* Keyframes */
	@keyframes slideInFromRight { 
		0% { transform: translateX(100%); opacity:0; } 
		100% { transform: translateX(0); opacity:1; } 
	}
	@keyframes slideInFromLeft { 
		0% { transform: translateX(-100%); opacity:0; } 
		100% { transform: translateX(0); opacity:1; } 
	}
	@keyframes slideInPersonFromRight { 
		0% { transform: translateX(20%); opacity:0; } 
		100% { transform: translateX(0); opacity:1; } 
	}

	/* Original positions */
	.mvm-health-widget .top-angle { float:right; position:relative; z-index:1; top:-20px; left:-40px; height:380px;width: 380px; }
	.mvm-health-widget .bottom-angle { float:left; position:relative; z-index:3; left:110px; top:-740px; height:380px;width: 380px; }
	.mvm-health-widget .person { height:600px; position:relative; z-index:2; top:-350px; left:120px; }
	.mvm-health-widget .left { position: relative; top: 160px;left: 0px; padding-left:50px;text-transform: uppercase;}
	.mvm-health-widget .text-content { max-width:500px; text-align:left; }
	.mvm-health-widget .text-content h4 { font-size:18px; margin-bottom:10px; color:white;  font-weight: 400;line-height:22px;  }
	.mvm-health-widget .text-content h1 { font-size:40px; margin-bottom:10px; font-weight: 700;width: 400px; color:white;line-height: 52px;}
	.mvm-health-widget .text-content p { font-size:15px;font-weight:400; margin-bottom:30px; line-height:22px; color:white; text-transform: none;width: fit-content; }
	.mvm-health-widget .text-content button { padding:10px 20px;border-radius: 0px; font-size:15px; font-weight:600; color:#000; background-color:#fff; border:2px solid #000; cursor:pointer; transition: background-color 0.3s ease;margin-bottom: 80px; }
	.mvm-health-widget .text-content button:hover { background-color:#111; color:#fff; border:2px solid #fff; }

	/* Responsive */
	@media (max-width:768px) {
		.mvm-health-widget { grid-template-columns:1fr; height:350px;justify-content: center; }
		.mvm-health-widget .right { display:none; }
		.mvm-health-widget .left { padding:1px 0px; height: fit-content; }
		.mvm-health-widget .text-content { padding:0px; text-align:left;padding-block: 0px;padding-inline: 0px;left: -30px;top: -120px;position: relative;}
		.mvm-health-widget .text-content h1 { font-size:29px;width: 300px;line-height: 29px; }
		.mvm-health-widget .text-content h4 { font-size:14px; }
		.mvm-health-widget .text-content p { font-size:15px; width: 390px;}
		.mvm-health-widget{ background: #111; }
	}

	@media (max-width:768px) {
		.mvm-health-widget .text-content {
			animation: none !important;
			opacity: 1 !important; 
		}
	}

	@media (min-width:1024px){
		.mvm-health-widget .person{ top: -350px !important; left: 100px; }
		.mvm-health-widget .top-angle{ top: 10px !important; left: 0px !important; }
		.mvm-health-widget .bottom-angle{ top: -750px !important; }
	}

	@media (min-width: 1920px) {
		.mvm-health-widget .person { top: 50px !important; left: 200px !important; }
		.mvm-health-widget .top-angle { top: 10px !important; left: -150px !important; }
		.mvm-health-widget .bottom-angle { top: -350px !important; left: 200px !important; }
	}

	@media (min-width: 2560px) {
		.mvm-health-widget .person { top: 30px !important; left: 400px !important; }
		.mvm-health-widget .top-angle { top: 10px !important; left: -300px !important; }
		.mvm-health-widget .bottom-angle { top: -350px !important; left: 400px !important; }
	}

	.logo-marquee-wrapper {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		width: 100%;
	}

	.logo-marquee {
		width: 100%;
		overflow: hidden;
		background: transparent; /* change to #fff if needed */
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.logo-marquee__track {
		display: flex;
		align-items: center;
		gap: 58px;
		white-space: nowrap;
		will-change: transform;
		animation: marquee-right 28s linear infinite;
	}

	.logo-marquee__track img {
		display: block;
		height: 64px;
		width: auto;
		object-fit: contain;
		margin: 0;
		padding: 0;
		-webkit-user-drag: none;
		user-drag: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	/* ✅ Smooth continuous animation LEFT ➝ RIGHT */
	@keyframes marquee-right {
		0%   { transform: translateX(0); }
		100% { transform: translateX(-50%); }
	}

	@media (prefers-reduced-motion: reduce) {
		.logo-marquee__track { animation: none; transform: translateX(0); }
	}

	@media (max-width: 600px) {
		.logo-marquee__track img { height: 62px; }
		.logo-marquee__track { gap: 20px; animation-duration: 12s; }
	}
	.custom-marquee-wrapper {
		overflow: hidden;
		width: 100%;
		font-family: 'Montserrat',Sans-Serif;
	}

	.custom-marquee {
		padding: 20px;
		display: flex;
		width: max-content;
		animation: customMarqueeAnim 60s linear infinite; /* slow scroll */
	}

	.custom-marquee-group {
		display: flex;
		gap: 20px; /* gap between images */
	}

	.doctor-item {
		text-align: left;
		text-transform: uppercase;
	}

	.doctor-item img {
		width: 300px;
		height: 300px;
		object-fit: contain;
		background: white;
		display: block;
	}

	.doctor-item p {
		color: white;
		margin-top: 8px;
		font-size: 19px;
		font-weight: 700;
	}
	.doctor-item span{
		font-size: 12px;
	}

	@keyframes customMarqueeAnim {
		0% { transform: translateX(0); }
		100% { transform: translateX(-50%); }
	}
	/* --- Reset + Wrapper --- */
	.logo-marquee-wrapper {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		width: 100%;
		overflow: hidden;
		background: transparent; /* set to #fff if needed */
	}

	/* --- Main Marquee --- */
	.logo-marquee {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		position: relative;
	}

	.logo-marquee__track {
		display: inline-flex;
		align-items: center;
		gap: 58px;
		animation: marquee-right 40s linear infinite;
		will-change: transform;
	}

	.logo-marquee__track img {
		display: block;
		height: 54px;
		width: auto;
		object-fit: contain;
		-webkit-user-drag: none;
		user-drag: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	/* --- Animation: Left ➝ Right --- */
	@keyframes marquee-right {
		0%   { transform: translateX(-50%); }
		100% { transform: translateX(0%); }
	}

	/* --- Mobile --- */
	@media (max-width: 600px) {
		.logo-marquee__track img { height: 62px; }
		.logo-marquee__track { gap: 20px; animation-duration: 20s; }
	}

	@media (prefers-reduced-motion: reduce) {
		.logo-marquee__track { animation: none; transform: translateX(0); }
	}
	/* CSS is the same as before, no changes needed here */
	.mvm-carousel-widget {
		background-color: #fff;
		font-family: 'Proxima Nova', Sans-Serif;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		margin: 0;
	}
	.mvm-treatments-section {
		width: 100%;
		display: flex;
		align-items: stretch;
		gap: 70px;
	}
	.mvm-carousel-wrapper {
		flex-grow: 1;
		overflow: hidden;
	}
	.mvm-carousel-track {
		display: flex;
		gap: 40px;
		padding: 0;
		margin: 0;
		scrollbar-width: none;
		overflow-x: auto; 
		scroll-behavior: smooth; 
		-webkit-overflow-scrolling: touch;
	}
	.mvm-carousel-track::-webkit-scrollbar {
		display: none;
	}
	.mvm-carousel-card {
		flex: 0 0 350px;
		color: #ffffff;
		padding: 2.5rem 2rem;
		background-size: cover;
		background-position: center;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 430px;
		transition: transform 0.3s ease-in-out;
	}
	.mvm-carousel-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.mvm-carousel-card > * {
		position: relative;
		z-index: 2;
	}
	.mvm-carousel-card h3 {
		font-size: 1.75rem;
		margin: 0 0 0.5rem 0;
		font-weight: bold;
	}
	.mvm-carousel-card p {
		font-size: 1rem;
		line-height: 1.6;
		margin-bottom: 2rem;
	}
	.mvm-carousel-card a {
		color: #ffffff;
		text-decoration: none;
		font-weight: bold;
		letter-spacing: 1px;
		align-self: flex-start;
		transition: opacity 0.3s ease;
	}
	.mvm-carousel-card a:hover {
		opacity: 0.8;
	}
	.mvm-card-1 { background-image: url('/wp-content/uploads/2025/10/bg-image.png'); }
	.mvm-card-2 { background-image: url('/wp-content/uploads/2025/10/bg-itymage-2.png'); }
	.mvm-card-3 { background-image: url('/wp-content/uploads/2025/10/bg-itymage-5.png'); }
	.mvm-card-4 { background-image: url('/wp-content/uploads/2025/10/bg-itymage-6.png'); }
	.mvm-scroll-btn {
		background-color: #64707E !important;
		border: none;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		flex-shrink: 0;
		min-height: 430px;
		width: 230px;
		border-radius: 0;
	}
	.mvm-scroll-btn:hover {
		background-color: #64707E !important;
	}
	.mvm-scroll-btn svg {
		width: 350px;
		height: 350px;
		color: #ffffff;
		position: relative;
		left:-60px;
		stroke: white;
		fill: white;
		rotate: 90deg;
	}
	.mvm-card-1 svg, .mvm-card-2 svg, .mvm-card-3 svg, .mvm-card-4 svg{
		stroke: white;
		fill: white;
		rotate: 90deg;
		position: relative;
		top:10px;
		left: 5px; 
		width:30px;
		height:30px;
	}
	@media (max-width: 768px) {
		.mvm-treatments-section {
			display: flex;
			align-items: stretch; /* keeps equal height */
			gap: 15px;
		}

		/* Scroll Button (fixed width, equal height) */
		.mvm-scroll-btn {
			width: 80px; /* keep narrow on left */
			min-height: 300px; /* increased height */
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
		}

		.mvm-scroll-btn svg {
			width: 45px;
			height: 45px;
			left: 0;
		}

		/* Carousel Wrapper and Cards */
		.mvm-carousel-wrapper {
			flex-grow: 1;
			display: flex;
		}

		.mvm-carousel-card {
			flex: 0 0 95%;
			min-height: 300px; /* same height as button */
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
	.brand-marquee-container {
		width: 100%;
		overflow: hidden;
		background: transparent; /* Transparent background */
		padding: 20px 0;
		border-top: 1px solid white;  /* White top border */
		border-bottom: 1px solid white; /* White bottom border */
	}

	.brand-marquee {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.brand-track {
		display: flex;
		width: max-content;
		animation: scroll-marquee 50s linear infinite;
	}

	.brand-track img {
		height: 50px; /* Adjust as needed */
		margin: 0 40px; /* Spacing between logos */
		object-fit: contain;
	}

	@keyframes scroll-marquee {
		0% { transform: translateX(0); }
		100% { transform: translateX(-50%); }
	}

	/* Section Wrapper */
	.location-section {
		display: flex;
		height: 750px;
		flex-wrap: wrap;
		background: #000;
		color: #000;
		margin: 20px 0;
		max-width: 3200px;
		font-family: 'Montserrat', Sans-Serif;gap: 10px;
	}

	/* Left Side */
	.location-left {
		background-color: #fff;
		flex: 1 1 45%;
		padding-top: 100px;
		padding-left: 60px;
		height: 100%;
	}

	.location-left h4 {
		font-size: 18px;
		font-weight: 400;
		color: #111;
		margin-bottom: 10px;
		text-transform: uppercase;
	}

	.location-left h2 {
		font-size: 43px;
		font-weight: 700;
		margin-bottom: 15px;
	}

	.location-left p {
		font-size: 16px;
		font-weight: 400;
		color: #111;
		margin-bottom: 20px;
	}

	.location-left hr {
		border: 0;
		border-top: 1px solid #aaa;
		margin: 15px 0 25px 0;
	}

	/* Locations Grid - Desktop */
	.location-grid {
		display: flex;
		gap: 50px;
		margin-bottom: 20px;
	}

	.location-grid > div {
		flex: 1;
	}

	.location-grid a{
		color: #111;
	}

	/* Location items */
	.location-grid li {
		list-style: none;
		font-weight: 700;
		font-size: 15px;
		margin: 12px 0;
		cursor: pointer;
		transition: color 0.3s;
		color: #111;
	}

	.location-grid li.active,
	.location-grid li:hover {
		color: #333;
		font-weight: 800;
	}

	.all-locations-btn {
		font-size: 15px;
		background: #000;
		color: #fff;
		border: none;
		padding: 12px 20px;
		font-weight: 600;
		cursor: pointer;
		margin-top: 20px;
		border-radius: 0px;
	}
	.all-locations-btn:hover{
		background-color: #111;
	}

	/* Right Side */
	.location-right {
		flex: 1 1 45%;
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding-left: 20px;height: 100%;
	}

	/* Map Box */
	.map-box {
		background: #f9f9f9;
		padding: 0px;
		width: 100%;
		border: 1px solid #eee;
	}

	.map-box iframe {
		width: 100%;
		height: 470px;
		border: 0;
	}

	/* Info Row */
	.info-row {
		display: flex;
		background: #000;
		color: #fff;
		transition: opacity 0.5s ease;
		opacity: 1;
	}
	.info-row.fade-out { opacity: 0; }

	.image-box { flex: 1 1 50%; }
	.image-box img {
		width: 100%;
		height: 80%;
		object-fit: cover;
		display: block;
	}

	.info-box {
		flex: 1 1 50%;
		padding: 30px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.info-box h3 {
		font-size: 17px;
		font-weight: 700;
		margin-bottom: 10px;
	}
	.info-box p{
		font-size: 17px;
		font-weight: 400;
	}

	/* ===== Mobile Fix ===== */
	@media(max-width: 900px) {
		.location-section {
			display: flex;
			height: auto;
		}
		.location-left {
			background-color: #fff;
			padding-top: 40px;
			padding-left: 20px;


		}
		.location-left h4 {
			font-size: 14px;
			margin-bottom: 10px;
			text-transform: uppercase;
		}

		.location-left h2 {
			font-size: 29px;
		}

		.location-left p {
			font-size: 14px;
		}
		.location-grid li {
			font-size: 13px;
		}
		.all-locations-btn {
			font-size: 13px;
			margin-bottom: 20px
		}
		.location-section { flex-direction: column; }
		.location-right{
			opacity: 1;
			height: 300px;
		}

		/* Two equal columns for locations */
		.location-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
			text-align: left;
			font-weight: 400;
		}
		.location-grid > div { flex: unset; }

		.info-row { flex-direction: column; }
		.image-box, .info-box {
			flex: 1 1 100%; max-width: 100%; }
		.image-box{
			display: none;
		}
		.map-box{
			width: 100vw;
			padding: 0;margin-left:-20px;order: 2;

		}
		.map-box iframe {
			width: 100%;
			height: 200px;
			border: 0;margin: 0;
		}
		.info-box{
			order: 1;
			position: relative;
			left: -40px;
		}
		.info-box h3{
			position: relative;
			left: 10px;
		}
		.location-right {
			display: flex;
			flex-direction: column;
		}
	}

	/* ---------- Elementor Contact Step Form Styling ---------- */

	/* Hide any unwanted section by class if needed */
	.form-none {
		display: block !important;
	}

	/* Step Indicator Container */
	.contact-step-form .e-form__indicators {
		position: relative;
		margin-bottom: 60px; /* space below step indicators */
	}

	/* Each step indicator */
	.contact-step-form .e-form__indicators .e-form__indicators__indicator {
		position: relative;
	}

	/* Add custom labels below indicators */
	.contact-step-form .e-form__indicators .e-form__indicators__indicator:after {
		position: absolute;
		bottom: -35px;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
		line-height: 22px;
		font-size: 16px;
		text-align: center;
		white-space: nowrap;
		font-family: 'Proxima Nova', sans-serif;
		letter-spacing: 0.5px;
	}

	/* Label Text for Step 1 */
	.contact-step-form .e-form__indicators .e-form__indicators__indicator:first-child:after {
		content: 'PERSONAL INFORMATION';
	}

	/* Label Text for Step 2 */
	.contact-step-form .e-form__indicators .e-form__indicators__indicator:last-child:after {
		content: 'BOOKING INFORMATION';
	}

	/* Optional: Adjust for mobile */
	@media (max-width:600px) {
		.contact-step-form .e-form__indicators .e-form__indicators__indicator:after {
			font-size: 14px;
			bottom: -30px;

		}
	}
	.elementor-field-group-field_78ba0be {
		display: none;
	}


	/* Wrapper for the list */
	.pain-grid-unique {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
		max-width: 1200px;
		margin: 0 auto;
		padding: 30px;
		background-color: #fdfdfd; /* off-white background */
		border-radius: 10px;
	}

	/* Individual items */
	.pain-item-unique {
		display: flex;
		align-items: center;
		font-size: 16px;
		color: #000000;
		margin-bottom: 10px;
	}

	.pain-item-unique i {
		color: #000000; /* tick icon color */
		margin-right: 10px;
		font-size: 16px;
	}

	/* 2 columns on tablet */
	@media (min-width: 768px) {
		.pain-grid-unique {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* 4 columns on desktop */
	@media (min-width: 1024px) {
		.pain-grid-unique {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	/* ===== Black & White Card Grid ===== */
	.bw-card-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		max-width: 1100px;
		margin: 50px auto;
	}

	/* Individual card */
	.bw-card {
		position: relative;
		height: 250px;
		overflow: hidden;
		border-radius: 0;
		cursor: pointer;
	}

	/* Background image */
	.bw-card-bg {
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center;
		filter: grayscale(100%);
		transition: transform 0.3s ease;
	}

	/* Title overlay */
	.bw-card-title {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		font-weight: 700;
		color: #ffffff;
		text-align: center;
		z-index: 2;
		background: rgba(51, 51, 51, 0.9);
		transition: opacity 0.3s ease;
	}

	/* Hover content overlay */
	.bw-card-overlay {
		position: absolute;
		inset: 0;
		background: rgba(51, 51, 51, 0.95);
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: left;
		opacity: 0;
		transition: opacity 0.3s ease;
		color: #ffffff;
		padding: 20px;
		font-size: 14px;
		line-height: 1.5;
		z-index: 3;
		overflow-y: auto;
	}

	.bw-card-overlay ul {
		padding-left: 18px;
	}

	/* Hover effects */
	.bw-card:hover .bw-card-overlay {
		opacity: 1;
	}

	.bw-card:hover .bw-card-title {
		opacity: 0;
	}

	.bw-card:hover .bw-card-bg {
		transform: scale(1.05);
	}

	/* Responsive layout */
	@media (max-width: 1024px) {
		.bw-card-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 640px) {
		.bw-card-grid {
			grid-template-columns: 1fr;
		}
	}