/* Modern Glass Morphism Design */

:root {
	--brand-gradient: linear-gradient(135deg, #2e7d32 0%, #1976d2 55%, #e65100 100%);
	/* Redeclare brand variables to ensure availability even if base file has ::root typo */
	--ion-color-primary: #2e7d32;
	--ion-color-secondary: #1976d2;
	--ion-color-tertiary: #e65100;
	
	/* Glass morphism variables */
	--glass-bg: rgba(255, 255, 255, 0.1);
	--glass-border: rgba(255, 255, 255, 0.2);
	--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	--glass-blur: blur(20px);
	--glass-blur-light: blur(10px);
}

/* Typography and layout helpers */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 56px 0; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }

/* Modern Typography */
h1, h2, h3 {
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	font-weight: 700;
	line-height: 1.2;
}

h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

h3 {
	font-size: 1.8rem;
	margin-bottom: 0.8rem;
}

p {
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.6;
	font-size: 1.1rem;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Header */
.logo-and-menu-div {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-bottom: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
}

/* Logo link styling */
.logo-and-menu-div a {
	text-decoration: none;
	display: inline-block;
}

.logo-and-menu-div a:hover {
	opacity: 0.8;
	transition: opacity 0.3s ease;
}

/* Slide-out menu (override base) */
aside {
	background: var(--glass-bg) !important;
	backdrop-filter: var(--glass-blur) !important;
	-webkit-backdrop-filter: var(--glass-blur) !important;
	border-right: 1px solid var(--glass-border) !important;
	box-shadow: var(--glass-shadow) !important;
}
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 99; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
body.side-open .backdrop { opacity: 1; pointer-events: all; }

/* Feature panels */
.full-screen-section > div,
.services-products-section > div {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	box-shadow: var(--glass-shadow);
	padding: 2rem;
	margin: 1rem;
	max-width: 800px;
	transition: all 0.3s ease;
}

.full-screen-section > div:hover,
.services-products-section > div:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
	background: rgba(255, 255, 255, 0.15);
}

/* Buttons */
.btn { 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	gap: 8px; 
	padding: 12px 24px; 
	border-radius: 16px; 
	border: 1px solid transparent; 
	font-weight: 600; 
	cursor: pointer; 
	transition: all 0.3s ease; 
	text-decoration: none;
	font-size: 16px;
}
.btn:focus-visible { outline: 3px solid rgba(25,118,210,.5); outline-offset: 2px; }
.btn-primary { 
	background: rgba(25, 118, 210, 0.8); 
	color: #fff; 
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 24px rgba(25,118,210,.3); 
}
.btn-primary:hover { 
	transform: translateY(-2px); 
	box-shadow: 0 12px 32px rgba(25,118,210,.4);
	background: rgba(25, 118, 210, 0.9);
}
.btn-secondary { 
	background: rgba(255, 255, 255, 0.1); 
	color: #2e7d32; 
	border: 1px solid rgba(46, 125, 50, 0.3);
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
}
.btn-secondary:hover { 
	background: rgba(46,125,50,.2); 
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(46, 125, 50, 0.2);
}

/* Hero CTA buttons - override base CSS text-align */
.top-section .left .hero-cta { 
  display: flex; 
  gap: 12px; 
  flex-wrap: wrap; 
  margin-top: 12px; 
  justify-content: center; 
  align-items: center;
  text-align: center;
}

/* Cards grid (for services/products sections if needed) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
@media (max-width: 1000px) { .cards { grid-template-columns: 1fr; } }
.card { background: #ffffff; border: 1px solid rgba(2,6,12,.06); border-radius: 16px; padding: 20px; text-align: left; box-shadow: 0 10px 24px rgba(16,19,19,.06); transition: transform 160ms ease, box-shadow 160ms ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(16,19,19,.10); }
.card h3 { margin: 0 0 8px; }
.card p { margin: 0; color: #425a60; }

/* Contact Form */
form {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	box-shadow: var(--glass-shadow);
	padding: 2rem;
	margin: 1rem;
	transition: all 0.3s ease;
}

form:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

form input,
form textarea {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	padding: 12px 16px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;
	transition: all 0.3s ease;
	width: 100%;
	box-sizing: border-box;
}

form input::placeholder,
form textarea::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

