/* Optional: make dropdowns full width on mobile */
@media screen and (max-width: 600px) {
	#mobileMenu a {display:block;}
}
/*.page-content img {max-width:100%; margin-top:10px;}*/
.page-content img {max-width:100%;}

h1 {
	filter: drop-shadow(2px 2px 2px gray);
}



/* ===================== VIDEO STYLING ===================== */

/* video */
/*
	#weldVideo {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%; 
	max-height: 600px;
	object-fit: cover;
	background: #000;
	z-index: -1;
	filter:opacity(75%);
	}
*/


/* ===================== SECTION STYLING ===================== */
/*
	section {
	padding: 5rem 2rem !important;
	}
	
	section h2 {
	text-align: center;
	font-size: 2.2rem;
	margin-bottom: 2rem;
	color: #1f1f1f;
	}
	
	section p {
	text-align: center;
	font-size: 1.1rem;
	max-width: 800px;
	margin: auto 0 2rem;
	}
*/
/* ===================== SERVICES & PROJECTS ===================== */
/*
	.service-grid, .project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	}
	
	.service-card, .project-card {
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0,0,0,0.1);
	transition: transform 0.3s, box-shadow 0.3s;
	}
	
	.service-card:hover, .project-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	}
	
	.service-card img, .project-card img {
	width: 100%;
	display: block;
	}
	
	.service-card h3, .project-card h3 {
	padding: 1rem;
	color: #1f1f1f;
	}
	
	.service-card p {
	padding: 0 1rem 1rem 1rem;
	color: #555;
	}
*/
/* ================== SCROLL ANIMATIONS ================== */
.fade-up {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.show {
	opacity: 1;
	transform: translateY(0);
}

/* hide all slides by default */
.service-card img,
.project-card img {
	position: absolute; /* stack images on top of each other */
	top: 0;
	left: 0;
	width: 100% !important;
	max-height: 180px !important;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease-in-out; /* smooth fade */
}

/* show active slide */
.service-card img.active,
.project-card img.active {
	opacity: 1;
	z-index: -1;
}

/* optional: ensure parent container has correct position */
.service-card,
.project-card {
	position: relative;
	height: 250px; /* match max-height of images */
	max-width: 300px;
	overflow: hidden;
}

.noShow {
	/* Styles for the parent element */
}

.noShow {
	display: block; /* Show the paragraph when the parent is hovered */
}

.nowShow:hover .noShow {
	display: none; /* Initially hide the paragraph */
}	
/* 3D Model Viewer */
model-viewer {
	width: 100vw;
	height: 100vh;
}
/* MAF Colours Start */
html, body {
	color: #fff !important;
	background-color: #343a40 !important;
}
.w3-maf-1 {
	background-color: #344040 !important;
}
.w3-maf-2 {
	background-color: #343440 !important;
}
.w3-maf-3 {
	background-color: #403a34 !important;
}
/* MAF Colours End */

.homeSlides {display:none;}

.sale {
	position:absolute;
	top:24px;
	right:16px;
	width:18%;
	height:auto;
	z-index:5;
}
#svg1 {
	position:absolute;
	top:24px;
	right:16px;
	width:18%;
	height:auto;
}
@keyframes colorChange {
	0% {
		fill: red;
	}
	25% {
		fill: orange;
	}
	50% {
		fill: yellow;
	}
	75% {
		fill: orange;
	}
	100% {
		fill: red;
	}
}

#rect1 {
	animation: colorChange 5s infinite;
}
#mainContent img {
	display: block;
	margin: auto;
	width: 50%;
}
#weldVideo {
	min-width: 100%;
	/* min-height: 100%; */
	background-repeat: no-repeat;
	background-attachment: fixed;  
	background-size: cover;
	z-index: -1;
}
/* Color overlay */
.color-overlay {
	position: absolute; /* Positions overlay relative to .video-container */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Customize color and opacity here */
	background-color: rgba(0, 0, 0, 0.6); /* Dark gray with 60% opacity */
	z-index: 0; /* Places overlay above video but below content */
}
#navbar {
	background-color: #000; /* Black background color */
	position: fixed; /* Make it stick/fixed */
	top: -50px; /* Hide the navbar 50 px outside of the top view */
	width: 100%; /* Full width */
	transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

/* Style the navbar links */
#navbar a {
	/*float: left;*/
	/*display: block;*/
	color: white;
	/*text-align: center;*/
	/*padding: 15px;*/
	/*text-decoration: none;*/
}

#navbar a:hover {
	background-color: #ffc107;
	color: black;
}
video {
	display: block;
	margin: auto;
}