/* Responsive CSS */

@media (max-width: 1200px) {
	.ec-container {
		width: 100%;
		padding: 0 20px;
	}
}

@media (max-width: 992px) {
	.ec-nav {
		display: none; /* Mobile menu handles this */
	}
	.ec-hamburger {
		display: block;
	}
	
	.ec-footer-widgets .ec-container {
		flex-direction: column;
	}
	
	/* Mobile Menu Drawer */
	.ec-menu-open .ec-nav {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background-color: var(--ec-body-bg);
		box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	}
	.ec-menu-open .ec-nav ul {
		flex-direction: column;
	}
	.ec-menu-open .ec-nav ul li {
		width: 100%;
	}
	.ec-menu-open .ec-nav ul li a {
		border-bottom: 1px solid #eee;
	}
	.ec-menu-open .ec-nav ul li ul.sub-menu {
		position: static;
		width: 100%;
		box-shadow: none;
		display: none;
	}
	.ec-menu-open .ec-nav ul li.menu-item-has-children > a::after {
		content: '\\f107';
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
		float: right;
	}
	
	/* Hamburger Animation */
	.ec-menu-open .ec-hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
	.ec-menu-open .ec-hamburger span:nth-child(2) { opacity: 0; }
	.ec-menu-open .ec-hamburger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
}

@media (max-width: 768px) {
	body {
		font-size: 15px;
	}
	h1 { font-size: 36px; }
	h2 { font-size: 28px; }
	h3 { font-size: 24px; }
	
	.ec-topbar {
		text-align: center;
	}
	.ec-topbar .ec-container {
		flex-direction: column;
		gap: 10px;
	}
}

@media (max-width: 576px) {
	h1 { font-size: 30px; }
	h2 { font-size: 24px; }
}