form input:focus,
form textarea:focus {
	outline: none;
	border-color: rgba(25, 118, 210, 0.5);
	background: rgba(255, 255, 255, 0.15);
	box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

form button[type="submit"] {
	background: rgba(25, 118, 210, 0.8);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: var(--glass-blur-light);
	-webkit-backdrop-filter: var(--glass-blur-light);
}

form button[type="submit"]:hover {
	background: rgba(25, 118, 210, 0.9);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(25, 118, 210, 0.3);
}

/* Footer */
footer.site-footer { margin-top: 56px; background: #0f1a0f; color: #dfe7e9; }
footer.site-footer .container { display: grid; gap: 12px; padding: 24px 0; grid-template-columns: 1fr; }
footer.site-footer a { color: #9bd0ff; text-decoration: none; }
footer.site-footer a:hover { text-decoration: underline; }

/* Sidebar (slide-out) labels - override base CSS */
aside .sidebar a { 
	color: rgba(255, 255, 255, 0.9) !important; 
	border-radius: 12px !important; 
	transition: all 0.3s ease !important;
	margin: 4px 0 !important;
	backdrop-filter: var(--glass-blur-light) !important;
	-webkit-backdrop-filter: var(--glass-blur-light) !important;
	text-decoration: none !important;
}
aside .sidebar a:hover { 
	background: rgba(255, 255, 255, 0.1); 
	transform: translateX(4px);
	color: white !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
aside .sidebar a .material-symbols-outlined { 
	font-size: 24px; 
	color: rgba(255, 255, 255, 0.8) !important; 
	transition: all 0.3s ease;
}
aside .sidebar a:hover .material-symbols-outlined {
	color: white !important;
}
aside .sidebar h3 { 
  display: inline-block !important; 
  margin: 0 !important; 
  font-size: 16px !important; 
  color: rgba(255, 255, 255, 0.9) !important; 
  font-weight: 600 !important; 
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: all 0.3s ease;
}
aside .sidebar a:hover h3 {
	color: white !important;
}

/* Close button styling */
aside .top {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 20px !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 101 !important;
}

aside .close {
	display: inline-block !important;
	cursor: pointer !important;
	margin: 0 !important;
	padding: 8px !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: var(--glass-blur-light) !important;
	-webkit-backdrop-filter: var(--glass-blur-light) !important;
	transition: all 0.3s ease !important;
}

aside .close:hover {
	background: rgba(255, 255, 255, 0.2) !important;
	transform: scale(1.1) !important;
}

aside .close .material-symbols-outlined {
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 24px !important;
}

/* Contact Page Specific Styles */
.contact-info {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: 20px;
	box-shadow: var(--glass-shadow);
	padding: 2rem;
	transition: all 0.3s ease;
}

.contact-info:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.contact-details {
	margin: 2rem 0;
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 1rem 0;
	padding: 12px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	transition: all 0.3s ease;
}

.contact-item:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateX(4px);
}

.contact-item .material-symbols-outlined {
	color: rgba(25, 118, 210, 0.8);
	font-size: 24px;
}

.contact-item span:last-child {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
}

.form-group {
	margin-bottom: 1rem;
}

.success-message {
	color: #4caf50;
	text-align: center;
	margin-top: 1rem;
	font-weight: 500;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Animation Classes */
.animate-fade-in-up {
	animation: fadeInUp 0.8s ease-out forwards;
}

.animate-slide-in-left {
	animation: slideInLeft 0.8s ease-out forwards;
}

.animate-slide-in-right {
	animation: slideInRight 0.8s ease-out forwards;
}

.animate-pulse {
	animation: pulse 2s ease-in-out infinite;
}

/* Staggered animations for sections */
.full-screen-section:nth-child(1) { animation-delay: 0.1s; }
.full-screen-section:nth-child(2) { animation-delay: 0.2s; }
.full-screen-section:nth-child(3) { animation-delay: 0.3s; }
.full-screen-section:nth-child(4) { animation-delay: 0.4s; }
.full-screen-section:nth-child(5) { animation-delay: 0.5s; }
.full-screen-section:nth-child(6) { animation-delay: 0.6s; }
.full-screen-section:nth-child(7) { animation-delay: 0.7s; }
.full-screen-section:nth-child(8) { animation-delay: 0.8s; }

/* Smooth scroll behavior */
html {
	scroll-behavior: smooth;
}

/* Loading states */
.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Hover effects for interactive elements */
.interactive {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive:hover {
	transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
	.contact-info,
	.contact-form {
		grid-column: 1 / -1;
	}
	
	.contact-info {
		margin-bottom: 2rem;
	}
	
	h2 {
		font-size: 2rem;
	}
	
	h3 {
		font-size: 1.5rem;
	}
	
	.full-screen-section,
	.services-products-section {
		padding: 1rem;
	}
	
	.full-screen-section > div,
	.services-products-section > div {
		padding: 1.5rem;
		margin: 0.5rem;
	}
}