:root
{
    --brand: #7b0000;
	--gold: #ffcc00;
    --beige: #f0dca8;
	--brand-dark: #8b0000;
}
*
{
	box-sizing:border-box;
}
body
{
	margin:0;
	font-family:'Roboto','Helvetica', sans-serif;
	background:#fafafa;
}
header
{
	position:fixed;
	top:0;
	width:100%;
	background:var(--brand);
	z-index:1000;
	box-shadow:0 2px 10px rgba(0,0,0,0.3);
}

a
{
	text-decoration:none;
}

nav
{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:10px 20px;
	flex-wrap:wrap;
}
.logo, .logo a
{
	display:flex;
	align-items:center;
}
.logo img
{
	height:35px;
}
.logo span
{
	color:var(--beige);
	font-size:1.8rem;
	font-weight:bold;
}

nav ul
{
	list-style:none;
	display:flex;
	margin:0;
	padding:0;
}
nav ul li
{
	margin:0 15px;
	position:relative;
}
nav a
{
	color:#fff;
	text-decoration:none;
	font-weight:500;
	transition:color 0.25s ease;
}
nav a:hover
{
	color:var(--gold);
}

.submenu
{
	display:none;
	position:absolute;
	background:#a52a2a;
	top:100%;
	left:0;
	min-width:240px;
	box-shadow:0 2px 5px rgba(0,0,0,0.3);
	padding:6px 0;
	border-radius:8px
}
.submenu li
{
	padding:6px 12px;
}
.submenu li a
{
	display:block;
	color:#fff;
	padding:6px 8px;
	border-radius:6px;
}
.submenu li a:hover
{
	background:rgba(255,255,255,0.08);
	color:var(--gold);
}
/*
nav ul li:hover #servicesMenu
{
	display:block !important;
}
*/
@media (max-width:1000px)
{
	#headerTitle
	{
		display: none;
	}
	.logo img
	{
		height:25px;
	}
	#homeNav
	{
		display: none;
	}

	nav u
	{
		display:none;flex-direction:column;width:100%;background:var(--brand);
	}

  nav ul.show{display:flex;}
  nav ul li.open>.submenu{display:block;}
  nav ul li:hover .submenu{display:none;}
}

h1
{
	text-align:center;
	font-size: 2em;
}
section
{
	padding:80px 20px;
}

#about
{
	background-color: #777777;
}

#about h1
{
	color: white;
}

/* HERO spacing reduced + responsive */
.hero{background-color: #777777;color:#fff;text-align:center;padding:120px 20px 95px;}
.hero h1{font-size:3rem;margin-bottom:20px;}
.hero p{font-size:1.2rem;margin-bottom:30px;}
.cta-wrap{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{background:var(--gold);color:#000;font-weight:700;border:none;padding:16px 28px;border-radius:28px;cursor:pointer;transition:transform .15s ease,background .25s ease;font-size:1.1rem;}
.btn:hover{background:#e6b800;transform:translateY(-2px);}

@media (max-width:1000px){
  .hero{padding:90px 16px 70px;}
  .hero h1{font-size:2.4rem}
}
@media (max-width:480px){
  .hero{padding:72px 14px 56px;}
  .hero h1{font-size:2rem}
}

.bubbleContainer
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.tile
{
	border-radius:14px;
	overflow:hidden;
	box-shadow:0 6px 16px rgba(0,0,0,0.18);
	transition:transform 0.25s ease,box-shadow .25s ease;
	text-align:center;
	background:#fff;padding-bottom:10px;
	margin: 1em;
}

.tile:hover
{
	transform:translateY(-4px);
	box-shadow:0 10px 24px rgba(0,0,0,0.22);
}
.tile a
{
	display:block;
	color:inherit;
	text-decoration:none;
}
.tile img
{
	width:100%;
	height:200px;
	object-fit:contain;
	display:block;
	background:#000;
	aspect-ratio : 1.5 / 1;
}
.tile p
{
	margin:10px 0 8px;
	font-size:1.1rem;
	font-weight:700;
	color:#333;
}

.service-section
{
	margin-top:80px;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.service-section > img{display:block;margin:0 auto 20px auto;width:100%;max-width:100%;height:240px;object-fit:contain;background:#000;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,0.25);}
.service-section h2
{
	font-size:2rem;
	margin-bottom:12px;
	color:var(--brand);
}
.service-section p{font-size:1.05rem;}
.rate{font-weight:800;margin-top:10px;color:#000;font-size:1.08rem;}

.test-tiles
{
	max-width:1000px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.test-tile
{
	background:#fff;
	border:1px solid #e6e6e6;
	border-radius:12px;
	box-shadow:0 2px 8px rgba(0,0,0,0.06);
	padding:16px;
	text-align:center;
	aspect-ratio : 4 / 1;
	height: 4em;
	display: flex;
	align-items:center;
	flex-direction: column;
	justify-content: center;
	margin: 1em;
}

.test-tile h4
{
	font-size:1rem;
	color:var(--brand);
	margin: 0px;
}
.test-tile span
{
	display:block;
	font-size:0.9rem;
	color:#333;
	margin: 0.3em 0px 0px 0px;
}

.test-tile img.brand-logo
{
	background:#fff;
	padding:4px;
	width: 150px;
	height: auto;
}

#meter .test-tile
{
	aspect-ratio : 1.5 / 1;
	height: auto;
}

.values
{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:30px;
}
.value
{
	background:#fff;
	padding:25px;
	border-radius:12px;
	box-shadow:0 4px 12px rgba(0,0,0,0.1);
	transition:transform 0.25s ease;
	text-align:center;
	max-width: 300px;
	margin: 1em;
}
.value h3{margin-bottom:10px;color:var(--brand);}
.value p{font-size:0.95rem;line-height:1.45;}
.value:hover{transform:translateY(-5px);}

.contact-info{text-align:center;background:#fff;padding:40px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,0.12);max-width:860px;margin:40px auto;font-size:1.15rem;}
.contact-info a{color:var(--brand);text-decoration:none;font-weight:700}
.contact-info a:hover{text-decoration:underline}
.map iframe{border:0;border-radius:12px;width:100%;height:360px;box-shadow:0 4px 12px rgba(0,0,0,0.18);}

.brand-logo{max-height:80px;display:block;margin:0 auto 8px auto;object-fit:contain}

#mainLogo
{
	max-width: 600px;
	width: 60vw;
}