/* ==========================================================================
   CNC HARDIN'S LTD - ENHANCED GLASSMORPHISM & LOGO FIX
   ========================================================================== */

/* 1. DARK FALLBACK BACKGROUND (Fixes plain white page when bg image paths fail) */
html, body {
	background-color: #111417 !important;
	color: #ffffff;
	-webkit-font-smoothing: antialiased;
}

/* 2. CUSTOM LOGO DISPLAY FIX (Fits logo from image #2 perfectly) */
#header .logo {
	width: 8rem !important;
	height: 8rem !important;
	min-width: 8rem;
	min-height: 8rem;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	background: rgba(255, 255, 255, 0.05) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.15), inset 0 0 15px rgba(255, 255, 255, 0.05);
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 2rem auto !important;
	overflow: hidden !important;
	padding: 0.75rem !important;
	transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

#header .logo:hover {
	transform: scale(1.05);
	border-color: #ffffff !important;
	box-shadow: 0 0 45px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Formats your uploaded image inside the circle badge */
#header .logo img {
	max-width: 85% !important;
	max-height: 85% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

/* Hide fallback font icons if an <img> tag is present */
#header .logo img + .icon,
#header .logo img + span {
	display: none !important;
}

/* 3. SHARP GLASSMORPHISM CARDS */
#header .content {
	border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
	background: rgba(20, 24, 28, 0.75) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

#header .content .inner {
	padding: 3rem 2.5rem !important;
}

#main article {
	background-color: rgba(22, 26, 30, 0.88) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6) !important;
	border-radius: 8px !important;
}

/* 4. NAVIGATION BUTTONS & MENU */
#header nav ul {
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	background: rgba(10, 12, 14, 0.4) !important;
	backdrop-filter: blur(10px);
	border-radius: 6px !important;
	overflow: hidden;
}

#header nav ul li {
	border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#header nav ul li a {
	font-weight: 600 !important;
	letter-spacing: 0.22rem !important;
	font-size: 0.75rem !important;
	transition: all 0.3s ease !important;
}

#header nav ul li a:hover {
	background-color: rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* 5. ACTION BUTTONS (WhatsApp & Direct Chat) */
ul.actions li .button, 
ul.actions li button, 
ul.actions li input[type="submit"] {
	border-radius: 4px !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important;
	background: rgba(255, 255, 255, 0.05) !important;
	letter-spacing: 0.18rem !important;
	font-weight: 600 !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

ul.actions li .button:hover {
	box-shadow: inset 0 0 0 1px #ffffff, 0 5px 18px rgba(255, 255, 255, 0.15) !important;
	transform: translateY(-2px);
	background-color: rgba(255, 255, 255, 0.15) !important;
}