@media (max-width: 768px) {
    main, .header-container { padding: 0px; }
    .header-container { flex-direction: column !important; gap: 15px; text-align: center; }
    .header-menu { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 5px; }
    .header-menu a { padding: 8px 6px; font-size: 0.9em; }
    .app-btn-row { flex-direction: column; }
    
    /* Force dropdown to center on small screens */
    body.rtl .sub-menu { left: 50%; transform: translateX(-50%); }
	/* Ensure dropdown doesn't fly off screen on mobile */
    .header-menu .sub-menu {
        left: 50%;
        transform: translateX(-50%);
        top: 40px;
    }
	.header-banner {
		width: 100%;
		height: 30vh;              /* 20% of viewport height */
		max-height: 400px; 
	}
    
    .hero h1 { font-size: 1.8em; }
}